Перейти к содержанию

CSS/Цвет

Материал из Викиучебника — открытых книг для открытого мира
< CSS

Цвета могут быть определены для различных объектов:

цвет текста color: black;, цвет фона background-color: white; и цвет границы border-color: gray;.

Например, правило CSS, которое устанавливает для всех элементов h1 белый текст на красном фоне:

h1 {
  color: white;
  background-color: red;
}

Методы спецификации цветов:

  • Английские названия, такие как color: white;
  • Шестнадцатеричное значение RGB, например color: #ff0000;
  • Десятичные RGB значения, например color: rgb(255, 0, 0);
  • Десятичные RGBA значения, такие как color: rgba(255, 0, 0, 0.2);
  • HSL значение, например color: hsl(120, 100%, 50%);
  • HSLA значение, например color: hsla(0, 100%, 50%, 0.5);

Спецификации цвета подробно изложены в следующих разделах.

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

Использование английских имён

[править]

Определены следующие 16 значений:

  • aqua
  • black
  • blue
  • fuchsia
  • gray
  • green
  • lime
  • maroon
  • navy
  • olive
  • purple
  • red
  • silver
  • teal
  • yellow
  • white

CSS не определяет точный оттенок, который следует использовать для именованных цветов. Используйте RGB-значения, если точный оттенок имеет важное значение.

Шестнадцатеричное значение RGB

[править]
Hex Bin Dec
0 0000 0
1 0001 1
2 0010 2
3 0011 3
4 0100 4
5 0101 5
6 0110 6
7 0111 7
8 1000 8
9 1001 9
A 1010 10
B 1011 11
C 1100 12
D 1101 13
E 1110 14
F 1111 15

Цвет можно задавать в шестнадцатеричном виде. Например:

h1 {
  color: #ffffff;
}

Либо в сокращённой форме:

h1 {
  color: #fff;
}

Первые два символа, идущие после #, обозначают красный, следующие два — зелёный, и последние два — синий.

RGB форма записи

[править]

RGB — это сокращение от red(красный), green(зелёный) и blue(синий). Эти три цвета при смешивании создают все другие цвета на экране компьютера.

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

числами от 0 до 255

h1 {
  color: rgb(255, 255, 255);
}

или в процентах (%)

h1 {
  color: rgb(100%, 100%, 100%);
}

Следующие три способа появились только в CSS3.

RGBA запись

[править]

RGBA — это RGB с добавлением альфа-канала четвёртым аргументом, который может принимать значения от 0 (прозрачность) до 1 (непрозрачность).

Пример:

div {
  background-color: rgba(0, 0, 0, 0.5);
}

HSL запись

[править]

HSL — это цветовая модель, которая определяется тоном, насыщенностью и яркостью.

Пример:

div.red {
  background-color: hsl(0, 100%, 50%);
}
div.green {
  background-color: hsl(120, 100%, 50%);
}
div.blue {
  background-color: hsl(240, 100%, 50%);
}

HSLA запись

[править]

HSLA — это HSL с добавлением альфа-канала четвёртым аргументом, который может принимать значения от 0 (прозрачность) до 1 (непрозрачность).

Пример:

div.red {
  background-color: hslа(0, 100%, 50%, 0.5);
}