Панель Управления





Курс CSS. Урок 06. ПсевдоСелекторы (ПсевдоКлассы) ссылок.
Стиль сайта. Онлайновый курс по теме CSS. Сделано в kocby.ru Курс CSS. Урок 06. ПсевдоСелекторы (ПсевдоКлассы) ссылок. ПсевдоСелекторы (ПсевдоКлассы) чаще всего имеют отношения именно к ссылкам. Любые ссылки могут иметь следующие состояния: "непосещенный линк" ("unvisited link"), "посещенный линк" ("visited link"), "мышка над линком" ("mouse over link"), "выбранный линк" ("selected link").
© Перепечатка разрешается с установкой ссылки на ресурс http://kocby.ru
06. ПсевдоСелекторы (ПсевдоКлассы) ссылок.
ПсевдоСелекторы (ПсевдоКлассы) чаще всего имеют отношения именно к ссылкам.

Вообще, любые ссылки могут иметь следующие состояния (приводим примеры специально с разными цветами на разных псевдоклассов с русскими и английскими терминами для лучшего понимания):
  • 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 *****
:: :: /


Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.

Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.


Если вы планируете вернуться сюда позднее...
Пожалуйста, запомните эту страничку -
URL: http://kocby.ru/css/p006.html
Спасибо за посещение этой странички и внимательное отношение к ее контенту и дизайну. Удачи и успеха!
© KOCBY.RU :: перепечатка материалов разрешается с указанием ссылки на домен KOCBY.RU ©
Basket is empty :: Корзина пустая
Close and hide in basket :: Закрыть и спрятать в корзину
***** Реклама *****
Посмотри в зеркало! Что там видно?
Красивая девушка брюнетка слева Красивая девушка блондинка справа
Красивая девушка блондинка слева Красивая девушка брюнетка справа
Наверх ↑