ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
HTML5. Уроки для начинающих. W3Schools на русском

Ua En Es De Fr

HTML Ссылки - Разные цвета


Ссылки HTML отображается в другом цвете в зависимости от того, посещали ли её, не посещали или она активна.


HTML Цвета ссылок

По умолчанию ссылки будут отображаться так (во всех браузерах):

  • Не посещенная ссылка подчеркнуто, синим цветом
  • Посещенная ссылка подчеркнуто, фиолетовым цветом
  • Активная ссылка подчеркнуто, красным цветом

Вы можете изменить цвета состояния ссылки, используя CSS:

Пример

Здесь не посещенная ссылка будет зеленой без подчеркивания. Посещенная ссылка будет розовой, без подчеркивания. Активная ссылка будет желтой и подчеркнутой. Кроме того, при наведении курсора на ссылку (a:hover) она становится красной и подчеркнутой:

<style>
a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>
Попробуйте сами »

Кнопки-ссылки

Ссылку также можно оформить как кнопку с помощью CSS:

Это ссылка

Пример

<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
 background-color: red;
}
</style>
Попробуйте сами »

Чтобы узнать больше о CSS, перейдите в CSS Учебник на нашем сайте W3Schools на русском.


HTML Теги ссылки

Тег Описание
<a>Определяет гиперссылку

Полный список всех доступных тегов HTML можно посмотреть в HTML Справочнике тегов на нашем сайте W3Schools на русском.


HTML Упражнения

Проверьте себя с помощью упражнений

Упражнение:

Используйте CSS, чтобы удалить подчеркивание из ссылки.

<a href="html_images.asp" style="">HTML Images</a>