В этом уроке мы рассмотри работу со ссылками, посмотрим параметры для активных и не активных ссылок. Так же к ссылкам можно применять все параметры, что мы рассматривали в предыдущих уроках. Новым будет то, что в CSS эти свойства можно определять по-разному, в зависимости от того, посетили уже ссылку, активна ли она, находится ли указатель мыши над ссылкой. Это позволяет добавить интересные эффекты на ваш web-сайт. Для этого используются так называемые псевдоклассы.
Что такое псевдокласс?
Псевдокласс позволяет учитывать различные условия или события при определении свойств HTM-тэга.
Рассмотрим пример. Как вы знаете, ссылки специфицируются в HTML тэгом <a>. В CSS мы также можем использовать a в качестве селектора:
a {color: blue;}
Ссылка может иметь разные состояния. Например, её уже посетили/visited или ещё нет. Можно использовать псевдоклассы для установки разных стилей посещённых и непосещённых ссылок.
a:link {color: blue;}
a:visited {color: red;}
Используйте |a:link| и |a:visited| для непосещённых и посещённых ссылок, соответственно. Активные ссылки имеют псевдокласс a:active, и a:hover, когда указатель - над ссылкой.
Рассмотрим каждый их этих четырёх псевдоклассов на примерах и с объяснениями.
Псевдокласс: link
Псевдокласс :link используется для ссылок на страницы, которые пользователь ещё не посещал.
В примере кода непосещённые ссылки - синие.
a:link {color: #6699CC;}
Псевдокласс: visited
Псевдокласс :visited используется для ссылок на страницы, которые пользователь посетил. В примере кода посещённые ссылки - фиолетовые.
a:visited {color: #660099;}
Псевдокласс: active
Псевдокласс :active используется для активных ссылок.
В примере активные ссылки имеют жёлтый фон.
a:active {background-color: #FFFF00;}
Псевдокласс: hover
Псевдокласс :hover используется для ссылок, над которыми находится указатель мыши.
Это можно использовать для создания интересных эффектов. Например, если мы хотим, чтобы ссылки становились оранжевыми и курсивными при прохождении указателя над ними, то наш CSS должен выглядеть так:
a:hover {color: orange;font-style: italic;}
Расстояние между буквами
В уроке работы с текстом, расстояние между символами можно установить свойством letter-spacing. Это можно применить для ссылки:
a:hover {letter-spacing: 10px; font-weight:bold; color:red;}
UPPERCASE и lowercase
В уроке работы с текстом мы рассмотрели свойство text-transform, которое может переключать символы с верхнего на нижний регистр. Это также можно использовать для создания эффектов на ссылке:
a:hover {text-transform: uppercase;font-weight:bold;color:blue;background-color:yellow;}
Удаление подчёркивания ссылок
Обычный вопрос - как удалить подчёркивание ссылок?
Вы должны точно определить, нужно ли убрать подчёркивание ссылок, так как это может значительно снизить использование вашего web-сайта. Люди привыкли видеть на web-страницах синие подчёркнутые ссылки и знают, что по ним нужно щёлкать. Если вы уберёте подчёркивание и измените цвет ссылок, весьма вероятно, что это смутит пользователей и они не получат доступа ко всему содержимому вашего сайта web-сайт.
Вообще-то удалить подчёркивание ссылок очень просто. Как вы, может быть, помните из урока работы с текстом, свойство text-decoration можно использовать для определения подчёркивания текста. Для удаления подчёркивания просто установите в text-decoration значение none.
a {text-decoration:none;}
Альтернативно можно также установить text-decoration, наряду с другими свойствами, для всех четырёх псевдоклассов.
a:link {color: blue;text-decoration:none;}
a:visited {color: purple;text-decoration:none;}
a:active {background-color: yellow;text-decoration:none;}
a:hover {color:red;text-decoration:none;}
Задание
Создайте документ со ссылками, что бы они отображались как показано на рисунке в начале статьи.
