Псевдоклассы

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

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

Согласно спецификации HTML и стандарту CSS, гиперссылка может принимать четыре состояния: непосещенная ссылка (link), посещенная ссылка (visited), активная ссылка (active) и ссылка при наведении курсора мыши

(hover). Первые три СОСТОЯНИЯ (link, visited, active) обычно ПрОПИСЫ-

ваются в теге <body> HTML-документа (уровень CSS 1). Четвертое состояние (hover) относится к уровню CSS 2 и подразумевает изменение цвета ссылки при наведении на нее курсора мыши пользователя (событие работает в браузерах Internet Explorer 4 и выше, Opera 5 и выше, Netscape 6 и выше, Mozilla 1.0; браузеры более ранних версий, а также некоторые не особенно распространенные браузеры не поддерживают состояние hover).

Эти состояния и будут являться псевдоклассами при записи правил отображения гиперссылок в стилевом шаблоне:

A:link { color: blue; }

A:active { text-decoration: underline; }

A:visited { color: gray; }

A:hover { color: orange; }

В данном случае все присутствующие в электронном документе гиперссылки будут отображаться в соответствии с заданным стилевым правилом. Однако часто возникает необходимость визуально выделить одни ссылки относительно других. Для этого наряду с псевдоклассами используются обычные селекторы классов:

A:active.red { color: red; } A:hover.red { color: blue; } A:active.white { color: white; } A:hover.white { color: black; }

Применение таблиц стилей CSS

Прежде всего следует отметить, что при определении стилевых таблиц далеко не всегда свойства стандартного HTML-элемента соответствуют описанию шаблона стиля. Например, в HTML для жирного начертания используется тег-контейнер <в> (<strong>), а в CSS -- конструкция font-weight: bold; (для элемента или селектора). Для выделения текста подчеркиванием в HTML предусмотрен тег <и>, а в CSS используется запись вида

text-decoration: underline; И Т. Д.

В рамках данной книги, посвященной применению языка разметки HTML, сложно рассказать обо всех свойствах переопределения стиля с помощью CSS. Поэтому мы остановимся лишь на некоторых аспектах использования каскадных таблиц стилей, а именно: на форматировании текста, структурном форматировании и организации пользовательских форм.

 
< Пред   СОДЕРЖАНИЕ   Скачать   След >