A:visited{Color:#006699}: :visited — CSS: Cascading Style Sheets

seodon.ru | Учебник HTML — Меняем цвета ссылок

Опубликовано: 29.09.2010 Последняя правка: 08.12.2015

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

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

<style type="text/css">
a:link {color:цвет}    /* цвет непосещенной ссылки */
a:visited {color:цвет} /* цвет посещенной ссылки */
a:hover {color:цвет}   /* цвет ссылки при наведении курсора мыши */
a:active {color:цвет}  /* цвет активной ссылки (в момент нажатия) */
</style>

C тегом <STYLE> вы пока еще не знакомы, но тут и учить нечего. Он используется для внутренних стилей, которые будут действовать в пределах всей страницы. А его атрибут type как раз и говорит браузеру о том, что внутри находятся стили (CSS), а не обычный текст.

Что касается самих стилей, то сначала там идет имя тега, к которому применяется стиль (в нашем случае это <A>), затем после двоеточия указывается к какой именно ссылке применяется стиль (link, visited, hover, active). Ну а то, что находится в фигурных скобках { } вам должно быть уже хорошо известно по предыдущим урокам. И не забывайте про совет: лучше всегда задавать цвет в HEX-формате со знаком решетка (#) впереди, а не писать имя цвета.

Пример изменения цвета ссылок в HTML-странице

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Изменение цвета ссылок на странице</title>
<style type="text/css">
a:link {color:#006699}
a:visited {color:#990066}
a:hover {color:#669900}
a:active {color:#FF0000}
</style>
</head>
<body>
 <p><a href="https://seodon. ru/">Как создать сайт</a></p>
 <p><a href="https://spravka.seodon.ru/">Справочники по HTML и CSS</a></p>
</body>
</html>

Результат в браузере

Если вы недавно были на страницах указанных в ссылках, то естественно ссылки будут сразу окрашены в «посещенный» цвет.

Иногда вам может понадобиться, чтобы цвет определенной ссылки отличался от остальных. Тогда укажите внутри тега <A> атрибут и задайте нужный цвет.

Пример использования тегов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Изменение цвета ссылок на странице</title>
<style type="text/css">
a:link {color:#006699}
a:visited {color:#990066}
a:hover {color:#669900}
a:active {color:#FF0000}
</style>
</head>
<body>
 <p><a href="https://seodon.ru/">Сайт Seodon. ru</a></p>
 <p>
  Здесь вы можете найти
  <a href="https://spravka.seodon.ru/">
   справочник по тегам HTML
  </a>
 </p>
</body>
</html>

Результат в браузере

Домашнее задание.

  1. Создайте три блока DIV и пусть их фон будет цвета #EEEEEE.
  2. Разместите в каждом DIV’е по одной ссылке. Пусть они ведут на любые сайты в интернете.
  3. В каждой ссылке сделайте так, чтобы при наведении на нее курсора мыши появлялась соответствующая подсказка.
  4. Пусть цвет непосещенной ссылки будет #FF0099, посещенной — #009933, при наведении курсора мыши — #0099FF, активной — #00FF66.

Посмотреть результат → Посмотреть ответ

Cсылки и их разновидности← Содержание →Ссылки на электронную почту

CSS :visited Selector

❮ Предыдущий
Справочник по селекторам CSS
Далее ❯

Пример

Выбор и оформление посещенных ссылок:

a:посетили
{
цвет: розовый;
}

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

Определение и использование

Селектор :visited используется для выбора посещенных ссылок.

Совет: Используйте селектор :link для оформления ссылок на
непосещенные страницы, селектор :hover для оформления ссылок при наведении на них курсора и
:active селектор для оформления ссылок при нажатии на них.

Браузеры ограничивают стили, которые можно установить для ссылок a:visited, из-за
проблемы с безопасностью.

Допустимые стили:

  • цвет
  • цвет фона
  • цвет границы (и цвет границы для отдельных сторон)
  • цвет контура
  • цвет правила столбца
  • цветные части заливки и обводки

Все остальные стили наследуются от a:link.

Версия: CSS1

Поддержка браузера

Цифры в таблице указывают первую версию браузера, которая полностью поддерживает селектор.

Селектор
:посетили 4,0 7,0 2,0 3. 1 9,6

Синтаксис CSS

:посетили {
 объявления css ;
}

Дополнительные примеры

Пример

Выберите и стилизуйте непосещенные, посещенные, наведенные и активные ссылки:

/* непросмотренная ссылка */
a:link {
  color: green;
}

/* посещенная ссылка */
a:посетили {
  цвет: зеленый;
}

/* указатель мыши над ссылкой */
a:hover {
  color: red;
}

/* выбранная ссылка */
a:active {
  цвет: желтый;
}

Попробуйте сами »

Пример

Ссылки на разные стили:

a.ex1: hover, a.ex1: active {
  цвет: красный;
}

a.ex2:hover, a.ex2:active {
 размер шрифта: 150%;
}

Попробуйте сами »

Связанные страницы

Учебник CSS: Ссылки CSS

Учебник CSS: Псевдоклассы CSS

❮ Предыдущая
Справочник по селекторам CSS
Следующий ❯

NEW

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА
КОД ИГРЫ

Играть в игру

Лучшие учебники

Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3. CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

900 Справочник

900
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

ФОРУМ |
О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.
Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

:посещено — CSS: Каскадные таблицы стилей

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

Стили, определенные псевдоклассом :visited , будут переопределены любым последующим псевдоклассом, связанным со ссылкой ( :link , :hover или :active ), который имеет по крайней мере равную специфичность. Чтобы правильно оформить ссылки, поставьте :visited правило после правила :link , но до правил :hover и :active , как определено LVHA-порядком — :активный .

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

  • Допустимые свойства CSS: color , background-color , цвет границы , цвет границы снизу , цвет границы слева , цвет границы справа , цвет границы вверху , цвет правила столбца , цвет контура , text-decoration-color и text-emphasis-color .
  • Допустимые атрибуты SVG: заливка и штрих .
  • Альфа-компонент разрешенных стилей будет игнорироваться. Альфа-компонент не- 9 элементаВместо этого будет использоваться состояние 0021 :visited . В Firefox, когда альфа-компонент равен 0 , стиль, установленный в :visited , будет полностью игнорироваться.
  • Хотя эти стили могут изменить внешний вид цветов для конечного пользователя, метод window. getComputedStyle будет лгать и всегда будет возвращать значение цвета non- :visited .
  • Элемент никогда не совпадает с элементом :visited .

Примечание: Дополнительные сведения об этих ограничениях и их причинах см. в разделе Конфиденциальность и селектор :visited.

 посетили

Свойства, которые в противном случае не имели бы цвета или были бы прозрачными, не могут быть изменены с помощью :visited . Из свойств, которые можно установить с помощью этого псевдокласса, ваш браузер, вероятно, имеет значение по умолчанию только для color и column-rule-color . Таким образом, если вы хотите изменить другие свойства, вам нужно задать им базовое значение за пределами 9.0021 :прошел селектор .

HTML 

 Вы уже посещали эту ссылку?

Вы уже посещали эту ссылку.

CSS 

 а {
  /* Укажите непрозрачные значения по умолчанию для некоторых свойств,
     позволяя им быть оформленными с состоянием :visited */
  цвет фона: белый;
  граница: 1px сплошной белый;
}
а: посетил {
  цвет фона: желтый;
  цвет границы: ярко-розовый;
  цвет: ярко-розовый;
}

Result

Specification
HTML Standard
# selector-visited
Selectors Level 4
# link

BCD tables only load in the browser

with JavaScript включен.