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 .
HTML-теги ссылок
| Tag | Description |
|---|---|
| <a> | Defines a hyperlink |
Полный список всех доступных HTML-тегов см. в нашем Справочнике по HTML-тегам .