Селекторы, классы, идентификаторы
Каскадные таблицы стилей также иногда называют просто таблицами стилей. Трудно сказать, почему именно таблицы, а не файлы или другой какой-то более подходящий термин — пока это остается загадкой. Единственное, что ясно наверняка, — это значимость стилей для веб-страниц. Именно они обеспечивают большее по сравнению с HTML управление форматированием содержимого сайта. Каскадность заключается в том, что форматирование имеет нисходящий характер, как водопад или каскад. (Наверное, разработчики CSS представляли себе поток воды...)
В предыдущем разделе описано зри варианта добавления CSS на веб-страницы. Существует последовательность распознавания и применения .css-стилей браузером. Сначала текст форматируется стилем верхнего уровня, который описан в .css-файле. Следующий уровень каскада — это стиль, объявленный с помощью тега <STYLE>. В последнюю очередь форматирование осуществляется уже внутренними стилями. То есть последние имеют наивысший приоритет.
Осознав эту особенность CSS, можете считать, что уже ознакомились с селекторами. Селекторы — это просто названия элементов, форматирование которых меняет разработчик. Скажем, в предыдущих примерах селектором являлся элеменг H1.
Если разработчик намерен изменить лишь отдельные азрибугы элементов, а не абсолютно вес, нужно использовать классы и идентификаторы. Классы объявляют внутри тега <STYLE> в разделе HEAD либо в отдельном . css-файле. Синтаксис будет следующим:
<HEAD> < STYLE >
.classl (color:blue}
.class2 (font-family:Arial, Helvetica, sans-serif} </STYLE>
</HEAD>
Любой элемент с атрибутом class, значение которого равно classl, будет отформатирован синим цветом, а элемент со значением атрибута class2 — шрифтом Arial. (Или одним из шрифтов, указанных в порядке приоритета. Любая операционная система обязательно распознает хотя бы один из шрифтов. Поэтому высока вероятность того, что разработчика удовлетворит полученный результат.)
В CSS классы объявляют с помощью точки, за которой следует имя класса. Для того чтобы обратиться к CSS-классу, в HTML-коде нужно просто удалить точку перед именем класса.
<H1 class="classl">Этот текст будет синего цвета.</Н1>
<Н2 class="class2">этот текст будет отформатирован шрифтом Arial.<Н2>
Судя по названию, контекстные селекторы предназначены для форматирования элементов, расположенных в определенном контексте. То есть оформление элемента зависит не только от самого элемента, но и от того, в какой элемент он вложен. Обычно, когда один элемент вложен внутрь другого — например, как заголовок, внутри которого жирным выделено какое-то слово, — вложенный элемент наследует свойства родительского (или элемента-контейнера, как его еще принято называть).
Получается, что если разработчик форматирует элемент HI синим цветом, а затем помещает какое-то слово между контейнерными тегами <В></В> внутрь элемента-контейнера HI, то выделенное жирным шрифтом слово тоже будет синего цвета. А если разработчику нужно сделать так, чтобы В-элементы, расположенные внутри контейнера HI, были зеленого цвета? Это легко реализовать с помощью каскадных таблиц стилей. Благодаря контекстным селекторам форматирование не коснется ни одного В-элемента, расположенного вне H1. Примерно так будет выглядеть соответствующий фрагмент кода.
<HEAD>
<STYLE>
HI
{color:blue}
HI В
{color:green}
</STYLE>
</HEAD>