Меню

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



Как изменить цвет ссылок вашего блога или сайта?

Привет, друзья! Устраивает ли вас цвет ссылок на вашем блоге или сайте? Если нет, и вы хотите изменить цвет ссылки, не беда. Сегодня я научу вас, как изменить цвет ссылки в HTML и CSS коде.

То, что я вам расскажу, будет работать на любом движке, неважно будет это WordPress или uCoz, ведь HTML и CSS используют все движки.

Цвет ссылки в CSS

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

Значение, каким цветом выводить ссылки на сайте прописывается в CSS коде, чаще всего в файле style.css. Находится этот файл всегда в корневой папке сайта.

Чтобы изменить цвет всех ссылок на сайте в CSS вам нужно открыть файл style.css и найти в нем код отвечающий за вывод ссылок. Просто найдите упоминание link или Link Styles.

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

Цвет CSS ссылок в обычном состоянии.

CSS цвет ссылок при нажатии на нее.

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

Соответственно, чтобы цвет ссылок в спокойном состоянии, мы меняем значение color: #0169D3 на свой цвет в псевдоклассе a:link.

Чтобы изменить цвет посещенных ссылок, нужно изменить значение color: #0169D3 в псевдоклассе a:visited.

Если вы хотите, чтобы ваши ссылки стали подчеркнутыми, нужно вписать в CSS код ссылки значение text-decoration:underline; как на примере:

А если наоборот хотите убрать подчеркивание ссылки, нужно вписать значение text-decoration:none;

Как менять цвет ссылок в CSS думаю понятно. Теперь давайте рассмотрим как изменить цвет ссылки в HTML коде.

HTML цвет ссылки

В отличие от CSS, где разом можно изменить все ссылки на сайте, в HTML можно поменять цвет только одной определенной ссылки.

Сама ссылка в HTML коде выглядит следующим образом:

Для того, чтобы задать ей цвет, нужно добавить значение font color для текста ссылки, чтобы получилось вот так:

Таким образом я выделил ссылку красным цветом в HTML коде.

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

Подписывайтесь на обновления блога, чтобы не пропустить!

Источник

Цвет ссылок

С помощью HTML можно задавать цвета всех ссылок на странице, а также изменять цвета для отдельных ссылок.

Задание цвета всех ссылок на странице

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

