Css-селектор і його роль у форматуванні html-документів
Створюючи свій сайт і наповнюючи його певними елементами веб-сторінки, кожен неодмінно зіткнеться з таким поняттям, як CSS-селектор. Служить він для того, щоб найбільш точно визначити всі елементи html-файлу, їх оформлення і місце на сторінці. Для цього створюється CSS-документ, в якому прописуються ті чи інші селектори і параметри їх форматування: колір, розмір, положення та інші. Кожен веб-дизайнер повинен знати і вміти правильно вводити потрібні селектори. Вони діляться за видами, основні з яких ми і розглянемо нижче.
Види селекторів в CSS
Залежно від того, до якого html-елементу застосовується форматування, CSS-селектор може відноситися до однієї з наступних груп:
- селектор тегів;
- селектор класу;
- id-селектор;
- селектор атрибутів.
селектор тегів
Його також називають "селектором типу" або "по елементу", Він є найбільш простим і поширеним. Як нього в CSS-документі виступають імена тих елементів html-файлу, які ми описуємо. Наприклад, якщо нам необхідно задати стиль абзаців, то ми вказуємо властивості і їх значення для елемента p {background: x- color: y- size: z}. В цьому випадку всі абзаци веб-сторінки матимуть однакову форматування (колір фону, тексту, розмір і т. д.).
селектор класу
А як бути, якщо необхідно для кожного абзацу поставити свій, відмінний від інших стиль? Для цього існує селектор класу.
Відео: HTML-теги thead, th, tbody і tfoot. Поділ таблиці. # 46.
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 за обраним атрибуту або його значенням. Розрізняють декілька різновидів даного селектора:
- за наявністю атрибуту;
- по його точного значення;
- по частковому значенню атрибута;
- по його конкретним значенням.
Розглянемо докладніше кожну з цих різновидів:
- Перший випадок. Форматування застосовується, якщо наявний певний атрибут в html-коді (їм може бути p, div, header і інші). Якщо він відсутній, то використовується універсальний для всіх елементів стиль. Наприклад, для елементів, що мають title (Підказку).
- Другий випадок. Стиль застосовується тільки до тих html-елементів, які мають точні співпадіння значень атрибута. Наприклад, до тих елементів input, у яких значення атрибута type одно submit.
- Третій випадок. Під форматування потрапляють тільки елементи, в переліку значень яких є певне слово. Наприклад, sideBar в атрибуті "клас" у елементів div.
- Четвертий випадок. Стиль задається тільки для тих елементів html-документа, у яких конкретний атрибут має певне значення і починається з нього. Наприклад, застосування зазначеного кольору до всіх елементів, мова атрибутів яких англійська (це може бути en, en-rus, en-au і т. Д.).
Таким чином, використовуючи той чи інший CSS-селектор, можна найкращим чином оформити як всю веб-сторінку, так і описати окремі її елементи.
