Оформление ссылок средствами CSS | uCoz
   

Оформление ссылок средствами CSS

Главная » Уроки » CSS

Ссылки веб-документа имеют 4 стандартных состояния, поддерживаемые всеми браузерами:

Оформление ссылок средствами CSS

  • 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 – файл с анимированным изображением. При получении фокуса мыши ссылка «оживет», прокручивая анимацию подчеркивания.

Категория: CSS; Урок сделан: 17.05.2012; Просмотров : 974; Рейтинг : 0.0/0;
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Задать вопрос

Вы можете задать свой вопрос, соответствующий тематике сайта.

Задумался?

Задать свой вопрос

Вход


Здравствуйте, Гость!


Copyright © 2010-2016 Pro100uCoz.ru