Каждая ссылка может находиться в разных состояниях, причём можно отдельно установить стиль ссылки для каждого состояния. Итак, у любой ссылки есть следующие состояния, которые управляются соответствующими псевдоклассами:
- :link — ссылка с атрибутом href, по которой пока не переходили;
- :active — активная ссылка (по ней щёлкнули, но кнопку мыши не отпустили);
- :visited — посещённая ссылка (по которой уже щёлкали) и сохранённая в истории браузера;
- :hover — ссылка, на которую навели курсор мыши;
- :focus — ссылка, получившая фокус (это происходит, если перейти к ссылке, нажимая клавишу Tab на клавиатуре).
:link
Псевдокласс :link применяет стиль ко всем ссылкам с атрибутом href и не применяет его к ссылкам-заполнителям (ссылки без href). В примере 1 показано как задать цвет ссылок.
Пример 1. Цвет ссылок
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ссылки</title>
<style>
a:link {
color: red; /* Красный цвет ссылок */
}
</style>
</head>
<body>
<p><a href="page/link.html">Ссылка на документ</a></p>
<p><a>Ссылка-заполнитель</a></p>
<p>Обычный текст</p>
</body>
</html>
Здесь цвет ссылки с атрибутом href установлен красным (рис. 1), а цвет заполнителя остаётся неизменным (чёрным по умолчанию).
Рис. 1. Цвет ссылки в браузере
В зависимости от востребованности заполнителя возможны три варианта стилизации ссылок.
1. Заполнитель на веб-странице не встречается. Для стилизации всех ссылок достаточно использовать селектор a.
a { color: red; }
2. Заполнитель встречается, но его стиль оставляем исходным. Для стилизации обычных ссылок используем псевдокласс :link.
a:link { color: red; }
3. Заполнитель встречается, но его стиль требуется задать отдельно. В таком случае используем два селектора: a — для обычных ссылок; a:not([href]) — для ссылок без атрибута href. В примере 2 показано как это сделать.
Пример 2. Цвет ссылки и заполнителя
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ссылки</title>
<style>
a { color: red; /* Красный цвет */ }
a:not([href]) { color: green; /* Зелёный цвет */ }
</style>
</head>
<body>
<p><a href="page/link.html">Ссылка на документ</a></p>
<p><a>Ссылка-заполнитель</a></p>
<p>Обычный текст</p>
</body>
</html>
:active
Псевдокласс :active задаёт стиль ссылок в активном состоянии, когда по ссылке щёлкнули, но ещё не отпустили кнопку мыши. По умолчанию активная ссылка выделяется красным цветом, но можно по желанию изменить этот стиль (пример 3).
Пример 3. Использование :active
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ссылки</title>
<style>
a { color: green; }
a:active {
background-color: red; /* Цвет фона */
color: white; /* Цвет текста */
}
</style>
</head>
<body>
<p><a href="page/link.html">Ссылка на документ</a></p>
<p>Обычный текст</p>
</body>
</html>
Здесь у активной ссылки одновременно меняется цвет фона и текста.
:visited
Псевдокласс :visited задаёт стиль посещённых ссылок, что позволяет различать ссылки, по которым уже переходил пользователь. По умолчанию, в браузере такие ссылки выделяются фиолетовым цветом. С помощью стилей посещённым ссылкам можно задать произвольный цвет, фон и рамку. Напрямую для :visited работает только свойство color, которое устанавливает цвет посещённой ссылки. Такие свойства, как background-color (цвет фона) и border (параметры рамки) для :visited работать не будут, если подобные (с другими значениями) не установлены для селектора a.
В примере 4 показано, как изменить цвет фона, текста и рамки у посещённых ссылок.
Пример 4. Использование :visited
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ссылки</title>
<style>
a {
background-color: white; /* Цвет фона */
color: green; /* Цвет ссылок */
border: 1px solid yellow; /* Параметры рамки */
padding: 4px; /* Поля вокруг текста */
}
a:visited {
background-color: purple; /* Цвет фона у посещённых ссылок */
color: white; /* Цвет посещённых ссылок */
border: 1px solid red; /* Параметры рамки */
}
</style>
</head>
<body>
<p><a href="page/link.html">Ссылка на документ</a></p>
<p>Обычный текст</p>
</body>
</html>
Псевдокласс :visited, как и другие, частично наследует свойства от селектора a, поэтому значение padding у посещённых ссылок сохранится.
:hover
Псевдокласс :hover отвечает за стиль ссылки, когда на неё наведён курсор мыши. В примере 5 цвет ссылки плавно меняется с синего на красный.
Пример 5. Использование :hover
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ссылки</title>
<style>
a {
color: blue; /* Цвет ссылок */
transition: 0.5s; /* Время перехода */
}
a:hover {
color: red; /* Цвет ссылки при наведении */
}
</style>
</head>
<body>
<p><a href="page/link.html">Ссылка на документ</a></p>
<p>Обычный текст</p>
</body>
</html>
Свойство transition отвечает за время смены цвета с одного на другой, в данном случае оно составляет полсекунды. Если это свойство убрать, то цвет будет меняться мгновенно.
:focus
Псевдокласс :focus устанавливает стиль ссылки в момент получения ею фокуса, что происходит, если перейти к выбранной ссылке через нажатие на клавишу Tab. Фокус позволяет активировать ссылки без помощи мыши, что помогает пользоваться сайтом ряду людей, которые в силу разных причин не могут или не хотят пользоваться мышью.
По умолчанию ссылка с фокусом выделяется синей рамкой, но через CSS можно поменять вид такой ссылки, чтобы она соответствовала дизайну веб-страницы. В примере 6 вокруг ссылки с фокусом добавляется оранжевый контур через свойство outline.
Пример 6. Использование :focus
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ссылки</title>
<style>
a:focus {
outline: 2px solid orange; /* Параметры контура */
}
</style>
</head>
<body>
<p><a href="https://google.ru">Ссылка на Google</a></p>
</body>
</html>
Здесь используется сплошной контур оранжевого цвета толщиной два пикселя. Результат данного примера показан на рис. 2.
Рис. 2. Вид ссылки в момент получения фокуса
Порядок псевдоклассов
Не все из перечисленных псевдоклассов нужно обязательно включать в свой стиль. Если какого-то из них нет, то браузер использует значение по умолчанию. К примеру, если не указать :active, то активная ссылка в любом случае будет выделяться красным цветом.
Но что имеет значение, так это в каком порядке псевдоклассы для ссылок идут друг за другом в коде CSS. Вот их порядок:
- :link
- :visited
- :hover
- :focus
- :active
Если этот порядок нарушить, например :visited указать ниже :hover, тогда стиль посещённых ссылок не будет меняться при наведении.
Итоги
- Стиль всех ссылок устанавливается через селектор a.
- Селектор a:not([href]) позволяет задать стиль отдельно для ссылок-заполнителей.
- Для изменения стиля активной ссылки применяется псевдокласс a:active.
- Стиль посещённых ссылок меняется через псевдокласс a:visited.
- Чтобы задать стиль ссылки при наведении на неё курсора мыши используется псевдокласс a:hover.
- Стиль ссылки получившей фокус устанавливается через псевдокласс a:focus.
- Важно соблюдать порядок следования псевдоклассов в коде CSS.
Перейти к заданиям
Автор: Влад Мержевич
Последнее изменение: 05.08.2023