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

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

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

<a href="

Так будет выглядеть обычная ссылка на сайте, на котором нет никаких 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;
}

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

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

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

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

Попробуем это сделать, на примере использования псевдокласса «:visited«.

a:visited {
   color: green;
}