Свойства, определённые в этом разделе, относятся к типу значений <padding-width>, который может устанавливаться в:
<length>
Специфицирует фиксированную ширину.
<percentage>
Процентное, высчитывается относительно ширины содержащего блока, генерирующего бокс, в том числе и для 'padding-top' и 'padding-bottom'.
В отличие от свойств полей, значения заполнения не могут быть негативными. Как и в свойствах полей, процентные значения свойств заполнения относятся к ширине бокса, сгенерированного содержащим блоком.
'padding-top', 'padding-right', 'padding-bottom', 'padding-left'
Значение: <padding-width> | inherit
Начальное: 0
Применяется: ко всем элементам
Наследуется: нет
Процентное: относительно ширины содержащего блока
Носитель: визуальный
Эти свойства устанавливают верхнее, правое, нижнее и левое заполнение для бокса.
BLOCKQUOTE { padding-top: 0.3em }
'padding'
Значение: <padding-width>{1,4} | inherit
Начальное: не определено для сокращённого свойства
Применяется: ко всем элементам
Наследуется: нет
Процентное: относительно ширины содержащего блока
Носитель: визуальный
Свойство 'padding' - это сокращённое свойство для установки 'padding-top', 'padding-right', 'padding-bottom' и 'padding-left' в одном месте в таблице стилей.
Если имеется одно значение, то оно применяется ко всем сторонам. Если дано два значения, верхнее и нижнее заполнение устанавливаются в первое, а правое и левое заполнения - во второе значение. Если дано три значения, верхнее заполнение устанавливается в первое, левое и правое - во второе, а нижнее заполнение - в третье значение. Если задано четыре значения, они применяются к верхнему, правому, нижнему и левому заполнениям соответственно.
Цвет поверхности области заполнения специфицируется через свойство 'background':
H1 {
background: white;
padding: 1em 2em;
}
Вышеприведённый пример специфицирует вертикальное заполнение '1em' ('padding-top' и 'padding-bottom') и горизонтальное заполнение '2em' ('padding-right' и 'padding-left'). Единицы измерения 'em' относительны к размеру шрифта элемента: '1em' эквивалентно размеру используемого шрифта.
Свойства рамки специфицируют ширину, цвет и стиль области рамки бокса. Эти свойства применимы ко всем элементам.
Примечание. Особенно в HTML, ПА могут отображать рамки определённых элементов (например, кнопок, меню и т.п.) иначе, чем у "обычных" элементов.
Свойства ширины рамки специфицируют ширину области рамки. Свойства, определённые в этом разделе, относятся к типу значений <border-width>, который может устанавливаться в:
thin
Тонкая рамка.
medium
Средняя рамка.
thick
Толстая рамка.
<length>
Толщина рамки имеет точное значение. Это значение не может быть негативным.
Интерпретация первых трёх значений зависит от ПА. Следующие соотношения, однако, обязаны выдерживаться:
'thin' <='medium' <= 'thick'.
К тому же эти значения ширины обязаны быть константными в пределах документа.
'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'
Значение: <border-width> | inherit
Начальное: medium
Применяется: ко всем элементам
Наследуется: нет
Процентное: N/A
Носитель: визуальный
Эти свойства устанавливают верхнюю, правую, нижнюю и левую линии рамки для бокса.
'border-width'
Значение: <border-width>{1,4} | inherit
Начальное: см. индивидуальные свойства
Применяется: ко всем элементам
Наследуется: нет
Процентное: N/A
Носитель: визуальный
Это сокращённое свойство для установки 'border-top-width', 'border-right-width', 'border-bottom-width' и 'border-left-width' в одном месте в таблице стилей.
Если имеется одно значение, то оно применяется ко всем сторонам. Если дано два значения, верхняя и нижняя линии рамки устанавливаются в первое, а правая и левая линии рамки - во второе значение. Если дано три значения, верхняя линия рамки устанавливается в первое, левая и правая - во второе, а нижняя линия рамки - в третье значение. Если задано четыре значения, они применяются к верхней, правой, нижней и левой линиям рамки соответственно.
Комментарии в данном примере поясняют результаты установки ширины верхней, правой, нижней и левой линий рамки:
H1 { border-width: thin } /* thin thin thin thin */
H1 { border-width: thin thick } /* thin thick thin thick */
H1 { border-width: thin thick medium } /* thin thick medium thick */
Эти свойства специфицируют цвет рамки бокса.
'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color'
Значение: <color> | inherit
Начальное: значение свойства 'color'
Применяется: ко всем элементам
Наследуется: нет
Процентное: N/A
Носитель: визуальный
'border-color'
Значение: <color>{1,4} | transparent | inherit
Начальное: см. индивидуальные свойства
Применяется: ко всем элементам
Наследуется: нет
Процентное: N/A
Носитель: визуальный
Свойство 'border-color' устанавливает цвет рамки с четырёх сторон. Значения имеют следующий смысл:
<color>
Специфицирует значение цвета.
transparent
Рамка прозрачна (хотя и может иметь ширину).
Свойство 'border-color' может иметь от одного до четырёх значений, и эти значения устанавливаются для четырёх сторон так же, как и в 'border-width'.
Если цвет рамки элемента не специфицирован в свойстве рамки, ПА обязаны использовать значение свойства 'color' элемента как вычисленное значение цвета рамки.
В этом примере рамка будет сплошной и чёрной:
P {
color: black;
background: white;
border: solid;
}
Свойства стиля рамки специфицируют стиль линии рамки бокса (solid, double, dashed и т.д.). Свойства, определённые в этом разделе, относятся к типу значений <border-style>, который может устанавливаться в:
none
Нет рамки. Форсирует вычисленное значение 'border-width' в '0'.
hidden
То же, что и 'none', за исключением разрешения конфликтов рамок для элементов таблицы.
dotted
Рамка из точек.
dashed
Рамка из пунктирных линий.
solid
Рамка из сплошной линии.
double
Двойная сплошная линия. Сумма двух линий и пространства между ними равна значению 'border-width'.