Содержание
Модель представления документа в виде блоков, используемая в CSS, вводит понятие прямоугольных блоков, которые генерируются для элементов дерева документа и отображаются в документе в соответствии с моделью визуального форматирования. Страничный блок представляет собой частный вид блока, который подробно описывается в разделе об устройствах постраничного вывода.
Каждый блок имеет информативную область, в которой заключено содержимое породившего его элемента (например, текст, изображение и т.п.), и наряду с нею может также иметь области, отведенные для оформления отступов, границ и полей. Размер каждой из этих областей задается свойствами, описанными ниже. Следующий рисунок иллюстрирует взаимное расположение полей, границ и отступов, а также терминологию, используемую для обращения к их отдельным частям.
Поля, границы и отступы могут быть разбиты на левые, правые, верхние и нижние сегменты (например, на приведенном рисунке "LM" обозначает левое поле, "RP" - отступ справа, а "TB" - верхнюю границу).
Периметр каждой из четырех областей (информативной области, поля, границы и отступа) называется краевой линией (иногда просто краем). Таким образом, каждый блок имеет четыре типа краевых линий:
Любая краевая линия может быть разбита на четыре сегмента: левый, правый, верхний и нижний.
Размеры информативной области блока, т.е. ее ширина и высота, зависят от нескольких факторов: определены ли у элемента, породившего блок, такие свойства, как 'width' и 'height', содержит ли блок текст или другие блоки, является ли блок таблицей и т.д. Ширина и высота блока обсуждаются в разделе о модели визуального форматирования.
Ширина блока задается суммой значений ширины информативной области, а также левых и правых сегментов полей, границ и отступов. Высота, в свою очередь, задается суммой значений ширины верхних и нижних сегментов полей, границ и отступов, а также высоты информативной области.
Стиль оформления фона различных областей блока определяется следующим образом:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE> Примеры полей, отступов и границ </TITLE>
<STYLE type="text/css">
UL {
background: green;
margin: 12px 12px 12px 12px;
padding: 3px 3px 3px 3px;
/* Границы не установлены */
}
LI {
color: black; /* Текст отображается черным цветом */
background: gray; /* Фон информативной области и отступов */
/* оформляется серым цветом */
margin: 12px 12px 12px 12px;
padding: 12px 0px 12px 12px; /* Правый сегмент отступов */
/* имеет нулевую ширину */
list-style: none /* Элементы списка не помечаются глифом */
/* Границы не установлены */
}
LI.withborder {
border-style: dashed;
border-width: medium; /* Устанавливает ширину границ со всех */
/* сторон */
border-color: black;
}
</STYLE>
</HEAD>
<BODY>
<UL>
<LI> Первый элемент списка
<LI class="withborder"> Второй элемент списка имеет большую длину,
для того чтобы проиллюстрировать процесс переноса.
</UL>
</BODY>
</HTML>
порождает дерево документа, в котором, помимо прочего, имеется элемент UL, обладающий двумя дочерними элементами LI.
На первом из следующих рисунков показан результат трансляции приведенного документа. На втором иллюстрируется взаимосвязь между полями, отступами и границами элемента UL и его дочерних элементов LI.
Обратите внимание на следующее:
Свойства полей определяют ширину области поля блока. Стенографическое свойство 'margin' позволяет управлять шириной всех четырех сегментов, в то время как другие свойства дают такую возможность только для отдельных сегментов.
Свойства, описанные в этом разделе, относятся к типу значений <margin-width>, которое может принимать одно из следующих значений:
Свойства полей могут принимать отрицательные значения, но в конкретных реализациях могут накладываться различные ограничения.
| Значение: | <margin-width> | наследуемое |
| Начальное значение: | 0 |
| Область применения: | все элементы |
| Наследование: | нет |
| Процентное представление: | относительно ширины контейнера |
| Применяется к: | устройствам визуального форматирования |
Эти свойства устанавливают значения ширины верхнего, нижнего, правого и левого полей блока.
H1 { margin-top: 2em }
| Значение: | <margin-width>{1,4} | наследуемое |
| Начальное значение: | для свойства стенографического типа не определено |
| Область применения: | все элементы |
| Наследование: | нет |
| Процентное задание: | относительно ширины контейнера |
| Применяется к: | устройствам визуального форматирования |
Свойство 'margin' является стенографическим и используется в таблицах стилей для одновременной настройки следующих свойств: 'margin-top', 'margin-right', 'margin-bottom' и 'margin-left'.
Если оно принимает только одно значение, то это значение применяется ко всем сегментам. Если оно принимает два значения, то первое применяется к верхнему и нижнему сегментам, а второе - к правому и левому сегментам. Если оно принимает три значения, то первое значение применяется к верхнему, второе - к левому и правому, а третье - к нижнему сегменту. Если оно принимает четыре значения, то они применяются к верхнему, правому, нижнему и левому сегментам, соответственно.
BODY { margin: 2em } /* ширина всех полей равна 2em */
BODY { margin: 1em 2em } /* ширина верхнего и нижнего сегментов равна */
/* 1em, а ширина правого и левого сегментов - 2em */
BODY { margin: 1em 2em 3em } /* ширина верхнего, правого, нижнего и левого */
/* сегментов равна 1em, 2em, 3em и 2em, */
/* соответственно */
Последнее правило этого примера равнозначно следующему:
BODY {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em; /* копирует значение противоположной стороны */
}
В данной спецификации выражение перекрывающиеся поля обозначает, что граничащие друг с другом поля (которые не разделяются ни отступами, ни границами) двух или более блоков (следующих друг за другом или вложенных один в другой) сливаются в одно общее поле.
В CSS2 горизонтальные поля никогда не перекрываются.
Вертикальные поля могут перекрываться только между определенными блоками:
Более подробную информацию о перекрывающихся полях можно найти в примерах полей, отступов и границ.
Свойства отступов позволяют определять ширину области отступов блока. Свойство 'padding' является стенографическим и позволяет устанавливать ширину всех четырех сегментов отступа одновременно, в то время как остальные свойства относятся только к отдельным сегментам.
Свойства, рассматриваемые в данном разделе, относятся к типу значений <padding-width> , который может принимать одно из следующих значений:
В отличие от свойств поля значения свойств отступов не могут принимать отрицательные значения. Как и для свойств поля, процентные соотношения, задаваемые для свойств отступов, вычисляются относительно ширины контейнера сгенерированного блока.
| Значение: | <padding-width> | наследуемое |
| Начальное значение: | 0 |
| Область применения: | все элементы |
| Наследование: | нет |
| Процентное задание: | относительно ширины контейнера |
| Применяется к: | устройствам визуального форматирования |
Эти свойства устанавливают значение ширины верхнего, правого, нижнего и левого сегментов отступа.
BLOCKQUOTE { padding-top: 0.3em }
| Значение: | <padding-width>{1,4} | наследуемое |
| Начальное значение: | не определено для свойств стенографического типа |
| Область применения: | все элементы |
| Наследуемое: | нет |
| Процентное задание: | относительно ширины контейнера |
| Применяется к: | устройствам визуального форматирования |
Свойство 'padding' является стенографическим и используется в таблицах стилей для одновременной установки следующих свойств: 'padding-top', 'padding-right', 'padding-bottom' и 'padding-left'.
Если оно принимает только одно значение, это значение применяется ко всем сегментам. Если оно принимает два значения, то первое применяется к верхнему и нижнему сегментам, а второе - к правому и левому сегментам. Если оно принимает три значения, то первое значение применяется к верхнему, второе - к левому и правому, а третье - к нижнему сегменту. Если оно принимает четыре значения, то они применяются к верхнему, правому, нижнему и левому сегментам соответственно.
Цвет или изображение, используемые для оформления фона отступов, задаются с помощью свойства 'background':
H1 {
background: white;
padding: 1em 2em;
}
В приведенном примере ширина вертикальных ('padding-top' и 'padding-bottom') и горизонтальных ('padding-right' и 'padding-left') сегментов отступов устанавливается равной '1em' и '2em' соответственно. Единица измерения 'em' задается относительно размера шрифта элемента: '1em' равен размеру используемого шрифта.
Свойства границы позволяют устанавливать ширину, цвет и стиль области границы блока. Данные свойства применяются ко всем элементам.
Примечание. В большей степени оно относится к HTML-документам, в которых способ отображения, используемый агентом пользователя для вывода определенных элементов (например, кнопок, меню и т.д.), отличается от способа отображения "обычных" элементов.
Свойства ширины границы определяют ширину области границы. Свойства, рассматриваемые в данном разделе, относятся к типу значений <border-width>, который может принимать одно из следующих значений:
Интерпретация первых трех значений зависит от агента пользователя. Но при этом всегда должно соблюдаться следующее соотношение:
'thin' <='medium' <= 'thick'.
Более того, все эти три значения не должны изменяться на протяжении всего документа.
| Значение: | <border-width> | наследуемое |
| Начальное значение: | средняя толщина |
| Область применения: | все элементы |
| Наследование: | нет |
| Процентное задание: | N/A |
| Применяется к: | устройствам визуального форматирования |
Эти свойства определяют значение ширины верхнего, правого, нижнего и левого сегментов границы блока.
| Значение: | <border-width>{1,4} | наследуемое |
| Начальное значение: | см. характерные свойства |
| Область применения: | все элементы |
| Наследование: | нет |
| Процентное задание: | N/A |
| Применяется к: | устройствам визуального форматирования |
Это свойство является стенографическим и используется в таблицах стилей для одновременной установки следующих свойств: 'border-top-width', 'border-right-width', 'border-bottom-width' и 'border-left-width'.
Если оно принимает только одно значение, это значение применяется ко всем сегментам. Если оно принимает два значения, то первое применяется к верхнему и нижнему сегментам, а второе - к правому и левому сегментам. Если оно принимает три значения, то первое значение применяется к верхнему, второе - к левому и правому, а третье - к нижнему сегменту. Если оно принимает четыре значения, то они применяются к верхнему, правому, нижнему и левому сегментам соответственно.
В следующих примерах в комментариях указаны значения ширины верхней, правой, нижней и левой границ, получившиеся в результате применения правил:
H1 { border-width: thin } /* тонкая тонкая */
/* тонкая тонкая */
H1 { border-width: thin thick } /* тонкая толстая */
/* тонкая толстая */
H1 { border-width: thin thick medium } /* тонкая толстая */
/* средняя толстая */
Свойства цвета границы определяют цвет границы блока.
| Значение: | <цвет> | наследуемое |
| Начальное значение: | значение свойства 'color' |
| Область применения: | все элементы |
| Наследование: | нет |
| Процентное задание: | N/A |
| Применяется к: | устройствам визуального форматирования |
| Значение: | <цвет>{1,4} | transparent | наследуемое |
| Начальное значение: | см. индивидульные свойства |
| Область применения: | все элементы |
| Наследование: | нет |
| Процентное задание: | N/A |
| Применяется к: | устройствам визуального форматирования |
Свойство 'border-color' определяет цвет всех четырех сегментов границы. Значения могут быть следующими:
У свойства 'border-color' может быть от одного до четырех значений, каждое из которых присваивается различным сегментам границы подобно тому, как это происходит у свойства 'border-width'.
Если цвет границы элемента не указан в свойстве границы, то агентам пользователей необходимо использовать значение свойства 'color' элемента в качестве вычисленного значения для цвета границы.
В следующем примере граница представляется сплошной черной линией.
P {
color: black;
background: white;
border: solid;
}
Свойства стиля границы определяют стиль линии (сплошная, двойная, пунктирная и т.д.), выступающей в качестве границы блока. Свойства, рассматриваемые в этом разделе, относятся к типу значений <border-style>, который может принимаать одно из следующих значений:
Все границы выводятся поверх фоновой заставки блока. Цвет границ для значений 'groove', 'ridge', 'inset' и 'outset' зависит от значения свойства элемента 'color'.
Конформные агенты пользователей, управляющие отображением HTML-документов, могут интерпретировать значения 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset' и 'outset' как 'solid'.
| Значение: | <border-style> | наследуемое |
| Начальное значение: | none |
| Область применения: | все элементы |
| Наследование: | нет |
| Процентное задание: | N/A |
| Применяется к: | устройствам визуального отображения |
| Значение: | <border-style>{1,4} | наследванное |
| Начальное значение: | см. индивидуальные свойства |
| Область применения: | всем элементам |
| Наследование: | нет |
| Процентное задние: | N/A |
| Применяется к: | устройствам визуального форматирования |
Свойство 'border-style' определяет стиль всех четырех сегментов границ. Оно может иметь от одного до четырех значений, каждое из которых присваивается различным сегментам подобно тому, как это происходит у свойства 'border-width'.
#xy34 { border-style: solid dotted }
В приведенном примере горизонтальные сегменты границы будут иметь значение 'solid', а вертикальные - 'dotted'.
Так как начальное значение стиля границы равно 'none', то она не будет видна до тех пор, пока для нее не будет указан некоторый другой стиль.
| Значение: | [ <'border-top-width'> || <'border-style'> || <цвет> ] | наследованное |
| Начальное значение: | см. индивидуальные свойства |
| Область применения: | все элементы |
| Наследование: | нет |
| Процентное задание: | N/A |
| Применяется к: | устройствам визуального форматирования |
Данное свойство является стенографическим свойством для настроек ширины, стиля и цвета для верхнего, правого, нижнего и левого сегментов границы блока.
H1 { border-bottom: thick solid red }
Приведенное правило установит значение ширины, стиль и цвет нижнего сегмента границы элемента H1. Свойства, значения которых не указаны, принмут свои начальные значения. Так как в следующем правиле цвет границы не указан, ей будет присвоен цвет, заданный свойством 'color':
H1 { border-bottom: thick solid }
| Значение: | [ <'border-top-width'> || <'border-style'> || <color> ] | наследованное |
| Начальное значение: | см. индивидуальные свойства |
| Область применения: | все элементы |
| Наследование: | нет |
| Процентное задание: | N/A |
| Применяется к: | устройствам визуального форматирования |
Свойство 'border' является стенографическим и используется для одновременного определения ширины, цвета и стиля всех четырех сегментов границы блока. В отличие от стенографических свойств 'margin' и 'padding' свойство 'border' не может устанавливать различные значения для отдельных сегментов границы. Чтобы это сделать, необходимо использовать другие свойства границы.
Например, первое правило, представленное ниже, равносильно набору из четырех следующих за ним правил:
P { border: solid red }
P {
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
}
Так как области действия различных свойств могут пересекаться, то порядок следования описывающих их правил имеет большое значение.
Рассмотрим следующий пример:
BLOCKQUOTE {
border-color: red;
border-left: double;
color: black
}
В этом примере левый сегмент границы отображается черным цветом, в то время как все остальные сегменты - красным. Это обусловлено действием свойства 'border-left', определяющего ширину, стиль и цвет левого сегмента. Так как свойство 'border-left' не указывает значение цвета, то последнее будет заимствовано из свойства 'color'. Тот факт, что свойство 'color' было описано после свойства 'border-left', в данном случае не имеет особого значения.