4.8. ПсевдоклассыС помощью селекторов псевдоклассов можно задавать стили для элементов в зависимости от их текущего состояния в HTML-документе. Проще всего это можно объяснить на примере ссылок. Начиная с самой первой версии, браузеры различали ссылки на посещенные и не посещенные пользователем ресурсы. И в зависимости от их состояния отображали их разным цветом. Например, браузер Internet Explorer по умолчанию отображает ссылки на не посещенные ресурсы синим цветом, а на посещенные – фиолетовым. При этом ссылка на ранее не посещенный ресурс может со временем изменить свое состояние и стать ссылкой на посещенный ресурс. Такое динамическое изменение состояния объекта и описывается с помощью селекторов, называемые псевдоклассами. Рассмотрим вначале псевдоклассы для манипулирования отображением ссылок в окне браузера (табл. 4.2): Таблица 4.2. Псевдоклассы для ссылок
Теперь зададим стили для отображения ссылки, используя псевдоклассы табл. 4.2:
После подключения этих стилей к странице, получим следующий результат отображения ссылки:
а) б)
в) г) Рис. 4.6. Изменение стиля отображения ссылки с использованием псевдоклассов: а – вид непосещенной ссылки; б – вид ссылки при наведении курсора; в – вид посещенной ссылки; г – вид посещенной ссылки при наведении на нее курсора Как видно из приведенного примера, стиль ссылки динамически меняется при изменении состояния самой ссылки. Псевдоклассы можно применять совместно любыми рассмотренными выше селекторами. Например, если требуется определить разные стили для внутренних и внешних ссылок сайта, то это можно легко сделать с использованием классов. Для этого достаточно для внешних ссылок указать некий класс, например, класс с именем external и задать стили следующим образом:
а в HTML-странице написать
в результате получим (рис. 4.7): Рис. 4.7. Использование селекторов совместно с псевдоклассами В CSS2.1 были введены три псевдокласса, позволяющие задавать стиль элемента на события от пользователя. Они также называются динамическими псевдоклассами (табл. 4.3). Таблица 4.3. Динамические псевдоклассы
В приведенных выше примерах уже использовались два динамических псевдокласса: active и hover. Продемонстрируем работу третьего псевдокласса focus на примере элемента ввода текста с клавиатуры:
и определим тег input в HTML-странице:
в результате в окне браузера будет отображено (рис. 4.8): а) б) Рис. 4.8. Стиль поля ввода: а – без фокуса; б – с фокусом При использовании псевдоклассов focus и hover следует иметь в виду, что они поддерживаются современными браузерами и могут игнорироваться более старыми. Например, Internet Explorer 6.0 не воспринимает псевдокласс focus, а псевдокласс hover применяет только для ссылок. В IE7 hover стал применяться ко всем элементам, но нет поддержки focus. Каскадные таблицы стилей предоставляют еще один полезный псевдокласс для работы с элементами first-child, который служит для указания первого дочернего элемента. Ниже представлен пример задание стилей с использованием псевдокласса first-child:
HTML-страница:
результат (рис. 4.9): Рис. 4.9. Пример работы псевдокласса first-child В приведенном примере параграфы заключены в тег <div> для того, чтобы на странице существовали дочерние элементы. Если теги <p> не помещать внутрь тега <div>, то на странице не будет дочерних элементов и соответствующий псевдокласс не будет применен ни к одному тегу.
Видео по теме
HTML с нуля: урок 1 - как работает Интернет и что такое сайт HTML с нуля: урок 2 - инструментарий, структура документа, стандарты HTML с нуля: урок 3 - основные теги форматирования HTML HTML с нуля: урок 4 - ссылки, теги div и span HTML с нуля: урок 5 (часть 1) - таблицы HTML с нуля: урок 5 (часть 2) - фреймы HTML с нуля: урок 6 - HTML формы, GET и POST запросы HTML с нуля: урок 7 - поля ввода, кнопки, списки HTML с нуля: урок 8 - каскадные таблицы стилей, начало HTML с нуля: урок 9 - CSS, теория HTML с нуля: урок 10 - пример создания макета HTML страницы
|