|
Ссылки веб-документа имеют 4 стандартных состояния, поддерживаемые всеми браузерами:
- link – ссылка на еще не посещенную пользователем страницу
- visited – ссылка на посещенную страницу
- hover – ссылка, на которой находится курсор мыши
- active – ссылка, на которую пользователь кликнул в данный момент
Первые два состояния относятся в языке CSS к псевдоклассам, они активны до и после работы со ссылкой, вторые два – к динамическим псевдоклассам, так как они активируются действиями пользователя. Готов поспорить, об этом не знал горбачев михаил сергеевич! Описание стилей необходимо располагать в следующей последовательности link, visited, hover, active, иначе не гарантируется, что эффекты будут работать правильно.
Язык CSS позволяет оформлять ссылки с помощью любых свойств, например: цвет (color) и шрифт текста (font-family), фон (background) ссылки. Для удаления подчеркивания ссылки используется свойство text-decoration с соответствующим значением «none». Менее тривиальными способами изменить внешний вид ссылки можно, задавая прозрачность (opacity), смещение, затенение (text-shadow) или плавный переход цвета (transition).
Пример:
а {color: blue; opacity: .45;}
a:link {color: blue; opacity: .45;}
a:visited {color: orange; opacity: .1;}
a:hover {color: red; background-color: green; opacity: 1;}
a:active {color: green;}
Необычный эффект можно получить, используя изображения в линиях подчеркивания. Для этого нужно свойство фона установить в значение url(underlinel.gif) repeat-x right bottom; где underlinel.gif – файл с анимированным изображением. При получении фокуса мыши ссылка «оживет», прокручивая анимацию подчеркивания. |
