Скорочення властивостей

Русский перевод: Сокращение свойств

Кілька властивостей CSS можна записати у вигляді одного рядка значень, яка замінює необхідність вказувати цілий ряд властивостей. Ці властивості описуються значеннями, розділеними пробілами.

Наприклад, ви можете об’єднати margin, padding та border-width і записати margin-top-width, margin-right-width, margin-bottom-width і т.п. у вигляді властивість: top right bottom left;

Отже, замість того, щоб вказувати стиль так:

p {
    border-top-width: 1px;
    border-right-width: 5px;
    border-bottom-width: 10px;
    border-left-width: 20px;
}

Ви можете записати їх так:

p {
    border-width: 1px 5px 10px 20px;
}

Ви також можете об’єднати border-width, border-color та border-style:

p {
    border: 1px red solid;
}

(ви можете використовувати це разом з border-top, border-right та ін)

Якщо ви вказуєте тільки два значення (наприклад, margin: 1em 10em;), то перше значення – це верх і низ, а друге – ліво і право.

Також можна збирати декілька властивостей, які впливають на шрифт, використовуючи властивість font:

p {
    font: italic bold 1em/1.5 courier;
}

(де /1.5 – висота рядка)

Підводячи підсумок, розгляньте цей код:

p {
    font: 1em/1.5 "Times New Roman", times, serif;
    padding: 3em 1em;
    border: 1px black solid;
    border-width: 1px 5px 5px 1px;
    border-color: red green blue yellow;
    margin: 1em 5em;
}

Працює відмінно.

← Псевдокласи