link — определяет цвет ссылок на веб-странице (цвет по умолчанию синий, #0000FF).

alink — цвет активной ссылки. Цвет ссылки меняется при нажатии на ней кнопки мыши. Цвет по умолчанию красный, #FF0000.

vlink — цвет уже посещенных ссылок. Цвет по умолчанию фиолетовый, #800080.

В HTML цвета задаются обычно цифрами в шестнадцатеричном коде, в виде #rrggbb , где r, g и b обозначают соответственно красную, зеленую и синюю составляющую. Для каждого цвета задается шестнадцатеричное значение от 00 до FF, что соответствует диапазону от 0 до 255 в десятичном исчислении. Затем эти значения объединяются в одно число, перед которым ставится символ # (пример 1).

Пример 1. Задание цветов ссылок

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

Для изменения цвета ссылок удобнее использовать CSS. Чтобы установить цвет для всех ссылок на веб-странице применяются следующие псевдоклассы, которые добавляются к селектору A .

Читайте также:  Чем закрасить цыплячий цвет волос

visited — Стиль для посещенной ссылки.

active — Стиль для активной ссылки. Активной ссылка становится при нажатии на нее.

hover — Стиль для ссылки при наведении на нее мышью.

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

Пример 2. Цвет ссылок, заданных через стили

Задание цвета отдельных ссылок на странице

Вышеописанный способ задания цветов работает для всех ссылок веб-страницы. Однако, иногда возникает необходимость одновременно использовать разные цвета. Светлые, например, для темных областей веб-страницы, а темные цвета — соответственно для светлых. Для этого также можно воспользоваться стилями.

Пример 3. Изменение цвета ссылки с помощью стилей

В данном примере приведены три разных способа задания цвета с помощью стилей.

Источник

Как задать цвет ссылки, изменить цвета ссылок

Поддержи проект.

Цвет ссылки со стилями внутри тега. Цвет ссылки через стили style на странице. Цвет ссылки через css файл. Цвет ссылки по умолчанию, и конечно посмотрим, как меняется цвет ссылки при наведении на эту ссылку. Отдельная тема у нас есть по поводу свойства hover, которое и отвечает за цвет ссылки при наведении
И конечно же у нас есть раздел, который посвящен ссылкам!

+ Сделали отдельное видео посвященное цветам ссылок!

Всё о цвете ссылок на сайте[h3]

Цвет ссылки css

Цвет ссылки по умолчанию

В разных браузерах цвет ссылка и по умолчанию может быть разным!:

Цвет ссылки по умолчанию в Microsoft Edge

Как удалить/изменить цвет ссылки по умолчанию !?

Давайте самый простой пример разберем как это сделать!?

Если требуется удалить/изменить цвет ссылки по умолчанию, то пишем просто:

В нашем случае так не получится, потому, что на сайте уже сделаны стили для ссылок, поэтому создаем ссылку с каким-то классом:

Напишем стиль для данной ссылки с классом . И добавим hover:

Смотрим, что получилось:

Как подобрать цвет ссылки

Модно подобрать цвет используя -> генератор цвета

Либо Нажимаем по ссылке ПКМ и выйдет новое окно — где нужно исследовать элемент

Ищем в коде нашу ссылку — она справа показана — видим, что напротив нашей ссылки цвет — нажимаем по нему и выбираем в новом окне тот цвет, который нужен.

Эту картинку, скриншот, можно увеличить в отдельном окне нажмите по нему!

Задать цвет ссылки css

Рассмотрим несколько вариантов — как задать цвет ссылки:

Задать цвет только для этой ссылки

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

Задать цвет ссылки через стили на странице

Результат : цвет ссылки через style на странице

Задать цвет ссылки через стили через файл css

В основном везде пользуются именно этим способом!

Если мы выведем здесь вот такой код? то увидим стили прописанные через файл css:

Источник

Как задать цвет посещённых ссылок

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

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

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

Читайте также:  Lollipop как изменить цвет

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Источник

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

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

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

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

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

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

    Пример

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

    Как сделать?

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

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

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

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

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

    Читайте также:  Какого цвета калий хлор

    Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

    Мне нужно что-бы вот это работало

    A:link < color: red >/* непосещённые ссылки */
    A:visited < color: blue >/* посещённые ссылки */
    A:hover < color: yellow >/* пользователь провёл над */
    A:active < color: lime >/* активные ссылки */

    Заметьте, что A:hover обязан размещаться после правил A:link и A:visited, поскольку иначе правила каскадирования спрячут свойство ‘color’ правила A:hover. Аналогично, поскольку A:active размещено после A:hover, цвет активной ссылки (lime) будет применён, когда пользователь и активирует и проведёт над элементом A.

    Спасибо за подсказку)))) Я просто недавно начал изучать html и всех тонкостей еще не постиг

    Добавлено через 16 минут
    Я попробовал сделать вот так

    hover работает, а visited нет?

    Добавлено через 21 минуту
    У меня походу a:visited вообще не работает, с чем это может быть связано ?

    Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

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

    Как сделать так, что при нажатии на кнопку input открылась новая вкладка? (ссылка)
    Привет всем! В интернете я нашел способ сделать кнопку в качестве ссылки, используя тег .

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

    Работающая программа только нужно с ней сделать так, чтобы центры рисовались у треугольников темже цветом,что и треугольник подскажите пожалуйста
    #include #pragma hdrstop #include «Unit1.h».

    Как залить фон меню цветом и сделать так, чтобы изображения отображались (вн)
    Первое изображение — как должно быть, второе — что у меня. Фрагменты css, в которых что-то не.

    Вывод в календаре рабочих дней одним цветом, а нерабочих другим цветом.
    В Access есть форма в которую вставлен элемент ActiveX Календарь и есть таблица, имеющая два поля.

    Источник