§ 10. Создание стилей ссылок

Определения и обозначения

Стиль ссылки — набор правил оформления гиперссылки, например цвет текста, подчёркивание и изменение вида при наведении указателя. Внешний вид подсказывает, что элемент можно открыть, и помогает заметить его состояние. Поэтому стиль ссылки нужен не только для красоты, но и для удобной навигации.

Псевдокласс — обозначение состояния элемента в CSS, которое добавляют к селектору через двоеточие. Например, запись a:hover выбирает ссылки, на которые наведён указатель. Псевдокласс позволяет менять оформление в нужный момент, не создавая отдельный HTML-элемент.

:link и :visited — псевдоклассы для непосещённой и уже посещённой ссылки соответственно. Браузер определяет посещённость по истории переходов пользователя. Эти обозначения помогают показывать, какие страницы пользователь уже открывал.

:hover и :active выбирают ссылку под указателем и ссылку в момент нажатия. Первое состояние возникает при наведении, второе — пока пользователь нажимает на ссылку. С их помощью можно дать заметную обратную связь о действиях с элементом.

Как это устроено

Одного оформления ссылки не всегда достаточно: пользователю полезно отличать ещё не открытые страницы от уже посещённых, а также видеть реакцию на наведение и нажатие. Если вид ссылки совсем не меняется, сложнее понять, что произойдёт после действия. Несколько вариантов оформления делают навигацию нагляднее и помогают заметить активный элемент. При этом изменения должны оставаться различимыми и не мешать чтению текста.

Сначала в CSS выбирают элемент селектором, например a для всех ссылок. Затем сразу после него, без пробела, записывают двоеточие и псевдокласс: a:hover. В фигурных скобках указывают свойства и значения, например цвет текста. Такое правило действует только на ссылки в выбранном состоянии, а не на все элементы страницы.

Правило a:link задаёт внешний вид непосещённых ссылок, а a:visited — посещённых. Например, можно оставить первые синими, а вторые сделать фиолетовыми, чтобы пользователь видел историю переходов. Состояния взаимоисключающие для одной ссылки в данный момент: она не может одновременно быть посещённой и непосещённой. Для :visited браузеры ограничивают некоторые стили, чтобы сайт не мог свободно узнавать историю просмотров пользователя.

Состояние :hover появляется, когда указатель находится над ссылкой, поэтому оно зависит от положения мыши или другого указателя. Состояние :active возникает во время нажатия и обычно длится лишь мгновение. Эти правила дают обратную связь: пользователь видит, что ссылка реагирует на наведение и нажатие. Если взаимодействия нет, браузер не применяет оформление, предназначенное именно для этих состояний.

На одну ссылку могут подходить сразу несколько правил, поэтому браузер выбирает между ними по приоритету и порядку. Более специфичный селектор обычно перекрывает менее специфичный; если приоритет одинаков, чаще применяется правило, записанное позже. Например, общее правило a может задать цвет всем ссылкам, а a:hover — другой цвет при наведении. Чтобы результат был предсказуемым, проверяйте, какие селекторы совпадают с элементом и какое правило задаёт нужное свойство последним.

Состояния ссылки и их оформление

Сначала найдите в таблице состояние, которое хотите показать, а затем используйте соответствующий псевдокласс в CSS. Примеры оформления — возможные варианты, а не обязательные значения: цвет и подчёркивание можно выбрать по дизайну страницы. Проверьте, чтобы состояния легко различались и текст ссылки оставался читаемым.

Разбор задач

Задача 1. Нужно задать непосещённым ссылкам синий цвет, а посещённым — фиолетовый. Для этого каждому состоянию требуется собственное правило: один селектор не должен выбирать сразу обе группы. Селектор a выбирает ссылки, а псевдоклассы уточняют, какие именно из них нужно оформить.

1. Запишите селектор непосещённой ссылки: a:link.
2. В фигурных скобках задайте цвет: a:link { color: blue; }.
3. Добавьте отдельное правило для посещённых ссылок: a:visited { color: purple; }.

Ответ: правило :link задаёт синий цвет, а правило :visited — фиолетовый. Если цвет не изменился, проверьте, что селекторы написаны без пробела перед псевдоклассом и что другое правило не перекрывает цвет.

