Ссылки в CSS
В этом разделе мы объясним, как стилизовать ссылки и сделать их более привлекательными.
Ссылка имеет следующие состояния:
a:link- обычная непосещённая ссылкаa:visited- ссылка, которую пользователь уже посетилa:hover- ссылка при наведении курсораa:active- ссылка в момент нажатияa:focus- ссылка, получившая фокус с клавиатуры
Мы рассмотрим следующие свойства:
Оформление текста
Как вы помните, при создании ссылки она по умолчанию подчёркивается. Чтобы убрать подчёркивание, нужно использовать свойство text-decoration.
Пример использования свойства text-decoration для стилизации ссылки:
Примеры оформления ссылок в CSS (text-decoration)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<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="#"> This is some link.</a>
</body>
</html>Разберём смысл нашего кода.
Здесь вы видите, что ссылка в первом и втором состояниях будет без подчёркивания. Подчёркивание появляется, когда пользователь наводит на неё курсор или нажимает.
Вы можете проверить это в своём браузере, используя свои редакторы или наш онлайн редактор.
Эти стили можно прописать либо в разделе <head>, либо в отдельном CSS-файле, который вы подключите к своей веб-странице.
Цвет
Для установки цвета ссылки используется свойство color.
Например, если мы хотим, чтобы ссылка по умолчанию была чёрной, а в третьем состоянии (a:hover) имела цвет #1c87c9, нужно написать следующее:
Пример использования свойства color для стилизации ссылки:
Примеры изменения цвета ссылок в CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a:link {
color: #000000;
}
a:visited {
color: #000000;
}
a:hover {
color: #1c87c9;
}
a:active {
color: #1c87c9;
}
</style>
</head>
<body>
<a href="#">This is some link.</a>
</body>
</html>Результат
Цвет фона
Что можно сделать, если мы хотим, чтобы у ссылки был фон?
Для этого достаточно применить свойство background-color.
Например, наша ссылка будет иметь серый фон, а при наведении курсора он изменится на #1c87c9.
Если первое (a:link) и второе (a:visited) состояния имеют одинаковый цвет фона, можно просто использовать селектор a.
Пример использования свойства background-color для стилизации ссылки:
Примеры изменения цвета фона ссылок в CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a {
background-color: #555555;
}
a:hover {
background-color: #1c87c9;
}
a:active {
background-color: #1c87c9;
}
</style>
</head>
<body>
<a href="#">This is some link.</a>
</body>
</html>Вы можете выбрать нужный цвет с помощью Color Picker.
Практика
Какие свойства CSS используются для изменения внешнего вида ссылок?