Ссылки


CSS имеет несколько параметров для изменения стиля ссылок.

Свойство Значение NC IE
A:link
A:visited
A:active
A:hover		 <style>
<style>
<style>
<style>		 4+
4+
4+
6+ 		4+
4+
4+
4+

Обозначения: NC — Netscape Communicator, IE — Internet Explorer, 4+ — версия браузера четыре и выше.

Как видно из таблицы, поддержка селектора a:hover появилась в Netscape только начиная с 6 версии, а до этого просто отсутствовала, что вызывало у многих пользователей недоумение.

Селекторы
A:link
Определяет стиль для обычной непосещенной ссылки.

A:visited
Определяет стиль для посещенной ссылки.

A:active
Определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.

A:hover
Определяет стиль для ссылки при наведении на нее мышью. Не поддерживается браузером Netscape до 6 версии.

Ссылки без подчеркивания

Одно из наиболее популярных применений CSS — это убирание подчеркивания у ссылок. С позиции юзабилити не совсем верное решение, поскольку пользователь может сразу не догадаться, что текст, который он видит, является ссылкой. Все ведь уже привыкли — раз подчеркивание используется, значит это ссылка. Но при правильном применении отсутствие подчеркивания у ссылок может придать определенный эффект сайту. Часто делается, что при наведении курсора, ссылка становится подчеркнутой, меняет свой цвет или используется и то и другое одновременно. Параметр hover не работает в Netscape до 6 версии, поэтому его следует использовать осторожно.

Пример 1. Подчеркивание у ссылки и изменение ее цвета
<style type="text/css">
A:link {text-decoration: none} // убирает подчеркивание для ссылок
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: underline; color: red;} // делает ссылку красной и подчеркнутой при наведении на нее курсора
</style>

Ниже приведено использование данного примера. При наведении курсора на ссылку, она становится подчеркнутой и красной.

НАВЕДИ СЮДА КУРСОР, УВИДИШЬ РЕЗУЛЬТАТ

Подчеркнутые и надчеркнутые ссылки

Еще один пример демонстрирует использование в ссылках подчеркивания и надчеркивания одновременно. При этом эффекте тонкие линии будут появляться над и под ссылкой при наведении на нее курсора. Это достигается применением параметра text-decoration: underline overline в селекторе A:hover.

Пример 2. Использование подчеркивания в ссылках
<style type="text/css">
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: underline overline; color: red;} // ссылка подчеркнутая, надчеркнутая и красного цвета
</style>

НАВЕДИ СЮДА КУРСОР, УВИДИШЬ РЕЗУЛЬТАТ

Изменение размера ссылки

Третий пример показывает, как изменять размер ссылки при наведении на нее курсора.

Пример 3. Изменение размера ссылки
<style type="text/css">
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {font-size: 24; font-weight: bold; color: red;} // ссылка изменит свой размер на больший
</style>

НАВЕДИ СЮДА КУРСОР, УВИДИШЬ РЕЗУЛЬТАТ

Изменение цвета подчеркивания

Со ссылками, при помощи CSS, можно сделать интересную особенность. Цвет ссылки, при наведении на нее курсора мыши, остается неизменным, но зато у нее появляется подчеркивание другого цвета, нежели сама ссылка. Данный прием не работает в браузерах Netscape 4.x и Internet Explorer 5.

Пример 4. Создание подчеркивание другого цвета
<html>
<head>
<style>
 a:link { color: blue; text-decoration: none }
 a:hover { color: red; text-decoration: underline }
 .link { color: blue }
</style>
</head>

<body>
<a href=link1.html><span class=link>Ссылка</span></a>
</body>
</html>

НАВЕДИ СЮДА КУРСОР, УВИДИШЬ РЕЗУЛЬТАТ

Ссылки разных цветов

Часто возникает необходимость на одной странице использовать ссылки разных цветов и размеров. И применять для каждой области веб-страницы ссылки подходящего типа. Одни для меню, другие для текста. Создаем два или больше класса со своими параметрами и применяем их по своему усмотрению. В нижеприведенном примере достаточно поменять значения у соответствующего класса, и цвета у ссылок, где этот класс используются изменятся автоматически.

Пример 5. Ссылки разных цветов
<html>
<head>
<style>
a { font-size: 14px; color: red }
a.link1 { font-size: 12px; color: green }
a.link2 { font-size: 14px; color: blue }
</style>
</head>

<body link=#0000ff>
<p><a href=link1.html>Ссылка 1</a>
<p><a href=link2.html class=link1>Ссылка 2</a>
<p><a href=link3.html class=link2>Ссылка 3</a>
</body>
</html>

| Ссылка 1 | Ссылка 2 | Ссылка 3 |

Замечание.
Если цвет в каскадной таблице указывать у ссылки (тег A), то замечены ошибки в браузерах Netscape (цвет ссылки не меняется) и Opera (цвет черты подчеркивания ссылки не меняется), поэтому для надежности можно использовать вложенный внутрь ссылки тег DIV с прописанным в каскадной таблице цветом.

Пример 6. Использование вложенного тега DIV

<html>
<head>
<style>
.Red { font-size: 14px; color: red }
</style>
</head>

<body link=#0000ff>
<a href="..."><div class="Red">Red Link</div></a>
</body>
</html>

Предыдущая статья     Следующая статья     Список статей