Стилизация ссылок с помощью CSS

Стилизация ссылок с помощью CSS

Ссылка имеет четыре различных состояния: обычное, посещенная, активная и наведение. Эти четыре состояния ссылки могут быть по-разному стилизованы через свойства CSS с использованием псевдоклассов элемента привязки в зависимости от того, в каком состоянии они находятся.

Ниже рассмотрены псевдоклассы CSS, связанные с тегом HTML <a>, которые можно использовать для определения различных стилей для разных состояний гиперссылки.

  1. a:link - устанавливает стили для обычных или не посещенных ссылок, на которые не наведен указатель мыши.
  2. a:visited - устанавливает стили для ссылки, которую посетил пользователь, но на нее не наведен указатель мыши.
  3. a:hover - устанавливает стили для ссылки, когда пользователь наводит на нее указатель мыши.
  4. a:active - устанавливает стили для ссылки, по которой происходит клик.

Вы можете указать любое свойство CSS, например, color, font-family, background и т. д. для каждого из этих селекторов, чтобы переопределить стиль ссылок.

a:link { /* непосещенная ссылка, обычное состояние */
  color: #FF0000;
  text-decoration: none;
}
a:visited { /* посещенная ссылка */
  color: #00FF00;
}
a:hover { /* курсор мыши над ссылкой (hover) */
  color: #FF00FF;
  text-decoration: underline;
}
a:active { /* активная ссылка */
  color: #0000FF;
}

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

Стандартные стили ссылок

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

Например, цвета ссылок по умолчанию в веб-браузерах на основе Gecko, таких как Firefox, - синий для не посещенных, фиолетовый для посещенных и красный для активной ссылки.

Установка цвета ссылок в CSS

Для установки цвета ссылки достаточно использовать селектор а. Однако считается хорошей практикой добавить стили для посещенных ссылок и состояния hover (момент, когда курсор находится над ссылкой). Это делается для удобства пользователя, который всегда может видеть какие ссылки он уже посетил и на какие может перейти.

Как убрать подчеркивание у ссылок

CSS-свойство text-underline обычно используется для удаления или добавления подчеркивания для ссылок. В следующем примере демонстрируется, как удалить или установить свойство text-underline для разных состояний гиперссылки.

a:link { /* непосещенная ссылка, обычное состояние */
  color: #FF0000;
  text-decoration: none;
}
a:visited { /* посещенная ссылка */
  color: #00FF00;
  text-decoration: none;
}
a:hover { /* курсор мыши над ссылкой (hover) */
  color: #FF00FF;
  text-decoration: underline;
}
a:active { /* активная ссылка */
  color: #0000FF;
  text-decoration: underline;
}

Оставьте первый комментарий

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*