Задача 2. При наведении указателя ссылка должна менять цвет, а во время нажатия — становиться подчёркнутой. Здесь нужно различить два действия пользователя: наведение и нажатие. Для каждого действия создаётся правило со своим псевдоклассом и свойством.

1. Выберите все ссылки селектором a и добавьте состояние наведения: a:hover { color: red; }.
2. Для момента нажатия создайте отдельный селектор: a:active.
3. Задайте ему подчёркивание: a:active { text-decoration: underline; }.
4. Наведите указатель на ссылку, а затем нажмите на неё, чтобы проверить оба состояния.

Ответ: цвет меняется при наведении, а подчёркивание появляется в момент нажатия. Если открыть страницу и не взаимодействовать со ссылкой, эти правила не проявятся, поскольку соответствующие состояния ещё не возникли.

Задача 3. Нужно оформить все состояния ссылок по-разному и объяснить, какое правило победит, если несколько селекторов задают цвет. Подготовьте отдельные правила для посещённой, непосещённой, наведённой и нажатой ссылки. Затем мысленно или в браузере проверьте, какие правила подходят ссылке в каждый момент.

1. Задайте отдельные цвета в правилах a:link, a:visited, a:hover и a:active.
2. Проверьте ссылку в обычном состоянии, после перехода по ней, при наведении и во время нажатия.
3. Если цвет не ожидаемый, найдите другие правила, подходящие к той же ссылке.
4. Сравните приоритет селекторов; при равном приоритете учитывайте, какое правило записано позже.

Ответ: применяется правило, которое подходит состоянию ссылки и имеет наибольший приоритет; при равном приоритете обычно выигрывает более позднее. Поэтому одно лишь расположение правила в коде не всегда решает конфликт: сначала сравнивают специфичность селекторов.

Типичные ошибки

Псевдокласс иногда записывают без двоеточия или отделяют пробелом, например a :hover. Тогда селектор обозначает не состояние ссылки, а другой набор элементов, и правило может не сработать. Ошибка возникает, когда двоеточие считают необязательным знаком или не замечают пробел. Проверьте запись: должно быть a:hover — слитно и с двоеточием.

Не путайте :link и :visited: первый относится к непосещённым ссылкам, второй — к посещённым. Их легко перепутать, потому что оба псевдокласса связаны с историей переходов. Проверьте результат на ссылке, по которой вы ещё не переходили, и на уже открытой ссылке. Если цвета поменялись местами, исправьте соответствующие селекторы.

Правило :hover не меняет ссылку, если указатель на неё не навели, а :active не сохраняет эффект после завершения нажатия. Такие ожидания появляются, если принять эти обозначения за постоянные свойства ссылки. Наведите указатель и нажмите кнопку, чтобы проверить каждое состояние отдельно. Если нужно постоянное оформление, задайте его другим правилом, например для селектора a.

Конфликтующие правила могут перекрывать друг друга: результат зависит от приоритета селектора и порядка правил. Новички иногда смотрят только на последнее объявление и забывают, что более специфичный селектор способен победить. Проверьте все правила, которые подходят ссылке, и сравните их приоритет. Для простой проверки временно измените цвет в нужном правиле и посмотрите, реагирует ли ссылка именно в ожидаемом состоянии.

Связь с другими темами

Чтобы разбираться в стилях ссылок, нужно знать, что такое гиперссылка и как браузер открывает веб-страницы. Ещё пригодится умение читать простые CSS-правила: находить селектор, фигурные скобки, свойства и значения. Псевдоклассы дополняют уже знакомые правила CSS, уточняя, когда их применять. Эти знания используются при оформлении веб-страниц и создании понятной навигации по сайту.

Что запомнить

• Состояние ссылки можно выбрать с помощью псевдокласса.
• :link обозначает непосещённую ссылку.
• :visited обозначает посещённую ссылку.
• :hover применяется при наведении указателя.
• :active применяется в момент нажатия.
• Псевдокласс записывают после селектора через двоеточие.
• При конфликте CSS-правил учитывают их приоритет и порядок.