Составные и сокращённые свойства

Мы уже применяли CSS-свойства background, margin, padding и border. Однако, я оставил за скобками тот факт, что эти правила составные.

На самом деле, каждое из этих правил состоит из более простых инструкций. Например правило background:

.segment_grey_pattern {background:fixed #eee url(../img/grey-pattern.gif) repeat-x 50% 0;}

Это правило можно «развернуть» так:

.segment_grey_pattern {
	background-attachment:fixed; /* fixed | scroll | inherit */
	background-color:#eee;
	background-image:url(../img/grey-pattern.gif);
	background-repeat:repeat-x; /* no-repeat | repeat | repeat-x | repeat-y | inherit */
	background-position:50% 0;
}

Но и это ещё не всё, последняя инструкция в правиле тоже составная:

.segment_grey_pattern {
	background-attachment:fixed;
	background-color:#eee;
	background-image:url(../img/grey-pattern.gif);
	background-repeat:repeat-x;
	background-position-x:50%;
	background-position-y:0;
}

При обобщённом описании, все параметры правила оказываются необязательными. Следующие записи имеют право на жизнь:

.segment_grey_pattern {background:fixed #eee url(../img/grey-pattern.gif) repeat-x 50% 0;}
.segment_grey_pattern {background:#eee url(../img/grey-pattern.gif) repeat-x 50% 0;}
.segment_grey_pattern {background:url(../img/grey-pattern.gif) repeat-x 50% 0;}
.segment_grey_pattern {background:url(../img/grey-pattern.gif);}
.segment_grey_pattern {background:#eee;}
.segment_grey_pattern {background:url(../img/grey-pattern.gif) 50% 0;}

Стоит упомянуть, что если в дальнейшем коде возникла необходимость исправить один из параметров составного правила, то достаточно использовать только нужный атрибут.

.segment_grey_pattern {background:fixed #eee url(../img/grey-pattern.gif) repeat-x 50% 0;}
.segment_bgrd_scroll {background-attachment:scroll;}

Аналогично свойство border «распадается» на border-width, border-style и border-color.

.segment_bordered {
	border:1px dotted #ddd;
}
/* Эквивалентно */
.segment_bordered {
	border-width:1px;
	border-style:dotted;
	border-color:#ddd;
}

Свойство overflow состоит из overflow-x и overflow-y.

Свойство margin состоит из margin-top, margin-left ну и т.д.

Ещё из значимых составных правил надо иметь ввиду font.

p {font:italic bold 16px/22px sans-serif;}

/* Эквивалентно */

p {font-style:italic;}
p {font-weight:bold;}
p {font-size:16px;}
p {line-height:22px;}
p {font-family:sans-serif;}

При использовании составных правил важно помнить порядок свойств. Иногда можно немного пренебречь порядком, а иногда нет, например:

.unit-bordered {border:1px solid #fff;} /* сработает */
.unit-bordered {border:solid 1px #fff;} /* сработает */
.unit-bordered {border:#fff 1px solid ;} /* НЕ сработает */

В случае с очень большими составными свойствами, такими как background, порядок следует помнить наизусть.