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

09.11.2020 alexxlab

Содержание

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

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
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>

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

В этой статье мы расскажем, как стилизовать ссылки с помощью свойств CSS (например. изменить цвет ссылки в CSS) Оформление ссылок зависит от состояния, в которых они находятся:

Не посещенная ссылка: состояние ссылки по умолчанию. Оно определяется с помощью псевдокласса :link.
Посещенная ссылка: стилизуется с помощью псевдокласса :visited.

Активная: ссылка, которая активируется нажатием. Задается с помощью псевдокласса: active.
Ссылка, на которую пользователь навел курсор: стилизуется псевдоклассом :hover.
Выделенная фокусом ввода: стилизуется с использованием псевдокласса :focus.

Пример оформления простой ссылки

<!DOCTYPE html> 
<html> 
<head> 
<title>CSS links</title> 
<style> 
p { 
   font-size: 30px; 
   text-align: center; 
   }          
</style> 
</head> 
<body> 
<p><a href="https://www.herbalife.com">Example for a simple link</a></p> 
</body>     
</html>

По умолчанию не посещенные ссылки оформляются синим цветом, посещенные – фиолетовым, выделенные фокусом ввода – контуром, а активные – красным цветом.

Эти стили можно изменить, используя следующие свойства CSS. Пример использования свойства text-decoration:

<!DOCTYPE html>
<html>
<head>
<style>
p { 
   font-size: 30px; 
   text-align: center; 
   }          
 
a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:active {
  text-decoration: underline;
}
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">Here is a link</a></b></p>
</body>
</html>

Пример, в котором для оформления ссылки используется свойство background-color

<!DOCTYPE html>
<html>
<head>
<style>
p { 
   font-size: 30px; 
   text-align: center; 
   }          
a:link {
  background-color: coral;
}
a:visited {
  background-color: cyan;
}
a:hover {
  background-color: DarkMagenta;
}
a:active {
  background-color: DarkSalmon ;
} 
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
</body>
</html>

Для оформления ссылки как кнопки потребуются следующие свойства: color, text-decoration, text-align, background color display, padding и другие.

Вот пример:

<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
    background-color: DarkSalmon ;
    border: none;
    color: #FFFFFF;
    padding: 25px 52px;
    text-align: center;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    text-decoration: none;
    font-size: 20px;
    text-align: center; 
    cursor: pointer;
    display: inline-block;
}
a:hover, a:active {
    background-color: DarkRed ;
}
</style>
</head>
<body>
<body>
    <a href="http://www.tennis.com" target="_blank">BUTTON</a>
</body>
</body>
</html>

Свойства, указанные в псевдоклассе :hover, могут применяться и к другим элемента, а не только к ссылкам.

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

<!DOCTYPE html>
<html>
<head>
<style>
body,html {
  margin: 0;
  font-family: sans-serif, arial, helvetica;
}
ul {
  padding: 0;
  width: 100%;
}
li {
  display: inline;
}
a {
  outline: none;
  text-decoration: none;
  display: inline-block;
  width: 19.5%;
  margin-right: 0.625%;
  text-align: center;
  line-height: 3;
  color: white;
}
li:last-child a {
  margin-right: 0;
}
a:link, a:visited, a:focus {
  background: DarkSalmon ;
}
a:hover {     
  background: DarkRed ;
}
a:active {
  background: red;
  color: white;
}
</style>
</head>
<body>
<ul>
  <li><a href="#">Tournaments</a></li><li><a href="#">Scores</a></li><li><a href="#">
News</a>
</li>
<li><a href="#">Videos</a></li><li><a href="#">PLAYERS & RANKINGS</a></li>
</ul>
</body>
</html>

Давайте рассмотрим, что именно происходит в примере, приведенном выше. Для элемента <ul> мы устанавливаем нулевой отступ, устанавливая и ширину 100% внешнего контейнера, (в нашем случае

<body>).

Элементы <li> будут располагаться отдельной строке. Таким образом, мы создадим горизонтальный список ссылок.

Самым сложным является правило номер четыре, которое стилизует элемент <a>. Мы начали с отключения стиля текста, используемого по умолчанию. Затем мы установили display: inline для элементов списка. Для ссылок мы задаем display: inline-block, чтобы иметь возможность их масштабировать.

Элементы <a> являются строчными по умолчанию. Но нам нужно изменить их размер. Свойство inline-block позволяет сделать это.

Для определения размеров заполним всю ширину элемента <ul>, оставляя небольшое пространство между каждой кнопкой. После этого устанавливаем ширину и расстояние между каждой кнопкой. Затем задаем line-height: 3, чтобы придать кнопкам определенную высоту. В конце мы устанавливаем белый цвет для текста.

Заключение

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

Данная публикация является переводом статьи «Styling CSS Links» , подготовленная редакцией проекта.

seodon.ru | Учебник HTML — Меняем цвета ссылок

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

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

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

