Для управления видом различных ссылок в 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.html"><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.html">Ссылка
1</a></p>
<p><a href="link2.html"
class="link1">Ссылка 2</a></p>
<p><a
href="link3.html" class="link2">Ссылка
3</a></p>
</body>
</html> |
Результат данного примера показан ниже.
