Быстрые клавиши CSS

Ярлыки — это хорошо. Они экономят время, газ и облегчают жизнь. А кому не понравится? Зачем писать:

body {
background-color: #ffffff;
background-image: url(image/picture.jpg);
background-repeat: repeat-x;
background-position: top right;
}

если бы вы могли просто написать:

body {
background: #ffffff url(image/picture.jpg) repeat-x top right;
}

Все это:

#example {
border-top-color: #cccccc;
border-top-width: 5px;
border-top-style: dashed;
border-left-color: #cccccc;
border-left-width: 5px;
border-left-style: dashed;
border-bottom-color: #cccccc;
border-bottom-width: 5px;
border-bottom-style: dashed;
border-right-color: #cccccc;
border-right-width: 5px;
border-right-style: dashed;
}

Можно написать так:

#example {
border: #cccccc 5px dashed;
}

Разве это не красиво?

Но что, если вы не хотите, чтобы все стороны были одинаковыми? Нет проблем. Эти ярлыки работают на всех видах свойств. Давайте используем поле для этого примера:

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

Обратите внимание на то, в каком порядке я перечислял эти свойства. Когда вы перечисляете их, как я здесь, заказ не имеет значения, но я использую порядок верхнего левого нижнего правого поля по одной причине: так CSS понятный вашему браузеру. Поэтому вместо всех этих строк вы можете написать:

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

Если все 4 стороны одинаковы — пойдем с 10px, просто напишите:

p {
margin: 10px;
}

Если ваш верх и низ, например, 20px, но ваша правая и левая сторона 40px, вы можете написать:

p {
margin: 20px 40px;
}

И, последний вариант:

p {
margin: 10px 40px 5px;
}

Это говорит о том, что ваш браузер отображает верхний край как 10px, справа и слева как 40px, а нижний — как 5px.

В общем, это простой принцип, и его легко запомнить — просто подумайте о часах: полдень, 3, 6 и 9 часов. Тот же порядок. В течение самого долгого времени я не мог вспомнить, на каких сторонах упоминался этот трехмерный ярлык, пока я не понял, что моя голова и мое дно имеют разный размер, но мои руки имеют одинаковую длину (ну, почти).