Сведение воедино

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

body {background-color: white; background-image: url(yinyang.gif);
background-position: top left; background-repeat: repeat-y;
background-attachment: fixed;}
body {background: white url(yinyang.gif) top left repeat-y fixed;}
body {background: fixed url(yinyang.gif) white top left repeat-y;}
body {background: url(yinyang.gif) white repeat-y fixed top left;}

Существует тем не менее одно небольшое ограничение на порядок расположения значений в свойстве background: если для background-position задаются два значения, они должны стоять рядом, и если применяются значения длины или процентные значения, сначала должно идти значение по горизонтали, а затем по вертикали. Наверное, в этом нет ничего неожиданного, но об этом важно помнить. Как и во всех сокращенных формах записи свойств, если опустить одно из значений, вместо него автоматически подставляется значение соответствующего свойства по умолчанию.


Таким образом, следующие два правила эквивалентны:

body {background: white url(yinyang.gif;}
body {background: white url(yinyang.gif) top left repeat scroll;}

Что замечательно, свойство background не имеет обязательных значений: если присутствует по крайней мере одно значение, можно опустить все остальные. Следовательно, с помощью сокращенной формы записи можно задавать только фоновый цвет, и так делают очень часто:

body {background: white;}

Это совершенно законно, и в некоторых случаях такой вариант следует предпочесть как позволяющий уменьшить количество нажатий на клавиши. Кроме того, в результате все остальные свойства фона задаются по умолчанию, следовательно, для background-image будет задано значение none. Это помогает обеспечить удобочитаемость, поскольку предотвращает задание фонового изображения другими правилами (например, в таблице стилей читателя). Любое из следующих правил также вполне допустимо:

body {background: url(yinyang.gif) bottom left repeat-y;}
h1 {background: silver;}
h2 {background: url(h2bg.gif) center repeat-x;}
p {background: url(parabg.gif);}

Еще одно, последнее напоминание: background – сокращенная форма записи, и значения по умолчанию могут заменять значения, ранее заданные для данного элемента.


Например:

h1, h2 {background: gray url(thetrees.jpg) center repeat-x;}
h2 {background: silver;}

В результате применения этих правил элементы h1 будут оформлены в соответствии с первым из них, а элементы h2 – в соответствии со вторым. Другими словами, у них будет просто сплошной серебряный фон. На заднем плане h2 вообще не будет никакого изображения, не говоря уже о центрировании и повторении в горизонтальном направлении. Вероятнее всего, автор намеревался сделать следующее:

h1, h2 {background: gray url(trees.jpg) center repeat-x;}
h2 {background-color: silver;}

Это позволяет изменять фоновый цвет, не уничтожая все остальные значения.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Воздействие на рамки
Воздействие на элементы формы
Еще раз о повторении в определенном направлении
Замещение атрибутов
Значения, заданные в единицах измерения длины

Вернуться в раздел: CSS / 9. Цвета и фон