Цвет текста ссылки html: Как изменить цвет ссылки и фона под ней?

Leave a Comment / Html / By /

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

Тема:Ссылки

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
4.0+1.0+4.0+1.0+1.0+1.0+1.0+

Задача

Определить свой цвет ссылок для разных областей веб-страницы.

Решение

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

Для раздельного управления стилем разных ссылок рассмотрим два способа. Первый основан на контекстных селекторах. Смысл следующий. Ссылки меню располагаются внутри блока, например, <div>…</div>, а ссылки в тексте внутри блока <div>…</div>. Тогда стиль для разных ссылок получится таким.

<style>
  .menu a { color: red; }
  . content a { color: green; }
</style>

Запись .menu A означает, что стиль будет определен только для селектора A, который располагается внутри элемента с классом menu (пример 1).

Пример 1. Использование контекстных селекторов

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Использование контекстных селекторов</title>
  <style>
   .menu {
    padding: 5px; /* Поля вокруг текста */
    background: #066; /* Цвет фона */
   }
   .menu a {
    color: #ffc; /* Цвет ссылки */
   }
   .content {
    background: #ccc; /* Цвет фона */
    padding: 5px; /* Поля вокруг текста */
   }
   .content a {
    color:#6f4a25; /* Цвет ссылок */
   }
  </style>
 </head>
 <body>
  <div>
   <a href="link1.html">Ссылка 1</a> | 
   <a href="link2.html">Ссылка 2</a> | 
   <a href="link3.html">Ссылка 3</a>
  </div>
  <div>
   <a href="link1.
 
 html">Ссылка 1</a> | 
   <a href="link2.html">Ссылка 2</a> | 
   <a href="link3.html">Ссылка 3</a>
  </div>
 </body>
</html>

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

Рис. 1. Ссылки, различающиеся по цвету

Второй способ состоит в использовании классов. Для ссылки, цвет которой надо определить, создаётся новый класс и добавляется к тегу <a> (пример 2).

Пример 2. Использование классов

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Использование классов</title>
  <style>
   a {
    color: orange; /* Цвет ссылки */ 
   }
   a.content {
    color: #6f4a25; /* Цвет ссылок */ 
    text-decoration: none; /* Убираем подчеркивание */ 
   }
   a.content:visited { 
    color: purple; /* Цвет посещенных ссылок */ 
   }
   a.content:hover {
    color: red; /* Цвет ссылок при наведении на них курсора мыши */ 
   }
  </style>
 </head>
 <body>
  <p>
    <a href="link1. html">Ссылка 1</a> | 
    <a href="link2.html">Ссылка 2</a> | 
    <a href="link3.html">Ссылка 3</a>
  </p>
  <p>
    <a href="link1.html">Ссылка 1</a> |  
    <a href="link2.html">Ссылка 2</a> | 
    <a href="link3.html">Ссылка 3</a>
  </p>
 </body>
</html>

ссылкицвет

HTML по теме

  • Тег <a>

CSS по теме

  • background
  • color

Ссылки в тексте

Предлагаемое решение не компромисс, а возможность сделать чтение и навигацию по материалу комфортным для всех. Около 8% мужчин и 0,4% женщин не способны различать один или несколько цветов и их оттенков. Человек, страдающий монохромази́ей (полная цветовая слепота), различает цвета только по их яркости.

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

Примеры и правила

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

  • Нельзя подчеркивать текст, который не является ссылкой.

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

Сверху: норма.
Снизу: один из множества типов цветовой слепоты

Любые варианты цвета упираются в ту или иную проблему цветовой слепоты. Контраст — единственный инструмент, который у нас есть.

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

Правильное решение для всех состояний ссылки

a:link — непосещенная ссылка
Цвет текста: #222222 или RGBA(34, 34, 34, 1) Цвет подчеркивания: #949494 или RGBA(148, 148, 148, 1).

Удовлетворяет минимальному требованию контрастности WCAG (Уровень АА).

a:hover — ссылка, над которой находится курсор мыши
Цвет текста: #222222 или RGBA(34, 34, 34, 1). Цвет подчеркивания: #000000 или RGBA(0, 0, 0, 1) (для большего различия контраста при наведении).

a:visited — посещенная ссылка
Цвет текста: #767676 или RGBA(34, 34, 34, 1). Удовлетворяет минимальному требованию контрастности WCAG (Уровень AA) для небольшого размера шрифта. Цвет подчеркивания: #949494 или RGBA(0, 0, 0, 1).

a:active — активная ссылка
Максимальный контраст. Цвет текста: #000000 или RGBA(0, 0, 0, 1). Цвет подчеркивания: #000000 или RGBA(0, 0, 0, 1) (для большего различия контраста при наведении).

Хозяйке на заметку

16 декабря 1997 года в Японии показали 38-ю серию мультсериала “Покемон”, которая стала причиной нервного расстройства более чем у семисот детей. Пострадавшие были госпитализированы с признаками эпилепсии.

Примечания

  • Ссылки в материалах на сайте gov.design соответствуют этим требованиям.

  • К выбору точного расстояния от низа базовой линии до подчеркивания мы вернемся после выбора конкретного шрифта и его значений.

  • Концепция анимации должна быть глобальной. На данном этапе нет возможности описать ее для отдельного элемента.

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

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

Как изменить цвет ссылки HTML?

Как изменить цвет ссылки HTML?

Как изменить цвет ссылки HTML?

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

HTML-ссылкам назначены цвета по умолчанию, которые можно изменить с помощью HTML и CSS. Однако в этом случае рекомендуется отдавать предпочтение CSS, а не HTML, поскольку основная цель CSS — стилизация веб-страницы.

Различные типы HTML-ссылок:

  • Непосещенные
  • Посещено
  • Активный

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

Различные состояния гиперссылки следующие:

  • Непосещенная ссылка:
    Синяя гиперссылка означает, что связанный пункт назначения не просматривался пользователем.
  • Посещенная ссылка:
    Фиолетовая гиперссылка указывает на то, что пользователь уже просматривал связанную страницу.
  • Активная ссылка:
    В этом состоянии цвет ссылки становится красным при нажатии. Это указывает на то, что отпускание кнопки мыши приведет пользователя к связанному местоположению.
  • Ссылка при наведении:
    Состояние, когда указатель мыши находится над ссылкой, имеет тот же цвет, что и ссылки Активные и Посещенные.

Примечание:
Хотя состояния ссылок имеют цвета ссылок HTML по умолчанию, пользователи могут изменить цвета в соответствии с требованиями.

Использование атрибута стиля HTML

Следующие шаги помогут вам изменить цвет ссылки с помощью HTML.

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