Главная Случайная страница Контакты | Мы поможем в написании вашей работы! | ||
|
Наверное Вы не раз замечали на различных сайтах, как при наведении на ссылку меняется ее внешний вид. Например, исчезает подчеркивание или меняется цвет. Это делает CSS, а именно, за это отвечают псевдоклассы - классы, способные учитывать те или иные условия при определении свойств html элемента.
Применение псевдокласса к ссылкам:
А: ИМЯ ПСЕВДОКЛАССА {...стиль...}
Для ссылок например бывает четыре псевдокласса:
A:link {... стиль оформления обычной ссылки... }
A:active {... стиль оформления ссылки в момент нажатия... }
A:visited {... стиль оформления посещенной ссылки... }
А:hover {... стиль оформления ссылки, на которую наведен указатель мыши... }
ПРИМЕРЫ: Для начала, посмотрите, как выглядят ссылки по умолчанию:
Видите, только посещенная ссылка отличается от других, а так, в принципе, все одинаково.
Попробуем создать свой стиль:
a:link { color: blue; } a:visited { color:gray; } a:hover { color:red; text-decoration:none; } a:active { color:green; text-decoration:none; } |
В примере ссылка ведет сама на себя, и поэтому чтобы увидеть класс уже посещенной ссылки, нужно обновить страницу.
Вообще вариантов оформления ссылки может быть множество, и каждый делает под конкретный дизайн что-то свое. Вот еще пример:
a:link { 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:
a:link { 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; } |
Если для всех псевдоклассов стиль одинаковый, как в примере выше, то это можно записать и короче:
a:link, a:visited, a:hover, a:active {color:black; text-decoration:none;}
А можно и вовсе без использования псевдоклассов:
a {color:black; text-decoration:none;}
При установке стиля для нескольких состояний ссылки, есть несколько порядковых правил:
Дата публикования: 2014-11-03; Прочитано: 298 | Нарушение авторского права страницы | Мы поможем в написании вашей работы!