Начало
Урок 7: Ссылки в CSS
Наверное Вы не раз замечали на различных сайтах, как при наведении на ссылку меняется ее внешний вид. Ну например исчезает подчеркивание или меняется цвет. Это делает как-раз CSS , а именно за это отвечают псевдоклассы - классы, способные учитывать те или иные условия , при определении свойств html элемента.
Как применить псевдокласс к ссылкам?
Записываем для начала элемент А, к которому мы будем применять псевдокласс, затем ставим двоеточие и указываем имя псевдокласса, а уже потом в фигурных скобках указываем нужный стиль.
Ну вот для ссылок например бывает четыре псевдокласса:
A:active{ ... стиль оформления ссылки в момент нажатия... }
A:visited{ ... стиль оформления посещенной ссылки... }
А:hover{ ... стиль оформления ссылки, на которую наведен указатель мыши ... }
Ну теперь давайте я приведу вам некоторые примеры для лучшего понимания. Для начала, посмотрите, как выглядят ссылки по умолчанию:
Обычная ссылка (a:link)
Посещенная ссылка (a:visited)
При наведении курсора на ссылку (a:nover)
Ссылка в момент нажатия (a:active)
Видите, только посещенная ссылка отличается от других, а так в принципе все одинаково. Да и цвета не очень. Попробуем создать свой стиль:
color: blue;
}
a:visited{
color:gray;
}
a:hover {
color:red;
text-decoration:none;
}
a:active {
color:green;
text-decoration:none;
}
В примере выше ссылка ведет сама на себя, и поэтому чтобы увидеть класс уже посещенной ссылки, нужно обновить страницу.
Вообще вариантов оформления ссылки может быть множество, и каждый делает под конкретный дизайн что-то свое. Вот еще примерчик:
color: blue;
}
a:visited{
color:gray;
}
a:hover {
color:red;
text-decoration:none;
font-weight:bold;
}
a:active {
color:green;
text-decoration:none;
text-transform:uppercase;
}
Бывают случаи, когда мы не хотим вообще чтобы ссылка визуально выделялась на фоне текста. Решение опять же в CSS:
color: black;
text-decoration:none;
}
a:visited{
color: black;
text-decoration:none;
}
a:hover {
color: black;
text-decoration:none;
}
a:active {
color: black;
text-decoration:none;
}
Если для всех псевдоклассов стиль одинаковый, как в примере выше, то это можно записать и короче:
А можно и вовсе без использования псевдоклассов:
Ну вот и все по ссылкам в CSS. Следующий урок будет очень нужным и интересным, там мы рассмотрим очень важный момент, который я советую Вам хорошенько выучить, без него дела не будет :)
См. также
Следующий - Урок 8: Типы селекторов в CSS
Предыдущий - Урок 6: Списки в CSS
