CSS по шагам



Пример 16.2. Изменение цвета ссылок


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<style type="text/css">

A:link {

 color: #036 /* Цвет непосещенных ссылок */

}

A:visited {

 color: #606 /* Цвет посещенных ссылок */

}

A:hover {

 color: #f00 /* Цвет ссылок при наведении на них курсора мыши */

}

A:active {

 color: #ff0 /* Цвет активных ссылок */

}

</style>

</head>

<body>

<a href="link1.html">Ссылка 1</a> | <a href="link2.html">Ссылка 2</a> | <a href="link3.html">Ссылка 3</a>

</body>

</html>

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

A.ex:link { color: #036 } A.ex:visited { color: #606 } A.ex:hover { color: #f00 } A.ex:active { color: #ff0 }

| |

В данном примере показано использование псевдоклассов совместно со ссылками. При этом имеет значение порядок следования псевдоклассов. Вначале указывается visited, а затем идет hover, в противном случае посещенные ссылки не будут изменять свой цвет при наведении на них курсора.

Псевдоклассы link и visited могут применяться только к ссылкам, а псевдоклассы active и hover также и к другим элементам документа. Это расширяет набор приемов и позволяет создавать эффект перекатывания, когда стиль элемента меняется при наведении на него курсора мыши.

Замечание

Браузер Internet Explorer позволяет использовать псевдоклассы active и hover только для ссылок.

В примере 16.3 показана таблица, строки которой меняют свой цвет при наведении на них курсора мыши. Это достигается за счет добавления псевдокласса hover к селектору TR.




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