
Быстрые клавиши 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 часов. Тот же порядок. В течение самого долгого времени я не мог вспомнить, на каких сторонах упоминался этот трехмерный ярлык, пока я не понял, что моя голова и мое дно имеют разный размер, но мои руки имеют одинаковую длину (ну, почти).