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