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