Вы здесь

Как использовать цвета

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


red
=
rgb(255,0,0)
=
rgb(100%,0%,0%)
=
#ff0000
=
#f00

Существует 17 предопределенных имен цветов. Это aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white и yellow. Плюс еще один – transparent.

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

Шестнадцатеричный код основывается на шестнадцатеричной системе исчисления, в которой кроме цифр от 0 до 9 (привычным нам по десятеричной системе исчисления) также используются латинские буквы от A до F.

Перед шестнадцатеричным кодом ставится символ решетки (#), и он может состоять либо из трех, либо из шести цифр. Обычно запись из трех цифр является сокращенным вариантом записи из шести цифр (#f00 = #ff0000, #c96 = #cc9966 и т.д.). Запись из трех цифр легче расшифровать (первая цифра, как и значение в rgb, составной красный цвет, вторая – зеленый, а третья - синий), однако шестицифровая запись предоставляет больший контроль над цветовым значением.

'color' и 'background-color'

Цвет текста определяется свойством color, а цвет фона свойством background-color.

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

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

Цвета в этом случае могут выглядеть немного грубовато, поэтому можно изменить их следующим образом:

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

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

Сохраните получившийся файл CSS и обновите веб-страницу в окне браузера. Цвет первого заголовка (элемент <h1>) изменится на синий.

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