Спецификация CSS2

Из-за более высокой специфики селектора псевдокласса, левое поле левых страниц будет '4см', а все остальные страницы (т.е. правые) - левое поле '3см'.

Лекция 14. Цвета и фон

Дается информация о спецификациях цвета и фона, их синтаксис и свойства.

Свойства CSS позволяют авторам специфицировать цвет переднего плана и фона элементов. В качестве фона используется цвет или изображение. Свойства фона позволяют авторам позиционировать фоновое изображение, размножать его и объявлять как фиксированное относительно порта просмотра или прокручивать вместе с документом.

Синтаксис значений цвета см. в разделе единицы измерения цвета.

'color'

Значение: | inherit

Начальное: зависит от пользовательского агента (ПА)

Применяется: ко всем элементам

Наследуется: да

Процентное: N/A

Носитель: визуальный

Это свойство описывает цвет переднего плана содержимого текста элемента. Можно по разному специфицировать красный цвет:

EM { color: red } /* предопределённое название цвета */ EM { color: rgb(255,0,0) } /* диапазон RGB 0-255 */

Авторы могут специфицировать фон элемента (т.е. его видимую поверхность) как цвет или как изображение. В терминах модели бокса, "background" относится к фону содержимого и области заполнения. Цвет и стиль обрамления устанавливаются в свойствах обрамления. Поля всегда прозрачны, поэтому фон бокса-предка всегда просвечивает.

Свойства фона не наследуются, но фон бокса-предка будет по умолчанию просвечивать, поскольку начальное значение 'background-color' - 'transparent'.

Фон бокса, генерируемый корневым элементом, покрывает всю канву.

Для документов HTML, однако, мы рекомендуем, чтобы авторы специфицировали фон элемента BODY, а не элемента HTML.

ПА должны учитывать следующие правила приоритета при заполнении фона: если значение свойства 'background' для элемента HTML отлично от 'transparent', тогда используйте его, в ином случае - используйте значение свойства 'background' элемента BODY. Если результирующее значение - 'transparent', то представление не определено.

В соответствии с этими правилами, канва следующего документа HTML будет иметь фон "marble":

Установка фона канвы

Мой фон - marble.

'background-color'

Значение: | transparent | inherit

Начальное: transparent

Применяется: ко всем элементам

Наследуется: нет

Процентное: N/A

Носитель: визуальный

Это свойство устанавливает цвет фона элемента значением или ключевым словом 'transparent' (чтобы сделать фон подложки просвечивающим).

H1 { background-color: #F00 }

'background-image'

Значение: | none | inherit

Начальное: none

Применяется: ко всем элементам

Наследуется: нет

Процентное: N/A

Носитель: визуальный

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

Значениями данного свойства являются , для спецификации изображения, или 'none', если изображение не используется.

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

'background-repeat'

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

Начальное: repeat

Применяется: ко всем элементам

Наследуется: нет

Процентное: N/A

Носитель: визуальный

Если специфицировано изображение фона, то данное свойство определяет, повторяется ли данное изображение (размножается ли), и как. Размноженное изображение покрывает области содержимого и заполнения бокса.

Значения имеют следующий смысл:

repeat

Изображение размножается горизонтально и вертикально.

repeat-x

Изображение размножается только горизонтально.

repeat-y

Изображение размножается только вертикально.

no-repeat

Изображение не размножается: выводится только одна копия изображения.

BODY { background: white url("pendant.gif"); background-repeat: repeat-y; background-position: center; }

Единственная копия фонового изображения центрирована, а другие копии помещены выше и ниже, чтобы создать вертикальную ленту позади элемента.

[D]

'background-attachment'

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

Начальное: scroll

Применяется: ко всем элементам

Наследуется: нет

Процентное: N/A

Носитель: визуальный

Если специфицировано изображение фона, то данное свойство определяет, является ли оно фиксированным относительно порта просмотра ('fixed'), или прокручивается вместе с документом ('scroll').