Изучение CSS невозможно без понимания селекторов – инструментов для выбора HTML-элементов для стилизации. В этом уроке рассмотрим различные типы селекторов и их применение.
Основы написания CSS-стилей
При написании CSS-стилей указываются:
- Селектор: определяет HTML-элементы для стилизации.
- Свойства: задают сами стили (например, цвет текста).
Типы селекторов
Рассмотрим основные типы селекторов:
Селекторы по имени тега
Простейший селектор – имя HTML-тега. Например, b выберет все теги <b>. Добавление стилей ко всем тегам <b>:
b {
color: red;
}Все теги <b> на странице изменят цвет текста на красный.
Селекторы по классам
Для точного выбора элементов используются классы. Класс добавляется к HTML-элементу через атрибут class:
<p class="main-text">Этот абзац имеет класс main-text.</p>В CSS для обращения к классу используется точка (.) перед именем класса:
.main-text {
color: red;
}Только абзац с классом main-text станет красным. Один класс можно применять к множеству элементов.
Селекторы по идентификаторам (ID)
Идентификаторы (ID) похожи на классы, но у каждого элемента на странице может быть только один уникальный ID. ID добавляется через атрибут id:
<p id="text-id">Этот абзац имеет уникальный ID.</p>В CSS для обращения к ID используется решетка (#) перед именем ID:
#text-id {
color: blue;
}Только абзац с ID text-id изменит цвет текста на синий. Повторное использование одного и того же ID на странице считается ошибкой.
Дополнительные селекторы
Рассмотрим более сложные селекторы:
Вложенные селекторы
Вложенные селекторы позволяют выбирать элементы внутри других. Например, чтобы выбрать тег <b> внутри тега <div>:
div b {
color: green;
}Только теги <b> внутри <div> изменят цвет текста на зеленый. Можно создавать вложенность произвольной глубины.
Группировка селекторов
Для применения одних и тех же стилей к нескольким элементам используется запятая:
b, em {
color: green;
}Этот код изменит цвет текста на зеленый для тегов <b> и <em>.
Комбинированные селекторы
Можно комбинировать различные типы селекторов:
div, .name-class, #item-id, p {
color: red;
}Этот селектор выберет все <div>, элементы с классом name-class, элемент с ID item-id и все абзацы <p>, применив ко всем ним красный цвет текста.
/* Комментарии в CSS */
/* Этот текст игнорируется браузером */Рассмотрены основные типы CSS-селекторов: селекторы по имени тега, по классам, по идентификаторам, вложенные и группированные селекторы. Понимание этих селекторов – основа для эффективной работы с CSS. В последующих уроках продолжим изучение селекторов и других аспектов CSS.