СОКРАЩЕНИЯ В CSS

Сокращения в CSS могут сэкономить массу времени и размер файла уменьшится чуть ли не в 2 раза! Провел тесты в IE6, Opera 8.5, FireFox 1.5 отображение одинаковое, во всех браузерах.

Font

Формат:
font: font-style || font-variant || font-weight || font-size[/line-height] || font-family | CSS2FontConstant

Пример:

font-family: Verdana, Tahoma; font-style: normal; font-variant: normal; font-weight: bold; font-size: 9pt; line-height: 11pt; /* Заменяется на: */ font:normal normal bold 9pt/11pt Verdana,Tahoma;

Margin/Padding

Формат:
margin: marginThickness | auto {1,4}
Этот атрибут может принимать от 1 до 4 значений:

Количество значений	Результат
1	Все 4 поля равны одному значению.
2	Верхнее, нижнее равны первому значению; правое, левое - второму.
3	Верхнее поле равно первому значению; правое, левое - второму; нижнее - третьему
4	Верхнее поле равно первому значению; правое - второму; нижнее - третьему; левое - четвертому.

Пример:

margin-top: 10px; margin-right: 0; margin-bottom: 6px; margin-left: 4px; /* Заменяется на: */ margin: 10px 0 6px 4px; /* Примечание: если значение равно 0, то единицу измерения можно не указывать */

Border

Формат:
border: border-width || border-style || color

Пример:

border-top-width: 1px; border-top-style: solid; border-top-color: black; border-right-width: 1px; border-right-style: solid; border-right-color: red; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: blue; border-left-width: 1px; border-left-style: solid; border-left-color: gray; /* Заменяется на: */ border-top: 1px solid black; border-right: 1px solid red; border-bottom: 1px solid blue; border-left: 1px solid gray; /* Было 12 строк, стало всего 4! Если у нас монотонная рамка, то можно сократить еще на 3 строки: */ border: 1px dashed blue; /* Когда необходимо поменять рамку для конкретной стороны, можно сначала задать однопиксельную рамку, а потом задать дополнительные атрибуты: */ border: 1px dashed blue; border-top-width: 10px;

Background

Формат:
background: background-attachment || background-color || background-image || background-position || background-repeat

Пример:

background-attachment: scroll; background-color: #FFF; /* Если все буквы или цифры в коде цвета одинаковы, то мы можем сокращенно записать код цвета, то есть было FFFFFF стало FFF */ background-image: url(img/sony.gif); /* Не рекомендуется в url использовать одинарные или двойные кавычки, т.к. могут возникнуть проблемы при отображении в некоторых браузерах */ background-position: top left; background-repeat: no-repeat; /* Заменяется на: */ background: scroll #FFF url(img/sony.gif) top left no-repeat;