Сокращенная запись свойств

Сокращенная запись свойств

Свойства, которые принадлежат к одной группе свойств можно записывать сокращенно.
Существуют следующие группы свойств:
  • font
    1. font-style
    2. font-variant
    3. font-weight
    4. font-size/line-height
    5. font-family
  • background
    1. background-color
    2. background-image
    3. background-repeat
    4. background-attachment
    5. background-position
  • margin
    1. margin-top
    2. margin-right
    3. margin-bottom
    4. margin-left
  • padding
    1. padding-top
    2. padding-right
    3. padding-bottom
    4. paddung-left
  • border
    1. border-width
    2. border-style
    3. border-color
  • border-top
    1. border-top-width
    2. border-top-style
    3. border-top-color
  • border-right
    1. border-right-width
    2. border-right-style
    3. border-right-color
  • border-bottom
    1. border-bottom-width
    2. border-bottom-style
    3. border-bottom-color
  • border-left
    1. border-left-width
    2. border-left-style
    3. border-left-color
  • list-style
    1. list-style-type
    2. list-style-position
    3. list-style-image
Пример:
Запишем правило как обычно:
p {
color: #0000cc;
font-size: 12px;
font-family: Verdana;
font-weight: bold;
}

Теперь это же записываем для свойств из группы свойств font в сокращённом виде:
p {
color: #0000cc;
font: bold 12px Verdana;
}

Как видно, получилось на две строки короче.

Примечание: Последовательность записи значений в сокращенном свойстве очень важна. Если её нарушить, то свойство будет работать неправильно. То есть, для последнего примера, нельзя записывать так:
font: Verdana bold 12px;