html цвет посещенной ссылки

Возможность изменения цвета ссылок одна из важных составляющих HTML-верстки. Ведь это позволяет не только грамотно вписать ссылки в дизайн сайта, но и помогает посетителям ориентироваться в его навигации. В уроке Ссылки и их разновидности вы узнали, что такое посещенные, непосещенные, активные ссылки и ссылки при наведении курсора мыши. Теперь вы научитесь менять цвет ссылок в каждом из этих состояний.

В старых версиях HTML существовали специальные атрибуты тега , позволяющие изменять цвет ссылок на HTML-странице, это link , alink и vlink , но в современном HTML их нет. Поэтому мы опять будем использовать стили (CSS), а значит что? Вот и неправильно, не атрибут style , а так называемые внутренние стили. Для этого нам надо будет в «шапку» страницы ( ) вставить тег , а внутри него указать один или несколько следующих стилей:

html цвет посещенной ссылки

Internet Explorer Chrome Opera Safari Firefox Android iOS
4.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+

Задача

Изменить цвет посещённой ссылки.

Решение

Как только пользователь открывает документ, на который указывает ссылка, она помечается как посещённая и меняет свой цвет на фиолетовый, установленный по умолчанию. Чтобы задать вид оформления посещенных ссылок, используйте псевдокласс :visited , который добавляется к селектору A , как показано в примере 1.

Пример 1. Цвет посещенных ссылок

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан ни рис. 1.

html цвет посещенной ссылки

Рис. 1. Цвет посещённой ссылки

В примере рядовая текстовая ссылка имеет красный цвет, а посещённая — оливковый.

html цвет посещенной ссылки

У меня уже несколько раз спрашивали, почему после клика по ссылке она меняет цвет и как это исправить. Цвет ссылок меняется из-за браузера, так как посещённые ссылки попадают в историю. Если у Вас история не сохраняется (как, например, у меня), цвет вообще меняться не будет. Сегодня я решил написать, как задать цвет посещённых ссылок, чтобы браузер не ставил свой цвет, который не всегда удачный.

Читайте также:  232 код какой страны

Задавать цвет посещённых ссылок надо через CSS с помощью псевдоэлементов. Вот пример CSS-кода:

a:link, a:visited, a:active <
color: #00f;
>

Данным CSS-кодом мы даём команду браузера, что все непосещённые ссылки (псевдоэлемент link), посещённые ссылки (псевдоэлемент visited) и ссылки, на которых нажата кнопка мыши, (псевдоэлемент active) должны быть синего цвета.

Таким образом, теперь цвет ссылки всегда будет постоянным, причём именно таким, каким Вы его задали.

Если Вы не знаете, как подключить указанный CSS-код, то прочитайте статью: как задать css стиль.

html цвет посещенной ссылки

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://rxsupersales.shop/)!

Добавляйтесь ко мне в друзья ВКонтакте: http://rxsupersales.shop/.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://rxsupersales.shop/.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 5 ):

    Здравствуйте, Михаил Русаков, не подскажите как убрать нижнее подчеркивание у всех ссылок(посещенных, непосещённых, активированных) на CSS?

    Михаил! А зачем указывать псевдоклассы для гиперссылок? Если просто написать селектор тег «а», то через него будет воздействие сразу на все четыре состояния гиперссылки. Например, гиперссылка должна всегда быть синей — a

    А как задать разные значения? Если например цвет посещённых ссылок должен отличатся от не посещённых.

    Читайте также:  acr122u nfc программное обеспечение

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2019 Русаков Михаил Юрьевич. Все права защищены.

    Оцените статью
    Добавить комментарий

    Adblock
    detector