Правила каскадных таблиц стилей, в которых в качестве селектора используются тэги HTML, влияют на отображение всех элементов заданного типа в документе. Следующее правило отображает без подчеркивания все ссылки (тэг <А>) в документе:
<STYLE TYPE="text/css">
<! —
А { 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:
<Н1 CLASS="red">Kpacный шрифт</Н1>
<Н1 CLASS="blueBgrd">Kpacный шрифт на синем фоне</Н1>
Имя класса в параметре CLASS задается без лидирующей точки. Оно может быть заключено в двойные или одинарные кавычки, или задаваться вообще без кавычек, например CLASS=red.
В приведенном примере классы задавались для разного отображения элементов одного типа. Если класс должен применяться ко всем элементам документа, то в селекторе задается имя класса с лидирующей точкой без указания конкретного элемента:
<STYLE TYPE="text/css"><!--
.red { color: red; }
.blueBgrd { color: red; background-color: blue}
--></STYLE>
Теперь два класса red и blueBgrd можно применять к любым элементам документа:
<Р ClASS=red>Первый абзац</Р>
<Р ClASS=blueBgrd>Bтopoй абзац</Р>
Первый абзац отобразится красным шрифтом, а второй — красным шрифтом на синем фоне.
Параметр ID, как и параметр CLASS, не влияет на отображение браузером элемента HTML, но он задает уникальное имя элемента, которое используется для ссылок на него в сценариях и таблицах стилей. Параметр ID можно применять к любому элементу документа.
Правила таблиц стилей регламентируют использование уникального идентификационного имени элемента в качестве селектора, предваряя его символом |:
<STYLE TYPE="text/css"><!--
#par24 { letter-spacing: lem; }
H1 form3 { color: red; background-color: blue}
--></STYLE>
<BODY>
<P ID =раr24>Разреженные слова в абзаце</Р>
<Н1 ID=form2>Черный шрифт</Н1>
В этом примере абзац идентифицирован именем раr24 в параметре ID, поэтому к нему применимо правило с селектором #раr24. Второе правило в таблице стилей должно применяться к заголовку первого уровня с идентификатором form3. Такого элемента в нашем фрагменте нет, и поэтому заголовок form2 отображается с применением правила по умолчанию.
Для организации связи с правилами форматирования следует избегать использования идентификаторов конкретных элементов страницы, задаваемых в параметре ID. Если действительно необходимо отформатировать конкретный элемент, лучше использовать технику встраивания правил форматирования в тэг.
При разработке страниц HTML часто приходится одни элементы вкладывать в другие, например, выделять слова тэгом <ЕМ> в каком-нибудь абзаце, задаваемом тэгом <р>. В этом случае говорят, что элемент р порождает элемент ЕМ и является его предком, а сам элемент ЕМ является потомком элемента р. Некоторые свойства предка наследуются потомком, например, цвет шрифта (свойство color). Чтобы вложенные элементы отображались со своими значениями свойств, можно определить для них правила форматирования, как показано ниже:
<Р> {color: blue}
<ЕМ> (color: yellow}
Однако это приведет к тому, что все выделяемые в документе элементы будут отображаться шрифтом желтого цвета. А если необходимо, чтобы выделяемые только в абзаце элементы отображались желтым цветом, а в других частях документа каким-то другим цветом? Здесь помогут контекстные селекторы. Поставленную задачу решит следующее правило:
Р ЕМ {color: yellow)
Контекстный селектор состоит из нескольких простых, разделенных пробелами. Интерпретатор браузера просматривает в стеке все открытые элементы, находит элементы ЕМ, порожденные элементом р, и применяет к ним указанное правило форматирования.
Таким образом, правила с контекстными селекторами задают исключения из общих правил форматирования элементов документа, определенных с простыми селекторами.
Обычно правила форматирования присоединяются к элементу страницы, имеющему определенное положение в структуре документа. Концепция псевдоклассов и псевдоэлементов расширяет адресацию правил форматирования, позволяя внешней информации влиять на процесс форматирования.
Псевдоклассы и псевдоэлементы можно использовать в селекторах правил форматирования, однако реально в исходном тексте документа HTML они не существуют. Вернее, они как бы вставляются браузером при определенных условиях в документ, и на них можно ссылаться в таблицах стилей. Их называют классами и элементами, так как это удобный способ описания их поведения. Говоря точнее, их поведение определяется фиктивной последовательностью тэгов.
Псевдоэлементы применяются для адресации некоторых частей элементов, тогда как псевдоклассы позволяют таблицам стилей для элементов разных типов применять разные процедуры форматирования.
В браузерах Internet Explorer и Netscape Navigator реализованы только псевдо классы для элементов связей А. Псевдоэлементы в них не используются вообще.
Связь в документе HTML определяется тэгом <А> с параметром HREF. Обычно браузеры отображают посещенные связи отлично от непосещенных (например, разными цветами). Уровень 1 каскадных таблиц стилей регламентирует правила для отображения связей через псевдоклассы элемента А:
A:link { color: red } /* непосещенная связь */
A:visited { color: blue } /* посещенная связь */
A:active { color: green } /* активная связь */
A:hover ( color: lime ) /* связь, на которой расположен курсор мыши */
Любую связь в документе можно отнести к одному из перечисленных классов. Активная связь — это связь, которая выбрана в данный момент.
Комментарии в каскадных таблицах стилей задаются аналогично комментариям в языке С: текст, заключенный между символами /* и */, является комментарием.
Псевдокласс hover включен в каскадные таблицы стилей, уровень 2, который частично реализован в Internet Explorer 4.01.
В приведенном примере задается отображение непосещенных связей красным цветом, посещенных — синим, активных — зеленым. Если курсор мыши будет расположен над связью, то ее цвет изменится на ярко-зеленый.
Так как псевдоклассы применяются к единственному типу элементов А, то при задании их в селекторе правил этот элемент можно опустить. Следующие два правила равносильны:
