Какой css код необходимо задать чтобы цвет посещенных и непосещенных ссылок был одним и тем же

Цвет посещенной ссылки css

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

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

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

Приветствую Вас, дорогие читатели блога beloweb.ru. В этот день я хочу поделиться с Вами тем как поменять цвет посещённой ссылки на сайте.

Я вот заметил, что в настоящее время многие дизайнеры и веб мастера забывают поставить этот не маловажный пункт. Честно скажу, что у меня на сайте тоже не давно посещённые ссылки цвета не меняли. Я даже как то и не задумывался о этом. Но однажды я случайно попал на один зарубежный сайт и там, переходя по его ссылкам они, так сказать, отмечались, вернее меняли цвет. И признаюсь это так удобно! 🙂 Ты просто видишь куда именно ты заходил на сайте. А то и такое бывает, что по одной и той же ссылке кликаешь несколько раз.

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

Говорю сразу это очень просто, я сам не ожидал. И конечно же пост получится очень коротким. Так что не судите 🙂

Как поменять цвет посещённой ссылки на сайте.

Пример

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

Как сделать?

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

Всё. Больше ничего добавлять не нужно. Просто, не правда ли? 🙂

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

Тут буду короток. Данный код поддерживают все браузеры.

Вот и всё, дорогие читатели. И в этот раз надеюсь, что я Вам чем то помог. До скорых встреч.

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

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

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

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

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

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

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

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

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

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

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

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

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

Комментарии ( 5 ):

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

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

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

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

Псевдоклассы

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

Синтаксис применения псевдоклассов следующий.

Вначале указывается селектор, к которому добавляется псевдокласс, затем следует двоеточие, после которого идёт имя псевдокласса. Допускается применять псевдоклассы к именам идентификаторов или классов ( A.menu:hover ), а также к контекстным селекторам ( .menu A:hover ). Если псевдокласс указывается без селектора впереди ( :hover ), то он будет применяться ко всем элементам документа.

Условно все псевдоклассы делятся на три группы:

  • определяющие состояние элементов;
  • имеющие отношение к дереву элементов;
  • указывающие язык текста.

Псевдоклассы, определяющие состояние элементов

К этой группе относятся псевдоклассы, которые распознают текущее состояние элемента и применяют стиль только для этого состояния.

:active

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

Применяется к непосещенным ссылкам, т. е. таким ссылкам, на которые пользователь ещё не нажимал. Браузер некоторое время сохраняет историю посещений, поэтому ссылка может быть помечена как посещенная хотя бы потому, что по ней был зафиксирован переход ранее.

Запись A <. >и A:link <. >по своему результату равноценна, поскольку в браузере даёт один и тот же эффект, поэтому псевдокласс :link можно не указывать. Исключением являются якоря, на них действие :link не распространяется.

:focus

Применяется к элементу при получении им фокуса. Например, для текстового поля формы получение фокуса означает, что курсор установлен в поле, и с помощью клавиатуры можно вводить в него текст (пример 15.1).

Пример 15.1. Применение псевдокласса :focus

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат примера показан ниже (рис. 15.1). Во второй строке находится курсор, поэтому текстовое поле получило фокус.

Рис. 15.1. Изменение стиля текста при получении фокуса

Рис. 15.1. Изменение стиля текста при получении фокуса

В данном примере в текстовом поле содержится предварительный текст, он определяется значением атрибута value тега <input> . При щелчке по элементу формы происходит получение полем фокуса, и цвет текста меняется на красный. Достаточно щёлкнуть в любом месте страницы (кроме текстового поля, естественно), как произойдет потеря фокуса и текст вернётся к первоначальному чёрному цвету.

Результат будет виден только для тех элементов, которые могут получить фокус. В частности, это теги <a> , <input> , <select> и <textarea> .

:hover

Псевдокласс :hover активизируется, когда курсор мыши находится в пределах элемента, но щелчка по нему не происходит.

:visited

Данный псевдокласс применяется к посещённым ссылкам. Обычно такая ссылка меняет свой цвет по умолчанию на фиолетовый, но с помощью стилей цвет и другие параметры можно задать самостоятельно (пример 15.2).

Пример 15.2. Изменение цвета ссылок

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

Рис. 15.2. Вид ссылки при наведении на нее курсора мыши

