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

:visited

CSS псевдокласс :visited позволяет вам выбирать ссылки, которые были посещены. Этот стиль может переопределяться другими относящимися к ссылкам псевдоклассами, такими как :link , :hover и :active , появляющимися в соответствующем порядке. Чтобы стилизировать ссылки должным образом, вставьте правило :visited после правила :link до правил :hover и :active , как определено LVHA-порядком: :link — :visited — :hover — :active .

Примечание: Из-за причин приватности, браузеры строго ограничивают стили, которые вы можете применить к элементу, используя этот псевдокласс: только color (en-US), background-color , border-color (en-US), border-bottom-color (en-US), border-left-color (en-US), border-right-color (en-US), border-top-color (en-US), outline-color (en-US), column-rule-color , fill и stroke . Компонент альфа-канала в доступных стилях будет игнорироваться. Вместо него будет использоваться альфа-канал, используемый для непосещённых ссылок. Если в цвете альфа-канала для посещённых ссылок задан 0 , то в этом случае будет использоваться цвет непосещённых ссылок.Несмотря на то, что цвет может меняться, метод getComputedStyle наврёт и всегда будет давать значение цвета непосещённых ссылок.Для дополнительной информации об ограничениях и их причин, смотрите Приватность и селектор :visited (en-US) .

Состояния ссылок в 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 применимы к ссылкам, мы обсудим в следующем уроке.

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

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

Давайте посмотрим на некоторые ссылки

Мы рассматривали как реализуются ссылки в вашем HTML в соответствии с лучшими практиками в Создании гиперссылок. В этой статье мы будем опираться на эти знания, показывая вам лучшие практики по оформлению ссылок.

Состояния ссылок

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

• Link (не посещённая): Состояние по умолчанию, в котором находится ссылка, когда она не находится в каком-либо другом состоянии. Она может быть специфически стилизована используя псевдокласс :link .
• Visited: Ссылка, когда она уже была посещена (существует в истории браузера), стилизуется используя псевдокласс :visited .
• Hover: Ссылка, когда на неё наведён курсор мыши, стилизуется используя псевдокласс :hover
• Focus: Ссылка, когда она была сфокусирована (например когда пользователь переместился на неё используя клавишу
  Tab
  или наподобие или программно сфокусирована используя HTMLElement.focus() (en-US)) — стилизуется используя псевдокласс :focus .
• Active: Ссылка, когда она активируется (например при клике по ней), стилизуется используя псевдокласс :active

Стили по умолчанию

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

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

• Ссылки подчёркнуты.
• Не посещённые ссылки синие.
• Посещённые ссылки фиолетовые
• Наведение курсора мыши на ссылку меняют указатель мыши на иконку маленькой руки.
• Сфокусированные ссылки имеют контур вокруг себя — вы можете сфокусироваться на ссылках на этой странице с помощью клавиатуры, нажав клавишу табуляции (на Mac, вам может понадобиться включить опцию Full Keyboard Access: All controls нажав
  Ctrl
  +
  F7
  , прежде чем это будет работать).
• Активные ссылки красные (попробуйте удерживать кнопку мыши на ссылке, когда вы кликните по ней).

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

• Использовать нижнее подчёркивание для ссылок, но не для других вещей. Если вы не хотите подчёркивать ссылки, то хотя бы выделите их каким-либо другим путём.
• Сделать так чтобы они как-нибудь реагировали на наведение/фокусировку на них и немного отличались после активации.

Стили по умолчанию могут быть выключены/изменены, используя следующие свойства CSS:

• color (en-US) для цвета текста.
• cursor для стиля курсора мыши — вы не должны отключать эту опцию только если у вас нет на это веской причины.
• outline (en-US) для контура текста (контур схож с границей, единственное отличие — это то, что границы занимают место в блоке, а контур — нет; он просто располагается поверх фона). Контур является полезным вспомогательным средством, так что подумайте хорошо, прежде чем отключать его; по крайней мере вы должны удвоить стили, заданные для состояния hover, а также состояния фокусировки.

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

Стилизация некоторых ссылок

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

Чтобы начать, мы выпишем наши пустые наборы правил:

Этот порядок важен так как стили ссылок опираются друг на друга, например стили в первом правиле будут применяться ко всем последующим правилам и когда ссылка будет активирована, она также будет находиться под «наведением» (hover). Если вы введёте их в неправильном порядке, стили не будут работать правильно. Чтобы запомнить этот порядок вы можете попробовать использовать мнемонику типа LoVe Fears HAte.

А теперь давайте добавим ещё немного информации чтобы правильно оформить этот стиль:

