Сокращения в 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;
- Войдите или зарегистрируйтесь, чтобы отправлять комментарии