Виды селекторов

В спецификациях CSS определено несколько видов селекторов, основные из них были использованы в примере предыдущего раздела. Рассмотрим возможные виды селекторов подробнее.

Селекторы типа

Селектор типа устанавливает соответствие между определением стиля и типом HTML - элементов, к которым этот стиль будет применен. Например , CSS - правило

Р { font-family : arial ; font-size:14pt}

использует селектор типа и задает шрифт для всех абзацных блоков HTML , а другое правило

Н 2 { font-family:monospace; background-color : magenta}

определяет для всех заголовков второго уровня Н2 моноширинный шрифт и пурпур­ный фон.

Селекторы класса

HTML -элемент или группа элементов, оформленных одним стилем, образуют класс. Например, элементы заголовков второго уровня, одинаково форматируемые, состав­ляют класс.

Класс может обозначаться так же, как и тип HTML -элемента, например, абзацы до­кумента образуют класс р. Однако чаще классу присваивается формальное имя, ко­торое в дальнейшем будет связано с определенным набором стилевых свойств. До­пустим, вы можете заголовки первого уровня Hi синего цвета сгруппировать в класс с именем blue :

H1.blue { color : blue }

Имя класса отделяется от имени элемента точкой. Другой пример задания класса был приведен в разделе «Введение заголовочного стиля (элемент STYLE)»

Н2. curs { font-size : 16pt ;

font - style : italic }

Как видим, в состав класса входят не все элементы одного типа (Н2), а только те, кото­рые форматируются одинаковым стилем. В то же время одному и тому же классу могут принадлежать разнотипные HTML -элементы. Допустим, вы хотите задать отображение разных элементов (абзацев Р, блоков DIV и т.д.) на желтом фоне. Для этого в список стилей вводится CSS -правило с точкой перед именем класса, но без указания названия элементов, например,

. bgyellow { background - соlor :уеllow }

Селектор .bgyellow обозначает класс, а выражение в фигурных скобках - определе­ние стиля, которое будет относиться к любому элементу класса bgyellow. Принадлеж­ность HTML -элемента этому классу должна быть указана в атрибуте class , например:

<DIV> class="bgyellow">

< Р class="bgyellow">

<SPAN сlass= "bgyellow">

Селекторы, относящиеся к любому элементу документа, в спецификации CSS 2 принято называть универсальными селекторами.

Классам можно присваивать произвольные имена, но лучше зада­вать имена, косвенно указывающие на набор и значения стиле­вых свойств. Например, для класса блоков, отображаемых на желтом фоне, вместо абстрактного имени block лучше ис­пользовать имя yellowblock или просто yellow.

Все элементы с атрибутом class , имеющиеся в документе, будут отображены с приме­нением стиля, который задается селектором класса. Понятно, что имя класса должно совпадать со значением атрибута class .