Краткая запись свойств CSS

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

Так, свойства margin и padding, отвечающие за отступы и поля элемента, позволяют объединять соответствующие индивидуальные свойства, такие как margin-top-width, margin-right-width, margin-bottom-width и т.д., в форме свойство: верхнее правое нижнее левое;.

Таким образом, HTML селектор вот с такой декларацией:

p {
   margin-top: 1px;
   margin-right: 5px;
   margin-bottom: 10px;
   margin-left: 20px;
}

Можно объединить следующим образом

p {
   margin: 1px 5px 10px 20px;
}

Подробнее об отступах смотрите главу нашего учебника Отступы и поля.

Свойства border-width, border-color и border-style, которые определяют рамку вокруг HTML элемента, также могут быть объединены в единое свойство border:

p {
   border: 1px red solid;
}

Также эти правила применимы и к свойствам border-top, boder-right, border-bottom, border-left.

Подробнее об рамках смотрите главу нашего учебника Рамки элемента.

Если определяется два значения (например, margin: 1em, 10em;), то первое значение будет применяться к верхней и нижней стороне элемента, а второе – к правой и левой.

Свойства, относящиеся к шрифтам, также можно объединять в свойстве font:

p {
   font: italic bold 1em/1.5 courier;
}

Здесь "/1.5" относится к свойству line-height.

Подробнее об определении шрифтов смотрите главу нашего учебника Изменение свойств шрифта.

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

p {
   font: 1em/1.5 "Times New Roman", times, serif;
   padding: 3em 1em;
   border: 1px black solid;
   border-width: 1px 5px 5px 1px;
   border-color: red green blue yellow;
   margin: 1em 5em;
}