3.5. Цвет и фон
Правила визуализации цвета
Цветовые значения (далее обозначаются как «цвет») могут задаваться либо шестнадцатеричным числом со значением от 00 до FF с префиксом "#" вида "#rrggbb", определяющим RGB-код цвета (большинство воспринимаемых человеком цветом можно получить смешиванием основных трех цветов – красного, зеленого и синего, соответственно в формуле цвета rr = количество красного в цвете, gg = количество зеленого в цвете и bb = количество синего в цвете), либо одним из 16 символических имен, приведенных в табл. 3.4. CSS допускает использование краткой формы RGB-кодов вида "#rgb"; при этом краткая форма преобразуется в полную повторением цифр, а не добавлением нулей. Иными словами, код #fa1 соответствует полному коду #ffaa11. Кроме того, RGB-код цвета может быть задан в десятичной и процентной системах счисления конструкцией rgb(r,g,b), где r, g и b принимают значения в диапазоне от 0 до 255 или от 0% до 100%.
|
Базовые цвета HTML |
Таблица 3.4 |
||
|
|
|||
|
|
|
|
|
black |
silver |
|
gray |
white |
(#000000) |
(#C0C0C0) |
(#808080) |
(#FFFFFF) |
|
(0, 0, 0) |
(192, 192, |
192) |
(128, 128, 128) |
(255, 255, 255) |
maroon |
red |
|
purple |
fuchsia |
(#800000) |
(#FF0000) |
(#800080) |
(#FF00FF) |
|
(128, 0, 0) |
(255, 0, |
0) |
(128, 0, 128) |
(255, 0, 255) |
green |
lime |
|
olive |
yellow |
(#008000) |
(#00FF00) |
(#808000) |
(#FFFF00) |
|
(0, 128, 0) |
(0, 255, |
0) |
(128, 128, 0) |
(255, 255, 0) |
navy |
blue |
|
teal |
aqua |
(#000080) |
(#0000FF) |
(#008080) |
(#00FFFF) |
|
(0, 0, 128) |
(0, 0, 255) |
(0, 128, 128) |
(0, 255, 255) |
|
Цвет текста
Цвет текста задает свойство color. Нижеследующие декларации задают один и тот же красный цвет для содержания элемента em:
63
em {color:red } |
/* название цвета */ |
em {color:#f00 } |
/* #rgb */ |
em {color:#ff0000 } |
/* #rrggbb */ |
em {color:rgb(255,0,0) } |
/* целые в диапазоне 0 до 255 |
*/ |
|
em {color:rgb(100%,0%,0%) } /* действительные в диапазоне от 0.0% до 100.0% */
Управление фоном
Общее свойство background позволяет определить стиль фона как для документа в целом (рекомендуется использовать тег <body>), так и отдельных элементов. Последовательность указания значений роли не играет. Можно указывать не все значения. Фон элемента распространяется на всю занимаемую элементом область.
Рассмотрим составные свойства, значения используются и в общем свойстве.
Фон элемента может задаваться либо цветом (backgroundcolor), либо изображением (background-image, background-repeat и background-position).
Свойство background-color оформляется аналогично свойству color:
em {background-color:red }
Свойство background-image указывает обозревателю адрес изображения, которое необходимо использовать как фон элемента при отображении:
Свойство background-repeat указывает условия повтора изображения с помощью следующих значений:
repeat изображениеповторяетсяпогоризонтали и вертикали, repeat-x изображение повторяется только по горизонтали, repeat-y изображение повторяется только по вертикали, no-repeat изображение не повторяется: отображается только
одна его копия.
Свойство background-position задает позицию фонового изображения при отображении. Его можно определять как в абсолютных, так и относительных велечинах (процентах). Тем не менее
64