Цвет ссылок 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 - теги ссылок

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

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

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

Проверить себя

Вопрос

Ваш ответ:

Правильный ответ:

Следующий

Правильных ответов {{SCORE_CORRECT}} из {{SCORE_TOTAL}}

Результат

☛ Закладки HTML

Ссылки HTML ☚