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

Некоторые свойства в CSS можно записывать в сокращённой форме. Это позволит оптимизировать код, но в то же время может принести ряд проблем.

При сокращённой форме записи те свойства, которые явно не указаны, получают значения по умолчанию, что может изменить ранее назначенные свойства.

Сокращённая запись возможна для следующих свойств:

• font — шрифт
• background — фон
• list-style — списки
• border, border-top/right/bottom/left, border-color/style/width — граница
• outline — внешняя граница
• padding — внутренний отступ
• margin — внешний отступ
• <color> — значение цвета в 16-ричной форме, когда повторяющиеся значения в каждом из цветовых каналов (RGB) можно записать в сокращённой форме

Для сокращённых свойств padding, margin, border-color/style/width используется мнемоническое правило TRouBLe от английских названий сторон (top/right/bottom/left, то есть верх/право/низ/лево).

Например:

p {
    padding: 2px 4px 6px 8px;
    padding: 2px 4px 6px;
    padding: 2px 4px;
    padding: 2px;
}

В этом примере значения свойства определяют стороны следующим образом:

4 значения: T+R+B+L;

3 значения: T+RL+B;

2 значения: TB+RL;

1 значение: TRBL.

Для остальных сокращённых свойств (font, background, list-style, border, border-top/right/bottom/left, outline) их значения записываются через пробел (кроме сокращённой записи цвета).

Примеры:

Полная запись цвета:

h1 {
  color: #ffffff;
}

Сокращённая запись:

h1 {
  color: #fff;
}

Пример для шрифта:

p {
  font: bold italic small-caps 150%/1.4 Arial, Helvetica, sans-serif;
}

Где:

bold — font-weight

italic — font-style

small-caps — font-variant

150%/1.4 — font-size/line-height

Arial, Helvetica, sans-serif — font-family

Пример для фона:

body {
  background: #8cf url('sea.jpg') no-repeat fixed bottom;
}

Где:

#8cf — background-color

url('sea.jpg') — background-image

no-repeat — background-repeat

fixed — background-attachment

bottom — background-position