CSS Styles for Links

В этом разделе мы объясним, как стилизовать ссылки и сделать их более привлекательными.

Ссылка имеет следующие состояния:

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

Мы рассмотрим следующие свойства:

Оформление текста

Как вы помните, при создании ссылки она по умолчанию подчёркивается. Чтобы убрать подчёркивание, нужно использовать свойство text-decoration.

Пример использования свойства 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.

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

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

Примеры изменения цвета ссылок в CSS

<!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.

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

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

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

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

<!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>

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

Вы можете выбрать нужный цвет с помощью Color Picker.

Практика

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