Посещённая ссылка


Содержание

Как изменить цвет посещённой ссылки на сайте только с помощью CSS

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

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

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

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

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

Пример

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

Как сделать?

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

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

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

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

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

Как сделать так что-бы посещенная ссылка обозначалась другим цветом

Добрый все день у меня такая проблема. Я не могу сделать так что-бы уже посещенная ссылка имела другой цвет чем те что еще не посещались ? У меня это получилось только один раз вот в этом примере :

Повторить еще раз не выходит (( Вот пример :

03.02.2013, 14:47

Как сделать так что бы последний элемент листа красился другим цветом?
Как сделать так что бы последний элемент листа красился другим цветом? public void.

Как в Visual Studio сделать так, чтобы названия классов выделялись другим цветом
Как в Visual Studio 2010 (язык с++) сделать так, чтобы названия классов выделялись другим цветом.

Как сделать так, что в MessageBox отображалась активная ссылка
Подскажите как сделать так, что в MessageBox отображалась активная ссылка. .

Как сделать так, что если результат — средний или низкий — появлялась ссылка
Здравствуйте. Как организовать: имеется переменная result. в ней хранится результат прохождения.

Как в Visual Studio сделать функции другим цветом?
Глаза режет однообразный серый текст, я привык к такому: .

03.02.2013, 15:27 2 03.02.2013, 18:54 [ТС] 3

Увы почему-то не работает ((( Мне нужно что-бы были задействованы и hover и visited или link.

В первом примере все работает ))

03.02.2013, 19:34 4
03.02.2013, 19:34
03.02.2013, 20:13 [ТС] 5

Добавлено через 3 минуты
Я вот не пойму почему вот так работает все что мне надо :

03.02.2013, 20:24 6

еще раз внятно напиши, что ты хочешь получить?

Добавлено через 6 минут
Первый вариант конечно будет работать. Т.к. к странице html подгружаются не только те стили CSS которые ты указал в файле, но еще браузер сам подключает свою таблицу стилей (только у них приоритет низкий). И т.к. ты не указал какой будет цвет у посещенной ссылки, то браузер делает её основываясь на внутренние стили CSS (в частности делает её красной)

Добавлено через 1 минуту
короче, вместо hover напиши visited и будет тебе счастье.

Как выделить посещенную ссылку?

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

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

За отображение посещенных ссылок отвечает псевдоселектор :visited , для ссылок.

То есть у посещенных ссылок стиль будет применяется именно этого селектора. Рассмотрим пример, для наглядности:

Результат можно проверить на демо-странице:


Анализ внешних и внутренних ссылок

Сервис для анализа внешних и внутренних ссылок можно использовать для проверки своего сайта и анализа ссылочной массы конкурентов. Вы получите точное количество внешних и внутренних ссылок на странице, отметку о наличии атрибута nofollow, а также URL ссылок и их текстовое окружение. Сервис позволяет анализировать ссылки на главной и на любой внутренней странице сайта.

Внешние ссылки сайта: как размещать и как проверить

Внешние (исходящие) ссылки — те ссылки, которые ведут с вашего сайта на другие ресурсы. Рекомендуем следить за качеством ссылок, размещенных у вас. Множество исходящих ссылок на другие сайты, не соответствующие вашей тематике или с сомнительной репутацией, поисковые роботы могут посчитать за спам и понизят ваш сайт в выдаче. Если не уверены в надежности ресурса, на который ведет ссылка, лучше добавить к ней атрибут rel=”nofollow”.

Лучше всего поисковики воспринимают внешние ссылки, размещенные естественным путем — то есть живыми пользователями сайта, и выглядящие органично. Это могут быть отзывы или комментарии в блоге. Также ценятся ссылки на качественные ресурсы с большим трафиком. Если вы сомневаетесь в качестве внешних ссылок со своего сайта, воспользуйтесь инструментом для проверки ссылок онлайн.

Где размещать внешние ссылки?

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

Внутренние ссылки: как размещать и как проверить

Внутренние ссылки — это ссылки, которые ссылаются с одной страницы сайта на другую. Размещение внутренних ссылок также называют перелинковкой.
Зачем нужны внутренние ссылки:

  • увеличивают авторитетность страниц
  • передают вес нужным страницам
  • ускоряют индексацию новых страниц
  • повышают юзабилити сайта за счет улучшения навигации
  • создают структуру сайта

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

Как настроить цвет посещенной ссылки?

в браузерах опера(opera), mozilla(мозила),chrome(гугл хром)?

Я пользуюсь Файрфоксом, поэтому про него скажу, а про Гугл Хром и Оперу кто-нибудь другой расскажет.

Итак, Mozilla Firefox.

Вверху кликаем на Инструменты, в открывшемся меню выбираем Настройки.

Там находим вкладку Содержимое, где среди разных других параметров находим Цвета и кликаем на него.

Открывается окно такого вида:

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

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

то вместе с этим могут исчезнуть некоторые картинки и другая графика. Проблему можно решить, изменив данные в файле userContent.css. Этот файл сначала нужно создать в папке своего профиля. Другой вариант: скачать и использовать расширение NoSquint. Там можно установить цвета ссылок для каждого сайта отдельно.

Для настройки цвета ссылок в браузере Mozilla Firefox нужно открыть меню (самая верхняя кнопка справа на панели). Далее выбрать пункт «Настройки» — «Язык и внешний вид» — «Цвета». Появится окно с выбором цветов для посещенных и непосещенных ссылок.

Для Google Chrome решение сложнее. Оно выглядит следующим образом.

Для браузера Opera настройка цвета посещенных ссылок производится с помощью расширения NoSquint Plus. В самом расширении нужно перейти в раздел «Global settings», далее выбрать «Link colors».

Тоже был озадачен этим вопросом и нашел решение для Chrome браузера и его аналогов (для Яндекс браузера тоже действует, так как он тоже хромоног).

Само приложение называется: NoSquint Plus

На каждый сайт настраивается отдельно или глобально. Настроил цвет просмотренных ссылок в Гугл и Яндекс поиске — класс!

А ещё в БВ сделал просмотренные вопросы другим цветом!

У меня «Cent» браузер — на мой взгляд лучший из хромоногих, юзаю уже больше года.

Цвет шрифт можно редактировать на свой выбор. Делается это в Настройках — Цвета, и здесь вы сможете выбрать цвет шрифта для ссылок. Тут вам будет представлена целая гамма цветом на выбор. Можно подобрать и свой родной цвет, и цвет ссылок посещенных вами вообще меняться не будет.

Цвет ссылок устанавливается атрибутами тега BODY. Обычно о их существовании забывают и, как следствие, используются значения по умолчанию.

link — цвет ссылок на веб-странице (по умолчанию синий #0000ff);

alink — активная ссылка (меняется при нажатии, по умолчанию красный #ff0000);

vlink — посещенная ссылка (фиолетовый #800080).

Через CSS соответственно:

Чтобы изменить цвет уже просмотренных ссылок в браузере google chrome сделайте следующее.

Запустите браузер, и перейдите по ссылке

Там представлено расширения для chrome которое вам нужно установить. После установки перезапустите браузер, и откройте любую веб страницу.

В правом верхнем углу адресной строки появится новый значок — похож на элемент мозаики. Если наведете на него указатель мыши, появится всплывающая подсказка «Webpage Decorator». Запустите расширение, щелчком указателя по значку.

В открывшемся меню нас интересует строка «Visited link» — щелкните напротив этого пункта по значку с цветом. Откроется палитра цветов. Здесь выберите любой цвет, который вы хотите назначить для просмотренных ссылок. Для применения изменения, нажмите кнопку «Okay». После этого все просмотренные ссылки в браузере Chrome будут иметь выбранный вами цвет.


Блог Vaden Pro

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

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

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

Утерянное искусство оформления посещенных ссылок

Цвет другого измерения

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

Если на чистоту, это все мои догадки. В то же время вы можете без промедления сказать, какие из этих ссылок вы точно посещали, потому что мой сайт меняет цвет посещенных ссылок.
(примечание переводчика: Ирония =) На medium этого не происходит.)

Путешествие во времени

Просмотр web-страниц в основном двумерный: вы либо прокручиваете (ось y) или кликаете (ось z).

Цвет ссылок добавляет третье измерение: время.

  • фиолетовые ссылки из прошлого
  • синие ссылки — потенциальные кандидаты на настоящее или будущее

В зависимости от того, какова ваша цель, вид посещенных ссылок может вызывать две основные реакции:

  • “Ах да, это тот сайт, который я искал! Я уже был на нем.”
  • “Я уже заходил на эту страницу, попробую-ка следующую.”

Список ссылок как чек-лист

Агрегаторы ссылок, типа Reddit или Hacker News, являются теми немногими сайтами, которые по прежнему отличают просмотренные ссылки от “новых”.

Страница с результатами поиска в Google, как правило, отображает ссылки подобным образом. Скажем, вы изучаете JavaScript и хотите знать, как проверить, пуст ли массив.

Фиолетовые ссылки воспринимаются как выполненные задания, так как:

  • вероятно, вы не захотите заходить на одну страницу дважды
  • вы хотите продолжить работать с чек-листом с того места, на котором остановились, когда закрыли его

Разница цветов дает информацию о том, на сколько далеко вы продвинулись по списку.

Фиолетовые ссылки? Фуу!

Но почему выделение посещенных ссылок — такое редкое явление? Потому что дизайнеры (такие как я) слишком ленивы и придирчивы.

После завершения макета (он утвержден лично вами или вашим клиентом) вы хотите сверстать веб-страницу в полном соответствии с этим макетом. Вы не заботитесь об истории просмотра пользователя, потому что она повлияет на ваш идеально сбалансированный дизайн, не так ли?

Если вы профессиональны, то вы нарисовали дизайн для разных состояний кнопок и полей ввода (состояние по умолчанию, при наведении, нажатое, с фокусировкой, неактивное). Но состояние “посещенное” никогда не придет вам на ум.

Это одно из первых css правил, которое пишет дизайнер (прим.переводчика: или верстальщик):

Это повлияет на все ссылки в любом состоянии: hover, active, focus и visited. Это как сброс цвета. Вы пишите это правило и забываете. Вы можете использовать псевдокласс :link, но никто не узнает об этом. Но вы в любом случае забыли установить правило для :visited.

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

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

Вопрос приватности

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

Хотя цвет и может быть изменен, но метод getComputedStyle будет “врать” и всегда возвращать цвет непосещенной ссылки.

В результате стилизация посещенных ссылок очень ограничена:

Не все ссылки равны

Большинство ссылок не требуют выделения цветом, если по ним был переход:

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

Как решить, какие ссылки стоит выделять после их посещения?


  • внешние ссылки, потому что они дают пользователю представление о странице, которую вы упоминаете (поэтому агрегаторы подсвечивают посещенные ссылки)
  • ссылки на статьи (или страницы, содержание которых остается неизменным долгое время)

Для примера возьмем The Guardian и представим, что вы его просматриваете. Главная страница динамичная, ее контент обновляется каждые несколько минут. Вам, как пользователю, не нужно знать о том, что вы посетили главную страницу, так как:

  • вы наверняка там уже были
  • вероятно вы будете там снова

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

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

В следующий раз при создании дизайна сайта подумайте о :visited!
Веб (интернет) и его пользователи оценят это по достоинству.

Нашли ошибку? Воспользуйтесь функцией Private notes: выделяете текст с ошибкой, нажимаете на символ замка в появившемся дудле и оставляете свой комментарий. Спасибо!

Как выделить цветом посещённые ссылки на CSS

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

Где уже пользователь и гость уже понимает, что по ней он уже переходил. За такой эффект будет отвечать псевдоселектор :visited, который предназначен для ссылок.

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

Приступаем к установке:

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

a <
color:#2457b7;/* Оттенок для обычной ссылки */
>

a:visited <
color:#b72424;/* Оттенок для посещенной ссылки */
>

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

HTML Ссылки

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

Ссылки — Гиперссылки HTML

HTML-ссылки представляют собой гиперссылки.

Вы можете нажать на ссылку и перейти на другой документ.

При наведении на ссылку, курсор мыши превратится в руку.

Примечание: Ссылка не должна быть только текстом. Ссылка может быть изображением или любым другим элементом HTML.

Синтаксис ссылки HTML

В HTML, ссылка определяется тегом :

Пример

Атрибут href указывает адрес назначения (https://schoolsw3.com/html/) ссылки.

Текст ссылки это видимая часть (посетите наш HTML учебник).

Нажав на текстовую ссылку, Вы перейдете на указанный адрес.

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

Локальные Ссылки

В приведенном выше примере используется абсолютный URL-адрес (веб-адрес).

Локальная ссылка (ссылка на тот же веб-сайт), указан относительный URL-адрес (без http://..).

Пример

Цвет Ссылок HTML

По умолчанию, ссылка будет выглядеть так же, как (во всех браузерах):

  • Непросмотренная ссылка — подчеркнута и синяя
  • Посещенная ссылка — подчеркнута и фиолетовая
  • Активная ссылка — подчеркнута и красная

Вы можете изменить цвета по умолчанию, с помощью стилей CSS:


Пример

Ссылки HTML — атрибут target

Атрибут target определяет, где открыть связанный документ.

Атрибут target может иметь одно из следующих значений:

  • _blank — Открывает связанный документ в новом окне или вкладке
  • _self — Открывает связанный документ в том же окне/вкладке, где она была нажата (по умолчанию)
  • _parent — Открывает связанный документ в родительском фрейме
  • _top — Открывает связанный документ в полном окне
  • framename — Открывает связанный документ в указанном фрейме

Этот пример открывает связанный документ в новой вкладке окна браузера:

Пример

Совет: Если Ваша Веб-страница заблокирована в рамке (frame), вы можете использовать target=»_top», чтобы выйти из рамки:

Пример

Ссылки HTML — Изображение как ссылка

Изображение является общим для использования в качестве ссылки:

Пример

Примечание: border:0; добавляется для предотвращения IE9 (и ранее) отображать границы вокруг изображения (если изображение является ссылкой).

Ссылки HTML — Создать Закладку

Закладки HTML позволяют читателям, перейти к определенной части веб-страницы.

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

Чтобы сделать закладку, нужно сначала создать закладку, а затем добавить ссылку на нее.

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

Пример

Во-первых, создать закладку с помощью атрибута id :

Глава 4

Затем добавьте ссылку на закладку («Перейти к Главе 4»), на той же странице:

Или добавьте ссылку в закладки («Перейти к Главе 4»), на другую страницу:

Пример

Внешний Путь

Внешние страницы могут быть указаны полный адрес или относительный путь к текущей веб-странице.

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

Пример

Это пример ссылки на страницу, расположенние в папке php на текущем веб-сайта:

Пример

Это пример ссылки на страницу, расположенние в той же папке, что и текущая страница:

Пример

Подробнее о пути к файлам узнаете в главе HTML Путь к Файлам.

В чем смысл такой защиты от отслеживания посещений ссылок на странице?

Стили посещенных ссылок – тайна!
У посещенных ссылок может быть другой цвет, фон, чем у обычных. Это можно поставить в CSS с помощью псевдокласса :visited.

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

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

  • Вопрос задан более года назад
  • 91 просмотр

При чем тут отслеживание нажатий?
Browser будет подсвечивать ссылки, которые посетил пользователь, независимо от того, на какой странице они находятся. Скажем, вы с xxx.com перешли на yyy.org, а потом через три дня открыли zzz.com, на котором есть ссылка на yyy.org — так вот эта ссылка будет browser-ом подсвечена, как :visited. И если бы защиты не было, то страница zzz.com могла бы выяснить, что вы посещали yyy.org. Никакие нажатия для этого отслеживать было бы не нужно.

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

Илон Маск рекомендует:  Как изменить вид написания чисел в списке и сделать, чтобы после каждого номера шла круглая скобка
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL