Цвета

Переклад українською: Кольори

CSS дает возможность использования 16777216 цветов. Они могут быть представлены именем, rgb-значением (red/green/blue, т.е. красный/зеленый/синий) или hex-кодом.

red

Тоже самое, что и:

rgb(255,0,0)


Что аналогично этому:

rgb(100%,0%,0%)

этому:

#ff0000

и этому:

#f00

В нашем распоряжении 17 допустимых заранее определенных имен для цветов. Этот список включает в себя: aqua (аква, цвет морской волны), black (черный), синий, fuchsia (фуксия, т.е. пурпурно-розовый), gray (серый), green (зеленый), lime (лайм), maroon (коричнево-малиновый), navy (темно-синий), olive (оливковый), orange (оранжевый), purple (фиолетовый), red (красный), silver (серебряный), teal (сине-зелёный), white (белый) и yellow (желтый).

Допустимым цветом является transparent (прозрачный).

Три значения rgb могут принимать значения от 0 до 255, где 0 – это самый низкий уровень (например, нет красного), а 255 – самый высокий уровень (например, полностью красный). Эти значения также могут быть представлены в виде процентов.

Hexadecimal (hex) — это шестнадцатеричная система счисления. Мы обычно используем десятичную систему исчисления (base-10, значения от 0 до 9). В шестнадцатеричной же системе используется 16 значений: от 0 до f.

Дизайнер, использующий шестнадцатеричную систему, обозначает цвет 3 или 6 знаками, перед которыми ставится символ решетки (#). В общем виде, 3-х значная версия — это сжатая версия 6-и значной (#f00 становится #ff0000, а #c96 превращается в #cc9966 и т.п.). Расшифровывать легче 3-х значную версию (первый символ обозначает красный цвет, второй — зеленый, третий — синий, также как и в системе rgb), однако 6-и значная система дает больше возможности и контроля для выбора конкретного цвета.

‘color’ и ‘background-color’

Вы можете применять цвета, используя color и background-color (помните, что надо использовать американский английский, а не британский, т.е. нельзя написать «colour», только «color»).

Синий фон и желтый текст можно представить следующим кодом:

h1 {
	color: yellow;
	background-color: blue;
}

Эти цвета могут выглядеть несколько грубо, поэтому, возможно, вы захотите отредактировать код в CSS-файле, чтобы немного изменить оттенки:


body {
	font-size: 0.8em;
	color: navy;
}

h1 {
	color: #ffc;
	background-color: #009;
}

После сохранения файла CSS, обновите страницу в браузере. Вы заметите, что первый заголовок (элемент h1) станет желтого цвета на синем фоне.

Свойства color и background-color могут применяться к большинству элементов HTML, включая body, что изменит цвета страницы и ее содержимого.