Ссылки в CSS (text-decoration, :hover, :active, :visited, :link)

По умолчанию практически во всех браузерах ссылки выглядят одинаково: они подчёркнуты чертой и имеют синий цвет. Все эти свойства можно переопределить через CSS. Для начала попробуем изменить положение черты, используя свойство text-decoration, которое может принимать значения "underline", "overline", "line-through", "none". Рассмотрим последовательно эффект от каждого.

Рассмотрим ссылку:

<a href="/">MouseDC.ru</a>

Так будет выглядеть обычная ссылка на сайте, на котором нет никаких CSS правил (дизайн ссылки задаётся полностью браузером):

MouseDC.ru

overline ставит линию над текстом

<a href="/" style="text-decoration: overline;">MouseDC.ru</a>

результат:

MouseDC.ru

line-through перечёркивает текст посередине

<a href="/" style="text-decoration: line-through;">MouseDC.ru</a>

результат:

MouseDC.ru

underline подчёркивает текст снизу (это значение по умолчанию в браузерах)

<a href="/" style="text-decoration: underline;">MouseDC.ru</a>

результат:

MouseDC.ru

none убирает подчёркивание:

<a href="/" style="text-decoration: none;">MouseDC.ru</a>

результат:

MouseDC.ru

Состояния ссылок

Браузеры умеют понимать состояние ссылок. Этих состояний может быть несколько. Их можно отследить и задать им CSS свойства. Для этого используются псевдоклассы: ":hover" - это псевдокласс, который указывает на состояние, при котором на ссылку навели курсор мыши. Пример использования в CSS коде:

a:hover{
   font-size: 30px;
   color: red;
}

Псевдокласс ":hover" есть не только у ссылок, но и у любых других тегов. Этот псевдокласс часто применяется для создания выпадающих меню, которые появляются при наведении мышкой на пункт-родитель.

":active" - указывает на то, что на элемент кликнули и зажали кнопку мыши, но ещё не отпустили.

":visited" - указывает на то, что пользователь уже переходил по этой ссылке.

":link" - псевдокласс по умолчанию. Указывает на ссылку, которую ещё не посетили.

К примеру, если вы уже переходили по ссылке на странице, то она изменяет свой цвет. Если поднести курсор мыши к ссылке, то она окрасится в другой цвет. Если кликнуть на ссылку и зажать кнопку мыши, то . Свойства таких ссылок можно задать через CSS. Попробуем это сделать, на примере использования псевдокласса ":visited".

a:visited {
   color: green;
}