Селекторы, классы, идентификаторы

 

Каскадные таблицы стилей также иногда называют просто таблицами стилей. Трудно сказать, почему именно таблицы, а не файлы или другой какой-то более подходящий тер­мин — пока это остается загадкой. Единственное, что ясно наверняка, — это значимость стилей для веб-страниц. Именно они обеспечивают большее по сравнению с 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>

 
 

Реклама