Также мы дадим некий пример HTML к которому применяется CSS:

Объединение этих двух даёт нам такой результат:

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

• Первые два правила не так интересны в этом обсуждении.
• Третье правило использует селектор a чтобы избавиться от подчёркивания текста и контура фокуса по умолчанию (которые всё равно варьируют в зависимости от браузера), а также добавляет малое количество padding к каждой ссылке — все это станет ясно позже.
• Далее, мы используем селекторы a:link и a:visited чтобы настроить пару цветовых вариаций не посещённых и посещённых ссылок, так чтоб они отличались.
• Следующие два правила используют a:focus и a:hover настраивают сфокусированные и наведённые (hovered) ссылки таким образом чтобы они имели разные фоновые цвета, плюс нижнее подчёркивание чтобы ссылка выделялась ещё больше. Два пункта на которые надо обратить внимание:
  • Нижнее подчёркивание создано используя border-bottom , а не text-decoration (en-US) — некоторые люди предпочитают это потому что первый имеет лучшие варианты стилизации, чем второй, и отрисован немного ниже, так что не срезает нижние элементы слов будучи подчёркнутыми (например хвосты у букв как «р» и «у»).
  • Значение border-bottom установлено на 1px solid , без определённого цвета. Это позволяет границам принимать тот же цвет что и элементы текста, что полезно в случае как этом, где текст имеет разные цвета в каждом случае.

  Активное изучение: Стилизуйте ссылки самостоятельно

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

  Если вы допустите ошибку, вы всегда можете сделать сброс используя кнопку Reset. Если вы действительно застряли нажмите кнопку Show solution чтобы вставить пример, который мы показали выше.

  Добавление иконок в ссылки

  Обычной практикой является добавление иконок в ссылки, чтобы предоставить больше индикатора того, на какой контент указывает ссылка. Давайте рассмотрим очень простой пример, который добавляет иконку к внешним ссылкам (ссылки, которые ведут на другие сайты). Такая ссылка обычно выглядит как маленькая стрела торчащая из коробочки — например, мы будем использовать этот отличный образец с сайта icons8.com.

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

  Итак, что же тут происходит? Мы пропустим большую часть CSS так как это та же информация, которую вы рассматривали ранее. Однако, последнее правило интересное — тут мы вставляем пользовательское фоновое изображение во внешнюю ссылку схожим способом как мы делали пользовательские маркеры для пунктов списка в последней статье — в этот раз, однако, мы используем короткую запись background вместо индивидуальных свойств. Мы задаём путь к изображению, которое хотим вставить, устанавливаем no-repeat чтобы мы получили только одну копию вставленного и затем устанавливаем позицию на 100% до правого края изображения и 0 пикселей от верхнего края.

  Также мы используем background-size для того чтобы указать размер в котором бы хотим чтобы было показано фоновое изображение — полезно иметь иконку большего размера и далее менять его размер так, как нужно для адаптивного (отзывчивого) веб-дизайна. Однако это работает только в IE9 и следующих версиях так что, если вам нужна поддержка тех старых браузеров вам просто придётся менять размер изображения и вставлять его как есть.

  Наконец, мы задаём некоторый padding-right для ссылки чтобы добавить пространство в котором появляется фоновое изображение, таким образом, чтобы мы не накладывали его на текст.

  И последнее слово — как мы выбрали только внешние ссылки? Ну, если вы пишете свои HTML ссылки правильно, то вы должны были использовать только абсолютные URL для внешних ссылок — гораздо эффективнее использовать относительные ссылки для связи с другими частями вашего сайта. Текст «http» таким образом должен появляться только во внешних ссылках и можем выбрать его при помощи селектора атрибутов: a[href*=»http»] выбирает элементы <a> , но только если они имеют атрибут href со значением содержащим «http» где-то внутри него.

  Ну вот и все — попробуйте посетить секцию активного изучения выше и испытайте этот новый метод!

  Стилизация ссылок в виде кнопок

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

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

  Для начала HTML:

  А теперь наш CSS:

  Что даёт нам следующий результат:

  https://amdy.su/wp-admin/options-general.php?page=ad-inserter.php#tab-8

  Давайте объясним, что тут происходит, фокусируясь на самых интересных частях:

  • Наше второе правило удаляет заданный по умолчанию padding у элемента <ul> и устанавливает его ширину так, чтобы охватить 100% внешнего контейнера (в этом случае <body> ).
  • Элементы <li> по умолчанию в норме являются блочными (см. типы блоков CSS чтобы вспомнить), что значит что они будут располагаться на своих собственных строках. В этом случае мы создаём горизонтальный список ссылок, поэтому в третьем правиле задаём свойству display значение inline, что приводит к тому, что элементы списка располагаются в одной строке друг с другом — теперь они ведут себя как строчные элементы.
  • четвёртое правило — которое стилизует элемент <a> — самое сложное; давайте пройдёмся по нему шаг за шагом:
    • как в предыдущем примере, мы начинаем отключать настройки по умолчанию для text-decoration (en-US) и outline (en-US) — мы не хотим, чтоб они портили нам вид.
    • Далее мы устанавливаем display на inline-block — элементы <a> являются строчными по умолчанию и, поскольку мы не хотим чтобы они вываливались на свои собственные строки как если бы это получалось со значением block , мы хотим иметь возможность менять их размер. inline-block позволяет нам делать это.
    • Теперь только изменение размера! Мы хотим заполнить всю ширину элемента <ul> , оставить немного margin между каждой кнопкой (не без зазора с правого края) и мы имеем 5 кнопок, которые надо разместить и которые должны иметь одинаковый размер. Для того чтобы это сделать мы задаём width на 19.5%, а margin-right на 0.625%. Вы заметите что вся эта эта ширина составляет 100.625%, что может сделать так что последняя кнопка перекроет <ul> и выпадет вниз на следующую строку. Тем не менее, мы возвращаемся к 100%, используя следующее правило, которое выбирает только последний <a> в списке и удаляет его margin. Сделано!
    • Последние три объявления довольно просты и в основном просто для косметических целей. Мы центрируем текст внутри каждой ссылки, задаём line-height на 3 чтобы кнопки имели некую высоту (что также имеет преимущество в центрировании текста по вертикали) и задаём для текста чёрный цвет.

    Примечание: Обратите внимание: вы могли заметить что элементы списка в HTML все находятся на одной строке друг с другом — так сделано потому, что это сделано потому, что пробелы/разрывы строк между элементами встроенного блока создают пробелы на странице, точно также как пробелы между словами и такие пробелы могли бы нарушить расположение нашего горизонтального меню навигации. Вы можете найти больше информации об этой проблеме (и решения) на Fighting the space between inline block elements.

    Заключение

    Мы надеемся эта статья снабдила вас всем что вам надо знать о ссылках — на данный момент! Последняя статья в нашем модуле стилизации текста детализирует как использовать пользовательские шрифты на вашем веб-сайте или как они больше известны веб-шрифты.

    • Назад
    • Обзор: Styling text
    • Далее

    Updated: 05/02/2021 by

    

    Below are the steps on how you can change the color of the links shown on your web page using HTML and CSS. Although the link colors can be done with the HTML BODY tag, we always recommend doing any styling settings in CSS as shown below.

    When defining the color of any web page element, you may need to use HTML color codes. For major colors, you can also specify the names of those colors instead of using the color codes, for example, red, blue, green, and black instead of using their respected color code values.

    Understanding the different types of hyperlinks

    Hyperlinks are special elements on your page, because they are interactive. To indicate that they are interactive, they are colored differently depending on their state. A hyperlink has three special colors, in addition to its default blue color, which represent three different states:

    1. Visited link — The color of a visited link. If a hyperlink is this color, the user can expect that clicking the link takes them to a page they’ve already seen. Purple is the default hyperlink color for a visited link.
    2. Hover link — The color when the mouse is hovering over a link. If a hyperlink is this color, the user can expect that pressing the left mouse button (clicking), then releasing the button, causes the link to be visited. Hover color is the same for both «Active» and «Visited» links.
    3. Active Link — The color of the link when being clicked. When the user sees this color, they can expect that releasing the mouse button causes the browser to visit the link.

    See our hyperlink definition for further information and related questions to hyperlinks.

    CSS link color example

    In the CSS example below, we are setting the hyperlink colors to resemble what is shown on this page. First, all anchors are set to the #2c87f0 (shade of blue), #636 a shade of purple, and all hover and active links color:#c33 (red). The below code can be added to the CSS style element or in your .css file.

    If your page isn’t using CSS, the steps below show how to do this in the HTML BODY tag. However, as mentioned earlier, we highly recommend using the above CSS code instead of the body tag. You can add the above code into a CSS file and link all your web pages to that CSS file. Then, you could change the background-color values in that one CSS file to instantly change the background color of all pages linking to it.

    HTML body tag example

    In some very rare situations, it may not be possible to use CSS. For those situations, you can also define the background color, text color, link color, and other values in the HTML body tag as shown below.

    Below are the descriptions of each of the HTML attributes in the body tag.

    TEXT = The color of text.
    LINK = The color of links.
    VLINK = Visited link color.
    ALINK = Color of the active link or the color the link changes to when clicked.
    BGCOLOR = The page background color.

    Updated: 05/02/2021 by

    

    Below are the steps on how you can change the color of the links shown on your web page using HTML and CSS. Although the link colors can be done with the HTML BODY tag, we always recommend doing any styling settings in CSS as shown below.

    When defining the color of any web page element, you may need to use HTML color codes. For major colors, you can also specify the names of those colors instead of using the color codes, for example, red, blue, green, and black instead of using their respected color code values.

    Understanding the different types of hyperlinks

    Hyperlinks are special elements on your page, because they are interactive. To indicate that they are interactive, they are colored differently depending on their state. A hyperlink has three special colors, in addition to its default blue color, which represent three different states:

    1. Visited link — The color of a visited link. If a hyperlink is this color, the user can expect that clicking the link takes them to a page they’ve already seen. Purple is the default hyperlink color for a visited link.
    2. Hover link — The color when the mouse is hovering over a link. If a hyperlink is this color, the user can expect that pressing the left mouse button (clicking), then releasing the button, causes the link to be visited. Hover color is the same for both «Active» and «Visited» links.
    3. Active Link — The color of the link when being clicked. When the user sees this color, they can expect that releasing the mouse button causes the browser to visit the link.

    See our hyperlink definition for further information and related questions to hyperlinks.

    CSS link color example

    In the CSS example below, we are setting the hyperlink colors to resemble what is shown on this page. First, all anchors are set to the #2c87f0 (shade of blue), #636 a shade of purple, and all hover and active links color:#c33 (red). The below code can be added to the CSS style element or in your .css file.

    If your page isn’t using CSS, the steps below show how to do this in the HTML BODY tag. However, as mentioned earlier, we highly recommend using the above CSS code instead of the body tag. You can add the above code into a CSS file and link all your web pages to that CSS file. Then, you could change the background-color values in that one CSS file to instantly change the background color of all pages linking to it.

    HTML body tag example

    In some very rare situations, it may not be possible to use CSS. For those situations, you can also define the background color, text color, link color, and other values in the HTML body tag as shown below.

    Below are the descriptions of each of the HTML attributes in the body tag.

    TEXT = The color of text.
    LINK = The color of links.
    VLINK = Visited link color.
    ALINK = Color of the active link or the color the link changes to when clicked.
    BGCOLOR = The page background color.

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

    задан 27 сен 2016 в 11:26

    

    ответ дан 27 сен 2016 в 11:36

    

    1,753 1 золотой знак 14 серебряных знаков 19 бронзовых знаков

    Вы сказали, что «на сайте есть разные блоки с разными цветами», т.е. эти блоки имеют свой класс, этим вы и можете воспользоваться.

    Например у Вас используются блоки с классом .a1 и .a2.
    Если Вам надо поменять цвет посещённой ссылки в .a1, то сделайте так:

    А если нужно поменять цвет посещённой ссылки везде, кроме этих DIVов, то пишите так:

    ответ дан 27 сен 2016 в 16:59

    

    22.7k 3 золотых знака 32 серебряных знака 65 бронзовых знаков

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

    ответ дан 27 сен 2016 в 11:34

    

    1,395 18 серебряных знаков 41 бронзовый знак

    Псевдокласс :visited применяется к ссылкам, уже посещённым пользователем, и задаёт для них стилевое оформление.

    Этот стиль может переопределяться другими относящимися к ссылкам псевдо-классами, такими как :link , :hover и :active , появляющимися в соответствующем порядке. Чтобы стилизировать ссылки должным образом, вам нужно вставлять правило :visited до правила :link , но после других, определённых LVHA-порядком: :link — :visited — :hover — :active .

    Из-за причин приватности, браузеры строго ограничивают стили, которые вы можете применить к элементу, используя этот псевдо-класс: только color , background-color , border-color , border-bottom-color , border-left-color , border-right-color , border-top-color , outline-color , column-rule-color , fill и stroke . Заметьте также, что альфа-канал будет игнорироваться: будет использоваться альфа-канал, используемый для непосещённых ссылок вместо него (но если прозрачность — 0 , то в этот случае игнорируется весь цвет, и один из используемых стилей для непосещённых ссылок).

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

    • :active
    • :any-link
    • :blank
    • :checked
    • :current()
    • :default
    • :defined
    • :dir()
    • :disabled
    • :empty
    • :enabled
    • :first
    • :first-child
    • :first-of-type
    • :focus
    • :focus-visible
    • :focus-within
    • :fullscreen
    • :future
    • :has()
    • :host
    • :host()
    • :host-context()
    • :hover
    • :indeterminate
    • :in-range
    • :invalid
    • :is()
    • :lang()
    • :last-child
    • :last-of-type
    • :left
    • :link
    • :local-link
    • :not()
    • :nth-child()
    • :nth-col()
    • :nth-last-child()
    • :nth-last-col()
    • :nth-last-of-type()
    • :nth-of-type()
    • :only-child
    • :only-of-type
    • :optional
    • :out-of-range
    • :past
    • :placeholder-shown
    • :read-only
    • :read-write
    • :required
    • :right
    • :root
    • :scope
    • :target
    • :target-within
    • :user-invalid
    • :valid
    • :visited
    • :where()

    Синтаксис¶

    Спецификации¶

    • HTML Living Standard
    • Selectors Level 4
    • Selectors Level 3
    • CSS Level 2 (Revision 1)
    • CSS Level 1

    Пример¶

    См. также¶

    • :link
    • :active
    • :hover

    Ссылки¶

    • Псевдо-класс :visited MDN (рус.)

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

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

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

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

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

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

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

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

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

    Изменяем цвет отдельных ссылок

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

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

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

    Я пробовал использовать старый способ изменения файла конфигурации Custom.css в папке данных пользователя Chrome, и никаких изменений не произошло.

    Я открыт для решений, которые включают javascript-код или настройки css, которые я могу запустить/изменить в окне разработчика (F12), даже если они не являются постоянными настройками.

    5 ответов

    Вот решение, которое работает для всех платформ и для всех версий Chrome.

    • Установите расширение стилиста
    • Нажмите «НАСТРОЙКИ» в Chrome
    • Нажмите EXTENSIONS
    • Найдите расширение стилиста и нажмите «ОПЦИИ»
    • Нажмите STYLES
    • Нажмите ADD NEW STYLE
    • Где он говорит «Имя стиля», назовите стиль
    • Установите флажок «ВСЕ САЙТ»
    • Где он говорит «Текст стилизованного текста», скопируйте и вставьте следующее:
      A:visited
    • Нажмите SAVE
    • Найдите страницу с посещенной ссылкой, обновите ее, и вы увидите новый цвет.

    Вы можете найти цвета, которые вам нравятся здесь, и вместо red вы также можете использовать цветовой код, например rgb(255, 0, 0) .

    Если вы хотите расширение DIY:

    Создать или перейти в папку c:\Users [локальный пользователь]\AppData\Local\Google\Chrome\UserData\Default\User StyleSheets\’

    Создайте или отредактируйте «Custom.css» в «User StyleSheets»:

    Примечание: этот код также можно использовать в ответе @Vic Jang.

    Создайте или отредактируйте ‘manifest.json’:

    URL перехода с хром: ‘chrome://extensions’

    установите флажок «Режим разработчика»

    нажмите «Загрузить распакованное расширение. «

    Перейдите в папку «User StyleSheets», которая содержит «Custom.css» и «manifest.json»

    установите флажок «Включено» рядом с созданным вами расширением «my_custom_css»

    Это решение уже давно работает для меня. Это еще одно расширение chrome, поэтому, если Stylish не работает для вас, попробуйте Изменить цвета

    Начиная с версии 33 браузера Chrome, таблицы стилей недоступны. Таким образом, ваше решение на вашем пути Windows 7 к custom.css недействительно.

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

    Если вы не хотите нажимать на ссылку здесь, как это сделать

    Рэндольф Кнакштедт сказал: Кто-то только что сообщил мне о расширении Chrome, стилисте, который я очень рекомендую! https://chrome.google.com/webstore/detail/stylist/pabfempgigicdjjlccdgnbmeggkbjdhd/related?hl=en

    Это расширение позволяет пользователю выбирать пользовательский цвет посещенных ссылок и действует так же, как и custom.css до самого последнего обновления Chrome. Ура!

    После установки расширения выполните следующие действия:

    — нажмите НАСТРОЙКИ — нажмите РАСШИРЕНИЯ — найдите расширение стилиста и нажмите «ОПЦИИ» — нажмите STYLES — нажмите ДОБАВИТЬ НОВЫЙ СТИЛЬ — скопируйте и вставьте следующее: A: посещенный <цвет: красный! важный >— название стиля — установите флажок ALL SITE — нажмите SAVE

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

    Похожие публикации:

    1. Как увеличить расстояние между словами в html
    2. Как сделать яндекс станцию своими руками
    3. Border bottom css что это
    4. Как пропинговать mac адрес