Виды ссылок

Обычно в качестве ссылки выступает текст или изображение. Текст ссылки, как правило, помечается подчёркиванием и цветом, чтобы его было легко визуально отличить от обычного текста. С рисунками сложнее: явно определить, ссылка перед нами или нет, можно только после того, как мы наведём курсор мыши на рисунок. Для ссылок указатель превращается в «руку», а в статусной строке браузера отображается путь к документу, на который ссылка указывает. Поэтому рисунки в качестве ссылок лучше применять там, где они ожидаемы, — баннеры, кнопки, закладки, изображения с надписью «Нажми» и т. д.

В примере 1 показано создание ссылок с помощью рисунков и текста.

Пример 1. Текстовые и графические ссылки

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ссылки</title>
 </head>
 <body>
  <p><a href="linkl.html">Текстовая ссылка</a></p>
  <p><a href="link2.html"><img src="image/3.png" alt=""></a></p>
  <p><a href="link3.html"><img src="image/7.png" alt="">Текстовая ссылка с рисунком</a></p>
 </body>
</html>

Первая ссылка в данном примере представляет собой обычный текст, заключенный внутрь <a>. Следующая строка демонстрирует создание графической ссылки. Изображение, добавляемое на веб-страницу через элемент <img>, в этом случае надо поместить между тегами <а> и </а>. Кроме того, внутри <a> можно одновременно сочетать текст и рисунки, как показано в данном примере.

Любая ссылка на веб-странице может находиться в одном из следующих состояний.

Непосещённая ссылка. Такое состояние характерно для ссылок, которые ещё не открывали. По умолчанию непосещённые текстовые ссылки изображаются синим цветом и с подчёркиванием.
Активная ссылка. Ссылка помечается как активная в момент её открытия. Поскольку время между нажатием на ссылку и началом загрузки нового документа достаточно мало, подобное состояние ссылки весьма кратковременно. Активной ссылка становится также при её выделении с помощью клавиатуры. Цвет такой ссылки по умолчанию красный.
Посещённая ссылка. Как только пользователь открывает документ, на который указывает ссылка, она помечается как посещённая и меняет свой цвет на фиолетовый, установленный по умолчанию.

Указанные цвета ссылок задаются с помощью следующих псевдоклассов:

:active — активная ссылка;
:hover — состояние ссылки при наведенном на неё курсоре мыши;
:visited — посещённая ссылка.

В примере 2 показано использование псевдоклассов для управления цветом ссылок.

Пример 2. Псевдоклассы для ссылок

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ссылки</title>
  <style>
   a { color: #8db835; }
   a:visited { color: #821e6f; }
   a:hover { background: #4577ad; color: #fff; text-decoration: none; }
   a:active { color: #f1616e; }
  </style>
 </head>
 <body>
  <p><a href="link1.html">Посещённая ссылка</a></p>
  <p><a href="link2.html">Обычная ссылка</a></p>
  <p><a href="http://webref.ru">Ссылка при наведении курсора</а></p>
 </body>
</html>

Результат данного примера показан на рис. 1. Цвет рядовых ссылок указывается через селектор a, для остальных видов ссылок применяются псевдоклассы. Имеет значение их порядок, :hover должен идти после :visited, тогда он будет работать и для посещённых ссылок. Естественно, если ссылку не открывали, то она никак не перейдёт в статус посещённых.

Вид ссылок в различном состоянии