Ссылки или гиперссылки являются неотъемлемой частью сайта. Это позволяет посетителям перемещаться по сайту. Поэтому правильное оформление ссылок является важным аспектом создания удобного веб-сайта.
Посмотрите Руководство по ссылкам в HTML, чтобы узнать больше о том, как их создавать.
Ссылка может иметь четыре различных состояния— link
, visited
, active
и hover
. Эти четыре состояния ссылки могут быть оформлены по-разному с помощью следующих селекторов-псевдоклассов.
- a:link — определяет стили для обычных или не посещенных ссылок;
- a:visited — определить стили для ссылок, которые пользователь уже посетил;
- a:hover — определяет стили для ссылки, когда пользователь наводит на нее указатель мыши;
- a:active — определяет стили для ссылок, когда на них нажимают.
Вы можете использовать те же CSS-свойства, что и для обычного текста например, например, color
, font
, background
, border
и т. д. для каждого из этих селекторов, чтобы настроить стиль ссылок.
a:link { /* unvisited link */
color: #ff0000;
text-decoration: none;
border-bottom: 1px solid;
}
a:visited { /* visited link */
color: #ff00ff;
}
a:hover { /* mouse over link */
color: #00ff00;
border-bottom: none;
}
a:active { /* active link */
color: #00ffff;
}
Порядок, в котором вы устанавливаете стили для разных состояний ссылок важен, потому что последний стиль имеет приоритет над правилами, определенными ранее.
В общем случае порядок псевдоклассов должен быть следующим — :link
, :visited
, :hover
, :active
, :focus
, чтобы они работали правильно.
Изменение стандартных стилей ссылок
Во всех основных браузерах, таких как Chrome, Firefox, Safari и т. д. , если вы не установите стили для ссылок, по умолчанию они будут подчеркнуты и будут использовать цвета ссылок браузера.
По умолчанию текстовые ссылки будут выглядеть следующим образом в большинстве браузеров:
- Не посещенная ссылка подчеркнута и выделена синим цветом;
- Посещенная ссылка подчеркнута и выделена фиолетовым цветом;
- Активная ссылка подчеркнута и выделена красным цветом.
Тем не менее, нет никаких визуальных изменений ссылки в случае состояния наведения. Она остается синей, фиолетовой или красной в зависимости от того, в каком состоянии (то есть не посещенном, посещенном или активном) она находится.
Теперь давайте посмотрим, как настроить ссылки, переопределив их стили по умолчанию.
Настройка пользовательского цвета ссылок
Просто используйте CSS-свойство color
, чтобы определить цвет по вашему выбору для любого состояния ссылки. Но при выборе цвета убедитесь, что пользователь может четко различать обычный текст и цвет ссылки.
В следующем примере показано как это работает:
a:link {
color: #1ebba3;
}
a:visited {
color: #ff00f4;
}
a:hover {
color: #a766ff;
}
a:active {
color: #ff9800;
}
Удаление подчеркивания по умолчанию из ссылок
Если вам не нравится подчеркивание по умолчанию для ссылок, вы можете просто использовать CSS-свойство text-decoration
, чтобы избавиться от него. Кроме того, вы можете применить другие стили к ссылкам, такие как background-color
, border-bottom
, font-weight: bold
и т. д., чтобы ссылки визуально отличались от обычного текста.
На этом сайте используется свойство border-bottom
для выделения ссылок в тексте.
В следующем примере показано, как удалить или установить подчеркивание для разных состояний ссылки.
a:link, a:visited {
text-decoration: none;
}
a:hover, a:active {
text-decoration: underline;
}
Создание текстовых ссылок в виде кнопок
Вы также можете сделать ваши обычные текстовые ссылки похожими на кнопки, используя CSS. Для этого нам нужно использовать еще несколько CSS-свойств, таких как background-color
, border
, display
, padding
и т. д. Об этих свойствах вы узнаете подробнее в следующих главах.
Следующий пример демонстрирует код для кнопки:
a:link, a:visited {
color: white;
background-color: #1ebba3;
display: inline-block;
padding: 10px 20px;
border: 2px solid #099983;
text-decoration: none;
text-align: center;
font: 14px Arial, sans-serif;
}
a:hover, a:active {
background-color: #9c6ae1;
border-color: #7443b6;
}