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);
}