5.3 Свойства "цвет" (color) и "фон" (background).

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

Свойство "цвет", как правило, наследуется. Свойство "фон" не наследуется, но фон родительского элемента будет виден на просвет, т.к. по умолчанию значение цвета фона для дочерних элементов принимается как 'transparent' (прозрачный).

5.3.1 Определение цвета ('color')

Значение: <color>

По умолчанию: Определяется UA

Область применения: все элементы

Наследование: есть

Процентное выражение: неопр.

Это свойство описывает цвет текста в элементе (зачастую имену­емый как цвет переднего плана). Есть несколько разных способов описать, к примеру, красный цвет:

EM { color: red } /* natural language */

EM { color: rgb(255,0,0) } /* RGB range 0-255 */

См. раздел 6.3. для описания возможных значений цвета.

5.3.2 Определение цвета обоев ('background-color').

Значение: <color> | transparent

По умолчанию: transparent

Область применения: все элементы

Наследование: нет

Процентное выражение: неопр.

Это свойство описывает цвет обоев элемента.

H1 { background-color: #F00 }

5.3.3 Определение рисунка фона ('background-image').

Значение: <url> | none

По умолчанию: нет

Область применения: все элементы

Наследование: нет

Процентное выражение: неопр.

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

BODY { background-image: url(marble.gif) }

P { background-image: none }

5.3.4 Определение повтора рисунка фона ('background-repeat').

Значение: repeat | repeat-x | repeat-y | no-repeat

По умолчанию: repeat

Область применения: все элементы

Наследование: нет

Процентное выражение: неопр.

Если рисунок фона определен, значение свойства "повтор рисунка фона" определяет, повторяется ли изображение и каким образом.

Значение 'repeat' указывает, что изображение повторяется как в горизонтальном, так и в вертикальном направлении. Значение 'repeat-x' ('repeat-y') устанавливает повтор изображения соответственно только в горизонтальном (вертикальном) направлении, создавая одну полосу из изображений от одного края до противоположного. При значении 'no-repeat' изображение не повторяется.

BODY {

background: red url(pendant.gif);

background-repeat: repeat-y;

}

В вышеприведенном примере изображение рисунка фона повторяется только в вертикальном направлении.

5.3.5 Определение привязки фона ('background-attachment').

Значение: scroll | fixed

По умолчанию: scroll

Область приложения: все элементы

Наследование: нет

Процентное выражение: неопр.

Если определен рисунок фона, значение свойства "привязка" ('background-attachment') определяет, привязан ли рисунок к холсту или перемещается вместе с содержанием.

BODY {

background: red url(pendant.gif);

background-repeat: repeat-y;

background-attachment: fixed;

}

Ядро CSS1:UA вправе рассматривать 'fixed' как 'scroll'. Тем не менее рекомендуется, чтобы они правильно отрабатывали 'fixed' по крайней мере для элементов HTML и BODY, т.к. для автора не существует возможности использовать изображение только для браузеров, поддерживающих 'fixed'. (См. гл.7).