Рис. 15.2. Вид ссылки при наведении на неё курсора мыши

В данном примере показано использование псевдоклассов совместно со ссылками. При этом имеет значение порядок следования псевдоклассов. Вначале указывается :visited , а затем идёт :hover , в противном случае посещённые ссылки не будут изменять свой цвет при наведении на них курсора.

Селекторы могут содержать более одного псевдокласса, которые перечисляются подряд через двоеточие, но только в том случае, если их действия не противоречат друг другу. Так, запись A:visited:hover является корректной, а запись A:link:visited — нет. Впрочем, если подходить формально, то валидатор CSS считает правильным любое сочетание псевдоклассов.

Браузер Internet Explorer 6 и младше позволяет использовать псевдоклассы :active и :hover только для ссылок. Начиная с версии 7.0 псевдоклассы в этом браузере работают и для других элементов.

Псевдокласс :hover не обязательно должен применяться к ссылкам, его можно добавлять и к другим элементам документа. Так, в примере 15.3 показана таблица, строки которой меняют свой цвет при наведении на них курсора мыши. Это достигается за счёт добавления псевдокласса :hover к селектору TR .

Пример 15.3. Выделение строк таблицы

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат примера показан ниже (рис. 15.3).

Рис. 15.3. Выделение строк таблицы при наведении на них курсора мыши

Рис. 15.3. Выделение строк таблицы при наведении на них курсора мыши

Псевдоклассы, имеющие отношение к дереву документа

К этой группе относятся псевдоклассы, которые определяют положение элемента в дереве документа и применяют к нему стиль в зависимости от его статуса.

:first-child

Применяется к первому дочернему элементу селектора, который расположен в дереве элементов документа. Чтобы стало понятно, о чем речь, разберём небольшой код (пример 15.4).

Пример 15.4. Использование псевдокласса :first-child

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат примера показан ниже (рис. 15.4).

Рис. 15.4. Использование псевдокласса first-child

Рис. 15.4. Использование псевдокласса :first-child

В данном примере псевдокласс :first-child добавляется к селектору B и устанавливает для него красный цвет текста. Хотя контейнер <b> встречается в первом абзаце три раза, красным цветом будет выделено лишь первое упоминание, т. е. текст «Lorem ipsum». В остальных случаях содержимое контейнера <b> отображается чёрным цветом. Со следующим абзацем всё начинается снова, поскольку родительский элемент поменялся. Поэтому фраза «Ut wisis enim» также будет выделена красным цветом.

Браузер Internet Explorer поддерживает псевдокласс :first-child начиная с версии 7.0.

Псевдокласс :first-child удобнее всего использовать в тех случаях, когда требуется задать разный стиль для первого и остальных однотипных элементов. Например, в некоторых случаях красную строку для первого абзаца текста не устанавливают, а для остальных абзацев добавляют отступ первой строки. С этой целью применяют свойство text-indent с нужным значением отступа. Но чтобы изменить стиль первого абзаца и убрать для него отступ потребуется воспользоваться псевдоклассом :first-child (пример 15.5).

Пример 15.5. Отступы для абзаца

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат примера показан ниже (рис. 15.5).

Рис. 15.5

Рис. 15.5. Изменение стиля первого абзаца

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

Псевдоклассы, задающие язык текста

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

Определяет язык, который используется в документе или его фрагменте. В коде HTML язык устанавливается через атрибут lang , он обычно добавляется к тегу <html> . С помощью псевдокласса :lang можно задавать определённые настройки, характерные для разных языков, например, вид кавычек в цитатах. Синтаксис следующий.

В качестве языка могут выступать следующие значения: ru — русский; en — английский ; de — немецкий ; fr — французский; it — итальянский.

Пример 15.6. Вид кавычек в зависимости от языка

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 15.6. Для отображения типовых кавычек в примере используется стилевое свойство quotes , а само переключение языка и соответствующего вида кавычек происходит через атрибут lang , добавляемый к тегу <q> .

Рис. 15.6. Разные кавычки для разных языков

Рис. 15.6. Разные кавычки для разных языков

Вопросы для проверки

1. Олег сделал ссылки, которые меняют цвет фона при наведении на них курсора мыши. Для этого он использовал следующий стиль.

Однако некоторые ссылки при наведении на них курсора не меняли свой цвет на чёрный. Почему?

  1. Код CSS не валидный.
  2. К селектору A не добавлен псевдокласс :link.
  3. Псевдокласс :visited стоит после :hover.
  4. Псевдокласс :active стоит после :visited.
  5. Неверное значение свойства color у A:hover.

2. Требуется выделить фоновым цветом первую строку таблицы. Какой псевдокласс для этой цели подойдёт?

  1. :active
  2. :first-child
  3. :focus
  4. :hover
  5. :lang

3. К каким элементам добавляет стиль следующая конструкция — A:link:visited:hover ?

Элемент BODY

Внутри элемента BODY располагается сам документ: весь текст, находящийся между открывающим тегом <BODY> и закрывающим тегом </BODY>, будет отображаться браузером. Все элементы, отвечающие за форматирование документа, помещают внутрь элемента BODY.

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

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

За цвет ссылок отвечают следующие атрибуты элемента BODY:

• alink – задает цвет активной ссылки;

• vlink – определяет цвет посещенной ссылки;

• link – устанавливает цвет непосещенной ссылки.

Цвета ссылок можно задать в HEX-формате или ключевыми словами. Ключевые слова имеет смысл использовать, если вы хотите применить стандартный цвет. Ну а если вы собираетесь устанавливать нестандартные цвета, придется воспользоваться HEX-форматом.

В примере из листинга 1.12 представлены оба варианта записи.

Листинг 1.12. Цвет ссылок

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»

<base href="http://www.test.test/" target="_blank" />

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title>Использование элемента BODY</title>

<body alink="#00FF00" vlink="red" link="#330000">

В примере для активной и непосещенной ссылки цвет задан с помощью цифр и букв: они определяют код цвета в шестнадцатеричном формате и записываются в качестве значения соответствующего атрибута после знака #. Для посещенной ссылки цвет задан ключевым словом. Использовать ключевые слова просто. В качестве обозначения цвета с их помощью применяются стандартные названия цветов на английском языке. Указывайте простые названия цветов вроде blue, red, black и не ошибетесь.

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

Элемент BODY предоставляет большие возможности для управления фоном страницы. Рассмотрим атрибуты, отвечающие за это.

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

Следующий атрибут управляет прокруткой фона и называется bgproperties. Он определяет, будет ли фон прокручиваться вместе с текстом. Этот атрибут принимает всего одно значение fixed, позволяющее зафиксировать фон документа и не прокручивать его вместе с текстом. В противоположном случае нужно просто удалить этот атрибут. При выборе параметров прокрутки фона надо действовать очень осторожно и следить за тем, чтобы при прокрутке не терялась читаемость текста.

В листинге 1.13 представлен пример использования атрибутов элемента BODY, отвечающих за фон документа.

Листинг 1.13. Параметры фона

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»

<base href="http://www.test.test/" target="_blank" />

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title>Использование элемента BODY</title>

<body background="test.jpg" bgcolor="#0033CC" bgproperties="fixed">

В примере из листинга 1.13 файл test. jpg оформлен в синих тонах, поэтому и цвет фона взят из синей гаммы. Прокрутка фона вместе с текстом запрещена.

После того как мы разобрались с фоном, можно задать положение содержимого страницы относительно границ окна браузера.

За отступ от границ окна отвечают следующие атрибуты элемента BODY:

• bottommargin – определяет расстояние от нижнего края окна браузера до содержимого страницы;

• leftmargin – указывает расстояние от левого края окна браузера до содержимого страницы;

• topmargin – задает расстояние от верхнего края окна браузера до содержимого страницы.

Расстояние для всех атрибутов устанавливается в пикселах.

В листинге 1.14 приведен пример указания расстояния до содержимого страницы с помощью атрибутов элемента BODY.

Листинг 1.14. Установка расстояния от границ окна до содержимого страницы

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»

<base href="http://www.test.test/" target="_blank" />

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title>Использование элемента BODY</title>

<body topmargin="10" leftmargin="20" bottommargin="10">

В примере расстояние сверху и снизу будет по 10 пикселов, а слева – 20 пикселов.

У элемента BODY есть еще два атрибута, которые могут нам пригодиться. Атрибут text отвечает за цвет текста в документе. Когда задаете цвет текста, следите, чтобы он не сливался с фоном страницы.

Атрибут scroll определяет, будет ли в окне документа вертикальная полоса прокрутки. У него всего два значения: yes и no, обозначающие разрешить и запретить прокрутку соответственно. На самом деле запрещать прокрутку не стоит, потому что документ, который у вас на экране виден полностью без проблем, у пользователя с низким разрешением монитора может не поместиться на экране. В итоге без полосы прокрутки он просто не увидит часть документа.

Мы рассмотрели элемент BODY, его возможности и функции. Все параметры, определяемые в этом элементе, влияют на общий вид документа.

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

Данный текст является ознакомительным фрагментом.

Продолжение на ЛитРес

Читайте также

Элемент

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

Элемент

Элемент Элементы – это любые единичные компоненты структуры, например, заголовок, абзац текста, фотография или

Элемент <xsl:if>

Элемент &lt;xsl:if&gt; При помощи элемента &lt;xsl:if&gt; осуществляются проверки условия и принимаются действия на основе результата проверки. Он во многом похож на оператор if в языках программирования. У элемента &lt;xsl:if&gt; один атрибут:• test (обязательный). Устанавливается в

Элемент <xsl:for-each>

Элемент &lt;xsl:for-each&gt; Элемент &lt;xsl:for-each&gt; позволяет применять тело шаблона в цикле снова и снова для всех элементов набора узлов. С технической точки зрения, он работает с набором узлов, который возвращает выражение XPath и выполняет одно и то же действие с каждым узлом в

Создание тел таблицы: <fo:table-body>

Создание тел таблицы: &lt;fo:table-body&gt; Тело таблицы (table body) содержит фактическое содержимое таблицы; тела создаются при помощи элемента &lt;fo:table-body&gt;. Этот элемент содержит элементы &lt;fo:table-row&gt;, которые, в свою очередь содержат элементы &lt;fo:table-cell&gt;, содержащие данные таблицы.С

Создание тел элементов списка: <fo:list-item-body>

Создание тел элементов списка: &lt;fo:list-item-body&gt; Для включения тела элемента списка служит элемент &lt;fo:list-item-body&gt;. Заметьте, что для форматирования тела элемента списка требуемым вам образом вы можете включить в элемент &lt;fo:list-item-body&gt; объект &lt;fo:block&gt;.С элементом

Элемент <?job?>

Элемент &lt;?job?&gt; Элемент &lt;?job?&gt; задает режим отладки при выполнении WS-файла. Если значение атрибута debug равно true, то задание может быть выполнено во внешнем отладчике (см. приложение 3). Если же значение атрибута debug равно false, то отладчик для этого задания применен быть не

Элемент <job>

Элемент &lt;job&gt; Элементы &lt;job&gt; позволяют определять несколько заданий (независимо выполняющихся частей) в одном WS-файле. Иначе говоря, между тегами &lt;job&gt; и &lt;/job&gt; будет находиться отдельный сценарий (который, в свою очередь, может состоять из нескольких частей,

Элемент <example>

Элемент &lt;example&gt; Внутри элемента &lt;example&gt; приводится текст из одной или нескольких строк, в котором можно описать примеры запуска сценария. Если сценарий был запущен с ключом /? в командной строке или в сценарии встретился вызов метода ShowUsage объекта WshArguments, то этот текст

Элемент xsl:if

Элемент xsl:if Синтаксис элемента следующий:&lt;xsl:if test="выражение"&gt; &lt;!— Содержимое: шаблон —&gt;&lt;/xsl:if&gt;Элемент xsl:if является простейшим условным оператором в XSLT. Выражение, содержащееся в обязательном атрибуте test, вычисляется и приводится к булевому типу. В том и только том

§ 2.7 Элементы тела книги (body).

§ 2.7 Элементы тела книги (body). Элемент imageКартинка.Cинтаксис: &lt;image/&gt;Используется в элементах: body, section, pВложенные элементы: нетКоличество вхождений: одно или отсутствуетАтрибуты: alt, title, id, href (обязательный).Версия формата: 2.0Пример: &lt;image l:href="#n_pride.png"/&gt; Элемент titleЗаголовок

Глава 1. Rub berries body

Глава 1. Rub berries body «Из математика легко подготовить программиста, а вот из программиста математика – сложнее» — так любил говорить Б.А., мой научный руководитель. Истинно так! Только каков конкретный алгоритм подготовки программиста из математика-криптографа? С чего, по

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *