CSS Links - Ссылки при наведении
С CSS, ссылки могут быть стилизованы по-разному.
Text Link Text Link Link Button Link ButtonУкладка ссылки
Ссылки могут быть стилизованы под любое свойство CSS (например, color, font-family, background и т.д.).
Пример
a {
color: hotpink;
}
Кроме того, ссылки могут быть стилизованы по-разному в зависимости от того, в каком состоянии они находятся.
Четыре ссылки состояний:
a:link- Обычная, непосещаемая ссылкаa:visited- ссылка, которую посетил пользовательa:hover- ссылка, когда пользователь мыши над нимa:active- Ссылка момент щелчка
Пример
/* 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;
}
При задании стиля для нескольких состояний ссылок существуют некоторые правила заказа:
- a:hover MUST come after a:link and a:visited
- a:active MUST come after a:hover
Оформление текста
Свойство text-decoration в основном используется для удаления подстрочных ссылок:
Пример
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
Цвет фона
Свойство background-color может использоваться для указания цвета фона для ссылок:
Пример
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}
Дополнительные кнопки-ссылки
В этом примере демонстрируется более продвинутый пример, в котором мы объединяем несколько свойств CSS для отображения ссылок в виде полей/кнопок:
Пример
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;
}
Другие примеры
Добавление различных стилей к гиперссылкам
В этом примере демонстрируется добавление других стилей к гиперссылкам.
Advanced-создание кнопки связи с границами
Еще один пример создания полей/кнопок ссылок.
Изменение курсора
Свойство Cursor указывает тип отображаемого курсора.
В этом примере демонстрируются различные типы курсоров (могут быть полезны для ссылок).