Часть 1. Селекторы CSS. Теги, классы, ID, группы
В предыдущей главе мы разбирали синтаксис CSS и упоминали о селекторах, с помощью которых мы указываем, какие элементы веб-страницы желаем изменить внешне. В этой части мы рассмотрим основные селекторы CSS:
- Селекторы тегов.
- Селекторы классов.
- Селекторы ID.
- Селекторы групп.
1. Селекторы тегов
Если вам необходимо изменить внешний вид содержимого, которое находится в каком-либо теге, используйте CSS селекторы тегов. Допустим, вам нужно изменить шрифт и цвет всех тегов <h3>
, которые имеются на веб-странице. Для этого вам понадобится создать стиль, где селектором будет h3
(обратите внимание: в CSS угловые скобки <>
тега не записываются, а используется только его имя):
h3 { font-family: Geneva, Arial, sans-serif; color: orange; }
Написав один такой стиль, вы измените шрифт сразу для всех тегов <h3>
на странице, сколько бы их ни было. Согласитесь, что это очень быстро и удобно. Аналогично можно создавать стили для других тегов, заменяя название селектора на нужное вам (p
, h1
, h2
, h3
и т. д.).
2. Селекторы классов
Классы CSS – это отличный инструмент, который расширяет возможности создания стилей в разы. Для лучшего понимания мы будем рассматривать всё на примерах.
Итак, чуть выше мы применили стиль для всех тегов <h3>
на веб-странице – текст имеет шрифт Geneva и оранжевый цвет. Но что делать, если вам понадобилось изменить цвет одного из тегов <h3>
на зеленый? На помощь приходят селекторы классов. Всё что вам необходимо сделать, это создать стиль, где селектор – придуманное вами имя класса. Мы назовем класс greentext
и запишем правило:
.greentext { color: green; }
Но это еще не всё. Теперь, чтобы изменить цвет для одного из тегов <h3>
на странице, нужно отредактировать HTML-документ, применив класс greentext
к необходимому нам тегу. Записывается это так:
<h3 class="greentext"></h3>
Созданный класс можно применять к любым элементам веб-страницы. Вы можете придавать стиль не только целым заголовкам и абзацам, но и отдельным фрагментам страницы, например, словам (используя рассмотренный нами в первой и второй главе тег <span>
и присваивая ему класс).
Запомните несколько правил написания классов:
- в CSS перед названием селектора класса обязательно ставится точка (но при присвоении класса в HTML-документе эта точка не нужна);
- в названии классов можно использовать только буквы латинского алфавита, дефис, символ подчеркивания, цифры;
- название класса всегда должно начинаться с буквы (правильные варианты названий:
.intro
,.img-border
,.nav_menu_01
; неправильные:.2color
,.-link
,._divider
); - названия классов CSS чувствительны к регистру, поэтому классы вроде
.review
и.Review
будут восприниматься как два отдельных.
3. Селекторы ID
Идентификатор определяет уникальное название элемента. Записывается он почти так же, как и класс, только в CSS вместо точки ставится символ решетки #
:
#footer { width: 100%; }
В HTML-документе идентификатор присваивается с помощью атрибута id
:
<div id="footer"></div>
Возможно, у вас возник вопрос: в чем разница между идентификатором и классом? Существует несколько отличий:
- ID – это уникальное название элемента на веб-странице, которое должно встречаться на ней только один раз (например, шапка сайта и подвал:
id="header"
иid="footer"
), в то время как класс может присваиваться нескольким элементам с целью отличать их от остальных; - идентификаторы удобны для JavaScript-разработчиков, поскольку позволяют получить быстрый доступ к элементу DOM из скриптов (во многом именно поэтому необходимо, чтобы ID встречался на странице лишь один раз);
- каждое правило CSS имеет свой так называемый вес (от веса зависит, какое из правил получит более высокий приоритет при выполнении). Идентификатор имеет больший вес, чем класс, поэтому, если элементу присвоен и ID, и класс, предпочтение отдается ID. Пример:
<p id="text" class="content">текст</p>
#text { color: yellow; } .content { color: blue; }
У ID больший вес, поэтому цвет текста будет желтым (yellow).
- с помощью идентификаторов можно ставить якорные ссылки на определенные элементы веб-страницы. Достаточно присвоить этому элементу ID…:
<h3 id="description">Описание</h3>
…и дать на него ссылку вида
http://site.com/category/page/#description
.
4. Селекторы групп
Мы подошли к четвертому типу селекторов CSS – групповые селекторы. Представьте ситуацию, что вам необходимо сделать шрифт жирным для нескольких элементов веб-страницы – p
, h1
, h2
, h3
. Можно было бы записать этот стиль отдельно для каждого элемента:
p { font-weight: bold; } h1 { font-weight: bold; } h2 { font-weight: bold; } h3 { font-weight: bold; }
Но такой код занимает больше времени и места, чем это необходимо. Ведь всё можно записать намного проще и короче, перечислив имена через запятую и создав таким образом групповой селектор:
p, h1, h2, h3 { font-weight: bold; }
Конечно, в перечислении могут участвовать не только селекторы тегов, но и классы, и идентификаторы.
А если по какой-то причине вам необходимо создать стиль абсолютно для всех элементов веб-страницы, можно воспользоваться универсальным селектором CSS, для обозначения которого используется символ звездочки *
:
* { font-family: Geneva, Arial, sans-serif; }
Выводы
В этой части главы вы познакомились с четырьмя основными типами CSS селекторов. Они просты в использовании, и вам будет очень легко запомнить их. Подытожим пройденный материал:
Для изменения стиля содержимого тегов используйте селекторы тегов.
Если вам нужен более гибкий инструмент, который позволит создать стиль для одного конкретного элемента либо определенной группы элементов, используйте классы CSS.
Если есть необходимость создать стиль с высоким приоритетом для уникального элемента веб-страницы, а также обращаться к нему через скрипты, используйте селекторы ID.
Чтобы применить одинаковый стиль сразу к нескольким элементам веб-страницы, используйте групповой селектор. Если нужно стилизовать абсолютно все элементы страницы, можно задействовать универсальный селектор.
Вторая часть третьей главы посвящена псевдоклассам и псевдоэлементам CSS, а также селекторам потомков.