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

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

Спецификация CSS определяет сокращенные свойства для группирования определения общих свойств, действующих на одну и ту же тему. Например, свойство CSS background является сокращенным свойством, которое может определять значения background-color, background-image, background-repeat и background-position. Аналогично, наиболее распространенные свойства, связанные с шрифтами, могут быть определены с помощью сокращенного свойства font, а различные отступы вокруг блока могут быть определены с помощью сокращенного свойства margin.

Трудности в использовании

При использовании сокращенных свойств следует учитывать несколько случаев.

Пропуск свойств

Неуказанное значение устанавливается в начальное значение. Это означает, что оно перезаписывает ранее установленные значения. Например:

p {
  background-color: red;
  background: url(images/bg.gif) no-repeat left top;
}

Это не установит цвет фона в red, а в значение по умолчанию для background-color, которое равно transparent.

Наследовать могут только отдельные значения свойств. Поскольку отсутствующие значения заменяются их начальными значениями, невозможно разрешить наследование отдельных свойств, опуская их. Ключевое слово inherit может быть применено к свойству, но только в целом, а не как ключевое слово для одного значения или другого. Это означает, что единственный способ сделать так, чтобы определенное значение унаследовалось, — это использовать полное свойство с ключевым словом inherit.

Порядок свойств

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

Два важных случая здесь:

свойства, относящиеся к границам блока, такие как border-style, margin или padding
свойства, относящиеся к углам блока, такие как border-radius

Границы блока

Сокращенные свойства, обрабатывающие свойства, относящиеся к границам блока, такие как border-style, margin или padding, всегда используют согласованную синтаксическую конструкцию с 1–4 значениями, представляющими эти границы:

Синтаксис с одним значением: border-width: 1em — Единственное значение представляет все грани:
Синтаксис с двумя значениями: border-width: 1em 2em — Первое значение представляет вертикальные, то есть верхнюю и нижнюю, грани, второе — горизонтальные, то есть левую и правую:
Синтаксис с тремя значениями: border-width: 1em 2em 3em — Первое значение представляет верхнюю грань, второе — горизонтальные, то есть левую и правую, и третье значение — нижнюю грань:
Синтаксис с четырьмя значениями: border-width: 1em 2em 3em 4em — Четыре значения представляют верхнюю, правую, нижнюю и левую грани соответственно, всегда в этом порядке, то есть по часовой стрелке, начиная с верхней: Начальная буква Top-Right-Bottom-Left соответствует порядку согласных в слове trouble: TRBL. Вы также можете запомнить его как порядок вращения стрелок на часах: 2em начинается в положении 12 часов, затем 3em в положении 3 часов, затем 4em в положении 6 часов и 4em в положении 9 часов.

Углы блока

Аналогично, сокращенные свойства, обрабатывающие свойства, относящиеся к углам блока, такие как border-radius, всегда используют согласованную синтаксическую конструкцию с 1–4 значениями, представляющими эти углы:

Синтаксис с одним значением: border-radius: 1em — Единственное значение представляет все углы:
Синтаксис с двумя значениями: border-radius: 1em 2em — Первое значение представляет верхний левый и нижний правый угол, второе — верхний правый и нижний левый:
Синтаксис с тремя значениями: border-radius: 1em 2em 3em — Первое значение представляет верхний левый угол, второе — верхний правый и нижний левый, а третье значение — нижний правый угол:
Синтаксис с четырьмя значениями: border-radius: 1em 2em 3em 4em — Четыре значения представляют верхний левый, верхний правый, нижний правый и нижний левый углы соответственно, всегда в этом порядке, то есть по часовой стрелке, начиная с верхнего левого:

Свойства фона

Рассмотрим фон со следующими свойствами

background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: left top;

Эти четыре объявления можно сократить до одного:

background: #000 url(images/bg.gif) no-repeat left top;

(Форма сокращенного свойства фактически эквивалентна полным свойствам выше плюс background-attachment: scroll и, в CSS3, некоторым дополнительным свойствам.)

См. background для получения более подробной информации, включая свойства CSS3.

Свойства шрифта

Рассмотрим следующие объявления:

font-style: italic;
font-weight: bold;
font-size: 0.8em;
line-height: 1.2;
font-family: Arial, sans-serif;

Эти 5 утверждений можно сократить до следующего:

font:
  italic bold 0.8em/1.2 Arial,
  sans-serif;

Это сокращенное объявление фактически эквивалентно объявлениям выше плюс font-variant: normal, font-size-adjust: none, и font-stretch: normal.

Свойства границы

Для границ ширину, цвет и стиль можно упростить до одного объявления. Например, рассмотрим следующий CSS:

border-width: 1px;
border-style: solid;
border-color: #000;

Он может быть упрощен как:

border: 1px solid #000;

Свойства отступов и полей

Сокращенные версии значений отступов и полей работают аналогично; свойство отступа позволяет указать сокращенные значения, используя одно, два, три или четыре значения. Рассмотрим следующие объявления CSS:

margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;

Они такие же, как и следующее объявление, использующее сокращенное свойство с четырьмя значениями. Обратите внимание, что значения указаны по часовой стрелке, начиная с верхней части: верх, право, низ, потом лево (TRBL, согласные в слове "trouble").

margin: 10px 5px 10px 5px;

Правила для сокращенного свойства отступа для объявлений с одним, двумя, тремя и четырьмя значениями:

Если указано одно значение, оно применяется к всем четырем сторонам.
Если указано два значения, первое значение применяется к верхней и нижней границам, второе — к левой и правой.
Если указано три значения, первое значение применяется к верхней границе, второе — к левой и правой, а третье — к нижней.
Если указано четыре значения, отступы применяются к верхней, правой, нижней и левой границам в указанном порядке (по часовой стрелке).

Свойства позиционирования

Для позиционирования сокращенные версии свойств top, right, bottom и left могут быть упрощены до одного объявления. Например, рассмотрим следующий CSS:

top: 0;
right: 20px;
bottom: 0;
left: 20px;

Он может быть упрощен как:

inset: 0 20px 0 20px;

Точно так же, как и для полей и отступов, значения inset упорядочены по часовой стрелке — верх, право, низ, затем лево (TRBL).

Универсальное сокращенное свойство

CSS предоставляет универсальное сокращенное свойство all, которое применяет его значение ко всем свойствам в документе. Его цель — изменить модель наследования свойств.

См. Каскад и наследование или Вводный курс по CSS-каскаду для получения дополнительной информации о том, как работает наследование в CSS.

Сжатые свойства

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties