Думаю, вы уже замечали, что иногда наведя на ссылку, она меняет свой внешний вид. К примеру, меняет цвет, исчезает или подчеркивается. Все это можно сделать при помощи CSS, и за это отвечают псевдоклассы – классы, способные учитывать те или иные условия, при определении свойств html элемента.

Как применять псевдокласс к ссылкам?

Для начала нужно записать элемент А, к нему мы и будем применять псевдокласс, затем ставим двоеточие и указываем имя псевдокласса, после всего этого в фигурных скобках указываем нужный стиль.

А: ИМЯ ПСЕВДОКЛАССА { …стиль …}

Для ссылок существует четыре псевдокласса:

A:link { … стиль оформления обычной ссылки… }
A:active { … стиль оформления ссылки в момент нажатия… }
A:visited { … стиль оформления посещенной ссылки… }
А:hover { … стиль оформления ссылки, на которую наведен указатель мыши … }

Давайте теперь рассмотрим на примере:

Отличается только посещенная ссылка, а все остальные одинаковы, и цвет тоже не сильно нравится, так что давайте сменим все:

a:link {
color: red ;
}
a:visited {
color:black;
}
a:hover {
color:green ;
text-decoration:none;
}
a:active {
color:blue;
text-decoration:none;
}

В нашем примере ссылка ведет сама на себя, так что для того что бы увидеть изменения нужно обновить страницу.

Вариантов для изменения очень много, и каждая делает своё, в определенных условиях дизайна. Давайте рассмотрим пример:

a:link {
color: red ;
}
a:visited {
color:blue;
}
a:hover {
color:green ;
text-decoration:none;
font-weight:bold;
}
a:active {
color:black;
text-decoration:none;
text-transform:uppercase;
}

Если мы хотим что бы ссылка не менялась вообще, то снова такие все можно сделать в CSS:

a:link {
color: green ;
text-decoration:none;
}
a:visited{
color: green;
text-decoration:none;
}
a:hover {
color: green;
text-decoration:none;
}
a:active {
color: green;
text-decoration:none;
}

Если стиль везде одинаков, то все это можно сократить в записи:

a:link, a:visited, a:hover, a:active {color: green; text-decoration:none;}

А можно и вовсе без использования псевдоклассов:

a {color: green; text-decoration:none;}

С ссылками закончили. Приступаем дальше.