06. ПсевдоСелекторы (ПсевдоКлассы) ссылок.
ПсевдоСелекторы (ПсевдоКлассы) чаще всего имеют отношения именно к ссылкам.
Вообще, любые ссылки могут иметь следующие состояния (приводим примеры специально с разными цветами на разных псевдоклассов с русскими и английскими терминами для лучшего понимания):
Посмотрим теперь наш тестовый пример.
css_006_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_006_001.zip ← скачайте пример, чтобы установить на свой сайт...
По окончанию данного урока замечу, что самые базовые теоретические основы технологии CSS мы теперь изучилии с этим багажом знаний можно создавать простые сайты. Этот багаж знаний путем пошагово наращивать на следующих уроках параллельно с практической работой создания сайтов.
Вообще, любые ссылки могут иметь следующие состояния (приводим примеры специально с разными цветами на разных псевдоклассов с русскими и английскими терминами для лучшего понимания):
- a:link {color:#FF0000;} - красного цвета (#FF0000) линк, который мы еще не посещали, т.е. "непосещенный линк" или "unvisited link".
- a:visited {color:#00FF00;} - зеленого цвета (#00FF00) линк, который мы уже посещали, т.е. "посещенный линк" или "visited link".
- a:hover {color:#FF00FF;} - красно-синего цвета (#FF00FF) линк, над которым мы проводим мышкой, т.е. "мышка над линком" или "mouse over link".
- a:active {color:#0000FF;} - синего цвета (#0000FF) линк, который мы выбрали (кликнули, состояние в момент клика), т.е. "выбранный линк" или "selected link".
- a:hover - обязательно должен быть расположен после a:link и a:visited в файле определений CSS, только в этом случае будет корректно работать (must placed after a:link and a:visited in the CSS definition in order to be effective).
- a:active - обязательно должен быть расположен после a:hover в файле определений CSS, только в этом случае будет корректно работать (must placed after a:hover in the CSS definition in order to be effective).
- не чувствительны к регистрам - т.к. эти самые ПсевдоКлассы или ПсевдоСелекторы не чувствительны к регистрам, чтобы избежать траблов, будет хорошей идей всегда их писать маленькими буквами (pseudo-class names are not case-sensitive.
a:link { color:#FF0000; background-color:#FFF0F0; } a:visited { color:#00FF00; background-color:#F0FFF0; } a:hover { color:#FF00FF; background-color:#FFF0FF; } a:active { color:#0000FF; background-color:#F0F0FF; }
css_006_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_006_001.zip ← скачайте пример, чтобы установить на свой сайт...
По окончанию данного урока замечу, что самые базовые теоретические основы технологии CSS мы теперь изучилии с этим багажом знаний можно создавать простые сайты. Этот багаж знаний путем пошагово наращивать на следующих уроках параллельно с практической работой создания сайтов.
***** Машина-Функционал для передвижения по страничкам курса CSS *****
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.