Цикл статей «CSS учебник».
Следующая статья — «CSS списки».
Предыдущая статья — «CSS шрифт».
Псевдоклассы в CSS позволяют задавать свойства, которые будут применяться при выполнении определённых условий. В этой статье описываются псевдоклассы для ссылок.
Псевдокласс добавляется к селектору элемента, отделяясь от него символом «:».
Четыре псевдокласса для ссылок:
- link (НЕпосещённая ссылка)
- visited (посещённая ссылка)
- active (активная ссылка)
- hover (курсор мыши навис над ссылкой)
Имеет смысл hover и active описывать в конце, чтобы их свойства не перекрывались правилами из link и visited.
Пример:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!DOCTYPE html> <html> <head> <title>Псевдоклассы для ссылок в CSS</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <style> /* Непосещённые ссылки сделаем зелёными. */ a:link { color : #0000ff; } /*Посещённые ссылки сделаем серыми. */ a:visited { color : #808080; } /* Ссылка при нависании курсора подсвечивается синим фоном. */ a:hover { background-color : #0000f0; } /* Активную ссылку сделаем с зелёным фоном. Это мы объявили после описания ссылки с псевдоклассом hover, так как при клике на ссылку курсор мыши нависает над ссылкой, и если описать hover после active, то ссылка будет и hover и active, и будет применяться hover, как последний описанный. */ a:active { background-color : #00f000; } </style> </head> <body> <p> <a href="http://yandex.ru">http://yandex.ru</a> </p> <p> <a href="http://google.com">http://google.com</a> </p> <p> <a href="https://urvanov.ru/2016/02/18/css-ссылки/">CSS ссылки</a> </p> </body> </html> |
Посмотреть результат. Обратите внимание на цвет фона ссылок при наведении и клике, а также на цвет посещённых ссылок.
Цикл статей «CSS учебник».
Следующая статья — «CSS списки».
Предыдущая статья — «CSS шрифт».