Как изменить цвет ссылки в CSS и настроить ее оформление

Чтобы изменить цвет ссылки в CSS, задайте свойство color для нужных состояний. Подчеркивание и фон тоже можно настроить отдельно. Псевдоклассы :link, :visited, :hover, :focus-visible и :active разделяют эти стили. В статье вы соберете ссылку-кнопку, горизонтальное меню и видимый фокус для клавиатуры.

Состояния ссылок и псевдоклассы

Одна ссылка может одновременно соответствовать нескольким псевдоклассам. Поэтому порядок правил влияет на итоговый цвет, фон и контур.

Псевдокласс :focus выбирает любой элемент с фокусом ввода. Псевдокласс :focus-visible помогает показать фокус при клавиатурной навигации.

Состояние :active не обозначает текущую страницу. Для текущего пункта меню используйте aria-current="page" и отдельный селектор.

Как изменить цвет ссылки в CSS

Цвет ссылки задайте свойством color. Чтобы менять его при наведении, посещении и других состояниях, используйте отдельные правила с псевдоклассами.

Создайте рядом файлы index.html и styles.css. В HTML-файл скопируйте всю разметку:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Состояния ссылки в CSS</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <a href="https://developer.mozilla.org/">Открыть документацию</a>
</body>
</html>

Строка <link rel="stylesheet" href="styles.css"> внутри <head> подключает CSS-файл. Браузер загрузит styles.css из той же папки, где лежит index.html.

В файл styles.css добавьте правила. Этот пример показывает, как меняют цвет ссылки в CSS:

body {
  background-color: #ffffff;
  color: #222222;
}

a:link {
  color: #0057b8;
}

a:visited {
  color: #6f2c91;
}

a:hover {
  color: #a52a2a;
}

a:focus-visible {
  color: #003d80;
  outline: 2px solid #003d80;
  outline-offset: 3px;
}

a:active {
  color: #8b0000;
}

1. Сохраните CSS-файл и HTML-файл, затем откройте страницу в браузере. Непосещенная ссылка станет синей.
2. Наведите указатель на ссылку. Текст станет коричнево-красным.
3. Нажмите Tab и перейдите к ссылке. Браузер покажет темно-синий текст и контур толщиной 2 px.
4. Нажмите ссылку мышью и удерживайте кнопку. Во время нажатия текст станет темно-красным.
5. Откройте ссылку и вернитесь назад. Если браузер отметил адрес посещенным, ссылка получит фиолетовый цвет.

Если цвет не меняется, откройте инструменты разработчика и выберите ссылку. Найдите свойство color в списке примененных стилей. Перечеркнутое объявление уступило другому правилу из-за специфичности или порядка.

Почему порядок LVHA влияет на цвет

Правила состояний размещайте в порядке LVHA: :link → :visited → :hover → :active.

При одинаковой специфичности более позднее правило побеждает для одного свойства. Посещенная ссылка под указателем одновременно соответствует :visited и :hover.

/* Неудачный порядок: цвет наведения перекрывается. */
a:hover {
  color: #a52a2a;
}

a:visited {
  color: #6f2c91;
}

В этом варианте правило :visited стоит позже и перекрывает цвет наведения. Поставьте a:hover после a:visited, чтобы наведение снова меняло цвет посещенной ссылки.

Ограничения псевдокласса :visited

Браузеры ограничивают оформление посещенных ссылок, чтобы страница не извлекала историю пользователя. Псевдокласс :visited меняет разрешенные цветовые свойства, среди которых color, background-color, цвета границ, контура и подчеркивания.

Через :visited нельзя надежно менять размеры, расположение или отображение элемента. Фоновый цвет сработает, если фон задан и для непосещенной ссылки.

Подробный список ограничений приведен в документации MDN о :visited.

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

Свойство text-decoration управляет линией под текстом. Значение none убирает линию, а underline возвращает ее при наведении или фокусе.

<a class="plain-link" href="https://developer.mozilla.org/">Открыть документацию</a>

.plain-link {
  text-decoration: none;
}

.plain-link:hover,
.plain-link:focus-visible,
.plain-link:active {
  text-decoration: underline;
}

