Цвет ссылок в HTML , CSS оформление гиперссылок
Меню
Справочник

Цвет ссылок HTML

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, перейдите в раздел Стили HTML CSS

🔗 См. также ссылки в HTML


HTML - теги ссылок

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

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


Является ли утверждение верным?

Проверьте себя, насколько хорошо вы запомнили материал.


☛ Закладки HTML

Ссылки HTML ☚

Поделиться ссылкой