Псевдоклассы так называются потому, что они явно не задаются в теле HTML-документа (не могут быть заданы вообще). Но в частности в примере с гиперссылками сам браузер при показе документа обладает информацией, по каким гиперссылкам переходит пользователь, а по каким нет, где находится указатель мыши и какая часть документа получила фокус ввода. По этим признакам элементы документа можно объединить в виртуальные группы – псевдоклассы, на которые можно ссылаться из таблицы стилей.

Задание параметров каждого вида гиперссылок в остальном полностью аналогично заданию этих параметров для обычного текста. Например:

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

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

Для ссылки на первую букву текста используется псевдокласс first-letter. Его можно использовать, например, для создания буквицы (см. рис. 11.10). Правда, добиться такого же результата можно и при помощи рассмотренного далее HTML-элемента SPAN в сочетании со стилем CSS, примененным к этому элементу. Но теперь речь идет не об элементе SPAN, а о псевдоклассе first-letter.

Итак, для создания буквицы, показанной на рис. 11.10, используется приведенный в примере 11.6 HTML-код.

Рис. 11.10. Заглавная буква страницы

Как было сказано ранее, в CSS можно также ссылаться на первую строку текста HTML-элемента. Для этого используется псевдокласс first-line. Этот псевдокласс бывает очень полезен, так как нельзя точно предугадать, где браузер разорвет строку (если, конечно, не используется запрет разрывов строки, рассмотренный в гл. 3). Место разрыва первой строки зависит от ширины окна браузера или ширины HTML-элемента, в который помещен текст, а также от размера шрифта и стиля текста. Пример выделения первых строк абзацев приведен на рис. 11.11.

Рис. 11.11. Особое оформление первых строк абзацев

Текст HTML-документа, показанного на рис. 11.11, приведен ниже (пример 11.7).

Как видите, использование псевдокласса first-line является простым и универсальным способом изменения оформления первых строк текста, заключенного внутри HTML-элементов. При этом нас не интересует, как отделить от текста именно первую строку при разных разрешениях экрана, разных размерах окна браузера, да и в разных браузерах.

При использовании таблиц стилей у автора имеется возможность позаботиться о том, чтобы страницы его сайта одинаково хорошо обрабатывались самыми различными устройствами. Это достигается созданием таблиц стилей, которые используются, если просмотр производится с помощью заданного устройства.

Сами таблицы стилей создаются как обычно, то есть в CSS-файле или внутри HTML-элемента STYLE. Вся хитрость заключается в указании нужного значения атрибута media элемента LINK (при подключении внешней CSS) или элемента STYLE (для встроенной таблицы).

Атрибут media может принимать в качестве значения список из одного или более следующих строковых идентификаторов:

• all – таблица подходит для любого устройства;

• aural – таблица используется для речевых синтезаторов (таблицы управления свойствами потоком речи гораздо более сложны, чем таблицы для графических средств просмотра, и в этой книге не рассматриваются);