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

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

Сокращённой формой записи обладают следующие css-свойства:

background
margin
padding
border
font
list-style
outline

Рассмотрим их подробнее:

background

Свойство background собирается из следующих CSS-свойств: background-attachment, background-color, background-image, background-position, background-repeat. Формат записи свойства следующий:

background: background-attachment || background-color || background-image || background-position || background-repeat

Однако это не мешает менять местами некоторые свойства, а некоторые и выкидывать. Например:

background-attachment: scroll;
background-color: #FFF;
background-image: url(img/sony.gif);
background-position: top left;
background-repeat: no-repeat; 

/*пять строчек выше идентичны одной ниже*/ 
background: scroll #FFF url(img/sony.gif) top left no-repeat;

margin

Пример не сокращенной записи свойства:

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

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

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

padding

Пример не сокращенной записи свойства:

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

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

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

Особенности margin и padding

Если параметр равен 0, то единицу измерения можно не указывать.
margin может использовать отрицательные значения, а padding — нет.
margin может принимать слева и справа значение auto.

border

Свойства border-width, border-color и border-style могут быть объединены в единое свойство border, например:

p {
   border: 1px red solid;
}

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

font

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

font-family: Tahoma, Verdana;
font-style: italic;
font-variant: normal;
font-weight: bold;
font-size: 150%;
line-height: 18px; 

/* идентичны строке */ 
font:italic normal bold 150%/18px Tahoma, Verdana;

list-style

Формат записи свойств следующий:

list-style: list-style-type || list-style-position || list-style-image

Если установить для list-style-type и list-style-image значения none, то у списка будет отсутствовать какой-либо маркер. Пример:

ul { 
  list-style: none; 
}

outline

Outline — сокращённая форма записи свойств, которая задаёт общий контур элемента. Контуры не влияют на размещение элементов, они могут быть неправильной формы.

/* свойства контуров */

[ outline-color; outline-style; outline-width ]

/* ПРИМЕРЫ */

outline: 1px solid #111;
outline: 2px dotted #222;
outline: 3px dashed #333;