Краткая запись свойств 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 также могут быть объединены в единое свойство 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;
}