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

Меняем цвета ссылок

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

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

Как установить цвет посещенных ссылок в JQuery

1 Luke101 [2011-08-11 20:31:00]

Как установить посещенный цвет тега «a». вот код, который у меня есть

Приведенный выше код не работает. Я могу использовать только встроенный css. Есть ли способ сделать это?

javascript jquery css

5 ответов

2 Решение Jeremy Battle [2011-08-11 20:38:00]

В jQuery, который я знаю, нет посещенного селектора, но аналогичный вопрос указывает на плагин для обработки этого Remy Sharp Посещенные плагины

3 jastr [2012-07-31 18:52:00]

Вы можете создать тег стиля, а затем записать его на страницу.

Это может немного расстроиться, потому что JavaScript не подходит для многострочных строк.

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

0 RobB [2011-08-11 20:37:00]

Есть ли причина, по которой вы хотите использовать jQuery, а не чистый CSS? Должны ли посещаемые ссылки вести себя иначе, чем невидимые ссылки?

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

jQuery (для атрибутов цвета нескольких ссылок):

^ Подставляя нужные цвета выше.

0 Pelshoff [2011-08-11 20:39:00]

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

Теперь, чтобы добиться того, чего вы хотите, вы можете установить «живой» обработчик событий для события click на каждом якоре, а затем применить CSS соответственно.

Из любопытства; почему бы вам просто не установить правило в элементе стиля или в документе css?

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

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

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

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

Илон Маск рекомендует:  Gnu general public license

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

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

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

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

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

Состояния ссылок в CSS. Псевдоклассы

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

Какими бывают состояния ссылок

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

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

  • :hover — ссылка, на которую наведен курсор;
  • :active — активная ссылка (та, по которой совершается клик, или на которой удерживается кнопка мыши);
  • :link — ссылка, еще не посещенная пользователем;
  • :visited — посещенная ссылка.

Для справки: из соображений безопасности набор стилей, которые можно использовать для ссылок :visited , ограничен. Посещенные ссылки принимают только свойства color , background-color , border-color (и его производные), column-rule-color , outline-color . При этом свойство к посещенной ссылке можно применить, только если это же свойство задано и для обычной. Прозрачность цвета, установленная через альфа-канал для элемента :visited , будет проигнорирована. JavaScript-метод getComputedStyle всегда возвращает значение цвета непосещенных ссылок, даже если у посещенных ссылок цвет иной.

Стилизация состояний

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

Псевдокласс :active также поддается гибкой стилизации:

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

Что будет, если поменять строки местами? В этом случае некоторые стили перестанут работать согласно правилам каскадности. Дело в том, что ссылка может находиться одновременно в двух состояниях, к примеру, в :visited и в :hover , и если расположить стиль для :hover выше, чем стиль для :visited , то первый перекроется.

Выбор ссылок с помощью селекторов

Как записать селектор с псевдоклассом для определенной группы ссылок? Например, если вам нужно применить какой-то стиль для всех ссылок навигационного меню с идентификатором #main-menu , когда такая ссылка находится в состоянии наведенного на нее курсора, вы можете использовать такой селектор:

Либо, если у каждой ссылки этого меню дополнительно имеется свой класс (допустим, это .menu-link ), то такая запись тоже подойдет:

Чтобы определить стили для всех состояний данных ссылок, запишите для каждого псевдокласса отдельное правило:

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

Установите цвет посещенной ссылки на любой цвет не посещенной ссылки (PS не обычный вопрос)

Мне нужно установить a: посещения CSS на любой цвет, который установлен нормальный а.

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

Мне нужно сделать это без указания конкретного цвета.

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

PS Я знаю, как установить: посещения и определенного цвета. Это не то, что я спрашиваю.

Илон Маск рекомендует:  Вопросы по курсу Защита информации в компьютерных системах

PPS Я готов использовать JavaScript, если придется. Но я действительно склонен заставить браузер делать это.

Почему я хочу сделать что-то подобное, спросите вы?

Синий цвет, который IE8 использует для ссылок, довольно крутой. Это не # 0000FF. Это хороший оттенок синего. Поэтому я хочу установить его как для посещенных, так и для не посещенных ссылок. Но я не должен делать снимок экрана или использовать какое-либо дополнение, чтобы каждый раз выбирать точное шестнадцатеричное значение. Если позже IE изменит цвет на какой-то другой удивительный оттенок, этот код должен просто работать. Я не хочу снова находить гекс и менять его по всему коду.

Это только одна из причин. Не дай мне гекс для этого синего цвета. Найти это легко, но это не будет ответом!

Как сделать так, чтобы ссылка не меняла цвет после посещения?

У меня есть это css:

После посещения ссылки она меняет цвет.

Это происходит со ссылкой «Просмотреть все проблемы» в нижней части правой части этой страницы: http://www.problemio.com

9 ответов

Текстовое оформление влияет на подчеркивание, а не на цвет.

Чтобы установить для посещаемого цвета тот же цвет, что и по умолчанию, попробуйте:

Просто дайте ему цвет CSS

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

Для применения на всех тегах привязки используйте

Для применения только на некоторых тегах привязки используйте

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

Над цветом # ff0000, но вы можете сделать все, что захотите.

Как изменить цвет посещенных ссылок в Опере

Автор Юрий Белоусов · 05.07.2020

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

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

NoSquint Plus – расширение Opera для изменения цвета и масштаба

NoSquint Plus – это расширение для браузера Опера, которое позволяет изменить масштаб страницы, размер текста, цвет фона и ссылок для какого-то конкретного сайта или для всех сайтов сразу.

