①Псевдоклассы состояний гипертекстовых ссылок

CSS-ссылки содержат свойства, которые отвечают за внешний вид гипертекстовых ссылок HTML-документа. Ссылки представляют собой основной способ навигации по сайту, поэтому применение CSS-стилей для оформления улучшит их визуальное восприятие.

Основной способ оформления ссылок заключается в стилизации подчеркивания ссылки и изменении цвета текста ссылки. Также можно изменить внешний вид курсора с помощью свойства cursor.

CSS-ссылки

Содержание

1. Псевдоклассы состояний гипертекстовых ссылок

2. Выборка отдельных ссылок и подчеркивание ссылок

3. Изображения для ссылок и использование фонового изображения

4. Ссылки-кнопки

5. Примеры оформления ссылок

Псевдоклассы состояний гипертекстовых ссылок

Большинство браузеров выделяют четыре основных состояния гиперссылок, каждому из которых соответствует свой псевдокласс селектора:

Не посещенная — a:link
Посещенная — по которой уже выполнялся переход — a:visited
Не нажатая — над которой находится указатель мыши — a:hover
Нажатая — которая удерживается мышью — a:active

Используя псевдоклассы для форматирования каждого состояния ссылок, можно дать пользователям подсказки, по каким ссылкам он уже переходил, а по каким — ещё нет, например:

CSS

a:link {
  color: #497DDD; 
  border-bottom: 1px dashed; 
}
a:visited {
  color: #EF7D55;
}
a:hover {
  color: #154088; 
  border-bottom: .07em solid;
}
a:active {
  color: #497DDD; 
  border-bottom: 1px dashed;
}

Форматировать ссылки нужно в указанной последовательности, в противном случае состояние стилей перестанет работать (в силу механизма каскадности).

Продолжение в следующей статье!