CSS Ссылки
Курс по основам CSS. W3Schools на русском языке. Уроки для начинающих
С помощью CSS ссылки можно стилизовать разными способами.
Текстовая ссылка Текстовая ссылка Кнопочная ссылка Кнопочная ссылкаСтилизация ссылок
Ссылки могут быть оформлены с помощью любого свойства CSS (например, color, font-family,
background и т.д.).
Кроме того, ссылки могут быть оформлены по-разному в зависимости от того, в каком состоянии они находятся.
Четыре состояния ссылок:
a:link- обычная, не посещенная ссылкаa:visited- ссылка, которую посетил пользовательa:hover- ссылка, когда пользователь наводит на неё курсор мышиa:active- ссылка в тот момент, когда она нажата (активная)
Пример
/* непосещенная ссылка */
a:link {
color: red;
}
/* посещенная ссылка */
a:visited {
color: green;
}
/* ссылка при наведении мыши */
a:hover {
color: hotpink;
}
/* активная ссылка */
a:active {
color: blue;
}
Попробуйте сами »
При настройке стиля для нескольких состояний ссылок существуют некоторые правила порядка:
- a:hover ДОЛЖЕН следовать после a:link и a:visited
- a:active ДОЛЖЕН следовать после a:hover
Text Decoration - Оформление текста
Свойство text-decoration в основном используется для удаления подчеркиваний из ссылок:
Пример
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
Попробуйте сами »
Background Color - Цвет фона
Свойство 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;
}
Попробуйте сами »
Больше примеров
Добавить разные стили к гиперссылкам
Этот пример демонстрирует, как добавить другие стили к гиперссылкам.
Дополнительно - Создать кнопку-ссылку с границами
Еще один пример того, как создавать поля ссылок/кнопки.
Изменить курсор
Свойство курсора определяет тип курсора для отображения. Этот пример демонстрирует различные типы курсоров (может быть полезным для ссылок).