Некоторые свойства CSS допускают использование строки значений, что устраняет необходимость в некоторых индивидуальных свойствах. Строка значений представляет собой набор определенных значений, разделенных пробелами.
Так, свойства margin и padding, отвечающие за отступы и поля элемента, позволяют объединять соответствующие индивидуальные свойства, такие как margin-top-width, margin-right-width, margin-bottom-width и т.д., в форме свойство: верхнее правое нижнее левое;.
Таким образом, HTML селектор вот с такой декларацией:
p {
margin-top: 1px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 20px;
}
Можно объединить следующим образом
p {
margin: 1px 5px 10px 20px;
}
Подробнее об отступах смотрите главу нашего учебника Отступы и поля.
Свойства border-width, border-color и border-style, которые определяют рамку вокруг HTML элемента, также могут быть объединены в единое свойство border:
p {
border: 1px red solid;
}
Также эти правила применимы и к свойствам border-top, boder-right, border-bottom, border-left.
Подробнее об рамках смотрите главу нашего учебника Рамки элемента.
Если определяется два значения (например, margin: 1em, 10em;), то первое значение будет применяться к верхней и нижней стороне элемента, а второе – к правой и левой.
Свойства, относящиеся к шрифтам, также можно объединять в свойстве font:
p {
font: italic bold 1em/1.5 courier;
}
Здесь "/1.5" относится к свойству line-height.
Подробнее об определении шрифтов смотрите главу нашего учебника Изменение свойств шрифта.
Итак, сведем все в одну декларацию. Чтобы окончательно во всем разобраться, поэкспериментируйте со следующим кодом:
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;
}