CSS-селектор і його роль у форматуванні html-документів

Створюючи свій сайт і наповнюючи його певними елементами веб-сторінки, кожен неодмінно зіткнеться з таким поняттям, як CSS-селектор. Служить він для того, щоб найбільш точно визначити всі елементи html-файлу, їх оформлення і місце на сторінці. Для цього створюється CSS-документ, в якому прописуються ті чи інші селектори і параметри їх форматування: колір, розмір, положення та інші. Кожен веб-дизайнер повинен знати і вміти правильно вводити потрібні селектори. Вони діляться за видами, основні з яких ми і розглянемо нижче.

Види селекторів в CSS

Залежно від того, до якого html-елементу застосовується форматування, CSS-селектор може відноситися до однієї з наступних груп:

• селектор тегов;
• селектор класу;
• id-селектор;
• селектор атрибутів.

Селектор тегів

Його також називають "селектором типу" або "по елементу", він є найбільш простим і поширеним. Як нього в CSS-документі виступають імена тих елементів html-файлу, які ми описуємо. Наприклад, якщо нам необхідно задати стиль абзаців, то ми вказуємо властивості та їх значення для елемента p {background: x- color: y- size: z}. У цьому випадку всі абзаци веб-сторінки будуть мати однакове форматування (Колір фону, тексту, розмір і т. д.).

Селектор класу

А як бути, якщо необхідно для кожного абзацу задати свій, відмінний від інших стиль? Для цього існує селектор класу.

CSS-документ в цьому випадку буде містити запис наступного виду: p.first {color: x- font-size: y}. Таким чином, ми задамо властивості "колір" і "розмір" тільки для абзацу класу first.

В html-документі в цьому випадку вводиться атрибут class з назвою стилю first. Класів може бути стільки, скільки стилів ви хочете застосувати для елементів веб-сторінки.

Селектор по id

Нерідко існує необхідність визначити стиль ще більш точно, наприклад до якогось одного елементу сторінки або до їх вибірці. У цій ситуації на допомогу приходить id-селектор. У файлі html присвоюємо потрібного елементу назву, що її ідентифікує його серед інших. Наприклад, елементом, якому ми хочемо задати відмінний від інших стиль, буде заголовок статті.

Тоді в html-документі присвоюємо заголовку h1 ідентифікатор, наприклад articlename. А в CSS-файлі задаємо стиль, додаючи перед ім`ям ідентифікатора ґрати: #articlename {color: blue- text-align: center}. Тепер наш заголовок буде мати колір блакитний і вирівнювання по центру.

Кожен з розглянутих вище видів можна назвати "простий CSS-селектор". Вони визначають форматування для якогось конкретного параметра html-документа: сукупності схожих елементів (наприклад, всі абзаци статті), одного класу (наприклад, тільки перший абзац) або конкретного елемента (наприклад, заголовок статті).

Селектор атрибутів

Крім зазначених вище, існують в CSS-селектори атрибутів - більш складний спосіб застосування стилів. Він дозволяє форматувати елементи html по обраному атрибуту або його значенню. Розрізняють декілька різновидів даного селектора:

• по наявності атрібута;
• за його точному значенію;
• по частковому значенню атрібута;
• за його конкретному значенню.

Розглянемо докладніше кожну з цих різновидів:

1. Перший випадок. Форматування застосовується, якщо присутній певний атрибут в html-коді (ним може бути p, div, header та інші). Якщо він відсутній, то використовується універсальний для всіх елементів стиль. Наприклад, для елементів, що мають title (Підказку).
2. Другий випадок. Стиль застосовується тільки до тих html-елементам, які мають точні співпадіння значень атрибута. Наприклад, до тих елементів input, у яких значення атрибута type одно submit.
3. Третій випадок. Під форматування потрапляють тільки елементи, у переліку значень яких є певне слово. Наприклад, sideBar в атрибуті "клас" у елементів div.
4. Четвертий випадок. Стиль задається тільки для тих елементів html-документа, у яких конкретний атрибут має певне значення і починається з нього. Наприклад, застосування зазначеного кольору до всіх елементів, мова атрибутів яких англійська (це може бути en, en-rus, en-au і т. Д.).

Таким чином, використовуючи той чи інший CSS-селектор, можна найкращим чином оформити як всю веб-сторінку, так і описати окремі її елементи.