САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ
×

HTML Учебник

HTML ГлавнаяHTML ВведениеHTML РедакторHTML ОсновныеHTML ЭлементыHTML АтрибутыHTML ЗаголовкиHTML ПараграфыHTML СтилиHTML ФорматированиеHTML ЦитированиеHTML КомментарииHTML ЦветHTML с CSSHTML СсылкиHTML ИзображениеHTML ТаблицыHTML СпискиHTML БлокиHTML КлассыHTML ИдентификаторыHTML ФреймыHTML с JavaScriptHTML Путь к файлуHTML Мета тегиHTML Методы версткиHTML Адаптивный дизайнHTML Компьютерный кодHTML5 СемантикаHTML5 СинтаксисHTML СущностьHTML СимволыHTML ЭмодзиHTML КодировкаHTML URL КодировкаHTML в XHTML

HTML Формы

HTML ФормыHTML Элементы вводаHTML Типы вводаHTML Атрибуты вводаHTML Атрибуты форм ввода

HTML Графика

HTML5 CanvasHTML5 SVG

HTML Медиа

HTML Медиа форматHTML5 ВидеоHTML5 АудиоHTML ПлагиныHTML YouTube

HTML API

HTML5 ГеолокацияHTML5 ПеретаскиваниеHTML5 Веб хранилищеHTML5 Веб работникHTML5 SSE

HTML Примеры

HTML ПримерыHTML ТестированиеHTML УпражненияHTML СертификатHTML ЗаключениеHTML Возможности

HTML Справочники

HTML Список теговHTML АтрибутыHTML Глобальные атрибутыHTML Поддержка браузераHTML СобытияHTML ЦветаHTML ХолстHTML Аудио/ВидеоHTML Типы документовHTML Кодировка символовHTML URL КодировкаHTML Коды языкаHTTP СообщенияHTTP МетодыPX в EM конвертерКлавишные комбинации

HTML - Цвет



HTML Цвет задается с помощью предопределенных имен цвета или значений RGB, HEX, HSL, RGBA, HSLA.

Названия цвета

В HTML цвет может быть задан с помощью имени цвета:

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray

Попробуйте сами »

HTML поддерживает 140 стандартных названий цветов.


Цвет фона

Вы можете установить цвет фона для элементов HTML:

Привет мир


Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Пример

<h1 style="background-color:DodgerBlue;">Привет мир</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

Попробуйте сами »

Цвет текста

Вы можете установить цвет текста:

Привет мир

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Пример

<h1 style="color:Tomato;">Привет мир</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
Попробуйте сами »

Цвет границ

Вы можете установить цвет границ:

Привет мир

Привет мир

Привет мир

Пример

<h1 style="border:2px solid Tomato;">Привет мир</h1>
<h1 style="border:2px solid DodgerBlue;">Привет мир</h1>
<h1 style="border:2px solid Violet;">Привет мир</h1>
Попробуйте сами »

Значение цвета

В HTML цвет также может быть задан с помощью значений RGB, шестнадцатеричных значений, значений HSL, значений RGBA и значений HSLA:

То же, что и название цвета "Tomato":

rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)

То же, что и название цвета "Tomato", но 50% прозрачности:

rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)

Пример

<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
Попробуйте сами »

Узнайте больше о значениях цвета

Вы узнаете больше о RGB, HEX и HSL в следующих главах.