Псевдоклассы

Псевдоклассы используются в CSS чтобы применять к элементам разные процедуры форматирования. В реальности псевдоклассы используется только для ссылок.

A:псевдокласс { Параметр: Значение; }

Псевдоклассы для ссылок могут принимать следующие значения:

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

Пример 1. Использование псевдоклассов

<html>
<head>
<style type="text/css">
a:link { color: #003366; }
a:visited { color: #660066; }
a:hover { color: #800000; }
a:active { color: #FF0000; }
</style>
</head>

<body>
| <a href=#>Ссылка 1</a> | <a href=#>Ссылка 2</a> | <a href=#>Ссылка 3</a> |
</body>
</html>

Псевдокласс hover работает только в IE 4, Netscape 6 и Opera 6.

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

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

<html>
<head>
<style>
a.link1 { font-size: 12px; color: green }
a.link1:hover { color: red }
a.link2 {font-size: 14px; color: blue }
a.link2:hover { color: red }
</style>

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

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

В примере используется три вида ссылок. Первый тип используется на данном сайте по умолчанию, вторая ссылка — зеленая, а третья — синяя. Все три ссылки изменяют свой цвет при наведении курсора мыши.

Данный прием позволяет создавать ссылки любых цветов и размеров для использования в разных частях документа.

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

Следующий раздел