Эффекты ссылок
Существуют стандартные для всех браузеров состояния ссылок, управлять которыми можно с помощью селекторов псевдоклассов. Для стилей ссылок доступны следующие селекторы:- :link — упралвяет состоянием ссылки до ее активации.
- :visited — управляет состоянием, в которое переходит ссылка после ее активации.
- :hover — управляет состоянием, когда указатель мыши наведен на ссылку.
- :active — управляет состоянием, возникающим при щелчке на ссылке для ее активации.
При этом важен порядок следования псевдоклассов — :visited указывается до :hover, иначе посещённые ссылки не будут изменять свой цвет при наведении на них курсора.
Рассмотрим на примере:
Результат работы данного кода: ссылка
Несколько стилей ссылок с использованием селекторов классов и селекторов потомков
Допустим, нам потребовалось создать область навигации на основе ссылок cо своим оформлением, а к ссылкам в тексте должен быть применен другой стиль. Решить эту задачу можно двумя способами: с использованием селекторов классов или селекторов потомков.Первый способ. Несколько стилей ссылок с использованием селекторов классов.
Чтобы применить класс к ссылкам панели навигации, к каждому тегу ссылки панели навигации необходимо добавить атрибут class="nav":
Второй способ. Несколько стилей ссылок с использованием селекторов потомков.
Недостаток первого способа заключается в добавлении множества атрибутов class в HTML-документ.
Этой ситуации можно избежать, если воспользоваться селекторами потомков. В рассмотренном ниже
примере особый стиль будет применен ко всем элементам a, являющимся потомками родительского
элемента с идентификатором nav.
Элемент div является универсальным блочным элементом (подробнее о блочных и строчных элементах в разделе "Поля, границы, отступы") и предназначен для группирования элементов документа с целью изменения вида содержимого через стили. Чтобы применить стиль к ссылкам панели навигации, необходимо создать блок с помощью тега div с идентификатором nav:
Существует важное отличие между селекторами класса и ID-селекторами. Селекторы класса можно использовать в документе любое количество раз, а ID-селекторы — только один раз.
