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