Ссылки

Для управления видом различных ссылок в CSS используются псевдоклассы, которые указываются после селектора A через двоеточие. В табл. 1 приведены допустимые псевдоклассы и их описания.

Табл. 1. Псевдоклассы при работе со ссылками
Свойство	Описание
A:link	Определяет стиль для обычной непосещенной ссылки.
A:visited	Определяет стиль для посещенной ссылки.
A:active	Определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.
A:hover	Определяет стиль для ссылки при наведении на нее мышью.

Обычно использование псевдокласса link имеет тот же эффект, что и применение стиля к селектору A. Поэтому этот псевдокласс можно опустить.

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

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

Пример 1. Подчеркивание у ссылки и изменение ее цвета

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<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>
</head>
<body>
...
</body>
</html>

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

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

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

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

Пример 2. Использование подчеркивания в ссылках

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<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>
</head>
<body>
...
</body>
</html>

Результат данного примера показан ниже.

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

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
A:link { text-decoration: none }
A:visited { text-decoration: none }
A:active { text-decoration: none }
A:hover {
font-size: 24px; /* Размер шрифта */
font-weight: bold; /* Жирное начертание */
color: red /* Цвет ссылки */
}
</style>
</head>
<body>
...
</body>
</html>

Результат данного примера показан ниже.

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

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

Со ссылками, при помощи CSS, можно сделать интересную особенность. Цвет ссылки, при наведении на нее курсора мыши, остается неизменным, но зато у нее появляется подчеркивание другого цвета, нежели сама ссылка (пример 4). Учтите, что данный прием не работает в некоторых браузерах.

Пример 4. Создание подчеркивание другого цвета

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
A:link { color: blue; text-decoration: none }
A:hover { color: red; text-decoration: underline }
.link { color: blue }
</style>
</head>

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

Результат данного примера показан ниже.

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

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
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.php">Ссылка 1</a></p>
<p><a href="link2.php" class="link1">Ссылка 2</a></p>
<p><a href="link3.php" class="link2">Ссылка 3</a></p>
</body>
</html>

Результат данного примера показан ниже.

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

Учебник по HTML и CSS

HTML

CSS

Статьи

Полезное

Ссылки

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

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

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

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

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