Правила состояний
Правила, регулирующие внешний вид тэгов, которые могут принимать разные состояния - это правила состояний.Как пример тэга состояния можно привести тэг <a> (гиперссылка). Он может принимать разное состояние - при непосещённой ссылке, при наведении на нее указателя мышки, в момент нажатия на ссылку и после посещения ссылки.
Cостояние до посещения сылки записывается так:
a:link {
...
}
Так записывается состояние, уже посещенной ссылки:
a:visited {
...
}
Cостояние, когда над ссылкой находится указатель мышки:
a:hover {
...
}
Cостояние ссылки при нажатии на неё (то есть ссылка активируется):
a:active {
...
}
Пример:
<html>
<head>
<title>Пример CSS</title>
</head>
<body>
<a href="...">Первая ссылка</a>
<a href="...">Вторая ссылка</a>
<body>
</html>
Для не посещенной ссылки изменим цвет на черный (color: #000;) с добавлением нижнего подчеркивания (text-decoration: underline;):
a:link {
color: #000;
text-decoration: underline;
}
Для посещённой ссылки уберём подчеркивание (text-decoration: none;) и изменим цвет на красный (color: #cc0000;):
a:visited {
color: #cc0000;
text-decoration: none;
}
Для ссылки под указателем мыши изменим цвет на оранжевый (color: orange;) и добавим нижнее подчеркивание:
a:hover {
color: orange;
text-decoration: underline;
}
Для активной ссылки заменим цвет на зеленый (color: #00cc00;) и добавим верхнее подчеркивание (text-decoration: overline;):
a:active {
color: #00cc00;
text-decoration: overline;
}
Ссылки приняли такой вид:Первая ссылка
Вторая ссылка
Примечание: В правиле состояния можно прописать не только вид подчеркивания и цвет, но и другие свойства (font-size и т.д.).