Вы, наверное, замечали не раз, что после того, как вы переходите по ссылке, а потом снова возвращаетесь на эту
страницу, цвет этой ссылки изменяется: по умолчанию, все непосещёные ссылки обозначены синим цветом, а посещённые -
фиолетовым. Причём сама ссылка обозначается подчёркиванием, а при наведении курсора это подчёркивание исчезает.
Но на других сайтах можно увидеть иную картину: и цвет всех непосещённых ссылок, и посещённых может быть другим,
также и ссылки могут быть не выделены подчёркиванием, или же выделаются при наведении курсора фоном... в общем,
варианты могут быть самыми разными. Как это можно сделать на своём сайте? Давайте разбираться.
Подобные динамические эффекты на странице создаются с помощью псевдоклассов -
добавления текстовых обозначений состояний с нужными значениями к определённым селекторам,
к которым их можно применить. Синтаксис при этом следующий:
селектор:псевдокласс {описание правил стиля}
Сначала указывается селектор, потом через двоеточие к нему добавляется псевдокласс и далее описываются свойства.
Если псевдокласс указывается без селектора, то тогда его свойства будут применяться ко всем элементам страницы.
Псевдоклассы применяются к именам идентификаторов (ID), классов, например:
a.nav:hover {...},
а также к контекстным селекторам:
.linkStyle a:active {...}.
По отношению к ссылкам можно выделить 4 состояния и, соответственно, 4 псевдокласса:
непосещённая ссылка, обозначается псевдоклассом :link, это состояние можно не указывать, однако если
у вас предполагается наличие якорей на странице, то свойства, описанные для a:link {...}, не будут действовать
на ссылки-якоря.
ссылка при наведении на неё курсора мыши - псевдокласс :hover - ссылка ещё не активизирована,
ссылка в момент клика - псевдокласс :active - можно задать стиль ссылок в момент активации ссылки.
посещённая ссылка - псевдокласс :visited,
Теперь давайте попрактикуемся. Вот здесь сейчас обычные ссылки, оформление которых задано таблицей CSS
этого сайта, можете посмотреть, что происходит, когда наводите курсор, кликаете и какой вид они имеют
по возвращении обратно на страницу:
Попробуем переопределить свойства ссылок: сделаем так, чтобы в момент клика цвет ссылок менялся на оранжевый на чёрном фоне,
а уже посещённые ссылки имели зелёный цвет. При этом уберём подчёркивание у непосещённых ссылок и добавим его
в момент наведения курсора мыши на ссылку:
Примечание: если вы просматривали некоторое время назад уроки, ссылки на которые даны здесь, то сейчас
можете увидеть уже переопределённых стиль ссылок, то есть все посещённые ссылки будут зелёными. Это происходит потому,
что браузер сохраняет в течение некоторого времени историю посещений. В этом случае просто почистите кэш
своего браузера и увидите разницу.
Ещё один важный момент: при переопределении стиля ссылок имеет значение порядок следования
псевдоклассов в описании правил CSS. Вначале указывается :visited, а затем идет :hover,
иначе посещенные ссылки не будут изменять свой цвет при наведении на них курсора.
Пробуйте и экспериментируйте. До встречи в следующем уроке!
