Сокращение шестнадцатеричного кода цвета
Если шестнадцатеричный код цвета имеет три пары одинаковых значений, например #FFCC00, то в CSS его можно записать как #FC0.
Т.е.
#div {background: #FFCC00;}
равно
#div {background: #FC0;}
Ноль
При указании длины, ширины, отступов и т.д. необязательно указывать в чем будет измеряться ноль, будь то пиксели, пункты или проценты, – это ведь ноль.
Т.е.
#div {width: 0px; height: 0px; border: 0px;}
равно
#div {width: 0; height: 0; border: 0;}
Группировка стилей
Имея на странице несколько элементов с одинаковыми свойствами, можно объеденить их в одну запись.
Т.е.
#div1 {width: 25px; height: 25px; background: #ff0; margin: 10px;}
#div2 {width: 25px; height: 25px; background: #ff0; margin: 10px;}
равно
#div1, #div2 {width: 25px; height: 25px; background: #ff0; margin: 10px;}
Background
В обычном виде свойство Background выглядит так:
#div {
background-color: #FFCC00;
background-image : url(image.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top right;
}
в сокращенном так:
#div {background: #FFCC00 url(image.png) no-repeat fixed top right;}
Border
Обычный вид:
#div {
border-width: 5px;
border-style: solid;
border-color: #f00;
}
сокращенный:
#div {border: 1px solid #f00;}
Также можно сократить конструкцию:
#div {
border-top: 1px solid #f00;
border-right: 1px solid #f00;
border-bottom: 1px solid #f00;
border-left: 1px solid #f00;
}
до:
#div {border: 1px solid #f00;}
Font
Полная версия свойства Font:
#div {
font-style: italic;
font-variant: normal ;
font-weight: bold;
font-size: 12px;
font-family: Arial, Tahoma;
}
сокращенная:
#div {font: italic normal bold 12px Arial, Tahoma;}
В данном случае порядок значений должен быть именно таким.
List-Style
Полная версия:
ul {
list-style-type: circle;
list-style-position: outside;
list-style-image: url(image.png)
}
сокращенная:
ul {list-style: circle outside url(image.png)}
Margin, Padding
Полная версия:
#div {
margin-top: 10px;
margin-right: 15px;
margin-bottom: 10px;
margin-left: 15px;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
}
сокращаем
#div {
margin: 10px 15px 10px 15px;
padding: 10px 15px 10px 15px;
}
отступы присваиваются по часовой стрелке начиная с верхнего, т.е. сверху → справа → снизу → слева.
Сокращаем
#div {
margin: 10px 15px;
padding: 10px 15px;
}
в данном случае сокращение действует правильно если отступы справа\слева, сверху\снизу одного значения.
Сокращаем
#div {
margin: 15px;
padding: 15px;
}
здесь все отступы одного значения.