<style type="text/css">
a:link {color:цвет}    /* цвет непосещенной ссылки */
a:visited {color:цвет} /* цвет посещенной ссылки */
a:hover {color:цвет}   /* цвет ссылки при наведении курсора мыши */
a:active {color:цвет}  /* цвет активной ссылки (в момент нажатия) */
</style>

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Изменение цвета ссылок на странице</title>
<style type="text/css">
a:link {color:#006699}
a:visited {color:#990066}
a:hover {color:#669900}
a:active {color:#FF0000}
</style>
</head>
<body>
 <p><a href="http://seodon.ru/">Как создать сайт</a></p>
 <p><a href="http://spravka.seodon.ru/">Справочники по HTML и CSS</a></p>
</body>
</html>

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

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

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

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

Пример использования тегов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Изменение цвета ссылок на странице</title>
<style type="text/css">
a:link {color:#006699}
a:visited {color:#990066}
a:hover {color:#669900}
a:active {color:#FF0000}
</style>
</head>
<body>
 <p><a href="http://seodon.ru/">Сайт Seodon.ru</a></p>

 <p>
  Здесь вы можете найти
  <a href="http://spravka.seodon.ru/">
   справочник по тегам HTML
  </a>
 </p>
</body>
</html>

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

Домашнее задание.

Создайте три блока DIV и пусть их фон будет цвета #EEEEEE.
Разместите в каждом DIV’е по одной ссылке. Пусть они ведут на любые сайты в интернете.
В каждой ссылке сделайте так, чтобы при наведении на нее курсора мыши появлялась соответствующая подсказка.
Пусть цвет непосещенной ссылки будет #FF0099, посещенной — #009933, при наведении курсора мыши — #0099FF, активной — #00FF66.

Посмотреть результат → Посмотреть ответ

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

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

Как изменить цвет ссылки с помощью HTML.

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

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

Как видим, ссылка поменяла свой цвет. Какой цвет теперь будет у ссылки, зависит от #FF0000. Это специальный цветовой код html, который присваивается каждому цвету всей цветовой палитры. Для того, чтобы определить какой код имеет тот или иной цвет ,советую прочитать статью палитра цвета html.

Как убрать подчеркивание.

Для того, чтобы убрать подчеркивание, необходимо в кодировку html ссылки добавить:

Как видите, подчеркивание исчезло.

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

Вышеописанный метод, несмотря на всю свою простоту, используется крайне редко. Как правило, для оформления веб-страницы используется таблица ститей style.css в которой прописывается оформление всех элементов страницы, в том числе, и ссылок.

Для того, чтобы изменить цвет всех ссылок в тексте, а также убрать подчеркивания достаточно прописать в файле 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. Изменение цвета ссылки с помощью стилей

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

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

По умолчанию ее цвет синий и она будет иметь подчеркивание.

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

Есть и другой способ изменить внешний вид ссылки. Для этих целей используются таблицы стилей CSS. Причем вы сможете задать значения для ссылок при различных условиях, будь-то активная ссылка (a:active), посещенная ссылка(a:visited) либо ссылка при наведении мыши (a:hover). Вот как это делается:

a <
color:#FF0000;
text-decoration:none
>

a:active <
color:#FF0000;
text-decoration:none
>

a:visited <
color:#666666;
text-decoration:none
>

a:hover <
color:#339900;
text-decoration: underline
>

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

Вы здесь: Главная — CSS — CSS Основы — Как задать цвет посещённых ссылок

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

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

a:link, a:visited, a:active {

  color: #00f; 

}

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

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

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

Создано 07.10.2011 13:51:29
Михаил Русаков

Предыдущая статья Следующая статья

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

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

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

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

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

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

Кнопка:
<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>
Она выглядит вот так:
Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>
Она выглядит вот так: Как создать свой сайт
BB-код ссылки для форумов (например, можете поставить её в подписи):
[URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

html цвет посещенной ссылки | Все о Windows 10

На чтение 4 мин. Просмотров 39 Опубликовано 15.12.2019

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

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

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. Цвет посещённой ссылки

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

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

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

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

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

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

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

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

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

Комментарии ( 5 ):

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

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

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

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

CSS оформление ссылок: убираем подчёркивание, меняем цвет

Селекторы псевдо-классов

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

span:hover { color: red; }

Ссылки

Чаще всего селекторы псевдо-классов можно встретить, когда они применяются к ссылкам. Каждая ссылка может находиться в одном из четырех состояний: непосещённая, посещенная, активная (находящаяся под курсором мыши) и нажатая (удерживаемая кнопкой мыши). В CSS есть возможность стилизовать ссылку в каждом ее состоянии:


a:link { color: #0000ff; }

a:visited { color: #ff00ff; }

a:hover { color: #00ccff; }

a:active { color: #ff0000; }

Попробовать »

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

Псевдо-классы :hover и :active формально называют динамическими, поскольку они применяют стиль только при взаимодействии пользователя с соответствующими элементами путем наведения курсора мыши и щелчка по ссылке соответственно.

Примечание: :hover, помимо ссылок, можно использовать и с другими элементами, что позволяет создавать эффекты вроде подсветки строки таблицы при наведении на нее курсора мыши. Однако браузер IE6 и более ранние версии поддерживают использование данного псевдо-класса исключительно с элементами <a>.

Подчеркивание ссылок

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      a { text-decoration: none; } 
      a:hover { text-decoration: underline; }  
    </style>
  </head>

  <body>
    <p><b><a href="#">обычная ссылка</a></b></p>
  </body>
</html>

Попробовать »

Примечание: если подчеркивание ссылок отключается с помощью свойства text-decoration, то единственным визуальным отличием между ссылками и обычным текстом будет их цвет. Это может привести к тому, что пользователям может быть трудно отличить ссылки от текста.

Псевдо-классы :first-child и :last-child

Еще одним примером псевдо-классов являются :first-child и :last-child. Псевдо-класс :first-child ссылается на первый по порядку дочерний элемент обозначенного родителя, в отличие от него :last-child работает наоборот, он ссылается на последний дочерний элемент:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      div p:first-child { color: green; }
      div p:last-child { color: blue; }  
    </style>
  </head>

  <body>
  
    <div>
      <p>Первый дочерний абзац элемента div, он будет отображаться зеленого цвета.</p>
	  
	  <p>Второй дочерний абзац элемента div, он будет отображаться черного цвета,
	  поскольку никаких правил для него не задано.</p>
	  
	  <p>Третий дочерний абзац элемента div, он же является последним дочерним абзацем.
	  Цвет текста будет синим.</p>
    </div>
	
  </body>
</html>

Попробовать »

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

ссылок: цвета текстовых ссылок

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

Эта страница научит вас:

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

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

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

ссылка — стандартная ссылка — на страницу, на которую посетитель еще не был.(стандартный цвет синий — # 0000FF).
vlink — посещенная ссылка — на страницу, на которую посетитель уже был ранее. (стандартный цвет фиолетовый — # 800080).
alink — активная ссылка — цвет ссылки при наведении на нее мыши. (стандартный цвет красный — # FF0000).

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

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

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

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

Для этого есть два метода:

Размещение тегов шрифтов между тегами и .
Этот метод будет работать во всех браузерах, кроме MSIE 3.
Использование настройки стиля в теге .
Этот метод работает в браузерах MSIE3 и более новых.

Первый метод будет выглядеть так:

Щелкните здесь , чтобы перейти на Yahoo.

Примечание:
Важно, чтобы как , так и < Теги / font> находятся между тегами и .

Второй метод будет выглядеть так:

Щелкните здесь , чтобы перейти на Yahoo.

Примечание:
Цифры RGB указывают количество красного, зеленого и синего цветов с использованием значений от 0 до 255.Вы можете узнать больше о преобразовании между цветами RGB и шестнадцатеричными цветами здесь.

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

Этот пример будет работать во всех браузерах:

Щелкните здесь , чтобы перейти на Yahoo.

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

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

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

CSS и ссылки | схемы с несколькими ссылками, эффекты наведения

Путь // www.yourhtmlsource.com → Таблицы стилей → CSS И ССЫЛКИ

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

Навигация по странице:
Базовый блок ссылок CSS | Настройка нескольких схем · Наследование | Рекомендации по наведению | Ссылки на изображения

Эта страница последний раз обновлялась 21.08.2012

Базовый блок ссылок CSS

Существует четыре объекта таблицы стилей, которые определяют внешний вид ваших ссылок:

a: ссылка {}
a: посетил {}
a: hover {}
a: active {}

Эти четыре селектора в основном охватывают старые атрибуты link, vlink и alink, но последний позволяет настроить эффекты прокрутки текста .Ваша строка a: hover вступает в игру, когда пользователь наводит курсор мыши на ссылку. Ссылка может меняться по-разному: от простого переключения цвета до полного преобразования в другой шрифт и размер. Эти эффекты очень помогают показать читателю, на какую именно ссылку он указывает. Они тоже отлично смотрятся.

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

sourcetip: Есть небольшая умная мнемоника, которая позволяет легко запомнить правильный порядок определения этих псевдоэлементов в вашей таблице стилей; просто вспомните эти знаменитые тату на костяшках пальцев: LoVe / HAte, заглавные буквы, каждая из которых обозначает один из четырех элементов.

Теперь давайте посмотрим на некоторые из наиболее распространенных вариантов форматирования, которые у вас есть:

цвет: позволяет изменять цвет текста. Используйте безопасные для Интернета или именованные цвета.Я считаю, что лучшие ролловеры меняют именно это.
оформление текста: дает вам несколько вариантов форматирования ваших ссылок. Установите значение none, чтобы убрать подчеркивание в ссылках. Если вы хотите вернуть их или поместить в качестве атрибута наведения, используйте text-decoration: underline. Чтобы получить эффект наложения (линия над текстом), установите для него значение наложения.
font-weight: позволяет изменить жирность текста.Установите полужирный или обычный шрифт. Есть и другие более конкретные значения, но они пока не поддерживаются браузерами.
стиль шрифта: — это команда для изменения текста курсивом. Для отмены установите курсивный или нормальный шрифт.
семейство шрифтов: , как вы видели раньше, это меняет шрифт.
размер шрифта: и снова. Действительно, довольно просто.
цвет фона: позволяет задать цвет фона тексту ссылки.Особенно полезно для , подсвечивающего при наведении курсора.

Если вам нужна дополнительная информация обо всех этих свойствах, а также о некоторых более сложных, прочтите CSS и текст.

Примечание о совместимости с браузером:

Для этого не проблема. Эффекты наведения на ссылки поддерживаются всеми браузерами со времен Internet Explorer 3! Вы даже можете применить эффекты наведения к элементам, которые не являются ссылками, например p: hover {background: #ffb; }. Это будет работать во всех современных браузерах, но не в Internet Explorer 6.

Настройка нескольких схем

Это связано с использованием классов CSS и довольно просто. Вы просто выбираете имя для своего класса (например, «nav») и помещаете это имя (и точку) вместе с частью ссылки, например:

a.nav: ссылка {цвет: синий; текстовое оформление: нет; }
a.nav: посетил {цвет: фиолетовый; текстовое оформление: нет; }
a.nav: hover {цвет: оранжевый; оформление текста: подчеркивание; }
a.nav: active {цвет: красный; }

а.внешний: ссылка {цвет: # 0000ff; размер шрифта: 18pt; font-weight: жирный; }
a.external: посетил {color: # 894f7b; font-weight: жирный; }
a.external: hover {text-decoration: overline; цвет фона: # 003399; }
a.external: активный {цвет: красный; }

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

Эта первая ссылка ведет на class ="nav"> главную страницу . Это относится к class ="external"> внешнему сайту .

Как вы, наверное, заметили, я использую несколько коллекций ссылок в исходном коде HTML. Они чрезвычайно полезны, когда вам нужны ссылки с подходящими светлыми цветами для перехода на панель навигации с темным фоном или для выполнения определенных целей (например, вторичные ссылки, которые я размещаю повсюду для дополнительной информации).

sourcetip: Если вы собираетесь использовать несколько class es, оставьте тип ссылок, которые вы используете чаще всего, без класса.Например, ссылки в области основного содержимого страницы. Это избавит вас от необходимости добавлять class = "something" ко многим ссылкам.

Наследование

Когда вам необходимо добавить дополнительные группы ссылок помимо группы по умолчанию (той, что без класса), дальнейшие группы унаследуют или примут форматирование группы по умолчанию. Если вы определили свои ссылки по умолчанию как полужирные, все будущие классы ссылок будут полужирными, если вы не вернете их в нормальное состояние с помощью font-weight: normal.То же самое и со всеми другими атрибутами.

Ссылки на изображения

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

border =" 0 " />

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

a img {border: none; }

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

цветов · Bootstrap

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

Цвет

. Основной текст

.text-вторичный

.text-success

. Текст-опасность

.text-warning

.text-info

. Текстовый свет

. Темный текст

. Без звука

. Текст-белый

   .text-primary 
 .text-secondary 
 .text-success 
. текст-опасность 
.текстовое предупреждение 
 .text-info 
 .text-light 
 .text-dark 
. текст без звука 
 .text-white

Классы контекстного текста также хорошо работают с привязками с предоставленными состояниями наведения и фокуса. Обратите внимание, что классы .text-white и .text-muted не имеют стиля ссылки.

    Основная ссылка  
  Дополнительная ссылка  
  Ссылка на успех  
  Ссылка на опасность  
  Предупреждающая ссылка  
  Информационная ссылка  
  Легкая ссылка  
  Темная ссылка  
  Ссылка отключена  
  Белая ссылка

Цвет фона

Подобно классам цвета контекстного текста, легко установить фон элемента для любого контекстного класса.Компоненты привязки будут темнеть при наведении курсора, как и классы текста. Фоновые утилиты не устанавливают цвет , поэтому в некоторых случаях вы захотите использовать утилиты .text- * .

.bg-primary

.bg-вторичный

.bg-success

.bg-опасность

.bg-предупреждение

.bg-info

.bg-светлый

.bg-темный

.bg-белый

   .bg-primary 
.bg-вторичный 
 .bg-success 
 .bg-dangerous 
 .bg-warning 
 .bg-info 
 .bg-light 
 .bg-dark 
 .bg-white

Фоновый градиент

Если для $ enable-gradient установлено значение true, вы сможете использовать служебные классы .bg-gradient- . По умолчанию $ enable-gradient отключен, а приведенный ниже пример намеренно нарушен. Это сделано для упрощения настройки с момента начала использования Bootstrap. Узнайте о наших опциях Sass, чтобы включить эти и другие классы.

.bg-gradient-primary

.bg-gradient-вторичный

.bg-gradient-success

.bg-gradient-dangerous

.bg-gradient-warning

.bg-gradient-info

.bg-gradient-light

.bg-gradient-dark

   .bg-gradient-primary 
.bg-gradient-вторичный 
 .bg-gradient-success 
 .bg-gradient-dangerous 
 .bg-gradient-warning 
 .bg-gradient-info 
 .bg-gradient-light 
 .bg-gradient-dark

Работа со спецификой

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

с классом.

Передача смысла вспомогательным технологиям

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

Как изменить цвет гиперссылки в PowerPoint

Хотите узнать, как изменить цвет гиперссылки в PowerPoint?

Если это так, это легко сделать, и вы узнаете, как это сделать, в этом кратком руководстве.

Приступим!

Что такое гиперссылка?

Я уверен, что вы видели на веб-страницах текст, который ведет на другую страницу или открывает другой документ.

Когда вы нажимаете на нее, она переносит вас в другое место.

Это называется гиперссылкой.

Вы также можете вставлять гиперссылки в PowerPoint.

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

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

Зачем менять цвет гиперссылок?

PowerPoint визуальный.

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

Обычно гиперссылки подчеркнуты и имеют оттенок синего.

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

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

Далее вы узнаете о различных вариантах изменения цвета гиперссылки в PowerPoint.

Параметры изменения цвета гиперссылки

Есть много разных вариантов изменения цвета гиперссылки, и мы рассмотрим их здесь.

Вариант 1. Гиперссылки изменены во всех слайдах (более новые версии)

Этот параметр работает в PowerPoint 2013 и более поздних версиях.

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

Вот шаги, чтобы заставить эту опцию работать…

Перейдите на вкладку «Дизайн» . В группе вариантов выберите Стрелка вниз . При выборе этой стрелки «Стрелка вниз » откроется меню с множеством вариантов цвета.

Нажмите Настроить цвета , который находится в нижней части раскрывающегося меню:

После того, как вы нажмете на Настроить цвета , откроется диалоговое окно Создать новые цвета темы :

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

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

Выбрав цвета, нажмите Сохранить .

Вот и все, ваши гиперссылки теперь будут любого цвета, который вы выбрали.

Вариант 2: Гиперссылки изменены во всех слайдах (предыдущие версии)

Этот параметр работает для PowerPoint 2007 и 2010.

Этот метод почти такой же, как и описанный выше, однако в этапах есть небольшой поворот.

Вот как работает этот метод…

Сначала вставьте гиперссылку:

Перейдите на вкладку «Дизайн» . В группе Темы щелкните Цвета и Создать новые цвета темы , которая находится в нижней части раскрывающегося меню:

В диалоговом окне Create New Theme Colors в разделе Theme Colors измените стрелку рядом с Hyperlink и Followed Hyperlink :

Вы можете нажать на Другие цвета для дополнительного выбора:

По завершении нажмите Сохранить .

Вариант 3. Соответствие цвета гиперссылки другому тексту на слайде

Это работает во всех версиях PowerPoint.

В этом методе вы сначала найдете цветовой код понравившегося текста и примените этот цвет к своей гиперссылке.

Вот как это делается…

Сначала вставьте текст и гиперссылку:

Выберите текст, которому должна соответствовать гиперссылка, и щелкните значок Цвет шрифта в группе шрифтов :

В появившемся раскрывающемся меню щелкните Другие цвета .Откроется диалоговое окно Цвета . В диалоговом окне Цвета запишите цветовые коды для красного, зеленого, синего:

Затем нажмите Отмена .

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

Перейдите на вкладку «Модель» в группе «Варианты» :

Щелкните стрелку вниз в группе вариантов .Затем нажмите Настроить цвета в нижней части раскрывающегося меню:

В появившемся диалоговом окне Create New Theme Colors в разделе Theme Colors выберите Hyperlink и Followed Hyperlink (необязательно) и измените эти цвета на цвет, который вы записали:

После того, как у вас есть Hyperlink и Followed Hyperlink , которые раскрашивают так, как вы хотите, затем нажмите Save .

После нажатия Сохранить обратите внимание, что у нас есть правильный цвет!

Вариант 4. Одноразовое изменение цвета гиперссылки

Эта опция будет работать во всех версиях PowerPoint.

В этом методе вы измените цвет гиперссылки один раз, выбрав ее и используя инструмент «Шрифт».

Вот как это сделать…

Сначала вставьте текст и гиперссылку:

Выберите гиперссылку, затем на вкладке «Главная» перейдите к Цвета шрифта :

Выберите цвет, который вы хотите, чтобы ваша гиперссылка была в этом одном экземпляре:

И снова у нас правильный цвет!

Лучшие Лрактики

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

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

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

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

Заключение

Вы видели, как изменить цвета гиперссылок в PowerPoint.Это просто, поэтому не пропускайте это, потому что не хотите тратить время.

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

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

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

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

Изменение цвета текста при наведении указателя мыши

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

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

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

CSS-селектор при наведении курсора используется для изменения цвета текста при перемещении курсора на этот конкретный текст.

Синтаксис

: hover {
Декларация CSS;
}

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

Пример 1

Например, у вас есть тег

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

 


<стиль>
.Заголовок{
размер шрифта: 20 пикселей;
}
.heading: hover {
красный цвет;
}




 Я иду!

Выход

До

После

Объяснение

Сначала мы пишем стиль для заголовка.
Далее пишем стиль для заголовка: hover, class.
Затем мы добавляем класс заголовка к тегу
.

Приведенный выше метод изменяет цвет заголовка на красный при перемещении курсора к тексту.

Пример 2

Например, вы создали ссылку; он меняет цвет, когда вы наводите курсор на эту ссылку, а также меняет цвет, когда вы нажимаете на этот текст.

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

 


<стиль>
/ * Когда это непосещенная ссылка * /
ссылка {
цвет: желтый;
}

/ * При переходе по ссылке * /
а: посетил {
цвет: желтый;
}

/ * Когда вы наводите курсор мыши на ссылку * /
a: hover {
красный цвет;
}

/ * Когда выбрана ссылка * /
a: active {
цвет синий;
}




 Нажмите здесь, чтобы посетить наш веб-сайт 

 errorsea.com

Выход

До

При наведении

При первом нажатии

42000
000
цвет желтый.
Когда мы наводим курсор на ссылку, она меняет цвет на красный.
Когда мы щелкаем, он меняет цвет на синий, а затем открывает ссылку.
Читайте также: Как открыть новую веб-страницу при нажатии кнопки с помощью JavaScript
Заключение
Это все об изменении цвета текста при наведении курсора на заголовок или ссылку. Этот метод используется для того, чтобы сделать веб-страницу интерактивной и удобной для пользователя.
Надеюсь, вы нашли этот пост полностью информативным и полезным.
Спасибо за внимание 🙂
HTML | ссылка Атрибут
HTML | ссылка Атрибут
Ссылка HTML Атрибут используется для указания цвета по умолчанию для непосещенной ссылки в документе.
Синтаксис:

Значения атрибутов:
color_name: Используется для указания имени цвета непосещенной ссылки.
hex_number: Используется для указания цвета непосещенной ссылки в шестнадцатеричном коде.
rgb_number: Используется для определения цвета непосещенной ссылки в виде значения RGB.
Пример:

< HTML >

< головка >
< титул >
Атрибут ссылки тела HTML
название >
головка >

< корпус звено = «красный» >
< центр >
< h2 style = "цвет: зеленый;" >
GeeksforGeeks
h2 >

< h3 > HTML < body > Атрибут ссылки h3 >

< a href = "#" >
Информатика
портал для гиков
a >
центр >
корпус >

HTML >
Выход:
Поддерживаемые браузеры: Браузеры, поддерживаемые атрибутом ссылки HTML, перечислены ниже:
Google Chrome
Internet Explorer
Firefox
Safari
Opera
Применение цвета к элементам HTML с помощью CSS - HTML: язык разметки гипертекста
Использование цвета - фундаментальная форма человеческого самовыражения.Дети экспериментируют с цветом еще до того, как научатся рисовать руками. Может быть, поэтому цвет - одна из первых вещей, с которой люди часто хотят экспериментировать, когда учатся разрабатывать веб-сайты. С помощью CSS есть много способов добавить цвет к вашим HTML-элементам, чтобы создать именно тот вид, который вам нужен. Эта статья представляет собой учебник, знакомящий с каждым из способов использования цвета CSS в HTML.
К счастью, добавить цвет к вашему HTML на самом деле очень просто, и вы можете добавить цвет практически ко всему.
Мы собираемся коснуться большей части того, что вам нужно знать при использовании цвета, включая список того, что вы можете раскрасить, и какие свойства CSS задействованы, как вы описываете цвета и как на самом деле использовать цвета в таблицах стилей. и в скриптах. Мы также рассмотрим, как позволить пользователю выбирать цвет.
Затем мы завершим это кратким обсуждением того, как разумно использовать цвет: как выбрать подходящие цвета, учитывая потребности людей с разными зрительными способностями.
На уровне элементов ко всему в HTML можно применить цвет. Вместо этого давайте посмотрим на вещи с точки зрения того, что нарисовано в элементах, например, текст, границы и так далее. Для каждого мы увидим список свойств CSS, которые применяют к ним цвет.
На фундаментальном уровне свойство color определяет цвет переднего плана содержимого HTML-элемента, а свойство background-color определяет цвет фона элемента.Их можно использовать практически для любого элемента.
Текст
При визуализации элемента эти свойства используются для определения цвета текста, его фона и любых украшений в тексте.
цвет
Цвет, используемый при рисовании текста и любых текстовых украшений (таких как добавление нижних или нижних линий, зачеркивание линий и т. Д.
цвет фона
Цвет фона текста.
тень текста
Настраивает эффект тени для применения к тексту. Среди вариантов тени - основной цвет тени (который затем размывается и смешивается с фоном на основе других параметров). Дополнительные сведения см. В разделе «Тени отбрасываемого текста» в разделе «Основные стили текста и шрифтов».
текст-украшение-цвет
По умолчанию для оформления текста (например, подчеркивания, зачеркивания и т. Д.) В качестве цвета используется свойство color .Однако вы можете переопределить это поведение и использовать для них другой цвет с помощью свойства text-decoration-color .
цвет выделения текста
Цвет, используемый при рисовании символов выделения рядом с каждым символом в тексте. Это используется в первую очередь при рисовании текста для языков Восточной Азии.
каре
Цвет, используемый при рисовании курсора (иногда называемого курсором ввода текста) внутри элемента.Это полезно только для редактируемых элементов, таких как и </code>, или элементов, для которых установлен атрибут HTML <code> contenteditable </code>. </dd> </dl> <h4><span class="ez-toc-section" id="i-36"> Коробки </span></h4> <p> Каждый элемент представляет собой коробку с каким-либо содержимым, у которого есть фон и рамка в дополнение к любому содержимому, которое может иметь коробка. </p> <dl> <dt> Границы </dt> <dd> См. В разделе «Границы» список свойств CSS, которые можно использовать для установки цветов границ блока.</dd> <dt> <code> цвет фона </code> </dt> <dd> Цвет фона для использования в областях элемента, не имеющих содержимого переднего плана. </dd> <dt> <code> столбец-линейка-цвет </code> </dt> <dd> Цвет, используемый при рисовании линии, разделяющей столбцы текста. </dd> <dt> <code> цвет контура </code> </dt> <dd> Цвет, используемый при рисовании контура снаружи элемента. Этот контур отличается от границы тем, что для него не отведено место в документе (поэтому он может перекрывать другое содержимое).Обычно он используется как индикатор фокуса, чтобы показать, какой элемент будет получать события ввода. </dd> </dl> <h4><span class="ez-toc-section" id="i-37"> Границы </span></h4> <p> Любой элемент может иметь границу вокруг него. Граница базового элемента - это линия, проведенная по краям содержимого элемента. См. Свойства бокса в блочной модели, чтобы узнать о взаимосвязи между элементами и их границами, и статью «Стилизация границ с помощью CSS», чтобы узнать больше о применении стилей к границам. </p> <p> Вы можете использовать сокращенное свойство <code> border </code>, которое позволяет вам настроить все, что связано с рамкой, за один снимок (включая нецветные особенности границ, такие как ее ширина, стиль (сплошная, пунктирная и т. Д.)), и так далее. </p> <dl> <dt> <code> цвет рамки </code> </dt> <dd> Задает один цвет, который будет использоваться для каждой стороны границы элемента. </dd> <dt> <code> цвет рамки слева </code>, <code> цвет рамки справа </code>, <code> цвет рамки сверху </code> и <code> цвет рамки снизу </code> </dt> <dd> Позволяет установить цвет соответствующей стороны границы элемента. </dd> <dt> <code> цвет начала блока границы </code> и <code> цвет конца блока границы </code> </dt> <dd> С их помощью вы можете установить цвет, используемый для рисования границ, ближайших к началу и концу блока, который окружает граница.В режиме письма слева направо (например, при написании на английском языке) граница начала блока - это верхний край, а конец блока - нижний. Это отличается от встроенного начала и конца, которые представляют собой левый и правый края (соответствующие тому, где каждая строка текста в поле начинается и заканчивается). </dd> <dt> <code> border-inline-start-color </code> и <code> border-inline-end-color </code> </dt> <dd> Позволяют раскрасить края границы, ближайшей к началу и концу начала строк текста внутри поля.Какая это сторона будет зависеть от свойств </code> режима письма <code> </code>, направления <code> </code> и ориентации текста <code> </code>, которые обычно (но не всегда) используются для настройки направленности текста в зависимости от отображаемого языка. Например, если текст поля отображается справа налево, то <code> border-inline-start-color </code> применяется к правой стороне границы. </dd> </dl> <h4><span class="ez-toc-section" id="i-38"> Другие способы использования цвета </span></h4> <p> CSS - не единственная веб-технология, поддерживающая цвет.В Интернете доступны графические технологии, которые также поддерживают цвет. </p> <dl> <dt> API HTML Canvas </dt> <dd> Позволяет рисовать двухмерную растровую графику в элементе <code> <canvas> </code>. См. Наше руководство по Canvas, чтобы узнать больше. </dd> <dt> SVG (масштабируемая векторная графика) </dt> <dd> Позволяет рисовать изображения с помощью команд, которые рисуют определенные формы, узоры и линии для создания изображения. Команды SVG отформатированы как XML и могут быть встроены непосредственно в веб-страницу или могут быть размещены на странице с помощью элемента <code> <img> </code>, как и любой другой тип изображения.</dd> <dt> WebGL </dt> <dd> Библиотека веб-графики - это API-интерфейс на основе OpenGL ES для рисования высокопроизводительной 2D- и 3D-графики в Интернете. См. Наше руководство по WebGL, чтобы узнать больше. </dd> </dl> <p> Чтобы представить цвет в CSS, вы должны найти способ перевести аналоговое понятие «цвет» в цифровую форму, которую может использовать компьютер. Обычно это делается путем разделения цвета на компоненты, например, сколько из каждого набора основных цветов смешивать вместе или насколько ярким сделать цвет.Таким образом, существует несколько способов описания цвета в CSS. </p> <p> Для более подробного обсуждения каждого из типов значений цвета см. Ссылку на модуль CSS <code> <color> </code>. </p> <h4><span class="ez-toc-section" id="i-39"> Ключевые слова </span></h4> <p> Определен набор стандартных названий цветов, позволяющий использовать эти ключевые слова вместо числовых представлений цветов, если вы решите это сделать, и есть ключевое слово, представляющее точный цвет, который вы хотите использовать. Ключевые слова цвета включают стандартные основные и вторичные цвета (например, красный <code> </code>, синий <code> </code> или <code> оранжевый </code>), оттенки серого (от <code> черного </code> до <code> белого </code>, включая такие цвета, как <code> темно-серый </code> и <code> светло-серый </code>) и множество других смешанных цветов, включая <code> светло-зеленый </code>, <code> васильковый </code> и <code> rebeccapurple </code>.</p> <p> См. Ключевые слова цвета в <code> <color> </code>, где приведен список всех доступных ключевых слов цвета. </p> <h4><span class="ez-toc-section" id="_RGB"> Значения RGB </span></h4> <p> Есть три способа представления цвета RGB в CSS. </p> <h5><span class="ez-toc-section" id="i-40"> Шестнадцатеричное строковое представление </span></h5> <p> Шестнадцатеричная строка представляет цвет с использованием шестнадцатеричных цифр для представления каждого из компонентов цвета (красный, зеленый и синий). Он также может включать четвертый компонент: альфа-канал (или непрозрачность). Каждый компонент цвета может быть представлен как число от 0 до 255 (0x00 и 0xFF) или, необязательно, как число от 0 до 15 (0x0 и 0xF).Все компоненты <em> необходимо указать </em>, используя одинаковое количество цифр. Если вы используете однозначное обозначение, окончательный цвет вычисляется с использованием цифры каждого компонента дважды; то есть <code> "#D" </code> становится <code> "#DD" </code> при рисовании. </p> <p> Цвет в шестнадцатеричном строковом представлении всегда начинается с символа <code> «#» </code>. После этого идут шестнадцатеричные цифры цветового кода. Строка нечувствительна к регистру. </p> <dl> <dt> <code> "#rrggbb" </code> </dt> <dd> Задает полностью непрозрачный цвет, красный компонент которого представляет собой шестнадцатеричное число <code> 0xrr </code>, зеленый компонент - <code> 0xgg </code>, а синий компонент - <code> 0xbb </code>.</dd> <dt> <code> "#rrggbbaa" </code> </dt> <dd> Задает цвет, красный компонент которого представляет собой шестнадцатеричное число <code> 0xrr </code>, зеленый компонент - <code> 0xgg </code>, а синий компонент - <code> 0xbb </code>. Альфа-канал указан <code> 0xaa </code>; чем ниже это значение, тем более полупрозрачным становится цвет. </dd> <dt> <code> "#rgb" </code> </dt> <dd> Задает цвет, красный компонент которого представляет собой шестнадцатеричное число <code> 0xrr </code>, зеленый компонент - <code> 0xgg </code>, а синий компонент - <code> 0xbb </code>.</dd> <dt> <code> "#rgba" </code> </dt> <dd> Задает цвет, красный компонент которого представляет собой шестнадцатеричное число <code> 0xrr </code>, зеленый компонент - <code> 0xgg </code>, а синий компонент - <code> 0xbb </code>. Альфа-канал указан <code> 0xaa </code>; чем ниже это значение, тем более полупрозрачным становится цвет. </dd> </dl> <p> В качестве примера можно представить ярко-синий непрозрачный цвет как <code> "# 0000ff" </code> или <code> "# 00f" </code>. Чтобы сделать его непрозрачным на 25%, вы можете использовать <code> "# 0000ff44" </code> или <code> "# 00f4" </code>.</p> <h5><span class="ez-toc-section" id="_RGB-2"> Функциональное обозначение RGB </span></h5> Функциональная нотация <p> RGB (красный / зеленый / синий), как и шестнадцатеричная строковая нотация, представляет цвета, используя их красный, зеленый и синий компоненты (а также, необязательно, компонент альфа-канала для непрозрачности). Однако вместо строки цвет определяется с помощью функции CSS <code> rgb () </code>. Эта функция принимает в качестве входных параметров значения красного, зеленого и синего компонентов и необязательный четвертый параметр - значение альфа-канала.</p> <p> Допустимые значения для каждого из этих параметров: </p> <dl> <dt> <code> красный </code>, <code> зеленый </code> и <code> синий </code> </dt> <dd> Каждый должен быть значением <code> <целое число> </code> от 0 до 255 (включительно) или <code> <процент> </code> от 0% до 100%. </dd> <dt> <code> альфа </code> </dt> <dd> Альфа-канал - это число от 0,0 (полностью прозрачный) до 1,0 (полностью непрозрачный). Вы также можете указать процент, где 0% соответствует 0,0, а 100% соответствует 1.0. </dd> </dl> <p> Например, ярко-красный цвет, непрозрачный на 50%, может быть представлен как <code> rgb (255, 0, 0, 0,5) </code> или <code> rgb (100%, 0, 0, 50%) </code>. </p> <h4><span class="ez-toc-section" id="_HSL"> Функциональная нотация HSL </span></h4> <p> Дизайнеры и художники часто предпочитают работать с цветовым методом HSL (оттенок / насыщенность / яркость). В Интернете цвета HSL представлены с использованием функциональной нотации HSL. В остальном CSS-функция <code> hsl () </code> очень похожа на функцию <code> rgb () </code>. </p> <em> <strong> Рисунок 1.Цветной цилиндр HSL. </strong> Оттенок определяет фактический цвет на основе положения на круговом цветовом круге, представляющем цвета видимого спектра. Насыщенность - это процентное значение расстояния между оттенком серого и максимально возможным количеством данного оттенка. По мере увеличения значения яркости (или яркости) цвет меняется от самого темного к самому яркому (от черного к белому). Изображение любезно предоставлено пользователем SharkD в Википедии, распространяется под лицензией CC BY-SA 3.0 лицензия. </em> <p> Значение компонента оттенка (H) цвета HSL - это угол от красного вокруг до желтого, зеленого, голубого, синего и пурпурного (снова заканчивающийся красным на 360 °), который определяет основной цвет. Значение может быть указано в любых единицах измерения <code> <angle> </code>, поддерживаемых CSS, включая градусы (<code> градусов, </code>), радианы (<code> рад, </code>), градиенты (<code> градусов, </code>) или повороты (<code> градусов, </code>). Но это не влияет на то, насколько ярким или тусклым, а также насколько ярким или темным будет цвет.</p> <p> Компонент насыщенности (S) цвета определяет, какой процент окончательного цвета состоит из указанного оттенка. Остальное определяется уровнем серого, обеспечиваемым компонентом яркости (L). </p> <p> Думайте об этом как о создании идеального цвета краски: </p> <ol> <li> Вы начинаете с базовой краски, которая имеет максимально возможную интенсивность для данного цвета, например, наиболее интенсивный синий, который может быть представлен на экране пользователя. Это компонент оттенка <strong> </strong> (H): значение, представляющее угол вокруг цветового круга для яркого оттенка, который мы хотим использовать в качестве нашей основы.</li> <li> Затем выберите краску в оттенках серого, которая соответствует желаемой яркости цвета; это яркость. Вы хотите, чтобы он был очень ярким и почти белым, или очень темным и ближе к черному, или где-то посередине? Это указывается в процентах, где 0% - это идеально черный, а 100% - идеально белый. (независимо от насыщенности или оттенка). Между значениями - буквальная серая область. </li> <li> Теперь, когда у вас есть серая краска и совершенно яркий цвет, вам нужно смешать их вместе.Компонент насыщенности (S) цвета указывает, какой процент окончательного цвета должен состоять из этого идеально яркого цвета. Остальной окончательный цвет состоит из серой краски, которая представляет насыщенность. </li> </ol> <p> Вы также можете дополнительно включить альфа-канал, чтобы сделать цвет менее 100% непрозрачным. </p> <p> Вот несколько образцов цветов в нотации HSL: </p> <p> Обратите внимание, что когда вы опускаете единицы измерения оттенка, предполагается, что они выражаются в градусах (<code> градусов, </code>).</p> <p> Теперь, когда вы знаете, какие свойства CSS позволяют применять цвет к элементам и форматы, которые вы можете использовать для описания цветов, вы можете собрать их вместе, чтобы начать использовать цвет. Как вы могли видеть из списка в разделе «Вещи, которые могут иметь цвет», есть много элементов, которые можно раскрасить с помощью CSS. Давайте посмотрим на это с двух сторон: использование цвета в таблице стилей и добавление и изменение цвета с помощью кода JavaScript для изменения стилей элементов. </p> <h4><span class="ez-toc-section" id="i-41"> Указание цветов в таблицах стилей </span></h4> <p> Самый простой способ применить цвет к элементам - и как вы это обычно делаете - это указать цвета в CSS, которые используются при рендеринге элементов.Хотя мы не будем использовать все упомянутые ранее свойства, мы рассмотрим несколько примеров. Концепция одинакова везде, где вы используете цвет. </p> <p> Давайте рассмотрим пример, начав с результатов, которых мы пытаемся достичь: </p> <h5><span class="ez-toc-section" id="HTML-3"> HTML </span></h5> <p> HTML-код, ответственный за создание приведенного выше примера, показан здесь: </p><pre> <code> <div> <div> <p> Это первая коробка. </p> </div> <div> <p> Это вторая коробка.</p> </div> </div> </code> </pre><p> Это довольно просто, используя <code> <div> </code> в качестве оболочки вокруг содержимого, которое состоит из еще двух <code> <div> </code> s, каждый из которых оформлен по-разному с одним абзацем (<code> <p> </code>) в каждом поле. </p> <p> Волшебство происходит, как обычно, в CSS, где мы применяем цвета, определяющие макет для HTML выше. </p> <h5><span class="ez-toc-section" id="CSS-3"> CSS </span></h5> <p> Мы будем смотреть на CSS, чтобы создавать вышеуказанные результаты по частям, так что мы можем просматривать интересные части одну за другой.</p><pre> <code> .wrapper { ширина: 620 пикселей; высота: 110 пикселей; маржа: 0; отступ: 10 пикселей; граница: 6 пикселей, сплошная, средняя бирюза; } </code> </pre><p> Класс <code> .wrapper </code> используется для назначения стилей элементу <code> <div> </code>, который включает все остальное содержимое. Это устанавливает размер контейнера с использованием ширины <code> </code> и высоты <code> </code>, а также его поля <code> </code> и заполнения <code> </code>. </p> <p> Более интересным для нашего обсуждения является использование свойства <code> border </code> для установления границы вокруг внешнего края элемента.Эта граница представляет собой сплошную линию шириной 6 пикселей и имеет цвет <code>, средний бирюзовый цвет </code>. </p> <p> Наши два цветных блока имеют ряд общих свойств, поэтому теперь мы создаем класс <code> .box </code>, который определяет эти общие свойства: </p><pre> <code> .box { ширина: 290 пикселей; высота: 100 пикселей; маржа: 0; отступ: 4px 6px; шрифт: 28px "Marker Felt", "Zapfino", курсив; дисплей: гибкий; justify-content: center; align-items: center; } </code> </pre><p> Вкратце, <code>.Поле </code> устанавливает размер каждого поля, а также конфигурацию шрифта, используемого в нем. Мы также используем CSS Flexbox, чтобы легко центрировать содержимое каждого поля. Мы включаем режим <code> flex </code>, используя <code> display: flex </code>, и устанавливаем <code> justify-content </code> и <code> align-items </code> на <code> center </code>. Затем мы можем создать класс для каждого из двух блоков, который определяет свойства, различающиеся между ними. </p><pre> <code> .boxLeft { плыть налево; цвет фона: rgb (245, 130, 130); контур: 2px сплошной темно-красный; } </code> </pre><p> Модель <code>.Класс boxLeft </code> - который ловко используется для стилизации блока слева - перемещает блок слева, а затем устанавливает цвета: </p> <ul> <li> Цвет фона блока устанавливается путем изменения значения свойства CSS <code> background-color </code> на <code> rgb (245, 130, 130) </code>. </li> <li> Для коробки определен контур. В отличие от более часто используемой границы <code> </code>, контур <code> </code> вообще не влияет на макет; он рисует поверх всего, что может оказаться за пределами рамки элемента, вместо того, чтобы освобождать место, как это делает граница <code> </code>.Этот контур представляет собой сплошную темно-красную линию толщиной в два пикселя. Обратите внимание на использование ключевого слова <code> darkred </code> при указании цвета. </li> <li> Обратите внимание, что мы не устанавливаем цвет текста явно. Это означает, что значение <code> color </code> будет унаследовано от ближайшего содержащего элемента, который его определяет. По умолчанию это черный цвет. </li> </ul><pre> <code> .boxRight { float: right; цвет фона: hsl (270 градусов, 50%, 75%); Контур: 4px пунктирная rgb (110, 20, 120); цвет: hsl (0 градусов, 100%, 100%); текст-оформление: подчеркивание волнистым # 88ff88; тень текста: 2px 2px 3px черный; } </code> </pre><p> Когда вы пытаетесь показать его в Safari, он не будет отображаться должным образом.Поскольку Safari не поддерживает <code> text-decoration: подчеркивание волнистым # 88ff88 </code>. </p> <p> Наконец, класс <code> .boxRight </code> описывает уникальные свойства прямоугольника, нарисованного справа. Он настроен таким образом, чтобы поле перемещалось вправо, чтобы оно отображалось рядом с предыдущим полем. Затем устанавливаются следующие цвета: </p> <ul> <li> Цвет фона <code> </code> устанавливается с использованием значения HSL, указанного с помощью <code> hsl (270deg, 50%, 75%) </code>. Это средний фиолетовый цвет.</li> <li> Контур <code> блока </code> используется, чтобы указать, что блок должен быть заключен в пунктирную линию толщиной в четыре пикселя, имеющую более глубокий фиолетовый цвет (<code> rgb (110, 20, 120) </code>). </li> <li> Цвет переднего плана (текста) задается установкой для свойства <code> color </code> значения <code> hsl (0deg, 100%, 100%) </code>. Это один из многих способов указать белый цвет. </li> <li> Добавляем зеленую волнистую линию под текст с <code> text-decoration </code>. </li> <li> Наконец, к тексту добавляется немного тени с помощью <code> text-shadow </code>.Его параметр <code> цвет </code> установлен на <code> черный </code>. </li> </ul> <p> Есть много ситуаций, в которых на вашем веб-сайте может потребоваться разрешить пользователю выбирать цвет. Возможно, у вас есть настраиваемый пользовательский интерфейс или вы реализуете приложение для рисования. Возможно, у вас есть редактируемый текст, и вам нужно разрешить пользователю выбирать цвет текста. Или, возможно, ваше приложение позволяет пользователю назначать цвета папкам или элементам. Хотя исторически было необходимо реализовать собственное средство выбора цвета, теперь HTML обеспечивает поддержку браузеров, чтобы предоставить его для использования через элемент <code> <input> </code>, используя <code> «цвет» </code> в качестве значения его атрибута <code> type </code>.</p> <p> Элемент <code> <input> </code> представляет цвет только в шестнадцатеричной строковой нотации, описанной выше. </p> <h4><span class="ez-toc-section" id="i-42"> Пример: выбор цвета </span></h4> <p> Давайте рассмотрим простой пример, в котором пользователь может выбрать цвет. По мере того как пользователь настраивает цвет, граница вокруг примера изменяется, чтобы отразить новый цвет. После завершения и выбора окончательного цвета отображается значение палитры цветов. </p> <p> В macOS вы указываете, что завершили выбор цвета, закрыв окно выбора цвета.</p> <h5><span class="ez-toc-section" id="HTML-4"> HTML </span></h5> <p> HTML здесь создает поле, которое содержит элемент управления выбора цвета (с меткой, созданной с использованием элемента <code> <label> </code>) и пустой элемент абзаца (<code> <p> </code>), в который мы выведем текст из нашего JavaScript. код. </p><pre> <code> <div> <label for = "colorPicker"> Цвет границы: </label> <input type = "color" value = "# 8888ff"> <p> </p> </div> </code> </pre><h5><span class="ez-toc-section" id="CSS-4"> CSS </span></h5> <p> CSS устанавливает размер блока и некоторые базовые стили для внешнего вида.Граница также установлена с шириной 2 пикселя и недолговечным цветом границы, благодаря приведенному ниже JavaScript ... </p><pre> <code> #box { ширина: 500 пикселей; высота: 200 пикселей; граница: 2px сплошной RGB (245, 220, 225); отступ: 4px 6px; шрифт: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif" } </code> </pre><h5><span class="ez-toc-section" id="JavaScript"> JavaScript </span></h5> <p> Сценарий здесь обрабатывает задачу обновления начального цвета границы, чтобы он соответствовал значению средства выбора цвета. Затем добавляются два обработчика событий для обработки ввода от элемента <code> <input type = "color"> </code>.</p><pre> <code> пусть colorPicker = document.getElementById ("colorPicker"); let box = document.getElementById («коробка»); пусть output = document.getElementById («вывод»); box.style.borderColor = colorPicker.value; colorPicker.addEventListener ("ввод", функция (событие) { box.style.borderColor = event.target.value; }, ложный); colorPicker.addEventListener ("изменение", функция (событие) { output.innerText = "Цвет установлен на" + colorPicker.value + "."; }, ложный); </code> </pre><p> Вход <code> Событие </code> отправляется каждый раз, когда значение элемента изменяется; то есть каждый раз, когда пользователь настраивает цвет в палитре цветов.Каждый раз, когда приходит это событие, мы устанавливаем цвет границы поля в соответствии с текущим значением средства выбора цвета. </p> <p> Событие изменения <code> </code> получено, когда значение средства выбора цвета завершено. Мы отвечаем установкой содержимого элемента <code> <p> </code> с идентификатором <code> «output» </code> в строку, описывающую окончательно выбранный цвет. </p> <p> Правильный выбор цветов при разработке веб-сайта может оказаться непростым делом, особенно если вы недостаточно разбираетесь в искусстве, дизайне или, по крайней мере, в базовой теории цвета.Неправильный выбор цвета может сделать ваш сайт непривлекательным или, что еще хуже, сделать контент нечитаемым из-за проблем с контрастом или противоречивыми цветами. Что еще хуже, если использование неправильных цветов может привести к тому, что ваш контент станет совершенно непригодным для использования людьми с определенными проблемами зрения, особенно с дальтонизмом. </p> <h4><span class="ez-toc-section" id="i-43"> Выбор подходящих цветов </span></h4> <p> Подобрать нужные цвета может быть непросто, особенно без обучения искусству или дизайну. К счастью, есть инструменты, которые могут вам помочь.Хотя они не могут заменить хорошего дизайнера, помогающего вам принять эти решения, они определенно могут помочь вам начать работу. </p> <h5><span class="ez-toc-section" id="i-44"> Базовый цвет </span></h5> <p> Первый шаг - выбрать базовый цвет <strong> </strong>. Это цвет, который каким-то образом определяет ваш веб-сайт или его тематику. Так же, как мы ассоциируем зеленый цвет с напитком Mountain Dew, а синий цвет можно представить в связи с небом или океаном, выбор подходящего базового цвета для представления вашего сайта - хорошее место для начала.Есть много способов выбрать базовый цвет; несколько идей включают: </p> <ul> <li> Цвет, который естественным образом связан с темой вашего контента, например, существующий цвет, идентифицируемый с продуктом или идеей, или цвет, представляющий эмоцию, которую вы хотите передать. </li> <li> Цвет, который получается из изображений, связанных с тем, о чем ваш контент. Если вы создаете веб-сайт о данном предмете или продукте, выберите цвет, который физически присутствует на этом предмете. </li> <li> Просматривайте веб-сайты, которые позволяют вам найти вдохновение во множестве существующих цветовых палитр и изображений.</li> </ul> <p> Пытаясь выбрать базовый цвет, вы можете обнаружить, что расширения браузера, позволяющие выбирать цвета из веб-содержимого, могут оказаться особенно удобными. Некоторые из них даже специально разработаны для помощи в такого рода работе. Например, веб-сайт ColorZilla предлагает расширение (Chrome / Firefox), которое предлагает инструмент пипетки для выбора цветов из Интернета. Он также может принимать средние значения цветов пикселей в областях разного размера или даже в выбранной области страницы. </p> <p> Преимущество усреднения цветов может заключаться в том, что часто то, что выглядит как сплошной цвет, на самом деле представляет собой удивительно различное количество связанных цветов, которые используются совместно, смешиваясь для создания желаемого эффекта.Выбор только одного из этих пикселей может привести к получению цвета, который сам по себе выглядит неуместным. </p> <h5><span class="ez-toc-section" id="i-45"> Детализация палитры </span></h5> <p> После того, как вы определились с основным цветом, существует множество онлайн-инструментов, которые помогут вам создать палитру подходящих цветов для использования вместе с основным цветом, применив теорию цвета к вашему базовому цвету для определения подходящих добавленных цветов. Многие из этих инструментов также поддерживают просмотр отфильтрованных цветов, чтобы вы могли увидеть, как они будут выглядеть для людей с различными формами дальтонизма.См. Раздел Цвет и доступность для краткого объяснения того, почему это важно. </p> <p> Несколько примеров (все бесплатные на момент последнего пересмотра этого списка): </p> <p> При разработке своей палитры не забудьте, что помимо цветов, которые обычно генерируются этими инструментами, вам, вероятно, также потребуется добавить некоторые основные нейтральные цвета, такие как белый (или почти белый), черный (или почти черный). , и некоторое количество оттенков серого. </p> <p> Обычно лучше использовать как можно меньшее количество цветов.Используя цвет для выделения, а не добавления цвета ко всему на странице, вы сохраняете удобочитаемость вашего контента, а цвета, которые вы действительно используете, имеют гораздо большее влияние. </p> <h4><span class="ez-toc-section" id="i-46"> Ресурсы по теории цвета </span></h4> <p> Полный обзор теории цвета выходит за рамки данной статьи, но доступно множество статей по теории цвета, а также курсы, которые можно найти в близлежащих школах и университетах. Пара полезных ресурсов по теории цвета: </p> <dl> <dt> Color Science (Khan Academy совместно с Pixar) </dt> <dd> Онлайн-курс, который знакомит с такими понятиями, как цвет, как он воспринимается и как использовать цвета для выражения идей.Представлено художниками и дизайнерами Pixar. </dd> <dt> Теория цвета в Википедии </dt> <dd> Статья в Википедии по теории цвета, которая содержит много полезной информации с технической точки зрения. На самом деле это не ресурс, который поможет вам с выбором цвета, но все же он полон полезной информации. </dd> </dl> <h4><span class="ez-toc-section" id="i-47"> Цвет и доступность </span></h4> <p> Есть несколько причин, по которым цвет может быть проблемой доступности. Неправильное или неосторожное использование цвета может привести к появлению веб-сайта или приложения, которые часть вашей целевой аудитории не сможет использовать должным образом, что приведет к потере трафика, потере бизнеса и, возможно, даже к проблемам с общественностью.Поэтому важно тщательно продумать использование цвета. </p> <p> Вы должны провести хотя бы базовое исследование дальтонизма. Есть несколько видов; наиболее распространенным является красно-зеленая дальтонизм, из-за которой люди не могут различать красный и зеленый цвета. Есть и другие, от неспособности различать определенные цвета до полной неспособности вообще видеть цвет. </p> <p> Самое важное правило: никогда не используйте цвет как единственный способ узнать что-то.Если, например, вы указываете успех или неудачу операции, изменяя цвет фигуры с белого на зеленый для успеха и красного на неудачу, пользователи с красно-зеленой дальтонизмом не смогут правильно использовать ваш сайт. Вместо этого, возможно, используйте и текст, и цвет вместе, чтобы каждый мог понять, что происходит. </p> <p> Дополнительные сведения о дальтонизме см. В следующих статьях: </p> <h4><span class="ez-toc-section" id="i-48"> Пример оформления палитры </span></h4> <p> Рассмотрим быстрый пример выбора подходящей цветовой палитры для сайта.Представьте, что вы создаете веб-сайт для новой игры, действие которой происходит на планете Марс. Итак, давайте поищем в Google фотографии Марса. Там много хороших примеров марсианской окраски. Мы старательно избегаем мокапов и фотографий из фильмов. И мы решили использовать фотографию, сделанную одним из марсианских посадочных устройств, которые человечество припарковало на поверхности в течение последних нескольких десятилетий, поскольку действие игры происходит на поверхности планеты. Мы используем инструмент выбора цвета, чтобы выбрать образец цвета, который мы выбираем. </p> <p> С помощью пипетки мы определяем понравившийся нам цвет и определяем, что речь идет о цвете <code> # D79C7A </code>, который представляет собой подходящий ржавый оранжево-красный цвет, столь стереотипный для поверхности Марса.</p> <p> Выбрав основной цвет, нам нужно построить палитру. Мы решили использовать Paletton, чтобы подобрать другие цвета, которые нам нужны. Открыв Paletton, видим: </p> <p> </p> <p> Затем мы вводим шестнадцатеричный код нашего цвета (<code> D79C7A </code>) в поле «Base RGB» в нижнем левом углу инструмента: </p> <p> </p> <p> Теперь мы видим монохроматическую палитру, основанную на цвете, который мы выбрали с фотографии Марса. Если по какой-то причине вам нужно много родственных цветов, они, скорее всего, подойдут.Но что нам действительно нужно, так это акцентный цвет. Что-то, что появится рядом с основным цветом. Чтобы найти это, мы нажимаем на переключатель «добавить дополнительный» под меню, которое позволяет вам выбрать тип палитры (в настоящее время «Монохроматическая»). Paletton вычисляет подходящий цвет акцента; щелчок по цвету акцента в правом нижнем углу говорит нам, что это цвет <code> # 508D7C </code>. </p> <p> </p> <p> Если вас не устраивает предложенный вам цвет, вы можете изменить цветовую схему, чтобы увидеть, что вам больше нравится.Например, если нам не нравится предложенный зеленовато-синий цвет, мы можем щелкнуть значок цветовой схемы Triad, который представляет нам следующее: </p> <p> </p> <p> Серо-синий в правом верхнем углу выглядит неплохо. Щелкнув по нему, мы обнаружим, что это <code> # 556E8D </code>. Этот цвет будет использоваться в качестве основного цвета, чтобы использовать его экономно, чтобы выделить вещи, например, в заголовках или при выделении вкладок или других индикаторов на сайте: </p> <p> </p> <p> Теперь у нас есть основной цвет и наш акцент.Вдобавок к этому у нас есть несколько дополнительных оттенков каждого, на случай, если они нам понадобятся для градиентов и тому подобного. Затем цвета можно экспортировать в несколько форматов, чтобы вы могли их использовать. </p> <p> Когда у вас есть эти цвета, вам, вероятно, все равно нужно будет выбрать подходящие нейтральные цвета. Обычная практика дизайна - попытаться найти золотую середину, где контраст будет достаточно, чтобы текст был четким и читаемым, но не настолько контрастным, чтобы он стал резким для глаз. Так или иначе легко зайти слишком далеко, поэтому обязательно получайте отзывы о своих цветах после того, как вы выбрали их и у вас есть доступные примеры их использования.Если контраст слишком низкий, ваш текст будет размываться фоном, оставляя его нечитаемым, но если ваш контраст слишком высок, пользователь может счесть ваш сайт ярким и неприятным для просмотра. </p> <h4><span class="ez-toc-section" id="i-49"> Цвет, фон, контраст и печать </span></h4> <p> То, что хорошо смотрится на экране, может выглядеть совсем иначе на бумаге. Кроме того, чернила могут быть дорогими, и если пользователь печатает вашу страницу, ему не обязательно нужны все фоны и тратить драгоценные чернила, когда все, что имеет значение, - это сам текст.Большинство браузеров по умолчанию удаляют фоновые изображения при печати документов. </p> <p> Если ваши фоновые цвета и изображения были тщательно выбраны и / или имеют решающее значение для полезности контента, вы можете использовать свойство CSS <code> color-adjust </code>, чтобы сообщить браузеру, что он не должен изменять внешний вид контента. </p> <p> Значение по умолчанию: <code>, регулировка цвета, </code>, <code>, экономия, </code>, указывает, что браузеру разрешено изменять внешний вид, если он сочтет это необходимым, чтобы попытаться оптимизировать читаемость и / или экономичность печати контента, учитывая тип устройство вывода, на которое отрисовывается документ.</p> <p> Вы можете установить <code> color-adjust </code> to <code> точный </code>, чтобы сообщить браузеру, что элемент или элементы, с которыми вы его используете, были разработаны специально для наилучшей работы с цветами и изображениями, оставленными как есть. С этим набором браузер не будет вмешиваться в внешний вид элемента и будет рисовать его, как указано в вашем CSS. </p> <p> <strong> Примечание: </strong> Однако нет никакой гарантии, что <code> color-adjust: точный </code> приведет к тому, что ваш CSS будет использоваться точно так, как указано.Если браузер предоставляет пользовательские настройки для изменения вывода (например, флажок «Не печатать фон» в диалоговом окне печати), это переопределяет значение <code>, регулировка цвета, </code>. </p> . </div> <div class="post-meta"> </div> </article> <nav class="navigation post-navigation" aria-label="Записи"> <h2 class="screen-reader-text">Навигация по записям</h2> <div class="nav-links"><div class="nav-previous"><a href="https://xn--80aahvkuapc1be.xn--p1ai/raznoe/kak-pomenyat-nazvanie-ssylki-v-vk-kak-izmenit-url-adres-ssylku-vk-stranicy-vkontakte-info-effect-ru.html" rel="prev"><span class="meta-nav">Предыдущая запись</span> Как поменять название ссылки в вк – Как изменить URL адрес ссылку ВК страницы вконтакте – info-effect.ru</a></div><div class="nav-next"><a href="https://xn--80aahvkuapc1be.xn--p1ai/raznoe/themes-perevod-na-russkij-themes-perevod-s-anglijskogo-na-russkij-yandeks-perevodchik.html" rel="next"><span class="meta-nav">Следующая запись</span> Themes перевод на русский: Themes – перевод с английского на русский – Яндекс.Переводчик</a></div></div> </nav> <div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe/kak-zadat-cvet-ssylki-v-html-kak-na-stranice-sdelat-ssylki-raznyx-cvetov.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://xn--80aahvkuapc1be.xn--p1ai/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required> Имя * Email * Сайт

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

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

Задача

Решение

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

Заключение

seodon.ru | Учебник HTML — Меняем цвета ссылок

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

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

Как изменить цвет ссылки с помощью HTML.

Как убрать подчеркивание.

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

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

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

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

html цвет посещенной ссылки | Все о Windows 10

Задача

Решение

Комментарии ( 5 ):

CSS оформление ссылок: убираем подчёркивание, меняем цвет

Селекторы псевдо-классов

Ссылки

Подчеркивание ссылок

Псевдо-классы :first-child и :last-child

ссылок: цвета текстовых ссылок

CSS и ссылки | схемы с несколькими ссылками, эффекты наведения

Базовый блок ссылок CSS

Настройка нескольких схем

Наследование

Рекомендации по наведению

Не позволяйте этому влиять на окружающий текст

Простые изменения — лучшее

Выбор цвета

Ссылки на изображения

цветов · Bootstrap

Цвет

Цвет фона

Фоновый градиент

Работа со спецификой

Передача смысла вспомогательным технологиям

Как изменить цвет гиперссылки в PowerPoint

Что такое гиперссылка?

Зачем менять цвет гиперссылок?

Параметры изменения цвета гиперссылки

Вариант 1. Гиперссылки изменены во всех слайдах (более новые версии)

Вариант 2: Гиперссылки изменены во всех слайдах (предыдущие версии)

Вариант 3. Соответствие цвета гиперссылки другому тексту на слайде

Вариант 4. Одноразовое изменение цвета гиперссылки

Лучшие Лрактики

Заключение

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

Изменение цвета текста при наведении указателя мыши

Пример 1

Пример 2

Заключение

HTML | ссылка Атрибут

Применение цвета к элементам HTML с помощью CSS - HTML: язык разметки гипертекста

Текст