Ссылки HTML - разные цвета
Ссылка HTML отображается разным цветом в зависимости от того, была ли она посещена, не посещена или активна.
Цвета ссылок HTML
По умолчанию непосещённая ссылка подчёркнута и синяя, посещённая — подчёркнута и фиолетовая, а активная — подчёркнута и красная. Эти цвета состояний можно изменить с помощью CSS, используя a:link, a:visited, a:hover и a:active.
Пример
Пользовательские цвета для каждого состояния ссылки, а также эффект при наведении.
Prompt
Страница, использующая CSS для окраски четырёх состояний ссылки: непосещённая зелёная без подчёркивания, посещённая розовая без подчёркивания, наведение красное с подчёркиванием, активная жёлтая с подчёркиванием. Включает пример ссылки в body.
Вывод: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
</head>
<body>
<p><a href="https://prompt-cookbook.com">Это ссылка</a></p>
</body>
</html>
Кнопки из ссылок
Ссылку также можно оформить так, чтобы она выглядела как кнопка, используя CSS.
Пример
Ссылка, оформленная как кнопка.
Prompt
Страница, стилизующая ссылку под кнопку с помощью CSS (красный фон, белый текст, отступы, без подчёркивания, inline-block), с более тёмным красным при наведении/активации. Включает пример ссылки с текстом «Это ссылка».
Вывод: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
</head>
<body>
<a href="https://prompt-cookbook.com">Это ссылка</a>
</body>
</html>
Теги ссылок HTML
Основной тег здесь — <a>, который определяет гиперссылку.