Ссылка имеет четыре различных состояния: обычное, посещенная, активная и наведение. Эти четыре состояния ссылки могут быть по-разному стилизованы через свойства CSS с использованием псевдоклассов элемента привязки в зависимости от того, в каком состоянии они находятся.
Ниже рассмотрены псевдоклассы CSS, связанные с тегом HTML <a>, которые можно использовать для определения различных стилей для разных состояний гиперссылки.
- a:link - устанавливает стили для обычных или не посещенных ссылок, на которые не наведен указатель мыши.
- a:visited - устанавливает стили для ссылки, которую посетил пользователь, но на нее не наведен указатель мыши.
- a:hover - устанавливает стили для ссылки, когда пользователь наводит на нее указатель мыши.
- 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; }
Оставить комментарий