Правила состояний

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

Примером тэга состояния является тэг <a> (гиперссылка), который может принимать различные состояния при посещении ссылки, при наведении на нее указателя мышки и при ее нажатии.

Cостояние, когда ссылку никто не посещал:

a:link {
...
}

Cостояние, посещенной ссылки:

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 и т.д.).

Вложенность правил

Сокращенная запись свойств

Реклама в разделе:
viagra