Приглашаем посетить

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

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

Псевдоклассы используются в 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.

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

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

<html>
<head>
<style>
a.link1 { font-size: 12px; color: green }
a.link2 {font-size: 14px; color: blue }
</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 |

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

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

[Назад] [Содержание] [Вперед]