Содержание
Свойства CSS позволяют авторам управлять цветами переднего плана и фоном элемента. Оформление фона может осуществляться с использованием цветовой палитры или графических объектов. С использованием свойств фона разработчики могут размещать, дублировать фоновое изображение, а также определять, будет ли оно фиксировано относительно окна просмотра или будет перемещаться вместе с документом в процессе его прокрутки.
Информацию о синтаксисе корректных значений цветов можно найти в разделе о цветах.
| Значение: | <цвет> | наследуемое |
| Начальное значение: | зависит от агента пользователя |
| Область применения: | все элементы |
| Наследование: | да |
| Процентное задание: | нет |
| Устройства: | визуального форматирования |
Это свойство описывает цвет переднего плана текстового содержимого элемента. Например, существует несколько способов задания красного цвета:
EM { color: red } /* стандартное название цвета */
EM { color: rgb(255,0,0) } /* значение системы RGB из диапазона 0-255 */
В качестве фона элемента (например, поверхности, на которой он будет отображен) разработчики могут задавать либо цвет, либо изображение. В терминах модели представления документа в виде блоков понятие "фон" относится к фону областей, отведенных для содержимого и отступов. Стиль и цвет границ при этом устанавливаются с помощью свойств границ. Поля всегда прозрачны, так что сквозь них всегда виден фон родительского блока.
Свойства фона не наследуются, но фон родительского блока всегда будет виден, т.к. по умолчанию в качестве начального значения свойства 'background-color' выступает значение 'transparent'.
Фон блока, порождаемого корневым элементом, покрывает всю область представления.
Разработчикам HTML-документов рекомендуется задавать фон для элемента BODY, а не для элемента HTML. Агенты пользователей при оформлении фона должны придерживаться следующей иерархии приоритетов: если значение свойства 'background' элемента HTML отлично от 'transparent', то следует использовать его. В противном случае следует использовать значение свойства 'background' элемента BODY. Если в результате получится значение 'transparent', то отображаемый фон окажется неопределенным.
В соответствии с этими правилами область представления, лежащая в основе следующего HTML-документа, будет иметь "мраморный" фон:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Установка фона области представления</TITLE>
<STYLE type="text/css">
BODY { background: url("http://style.com/marble.png") }
</STYLE>
</HEAD>
<BODY>
<P>Я использую мраморный фон.
</BODY>
</HTML>
| Значение: | <цвет> | transparent | наследуемое |
| Начальное значение: | transparent |
| Область применения: | все элементы |
| Наследование: | нет |
| Процентное задание: | нет |
| Устройства: | визуального форматирования |
Это свойство устанавливает цвет фона элемента равным <цвет> или ключевому слову 'transparent', благодаря которому все цвета, лежащие под элементом, становятся видными.
H1 { background-color: #F00 }
| Значение: | <uri> | none | наследуемое |
| Начальное значение: | none |
| Область применения: | все элементы |
| Наследование: | нет |
| Процентное задание: | нет |
| Устройства: | визуального форматирования |
Это свойство задает графический объект в качестве фона элемента. При определении фонового изображения авторам следует также указать цвет фона, который будет использоваться, если изображение недоступно. Если изображение доступно, то оно отображается поверх фонового цвета (который будет виден только сквозь прозрачные фрагменты изображения).
В качестве значения этого свойства может выступать <uri> графического объекта либо значение 'none', если изображение не используется.
BODY { background-image: url("marble.gif") }
P { background-image: none }
| Значение: | repeat | repeat-x | repeat-y | no-repeat | наследуемое |
| Начальное значение: | repeat |
| Область применения: | все элементы |
| Наследование: | нет |
| Процентное задание: | нет |
| Устройства: | визуального форматирования |
Если задано фоновое изображение, то данное свойство определяет, будет ли оно дублироваться (в виде мозаики) и каким образом это будет осуществляться. Мозаика покрывает области, отведенные в блоке для содержимого и отступов. Значения данного свойства имеют следующий смысл:
BODY {
background: white url("pendant.gif");
background-repeat: repeat-y;
background-position: center;
}
Одна копия фонового изображения расположена по центру, а другие копии располагаются сверху вниз, формируя тем самым вертикальную полосу позади элемента.
| Значение: | scroll | fixed | наследуемое |
| Начальное значение: | scroll |
| Область применения: | все элементы |
| Наследование: | нет |
| Процентное задание: | нет |
| Устройства: | визуального форматирования |
Если задано фоновое изображение, то данное свойство определяет, будет ли оно фиксироваться относительно окна просмотра (значение 'fixed') или будет перемещаться вместе с документом (значение 'scroll') в процессе его прокрутки.
Даже в случае фиксации изображения оно остается видимым только тогда, когда находится в области, предназначенной для оформления фона или отступов элемента. Поэтому изображение может оставаться невидимым до тех пор, пока его копии не будут расположены мозаикой ('background-repeat: repeat').
В следующем примере формируется бесконечная вертикальная полоса, которая остается "приклеенной" к окну просмотра во время прокрутки элемента.
BODY {
background: red url("pendant.gif");
background-repeat: repeat-y;
background-attachment: fixed;
}
Агенты пользователей могут интерпретировать значение 'fixed' как 'scroll'. Однако рекомендуется, чтобы значение 'fixed' все же интерпретировалось корректно, по крайней мере, для элементов HTML и BODY, т.к. у авторов не существует возможности предоставления изображения только для тех браузеров, которые поддерживают значение 'fixed'. Дополнительную информацию можно получить в разделе, посвященном конформности.
| Значение: | [ [<проценты> | <длина> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | наследуемое |
| Начальное значение: | 0% 0% |
| Область применения: | элементы структурного уровня и замещаемые элементы |
| Наследование: | нет |
| Процентное задание: | относительно размеров самого блока |
| Устройства: | визуального форматирования |
Если задано фоновое изображение, то данное свойство определяет его начальное положение. Значения имеют следующий смысл:
Если задано только одно значение длины или одно процентное соотношение, то оно определяет позицию только по горизонтали, а позиция по вертикали определяется, исходя из значения 50%. Если задано два значения, то первой указывается позиция по горизонтали. Допускается сочетание значений длины и процентных соотношений (например, '50% 2cm'). Также допускается использование отрицательных значений. Ключевые слова не могут использоваться вместе со значениями длины или процентными соотношениями (все возможные варианты представлены выше).
BODY { background: url("banner.jpeg") right top } /* 100% 0% */
BODY { background: url("banner.jpeg") top center } /* 50% 0% */
BODY { background: url("banner.jpeg") center } /* 50% 50% */
BODY { background: url("banner.jpeg") bottom } /* 50% 100% */
Если фоновое изображение фиксировано в окне просмотра (см. свойство ), то оно размещается относительно окна просмотра, а не относительно области элемента, предназначенной для отступов. Например,
BODY {
background-image: url("logo.png");
background-attachment: fixed;
background-position: 100% 100%;
background-repeat: no-repeat;
}
В представленном выше примере изображение (одиночное) помещается в нижнем правом углу окна просмотра.
| Значение: | [<'background-color'> || <'background-image'> || <'background-repeat'> || || <'background-position'>] | наследуемое |
| Начальное значение: | не определено для свойств стенографического типа |
| Область применения: | все элементы |
| Наследование: | нет |
| Процентное задание: | допускается в свойстве 'background-position' |
| Устройства: | визуального форматирования |
Свойство 'background' является свойством стенографического типа, используемым для определения отдельных свойств фона ('background-color', 'background-image', 'background-repeat', и 'background-position') одновременно.
Сначала свойство 'background' устанавливает всем отдельным свойствам фона их начальные значения, а затем явно назначает им те значения, которые были заданы в объявлении.
В первом правиле следующего примера было задано значение только для свойства 'background-color', в то время как всем остальным свойствам были присвоены их начальные значения. Во втором правиле явно заданы значения всех отдельных свойств.
BODY { background: red }
P { background: url("chess.png") gray 50% repeat fixed }
Информацию о цветовой гамме можно найти в учебнике под названием "Gamma Tutorial" в спецификации PNG ([PNG10]).
При вычислении гамма-коррекции агенты пользователей, осуществляющие отображение на дисплеях с ЭЛТ, могут предполагать идеальность используемой ЭЛТ и игнорировать все эффекты, имеющие место в текущей цветовой гамме из-за внесенных в нее возмущений. Поэтому на имеющихся в данный момент платформах минимум, что им следует сделать:
Фраза "применить цветовую гамму" означает, что каждой из трех составляющих R, G и B перед тем, как она будет передана операционной системе, должно быть присвоено значение R'=Rgamma, G'=Ggamma, B'=Bgamma.
Это можно быстро сделать, осуществив однократное построение 256-элементной таблицы поиска в момент инициализации браузера:
for i := 0 to 255 do raw := i / 255.0; corr := pow (raw, gamma); table[i] := trunc (0.5 + corr * 255.0) end
Это позволит сократить количество абстрактных математических расчетов, приходящихся на один атрибут цвета, и еще больше сократить их при вычислении одного пиксела.