Как изменить цвет посещенных ссылок в Опере:

  1. Следует установить расширение NoSquint Plus;
  2. Нажать на появившийся значок расширения в правом верхнем углу, справа от адресной строки;
  3. Если нужно задать цвет посещенных ссылок в Опере для всех сайтов, то следует перейти в глобальные настройки (Global settings);
  4. В разделе «Link colors» нужно активировать галочку рядом с пунктом «Visited» (посещенные), а также задать цвет для посещенных ссылок;
  5. После завершения настроек нужно их сохранить, нажав на «Save».

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

Надеюсь, статья «Как изменить цвет ссылок на посещенных сайтах в Опера» была вам полезна.

Не нашли ответ на свой вопрос? Тогда воспользуйтесь формой поиска:

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

Невозможно отучить людей изучать самые ненужные предметы.

Надо знать обо всем понемножку, но все о немногом.

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить — становится деканом. (Т. Мартин)

Самоучитель CSS
Новости
Справочник CSS
Афоризмы
  • 02 ноябрь 2020, 00:00
CRAB MONSTER — БОЕВЫЕ КРАБЫ ПРИНОСЯТ ХОРОШИЙ ЗАРАБОТОК / ЗАРАБОТОК В ИНТЕРНЕТЕ — «Видео уроки — CSS»
  • 02 ноябрь 2020, 00:00
ПЕРВЫЙ ЗАРАБОТОК В BEST FIENDS. 3000 РУБЛЕЙ СТРАХОВКА / ЗАРАБОТОК В ИНТЕРНЕТЕ — «Видео уроки — CSS»
  • 02 ноябрь 2020, 00:00
CRAB MONSTER — ВЫВОДИМ ПЕРВЫЙ ЗАРАБОТОК. Рефбек 100% — «Видео уроки — CSS»
  • 10 ноябрь 2020, 00:01
26 ноября MediaTek представит 5G-процессор для смартфонов среднего класса — «Новости сети»
Помогли мы вам
Установить цвет посещённой ссылки — «Ссылки»
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.

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

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

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

Сделать ссылку, цвет ссылки, подчеркивание, убрать, hover

Итак, вроде постарался изложить подробно, теперь мы знаем как легко поменять цвет ссылки, как сделать подчеркивание ссылки, как установить цвет посещенной ссылки, и главное изменили цвет ссылки при наведении курсора. Сделать ссылку, цвет ссылки, подчеркивание, убрать, hover — и все это в нашем видео! Мы сделали не только видео.

Как изменить цвет посещенных ссылок в Chrome?

Окрашивание ссылки в серый цвет, как и предполагалось, уведомляет нас о том что она уже была посещена, но размер шрифта остался прежним! Так происходит, потому что изменение размера шрифта может быть причиной уязвимости! Как изменить цвет посещенных ссылок в Chrome? расширение: Live editor for CSS, Less & Sass — Magic CSS пишем следующее для изменен.

Состояние гиперссылок и как изменить цвет ссылки в HTML документе

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

Почему нельзя установить размер шрифта у посещенной ссылки

Привет, Хабр! Представляю Вашему вниманию перевод статьи «Why can’t I set the font size of a visited link?» автора Jim Fisher.

Посещенные ссылки отображаются фиолетовым; не посещенные — голубым. Это различие пришло к нам с времен появления веба. Но CSS позволяет нам перенастроить эти свойства с помощью псевдо-селектора :visited! Скажем, вы хотите сделать посещенные ссылки серыми и уменьшить их размер, для того чтобы показать пользователю что эта ссылка уже была посещена.

Этот стиль применен к текущей странице:

Окрашивание ссылки в серый цвет, как и предполагалось, уведомляет нас о том что она уже была посещена, но размер шрифта остался прежним! Так происходит, потому что изменение размера шрифта может быть причиной уязвимости! Если CSS сможет изменить размер шрифта, я(Jim) могу сказать посещали ли Вы pornhub.com. Но как?

Веб страницы доступны для инспектирования отображенных элементов на странице. Наиболее очевидный способ — использовать window.getComputedStyle(). Он рассказывает о свойствах, примененных к вышеупомянутой посещенной ссылке; как сообщает браузер: font-size: 18px; color: rgb(0, 0, 238).

Если getComputedStyle сообщит об изменении размера шрифта с 18px до 6px для посещенных ссылок, я(Jim) пойму, что на странице создана ссылка на pornhub.com, затем я проверю размер шрифта, для того чтобы определить историю посещений вашего браузера. Я могу использовать эти данные для таргетированной рекламы, могу продать ваши данные или шантажировать вас, и так далее… Дыра в безопасности была закрыта путем запрета на изменение font-size для a:visited.

Но информация, полученная с помощью getComputedStyle, о цвете посещенной ссылки будет: rgb(0, 0, 238) — то есть голубое. Это ложь — ссылка же серая! Для свойства color, браузеры закрывают дыру в уязвимости другим способом: вместо запрета на изменение, они заставляют getComputedStyle лгать о реальном значении.

Почему же используется два подхода? Почему мы не можем заставить getComputedStyle лгать также и о параметре font-size? Причина в том, что можно исследовать отображенные элементы веб страницы и другими методам, кроме getComputedStyle. Позицию элемента на странице можно проверить так же с помощью .pageXOffset или .pageYOffset. Изменение font-size у посещенной ссылки будет влиять на смещение у других элементов, из-за чего можно косвенно проверить какие ссылки были посещены. Отключение font-size для a:visited — это жесткое, но надежное решение.

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

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

P. S.:
Отдельное спасибо за помощь в корректировке перевода Переверзевой Ольге.

Спасибо Олегу Яценко(Samber), в комментариях он обратил внимание на то что решение проблемы с подобной утечкой данных было впервые реализовано в Mozilla — автор решения David Baron.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL