CSS Стили для ссылок

Ссылка (элемент HTML <a>) — одна из самых часто нажимаемых вещей на любой странице, поэтому её оформление важно как для внешнего вида, так и для удобства использования. В этой главе мы объясним, как стилизовать ссылки с помощью CSS и сделать их понятными, доступными и визуально привлекательными.

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

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

a:link — обычная, непосещённая ссылка
a:visited — ссылка, которую пользователь уже посещал
a:hover — ссылка, над которой находится курсор мыши
a:active — ссылка в момент нажатия
a:focus — ссылка, получившая фокус с клавиатуры (например, с помощью клавиши Tab)

Вы можете использовать каждый из них отдельно, но при одновременном оформлении нескольких состояний порядок важен. Поскольку :hover, :active и :visited имеют одинаковую специфичность, более позднее правило переопределяет более раннее. Общепринятый рабочий порядок — LVHA — :link, :visited, :hover, :active:

a:link    { color: #1c87c9; }  /* normal   */
a:visited { color: #8e44ad; }  /* visited  */
a:hover   { color: #f4511e; }  /* mouse over */
a:active  { color: #c0392b; }  /* clicked  */

Если поставить :hover перед :visited, цвет при наведении никогда не будет отображаться на посещённых ссылках. Удобный способ запомнить порядок — мнемоника «LoVe HAte» («Любовь — Ненависть»). Добавьте :focus (обычно рядом с :hover), чтобы пользователи клавиатуры получали ту же обратную связь, что и пользователи мыши — отсутствие :focus является распространённой ошибкой доступности.

Мы рассмотрим три свойства, которые чаще всего используются для оформления ссылок:

Text Decoration

По умолчанию браузер проводит подчёркивание под каждой ссылкой. Чтобы изменить или убрать его, используйте свойство text-decoration. Значение text-decoration: none убирает подчёркивание; возврат к underline при :hover — популярный приём, который делает страницу опрятной, при этом сигнализируя о кликабельности при взаимодействии.

Предупреждение: полное удаление подчёркивания может затруднить распознавание ссылок, особенно для пользователей с нарушениями цветовосприятия. Если вы его убираете, обязательно выделяйте ссылки другим способом — отличительным цветом, свойством font-weight или возвращая подчёркивание при наведении и фокусе.

Пример использования свойства text-decoration для оформления ссылки:

Примеры CSS ссылок с text-decoration

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a:link {
        text-decoration: none;
      }
      a:visited {
        text-decoration: none;
      }
      a:hover {
        text-decoration: underline;
      }
      a:active {
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <a href="#"> This is some link.</a>
  </body>
</html>

Попробуйте сами »

Разберём смысл нашего кода.

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

Вы можете проверить это в браузере с помощью редакторов или нашего онлайн-редактора.

Эти стили можно писать как в разделе <head>, так и в CSS-файле, который вы будете использовать для своей веб-страницы.

Color

Мы используем свойство color для задания цвета ссылки.

Например, если мы хотим, чтобы наша ссылка по умолчанию была чёрной, а в третьем состоянии (a:hover) имела цвет #1c87c9, нужно написать следующее:

Пример использования свойства color для оформления ссылки:

Примеры CSS ссылок с color

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a:link {
        color: #000000;
      }
      a:visited {
        color: #000000;
      }
      a:hover {
        color: #1c87c9;
      }
      a:active {
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <a href="#">This is some link.</a>
  </body>
</html>

Попробуйте сами »

Результат

Background Color

Что делать, если мы хотим задать ссылке фон?

Нужно просто применить свойство background-color.

Например, наша ссылка будет иметь серый фон, а при наведении он изменится на #1c87c9.

Когда первое (a:link) и второе (a:visited) состояния имеют одинаковый цвет фона, можно просто использовать a.

Пример использования свойства background-color для оформления ссылки:

Примеры CSS ссылок с background-color

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a {
        background-color: #555555;
      }
      a:hover {
        background-color: #1c87c9;
      }
      a:active {
        background-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <a href="#">This is some link.</a>
  </body>
</html>

Попробуйте сами »

Вы можете выбрать предпочтительный цвет с помощью Палитры цветов.

Собираем всё вместе

В реальных проектах редко стилизуют только одно свойство. Пример ниже сочетает цвет, приём с подчёркиванием при наведении, небольшой отступ, чтобы фон выглядел просторнее, и правило :focus, которое дублирует :hover, обеспечивая видимую обратную связь для пользователей клавиатуры:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a:link,
      a:visited {
        color: #1c87c9;
        text-decoration: none;
        padding: 2px 4px;
        border-radius: 4px;
      }
      a:hover,
      a:focus {
        color: #ffffff;
        background-color: #1c87c9;
        text-decoration: underline;
      }
      a:active {
        color: #ffffff;
        background-color: #14679b;
      }
    </style>
  </head>
  <body>
    <a href="#">This is some link.</a>
  </body>
</html>

Обратите внимание, как группировка a:link, a:visited через запятую применяет одни и те же настройки к обоим состояниям, а объединение a:hover, a:focus делает поведение одинаковым для пользователей мыши и клавиатуры.

Советы по доступности

Никогда не полагайтесь только на цвет. Пользователи с нарушениями цветовосприятия могут не отличить синюю ссылку от чёрного текста. Сохраняйте подчёркивание или дополняйте цвет другим визуальным сигналом.
Всегда стилизуйте :focus. Если вы убираете стандартный контур фокуса, замените его своим видимым стилем — иначе пользователи клавиатуры не смогут определить, где они находятся. Смотрите свойство outline.
Обеспечивайте достаточный контраст. Текст ссылки должен чётко выделяться на фоне и на фоне основного текста страницы.

Резюме

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

Практика

Какие свойства используются в CSS для изменения внешнего вида ссылок?

a:linka:visiteda:activea:hovera:linker