Главная | Регистрация | Вход | RSS | Четверг, 28.03.2024, 14:04 | |||||||||||||||||
КАК СОЗДАТЬ СВОЙ САЙТ | ||||||||||||||||||
Урок "7"Ссылки в CSSНаверное Вы не раз замечали на различных сайтах, как при наведении на ссылку меняется ее внешний вид. Ну например исчезает подчеркивание или меняется цвет. Это делает как-раз CSS , а именно за это отвечают псевдоклассы - классы, способные учитывать те или иные условия , при определении свойств html элемента. Как применить псевдокласс к ссылкам? Записываем для начала элемент А, к которому мы будем применять псевдокласс, затем ставим двоеточие и указываем имя псевдокласса, а уже потом в фигурных скобках указываем нужный стиль. А : ИМЯ ПСЕВДОКЛАССА { ...стиль ...} Ну вот для ссылок например бывает четыре псевдокласса: A:link { ... стиль оформления обычной ссылки... } Ну теперь давайте я приведу вам некоторые примеры для лучшего понимания. Для начала, посмотрите, как выглядят ссылки по умолчанию: Видите, только посещенная ссылка отличается от других, а так в принципе все одинаково. Да и цвета не очень. Попробуем создать свой стиль:
a:link { В примере выше ссылка ведет сама на себя, и поэтому чтобы увидеть класс уже посещенной ссылки, нужно обновить страницу. Вообще вариантов оформления ссылки может быть множество, и каждый делает под конкретный дизайн что-то свое. Вот еще примерчик: a:link { Бывают случаи, когда мы не хотим вообще чтобы ссылка визуально выделялась на фоне текста. Решение опять же в CSS: a:link { Если для всех псевдоклассов стиль одинаковый, как в примере выше, то это можно записать и короче: a:link, a:visited, a:hover, a:active {color:black; text-decoration:none;} А можно и вовсе без использования псевдоклассов: a {color:black; text-decoration:none;}
Ну вот и все по ссылкам в CSS. Следующий урок будет очень нужным и интересным, там мы рассмотрим очень важный момент, который я советую Вам хорошенько выучить, без него дела не будет :)
См. также Следующий - Урок 8: Типы селекторов в CSS |
|