Ярлики 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;
}

Якщо всі чотири сторони однакові – підемо 10 пікселів, просто напишіть:

p {
margin: 10px;
}

Якщо ваша верхня частина та нижня частина, наприклад, 20 пікселів, але правою та лівою стороною 40 пікселів, ви можете написати:

p {
margin: 20px 40px;
}

І останній варіант:

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

Це дозволить вашому браузеру показати верхній край як 10 пікселів, праворуч і ліворуч – 40 пікселів, а нижній – 5 пікселів.

Взагалі, це простий принцип, і його легко запам’ятати – просто подумайте годинник: опівдні, 3, 6 та 9 години. Той же порядок. Я довго не пам’ятаю, які сторони згадували цей тривимірний ярлик, поки я не зрозумів, що моя голова та моя нижня частина мають яскраво виражений розмір, але мої руки мають однакову довжину (ну, майже).