Оформление ссылки в CSS

Автор: | 11 мая, 2020

Возможно Вы часто наблюдали как на разных сайтах при наведении на пункт меню например, становится текст или все что вокруг него другого цвета. Также, возможно появление или исчезновение подчеркивания одновременно с изменением цвета ссылки.

Все это реализовано при помощи использования CSS, а точнее с помощью псевдоклассов – которые необходимы для учета определенных свойств html документа.

Как использовать псевдоклассы в CSS применительно к ссылкам?

В первую очередь необходимо добавить элемент А. Для него пишем наш псевдокласс, потом двоеточие, имя псевдокласса и в самом конце в специальных скобках – необходимый стиль.

А: ИМЯ ПСЕВДОКЛАССА { … определенный стиль …}

В CSS для ссылок применяют такие псевдоклассы:

A:link { … ссылка выглядит согласно настройкам по умолчанию… }
A:active { … задаются параметры как будет выглядеть ссылка при клике на нее… }
A:visited { … стиль ссылки после посещения… }
А:hover { … внешний вид ссылки, при наведении указателя мыши … }

Оформленная ссылка в CSS

Давайте оформим ссылку в CSS, чтобы цвет текста был черного цвета, при наведении на него – он становился красным, зеленым – при переходе по ссылке и серым – когда ссылка уже будет посещена. Код будет выглядеть следующим образом:

a:link {
color: black
}
a:visited {
color: grey;
}
a:hover {
color: red;
}
a:active {
color: green;
}

Можно для каждого случая задать любой цвет на свой вкус или сделать, чтобы ссылка не меняла цвет вообще, указав цвет black (или какой-нибудь другой) во всех случаях.
Запись можно значительно сократить, уменьшив объем CSS документа:

a:link, a:visited, a:hover, a:active {color:black; text-decoration:none;}

В принципе, если нет необходимости изменения цвета и других свойств ссылки с помощью CSS псевдоклассы можно вообще не применять и код принимает такой вид:

a {color:black; text-decoration:none;}

Таким образом, для оформления CSS ссылки используется множество способов, что дает возможность менять дизайн сайта под себя.

Следующая страницаТипы селекторов в CSS

Предыдущая – Списки в CSS

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *