Вы здесь: Главная > CSS > Сокращённые свойства

Сокращённые свойства

Опубликовано автором Просмотры: 22

Некоторые свойства CSS допускают строку значений, заменяя необходимость в ряде свойств. Они представлены значениями, разделёнными пробелами.

Поля и отступы

margin позволяет объединять margin-top, margin-right, margin-bottom и margin-left в форме свойства: верхний правый нижний левый;

Итак:

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

Можно резюмировать следующим образом:

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

padding может использоваться точно таким же образом.

Если указать только два значения (например, padding: 1em 10em;), то первым значением будет верхнее и нижнее, а вторым значением будут правое и левое.

Границы

border-width может использоваться так же, как margin и padding. Вы также можете комбинировать border-width, border-color и border-style со border свойством. Итак:

p {
    border-width: 1px;
    border-color: red;
    border-style: solid;
}

Может быть упрощён до:

p {
    border: 1px red solid;
}

Сочетание ширины / цвета / стиля также может быть применено к border-top, border-right.

Шрифты

Свойства, связанные со шрифтом, также могут быть собраны вместе со свойством font:

p {
    font: italic bold 12px/2 courier;
}

Это объединяет font-style, font-weight font-size line-height, font-family.

Итак, чтобы собрать всё это воедино, попробуйте этот код:

Это объединяет font-style, font-weight font-size line-height, font-family.

Итак, чтобы собрать всё это воедино, попробуйте этот код:

Супер!

Страницы в тему:

Добавить комментарий