|
Урок 6: Ссылки Всё изученное в предыдущих уроках вы можете применять и для ссылок/links (например изменять шрифт, цвет, подчёркивание и т. д). Новым будет то, что в CSS эти свойства можно определять по-разному, в зависимости от того, посетили уже ссылку, активна ли она, находится ли указатель мыши над ссылкой. Это позволяет добавить интересные эффекты на ваш web-сайт. Для этого используются так называемые псевдоклассы. Что такое псевдокласс? Псевдокласс позволяет учитывать различные условия или события при определении свойств HTM-тэга. Рассмотрим пример. Как вы знаете, ссылки специфицируются в HTML тэгом <a>. В CSS мы также можем использоватьa в качестве селектора:
Ссылка может иметь разные состояния. Например, её уже посетили/visited или ещё нет. Можно использовать псевдоклассы для установки разных стилей посещённых и не посещённых ссылок.
Используйте |a:link| и |a:visited| для не посещённых и посещённых ссылок, соответственно. Активные ссылки имеют псевдокласс a:active, и a:hover, когда указатель - над ссылкой. Мы рассмотрим каждый их этих четырёх псевдоклассов на примерах и с объяснениями. Псевдокласс: link Псевдокласс :link используется для ссылок на страницы, которые пользователь ещё не посещал. В примере кода не посещённые ссылки - синие.
![]() Псевдокласс: visited Псевдокласс :visited используется для ссылок на страницы, которые пользователь посетил. В примере кода посещённые ссылки - фиолетовые.
![]() Псевдокласс: active Псевдокласс :active используется для активных ссылок. В примере активные ссылки имеют жёлтый фон.
![]() Псевдокласс: hover Псевдокласс :hover используется для ссылок, над которыми находится указатель мыши. Это можно использовать для создания интересных эффектов. Например, если мы хотим, чтобы ссылки становились оранжевыми и курсивными при прохождении указателя над ними, то наш CSS должен выглядеть так:
![]() |
|