В обычном состоянии линия исчезнет. При наведении, клавиатурном фокусе или нажатии подчеркивание появится снова.

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

.article-link {
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

text-decoration-color задает цвет линии. text-decoration-thickness меняет ее толщину, а text-underline-offset задает расстояние от текста.

Описание свойств есть в документации MDN: цвет линии, толщина и отступ.

Как задать фон ссылки

Свойство background-color окрашивает область за текстом. Задайте фон для обычного и посещенного состояния, чтобы смена цвета работала предсказуемо.

.highlight-link:link {
  color: #222222;
  background-color: #fff0d6;
}

.highlight-link:visited {
  color: #52216b;
  background-color: #f0e6f5;
}

.highlight-link:hover,
.highlight-link:focus-visible {
  color: #ffffff;
  background-color: #59316b;
}

.highlight-link:active {
  background-color: #351d40;
}

При наведении светлый фон сменится темным, а текст станет белым. Подбирайте цвет текста и заливки вместе, чтобы надпись оставалась читаемой.

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

Ссылка-кнопка подходит для перехода на страницу или к разделу документа. Для отправки формы, открытия диалога и других действий используйте <button>.

<a class="button-link" href="https://developer.mozilla.org/">Открыть документацию</a>

.button-link:link,
.button-link:visited {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 6px;
  color: #ffffff;
  background-color: #0057b8;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s;
}

.button-link:hover,
.button-link:focus-visible {
  background-color: #003d80;
}

.button-link:focus-visible {
  outline: 3px solid #222222;
  outline-offset: 3px;
}

.button-link:active {
  background-color: #002754;
}

@media (prefers-reduced-motion: reduce) {
  .button-link:link,
  .button-link:visited {
    transition: none;
  }
}

Браузер отображает <a> как строчный элемент. Значение inline-block позволяет задать ему отступы и размеры.

Свойство transition растягивает смену фона на 0.2s. Для ссылки с href отдельно задавать cursor: pointer не требуется.

Как собрать горизонтальное меню из ссылок

Разметьте меню списком внутри <nav>, а горизонтальное расположение задайте Flexbox. Если ширины окна не хватит, пункты перенесутся на следующую строку.

<nav aria-label="Основная навигация">
  <ul class="site-menu">
    <li><a href="/" aria-current="page">Главная</a></li>
    <li><a href="/news/">Новости</a></li>
    <li><a href="/guides/">Руководства</a></li>
    <li><a href="/contacts/">Контакты</a></li>
  </ul>
</nav>

.site-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-menu a:link,
.site-menu a:visited {
  display: block;
  padding: 12px 20px;
  color: #ffffff;
  background-color: #0057b8;
  text-decoration: none;
}

.site-menu a:hover,
.site-menu a:focus-visible {
  background-color: #003d80;
}

.site-menu a:focus-visible {
  outline: 3px solid #222222;
  outline-offset: 2px;
}

.site-menu a:active {
  background-color: #002754;
}

.site-menu a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

Свойство display: flex выстраивает элементы <li> в ряд. Значение gap: 8px задает промежутки, а display: block расширяет область ссылки до всей кнопки.

Правило li { display: inline; } тоже расположит пункты в одну строку. Flexbox удобнее, потому что он поддерживает промежутки и перенос строк.

Пути в разметке обозначают пример структуры сайта. Перед публикацией замените их адресами своих страниц.

Как сохранить видимый фокус и проверить оформление

Не удаляйте контур правилом outline: none. Пользователь клавиатуры потеряет указатель своего положения на странице.

Оставьте стиль :focus-visible заметным при любом цвете наведения. Затем пройдите ссылками без мыши.

• Непосещенная ссылка отличается от окружающего текста.
• Посещенная ссылка сохраняет читаемый текст.
• Наведение срабатывает и на посещенном адресе.
• Клавиша Tab показывает фокус на каждой ссылке.
• Нажатие не скрывает текст и не убирает контур.

Если оформление нарушилось, сравните селекторы и порядок правил в инструментах разработчика. Перечеркнутое свойство проиграло другому объявлению каскада.

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

Совет от нашей редакции: проверьте готовое меню клавишами Tab и Enter, прежде чем считать оформление завершенным.