Селекторы
Правила каскадных таблиц стилей, в которых в качестве селектора используются тэги HTML, влияют на отображение всех элементов заданного типа в документе. Следующие правило отображает без подчёркивания все ссылки (тэг <A> ) в документе:
<STYLE type="text/css">
<!--
A { text-decoration: none; }
-->
</style>
А что делать, если необходимо некоторые ссылки отобразить по-другому? Можно задать для них правило форматирования непосредственно в тэге, а можно применить параметр class , добавленный в HTML 4.0 в качестве стандарта для всех тэгов. Значением параметра class является ссылки на класс, задаваемый в таблице стилей.
Селектор class
Класс позволяет задать разные правила форматирования для одного элемента определённого типа или всех элементов документа. Имя класса указывается в селекторе правила после имени тэга и отделяется от него точкой. Можно определить несколько правил форматирования для одного элемента и с помощью параметра class соответствующего тэга применять разные правила форматирования в документе. Например, можно определить два класса отображения заголовка первого уровня:
<STYLE type="text/css">
<!--
H1.red { color: red; }
H1.blueBgrd { color: red; background-color: blue }
-->
</style>
В тексте документа ссылка на соответствующий класс задаётся в параметре class:
<H1 class="red"> Красный шрифт </h1>
<H1 class="blueBgrd"> Красный шрифт на синем фоне </h1>
В параметре имя класса может быть заключено в двойные или одинарные кавычки, или задаваться вообще без кавычек.
В приведённом примере классы задавались для разного отображения элементов одного типа. Если класс должен применяться ко всем элементам документа, то в селекторе задаётся имя класса с лидирующей точкой без указания конкретного элемента:
<STYLE type="text/css">
<!--
.red { color: red; }
.blueBgrd { color: red; background-color: blue }
-->
</style>
Теперь два класса red и blueBgrd можно применить к любым элементам документа:
<P class=red> Первый абзац </p>
<P class=blueBgrd> Второй абзац </p>
Селекрор ID
Параметр id задаёт уникальное имя элемента, которое используется для ссылок на него в сценариях JavaScript и таблицах стилей. Параметр id можно применить к любому элементу документа.
Правила таблиц стилей регламинтируют использование уникального идентификационного имени элемента в качестве селектора, предваряя его символом # :
<STYLE type="text/css">
<!--
#par24 { letter-spacing: 1em; }
#form3 { color: red; background-color: blue }
-->
</style>
<BODY>
<P id="par24"> Разрежённые слова </p>
<P id="form2"> Чёрный шрифт </p>
В этом примере абзац идентифицирован именем par24 в параметре id , поэтому к нему применимо правило с селектором #par24 . Второе правило в таблице стилей должно применяться к заголовку первого уровня с идентификатором form3 . Такого элемента в нашем фрагменте HTML-кода нет, а заголовок form2 отображается с применением правила по умолчанию.
Контекстные селекторы
При разработке страниц HTML часто приходиться одни элементы вкладывать в другие, например, выделять слова тэгом <EM> в каком-нибудь абзаце задаваемом тэгом <P> . В этом случае говорят, что элемент <P> порождает элемент <EM> и является его предком , а сам элемент <EM> является потомком элемента <P> . Некоторые свойства предка наследуются потомком, например, цвет шрифта (свойство color ). Если необходимо чтобы выделяемые только в абзацах элементы отображались одним образом, а в других частях документа по - другому применяют контекстные селекторы . Например, для отображения в абзацах текста выделеного тэгами <EM> шрифтом жёлтого цвета необходимо задать следующее правило:
P EM { color: yellow }
Контекстный селектор состоит из нескольких простых, разделённых пробелами. Интерпритатор браузера просматривает в стеке все открытые элементы, находит элементы <EM> , порождённые элементом <P> , и применяет к ним указанное правило форматирования.
Псевдоклассы ссылок
Обычно браузеры отображают посещённые ссылки отлично от непосещённых (например, разными цветами). CSS1 регламентирует правила для отображения ссылок через псевдоклассы элемента A :
A:link { color: red } /*непосещённая ссылка*/
A:visited { color: blue } /*посещённая ссылка*/
A:active { color: green } /*активная ссылка*/
A:hover { color: lime } /*ссылка, выбранная курсором мыши*/
Активная ссылка - это ссылка, которая выбрана в данный момент, причём необязательно курсором мыши, а, например, при помощи клавиши Tab.
Любую ссылку в документе можно отнести к одному из перечисленных классов.
В каскадных таблицах текст, заключённый между символами /* и */ , является комментарием.
Так называемые псевдоклассы применяются к единственному типу элементов - <A> , поэтому при задании их в селекторе правил этот элемент можно опустить. Следующие два правила равносильны:
A:link { color: red } /*непосещённая ссылка*/
:link { color: red } /*непосещённая ссылка*/