Войти
s-lub » Учебники » CSS » Ссылки в CSS

Ссылки в CSS

Ссылки в CSS

В этой статье мы разберём как правильно оформлять ссылки в тексте, какие псевдоклассы бывают и за что конкретно они отвечают.

Начнём по порядку.

Оформление любых ссылок в CSS начинается с элемента «а», затем идет двоеточие «:», а уже потом имя псевдокласса и его стиль.

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

Стили оформления любого псевдокласса такие же, как и у обычного текста (мы уже разбирали их в статьях текст CSS и шрифт CSS).

Пример:
a:link {color: blue ;} – ссылка в тексте будет синего цвета;
a:visited {color: gray;} – если вы по ней уже переходили, то она будет серого цвета;
a:hover { color: red; text-decoration: underline;} – при наведении мышкой на ссылку она будет подчёркиваться снизу и менять цвет на красный;
a:active {color:green; text-decoration: underline;} – в момент нажатия ссылка будет подчёркнута снизу и зелённого цвета.

Если вы хотите что бы ссылка всегда была одинаковой и отличалась от простого теста, то можно и не использовать псевдоклассы, вот пример:

a {color: red; text-decoration: underline;} – все ссылки в тексте будут подчёркнуты снизу и красного цвета.

Мы прописали цвета словами, но если вы хотите более точно подобрать цвет, лучше пользоваться шестнадцатеричными значениями.

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