Ссылки CSS
С помощью CSS ссылки можно стилизовать множеством различных способов.
Стилизация ссылок с помощью CSS
Ссылки можно стилизовать любым свойством CSS, таким как color, font-family и background.
Пример
Цвет ссылки установлен в hotpink.
Prompt
HTML-страница, стилизующая ссылку с помощью базового CSS-свойства.
Во внутреннем блоке
<style> задайте a { color: hotpink; }. Добавьте ссылку в body.
Результат: полная HTML-страница "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
a {
color: hotpink;
}
</style>
</head>
<body>
<p>Style a link with the color property:</p>
<a href="https://prompt-cookbook.com">This is a link</a>
</body>
</html>
Стилизация ссылок в зависимости от состояния
Ссылки также можно стилизовать по-разному в зависимости от их состояния. Четыре состояния ссылки:
a:link— обычная, непосещённая ссылка.a:visited— ссылка, которую пользователь посетил.a:hover— ссылка, когда пользователь наводит на неё курсор мыши.a:active— ссылка в момент клика по ней.
При настройке стилей для нескольких состояний важен порядок: a:hover должен идти после a:link и a:visited, а a:active должен идти после a:hover.
Пример
Каждому состоянию ссылки присвоен свой цвет в требуемом порядке.
Prompt
HTML-страница, стилизующая ссылку по-разному для каждого из её четырёх состояний.
Во внутреннем блоке
<style> установите a:link красным, a:visited зелёным, a:hover ярко-розовым, а a:active синим. Сохраните именно этот порядок. Добавьте ссылку в body.
Результат: полная HTML-страница "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
</style>
</head>
<body>
<a href="https://prompt-cookbook.com">This is a link</a>
</body>
</html>
Ссылки CSS — оформление текста
Свойство text-decoration в основном используется для удаления подчёркивания у ссылок.
Пример
Подчёркивание убрано для обычных и посещённых ссылок и добавляется при наведении и в активном состоянии.
Prompt
HTML-страница, использующая text-decoration для управления подчёркиванием ссылок в зависимости от состояния.
Во внутреннем блоке
<style> уберите подчёркивание для a:link и a:visited (text-decoration: none) и добавьте его для a:hover и a:active (text-decoration: underline). Добавьте ссылку в body.
Результат: полная HTML-страница "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
</style>
</head>
<body>
<a href="https://prompt-cookbook.com">This is a link</a>
</body>
</html>
Ссылки CSS — цвет фона
Свойство background-color позволяет задать цвет фона для ссылок.
Пример
Каждое состояние ссылки получает свой цвет фона.
Prompt
HTML-страница, которая задаёт ссылкам цвет фона в зависимости от их состояния.
Во внутреннем блоке
<style> установите фон a:link жёлтым, a:visited голубым (cyan), a:hover светло-зелёным, а a:active ярко-розовым. Добавьте ссылку в body.
Результат: полная HTML-страница "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}
</style>
</head>
<body>
<a href="https://prompt-cookbook.com">This is a link</a>
</body>
</html>
Больше примеров
Вы можете комбинировать эти свойства, чтобы ссылки выглядели как кнопки.
Заполненная кнопка-ссылка
Ссылка, стилизованная как сплошная красная кнопка, которая темнеет при наведении.
Prompt
HTML-страница, стилизующая ссылку так, чтобы она выглядела как сплошная кнопка.
Во внутреннем блоке
<style> задайте a:link и a:visited красный фон, белый текст, отступ, центрированный текст, без подчёркивания и отображение inline-block. При a:hover и a:active сделайте фон темнее (красным). Добавьте ссылку в body.
Результат: полная HTML-страница "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 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">This is a link</a>
</body>
</html>
Кнопка-ссылка с рамкой
Ссылка, стилизованная как кнопка с рамкой, которая заполняется зелёным цветом при наведении.
Prompt
HTML-страница, стилизующая ссылку так, чтобы она выглядела как кнопка с рамкой, заполняющаяся цветом при наведении.
Во внутреннем блоке
<style> задайте a:link и a:visited белый фон, чёрный текст, зелёную рамку, отступ, центрированный текст, без подчёркивания и отображение inline-block. При a:hover и a:active задайте зелёный фон и белый текст. Добавьте ссылку в body.
Результат: полная HTML-страница "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
a:link, a:visited {
background-color: white;
color: black;
border: 2px solid green;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: green;
color: white;
}
</style>
</head>
<body>
<a href="https://prompt-cookbook.com">This is a link</a>
</body>
</html>