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, что изменит цвета страницы и ее содержимого.