Ссылка — это соединение одной веб-страницы с другой, и CSS может стилизовать ссылки различными способами с помощью разных атрибутов.
1. Стиль ссылки
Ссылки являются важной частью веб-сайта. Вы можете увидеть множество ссылок практически на каждой веб-странице. Разумный дизайн стилей ссылок может улучшить внешний вид веб-страницы. Ссылки имеют четыре разных состояния: ссылка, посещенное, активное и наведение. Вы можете установить разные стили для четырех состояний ссылки с помощью следующих селекторов псевдоклассов:
(1) a: link => Это обычная непосещенная ссылка.
(2) a: visited => Это ссылка, которую пользователь посетил хотя бы один раз.
(3) a:hover => когда на него наводится указатель мыши, это ссылка
(4) a: active => Это ссылка, по которой только что нажали.
грамматика:
а: ссылка {цвет: color_name;}color_name может иметь любой формат, например имя цвета (зеленый), шестнадцатеричное значение (#5570f0) или значение RGB — rgb(25, 255, 2). Существует еще одно состояние «a:focus», которое используется для фокусировки, когда пользователь использует клавишу табуляции для просмотра ссылки.
Значение по умолчанию для ссылки:
(1) По умолчанию созданные ссылки подчеркиваются.
(2) При наведении курсора мыши на ссылку она изменится на значок руки.
(3) Обычные/непосещенные ссылки выделены синим цветом.
(4) Посещенные ссылки окрашены в фиолетовый цвет.
(5 ) Активные ссылки выделены красным.
(6) Когда ссылка находится в фокусе, вокруг нее появляется контур.
Например:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>CSSlinks</title><style>p{font-size:25px;text-align:center;</style></head ><body><p><ahref=https://www.dotcpp.com/>Простая ссылка</a></p></body></html>Отображаемые результаты следующие:
2. Как установить стиль ссылки с помощью CSS?
Вот некоторые основные свойства CSS для ссылок:
(1) атрибут цвета
Это свойство CSS используется для изменения цвета текста ссылки.
грамматика:
а {цвет: color_name;}(2) атрибут семейства шрифтов
Это свойство используется для изменения типа шрифта ссылки с помощью свойства font-family.
грамматика:
a {семейство шрифтов: имя семейства;}(3) атрибут text-decoration
Этот атрибут в основном используется для удаления или добавления подчеркиваний и других изменений ссылок.
грамматика:
а {текст-декорация: нет;}Пример:
<style>/*Установите размер шрифта для улучшения видимости*/p{font-size:2rem;}/*Удалите подчеркивания с помощью атрибута text-decoration*/a{text-decoration:none;}/*Вы также можете использовать к следующим стилям добавьте подчеркивание text-decoration:underline;*/</style>(4) атрибут цвета фона
Это свойство используется для установки цвета фона ссылки.
грамматика:
a {background-color:color_name;}