Цвета CSS
В CSS вы можете задать цвет с помощью предопределённого имени цвета, либо значением RGB, HEX, HSL, RGBA или HSLA.
Имена цветов CSS
Цвет можно задать с помощью одного из предопределённых имён цветов.
CSS и HTML поддерживают 140 стандартных имён цветов.
Пример
Каждый прямоугольник использует свой именованный цвет в качестве фона.
Prompt
HTML-страница, показывающая несколько предопределённых имён цветов CSS в виде цветных прямоугольников.
Создайте серию заголовков, каждый с разным цветом фона, используя именованный цвет: Tomato, Orange, DodgerBlue, MediumSeaGreen, Gray, SlateBlue, Violet и LightGray. Подпишите каждый прямоугольник названием его цвета.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
</body>
</html>
Цвет фона CSS
Вы можете задать цвет фона HTML-элементов.
Пример
Заголовок и абзац используют именованные цвета для фона.
Prompt
HTML-страница, которая задаёт цвета фона с помощью именованных цветов.
Задайте
<h1> фон DodgerBlue, а <p> фон Tomato, используя встроенные стили с именованными цветами.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</body>
</html>
Цвет текста CSS
Вы можете задать цвет текста.
Пример
Заголовок и абзацы используют каждый свой именованный цвет текста.
Prompt
HTML-страница, которая задаёт цвета текста с помощью именованных цветов.
Сделайте
<h1> цвета Tomato, один <p> цвета DodgerBlue и другой <p> цвета MediumSeaGreen, используя встроенные стили с именованными цветами.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</body>
</html>
Цвет границы CSS
Вы можете задать цвет границ.
Пример
У каждого заголовка сплошная граница разного именованного цвета.
Prompt
HTML-страница, которая задаёт цвета границы с помощью именованных цветов.
Задайте трём элементам
<h1> сплошную границу 2px цветов Tomato, DodgerBlue и Violet, используя встроенные стили.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
</body>
</html>
Значения цвета CSS
Цвета также можно задавать значениями RGB, HEX, HSL, RGBA и HSLA.
Например, все они дают тот же цвет, что и имя Tomato: rgb(255, 99, 71), #ff6347 и hsl(9, 100%, 64%). Версии RGBA и HSLA добавляют прозрачность.
Пример
Один и тот же цвет записан в нескольких форматах значений, последние два — с прозрачностью 50%.
Prompt
HTML-страница, которая задаёт один и тот же цвет с помощью разных форматов значений цвета CSS.
Создайте пять элементов
<h1> с цветами фона, записанными как: rgb(255, 99, 71), #ff6347, hsl(9, 100%, 64%) (все — один и тот же "Tomato"), затем rgba(255, 99, 71, 0.5) и hsla(9, 100%, 64%, 0.5) (тот же цвет с прозрачностью 50%). Используйте встроенные стили.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1>
</body>
</html>
Подробнее о значениях цвета
Подробнее о RGB, HEX и HSL вы узнаете в следующих главах.