Цвета CSS

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

Имена цветов CSS

В CSS можно использовать имена цветов для указания цветов:

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Вiolet
LightGray

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

Поддержка CSS/HTML 140 стандартных имен цветов.

Цвет фона CSS

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

Welcome to China
China is a great country!

Пример

<h1 style="background-color:DodgerBlue;">China</h1>
<p style="background-color:Tomato;">China is a great country!</p>

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

Цвет текста CSS

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

China

China is a great country!

China, officially the People's Republic of China, is a country in East Asia.

Пример

<h1 style="color:Tomato;">China</h1>
<p style="color:DodgerBlue;">China is a great country!</p>
<p style="color:MediumSeaGreen;">China, officially the People's Republic of China...</p>

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

Цвет рамки CSS

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

Hello World
Hello World
Hello World

Пример

<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>

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

Цветовые значения CSS

В CSS можно также использовать значения RGB, HEX, 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)
<h3>Пример</h3> 
<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 Дополнительные знания.