Цвет ссылки сегодня задают через CSS, а не через устаревшие атрибуты HTML. При этом важно оформить не только обычное состояние, но и взаимодействие: посещённая ссылка, наведение мышью, клавиатурный фокус и момент активации.
Хорошая ссылка должна оставаться узнаваемой и при этом соответствовать дизайну сайта. Один только цвет не всегда достаточен, поэтому при удалении стандартного подчёркивания нужно дать пользователю другой понятный визуальный признак.
Базовый цвет всех ссылок
Самый простой вариант — выбрать все элементы a и задать свойство color:
Наглядный интерактивный пример. Наведите курсор или перейдите клавишей Tab по ссылкам ниже: специально ограниченные стили демонстрируют обычное состояние, :hover, клавиатурный фокус и уже посещённую ссылку.
Эти правила ограничены классом демонстрационного блока и не должны менять остальные ссылки сайта. Ниже показан тот же подход в виде CSS-кода для использования в собственном шаблоне.
a {
color: #1769aa;
}Такое правило влияет на все ссылки, которых касается область видимости CSS. На реальном сайте лучше ограничивать селектор нужным контейнером, чтобы случайно не изменить кнопки, меню и другие компоненты.
.article-content a {
color: #1769aa;
}Если дизайн использует CSS-переменные, цвет ссылок удобно хранить в общей переменной темы.
Псевдоклассы состояний ссылки
Ссылка меняет состояние в зависимости от действий пользователя. Для этого CSS предоставляет несколько псевдоклассов:
:link— непосещённая ссылка;:visited— посещённая;:hover— указатель находится над элементом;:focusи:focus-visible— элемент получил фокус;:active— ссылка активируется в данный момент.
Эти состояния не обязательно должны иметь пять совершенно разных цветов. Главное — пользователь должен видеть, что элемент интерактивен, а клавиатурный фокус нельзя делать незаметным.
Пример полного оформления ссылки
Практический набор стилей может выглядеть так:
.article-content a:link {
color: #1769aa;
}
.article-content a:visited {
color: #6d4c9c;
}
.article-content a:hover {
color: #0f4d7a;
text-decoration-thickness: 2px;
}
.article-content a:focus-visible {
outline: 2px solid currentColor;
outline-offset: 3px;
}
.article-content a:active {
color: #b00020;
}Конкретные цвета нужно подбирать под фон и палитру сайта. Этот пример показывает принцип, а не обязательные значения.
Почему focus так же важен, как hover
Пользователь мыши видит состояние :hover, а человек, который перемещается по странице клавишей Tab, ориентируется по фокусу. Если стиль задаётся только на hover, клавиатурный сценарий остаётся без обратной связи.
:focus-visible позволяет показывать заметный контур прежде всего тогда, когда браузер считает его полезным для способа ввода. Удалять стандартный outline правилом outline: none без полноценной замены не стоит.
Можно ли убрать подчёркивание.
Технически достаточно text-decoration: none, но с точки зрения UX результат зависит от контекста. Внутри абзаца ссылка без подчёркивания может сливаться с обычным текстом, особенно если цвет отличается незначительно или пользователь плохо различает цвета.
.article-content a {
text-decoration-line: underline;
text-underline-offset: .15em;
}
.article-content a:hover {
text-decoration-thickness: .14em;
}Так можно сохранить привычный признак ссылки и при этом сделать подчёркивание аккуратнее. В меню или кнопках контекст сам подсказывает интерактивность, поэтому правила там могут отличаться.
Особенности :visited.
Браузеры ограничивают набор CSS-свойств, которые могут визуально зависеть от :visited, чтобы сайты не могли использовать историю посещений как канал утечки данных. Поэтому для посещённых ссылок лучше рассчитывать прежде всего на допустимые цветовые изменения, а не строить сложную логику оформления.
Кроме того, visited-цвет должен оставаться достаточно контрастным относительно фона и отличимым от обычного текста. Слишком бледная посещённая ссылка быстро превращается в проблему читаемости.
Как задать разные стили ссылкам статьи и меню.
Не стоит писать один глобальный набор правил для всех ссылок сайта. Меню, статья, карточка и кнопка решают разные задачи. Контекстные селекторы позволяют разделить оформление.
.main-menu a {
text-decoration: none;
}
.article-content a {
text-decoration: underline;
}
.article-content a.external-link {
font-weight: 500;
}Такой подход предсказуемее, чем длинная цепочка !important. Чем точнее архитектура классов шаблона, тем меньше приходится бороться со специфичностью.
Контраст и доступность
Красивый фирменный цвет не всегда хорошо читается на белом или тёмном фоне. Ссылку нужно проверять в реальном размере шрифта и во всех основных состояниях, включая focus.
Перед публикацией полезно пройтись по нескольким пунктам:
- ссылка отличается от обычного текста не только едва заметным оттенком;
- hover не делает текст менее контрастным;
- focus виден при клавиатурной навигации;
- visited-состояние остаётся читаемым;
- стили не зависят только от цвета там, где интерактивность иначе непонятна;
- в тёмной теме используются подходящие значения, а не те же цвета автоматически.
Проверка клавиатурой занимает меньше минуты и часто сразу показывает проблемы, которые незаметны при обычном использовании мыши.
Итог
Цвет и поведение ссылок задаются CSS. Для статьи обычно достаточно базового цвета, понятного visited-состояния, hover и хорошо заметного :focus-visible. Подчёркивание в тексте лучше не убирать без причины, а стили меню и кнопок стоит отделять от обычных контентных ссылок.
Если нужно открыть отдельную ссылку в новой вкладке, см. материал о target="_blank" и noopener.
