CodeNet / Веб программирование / HTML / CSS / Каскадные таблицы стилей второго уровня - Спецификация CSS2

Модель представления документа в виде блоков

назад далее содержание свойства указатель

8 Модель представления документа в виде блоков

Содержание

Модель представления документа в виде блоков, используемая в CSS, вводит понятие прямоугольных блоков, которые генерируются для элементов дерева документа и отображаются в документе в соответствии с моделью визуального форматирования. Страничный блок представляет собой частный вид блока, который подробно описывается в разделе об устройствах постраничного вывода.

8.1 Размеры блока

Каждый блок имеет информативную область, в которой заключено содержимое породившего его элемента (например, текст, изображение и т.п.), и наряду с нею может также иметь области, отведенные для оформления отступов, границ и полей. Размер каждой из этих областей задается свойствами, описанными ниже. Следующий рисунок иллюстрирует взаимное расположение полей, границ и отступов, а также терминологию, используемую для обращения к их отдельным частям.

Рисунок, иллюстрирующий взаимное расположение полей, границ и отступов [D]

Поля, границы и отступы могут быть разбиты на левые, правые, верхние и нижние сегменты (например, на приведенном рисунке "LM" обозначает левое поле, "RP" - отступ справа, а "TB" - верхнюю границу).

Периметр каждой из четырех областей (информативной области, поля, границы и отступа) называется краевой линией (иногда просто краем). Таким образом, каждый блок имеет четыре типа краевых линий:

Краевая линия информативной области или внутренняя краевая линия: Краевая линия информативной области окружает отображаемое содержимое элемента, порождающего блок.
Краевая линия отступов: Краевая линия отступов окружает ту область блока, которая используется для оформления отступов. Если эта область имеет нулевую ширину, то край отступов совпадает с краем информативной области. Краевая линия отступов определяет границы контейнера.
Краевая линия границы: Краевая линия границы окружает границу блока. Если ширина границы равна нулю, то ее край совпадает с краем отступов.
Краевая линия поля или внешняя краевая линия: Краевая линия поля окружает поле блока. Если ширина поля равна нулю, то ее край совпадает с краем границы.

Любая краевая линия может быть разбита на четыре сегмента: левый, правый, верхний и нижний.

Размеры информативной области блока, т.е. ее ширина и высота, зависят от нескольких факторов: определены ли у элемента, породившего блок, такие свойства, как 'width' и 'height', содержит ли блок текст или другие блоки, является ли блок таблицей и т.д. Ширина и высота блока обсуждаются в разделе о модели визуального форматирования.

Ширина блока задается суммой значений ширины информативной области, а также левых и правых сегментов полей, границ и отступов. Высота, в свою очередь, задается суммой значений ширины верхних и нижних сегментов полей, границ и отступов, а также высоты информативной области.

Стиль оформления фона различных областей блока определяется следующим образом:

Информативная область: свойство 'background' элемента, порождающего блок.
Область отступов: свойство 'background' элемента, порождающего блок.
Область границы: свойства границ элемента, порождающего блок.
Область поля: поля всегда прозрачны.

8.2 Примеры полей, отступов и границ

Приводимый далее пример иллюстрирует сосуществование полей, отступов и границ. Следующий HTML-документ

<!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.

Взаимосвязь между полями, отступами и границами родительского и дочернего элементов [D]

Обратите внимание на следующее:

ширина информативной области каждого блока, порожденного элементом LI, вычисляется сверху вниз, в то время как его контейнер определяется элементом UL;
высота каждого блока, порожденного элементом LI, определяется высотой информативной области в совокупности со значениями высоты нижних и верхних сегментов поля, границы и отступа. Заметьте, что вертикальные поля этих блоков перекрываются;
ширина правого сегмента отступа в блоке, порожденном элементом LI, была установлена равной нулю (свойство 'padding'). Результат виден на второй картинке;
поля блока, порожденного элементом LI, прозрачны по определению, поэтому зеленый цвет фона, установленный для отступов и информативной части элемента UL, виден сквозь них;
второй элемент LI задает границу в виде пунктирной линии (свойство 'border-style').

8.3 Свойства полей: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' и 'margin'

Свойства полей определяют ширину области поля блока. Стенографическое свойство 'margin' позволяет управлять шириной всех четырех сегментов, в то время как другие свойства дают такую возможность только для отдельных сегментов.

Свойства, описанные в этом разделе, относятся к типу значений <margin-width>, которое может принимать одно из следующих значений:

<длина>: Указывает фиксированную ширину.
<проценты>: Процентное соотношение, вычисляемое относительно ширины контейнера сгенерированного блока. Это правило применимо к свойствам 'margin-top' и 'margin-bottom', за исключением их использования в контексте страницы, для которой процентное соотношение вычисляется относительно высоты страничного блока.
auto: Подробную информацию можно найти в разделе об определении поперечных размеров и полей.

Свойства полей могут принимать отрицательные значения, но в конкретных реализациях могут накладываться различные ограничения.

'margin-top', 'margin-right', 'margin-bottom', 'margin-left'

Значение:	<margin-width> \| наследуемое
Начальное значение:	0
Область применения:	все элементы
Наследование:	нет
Процентное представление:	относительно ширины контейнера
Применяется к:	устройствам визуального форматирования

Эти свойства устанавливают значения ширины верхнего, нижнего, правого и левого полей блока.

H1 { margin-top: 2em }

'margin'

Значение:	<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;        /* копирует значение противоположной стороны */
}

8.3.1 Перекрывающиеся поля

В данной спецификации выражение перекрывающиеся поля обозначает, что граничащие друг с другом поля (которые не разделяются ни отступами, ни границами) двух или более блоков (следующих друг за другом или вложенных один в другой) сливаются в одно общее поле.

В CSS2 горизонтальные поля никогда не перекрываются.

Вертикальные поля могут перекрываться только между определенными блоками:

В нормальном потоке вертикальные поля двух или более соседних структурных блоков перекрываются. Ширина получившегося в результате этого поля равна максимальной ширине перекрывающихся полей. При отрицательных значениях ширины полей происходит сравнение их абсолютных значений, из которых затем выбирается максимальное, исходя из максимального положительного значения ширины. Если положительных значений ширины вовсе нет, то выбор максимума из абсолютных значений ширины полей осуществляется, исходя из предположения, что максимальная ширина равна нулю.
Вертикальные поля перемещаемого и любого другого блока никогда не перекрываются.
Поля абсолютно и относительно позиционируемых блоков никогда не перекрываются.

Более подробную информацию о перекрывающихся полях можно найти в примерах полей, отступов и границ.

8.4 Свойства отступов: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left' и 'padding'

Свойства отступов позволяют определять ширину области отступов блока. Свойство 'padding' является стенографическим и позволяет устанавливать ширину всех четырех сегментов отступа одновременно, в то время как остальные свойства относятся только к отдельным сегментам.

Свойства, рассматриваемые в данном разделе, относятся к типу значений <padding-width> , который может принимать одно из следующих значений:

<length>: Указывает фиксированную ширину.
<percentage>: Процентное сотношение, вычисляемое относительно ширины контейнера сгенерированного блока. В частности, можно заметить, что оно вычисляется и для таких свойств, как 'padding-top' и 'padding-bottom'.

В отличие от свойств поля значения свойств отступов не могут принимать отрицательные значения. Как и для свойств поля, процентные соотношения, задаваемые для свойств отступов, вычисляются относительно ширины контейнера сгенерированного блока.

'padding-top', 'padding-right', 'padding-bottom', 'padding-left'

Значение:	<padding-width> \| наследуемое
Начальное значение:	0
Область применения:	все элементы
Наследование:	нет
Процентное задание:	относительно ширины контейнера
Применяется к:	устройствам визуального форматирования

Эти свойства устанавливают значение ширины верхнего, правого, нижнего и левого сегментов отступа.

BLOCKQUOTE { padding-top: 0.3em }

'padding'

Значение:	<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' равен размеру используемого шрифта.

8.5 Свойства границы

Свойства границы позволяют устанавливать ширину, цвет и стиль области границы блока. Данные свойства применяются ко всем элементам.

Примечание. В большей степени оно относится к HTML-документам, в которых способ отображения, используемый агентом пользователя для вывода определенных элементов (например, кнопок, меню и т.д.), отличается от способа отображения "обычных" элементов.

8.5.1 Ширина границы: 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width' и 'border-width'

Свойства ширины границы определяют ширину области границы. Свойства, рассматриваемые в данном разделе, относятся к типу значений <border-width>, который может принимать одно из следующих значений:

thin: Тонкая граница.
medium: Граница средней толщины.
thick: Толстая граница.
<длина>: Толщина границы задается явно. Явные значения ширины границы не могут быть отрицательными.

Интерпретация первых трех значений зависит от агента пользователя. Но при этом всегда должно соблюдаться следующее соотношение:

'thin' <='medium' <= 'thick'.

Более того, все эти три значения не должны изменяться на протяжении всего документа.

'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'

Значение:	<border-width> \| наследуемое
Начальное значение:	средняя толщина
Область применения:	все элементы
Наследование:	нет
Процентное задание:	N/A
Применяется к:	устройствам визуального форматирования

Эти свойства определяют значение ширины верхнего, правого, нижнего и левого сегментов границы блока.

'border-width'

Значение:	<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 }      /* тонкая толстая */
                                            /* средняя толстая */

8.5.2 Цвет границы: 'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color' и 'border-color'

Свойства цвета границы определяют цвет границы блока.

'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color'

Значение:	<цвет> \| наследуемое
Начальное значение:	значение свойства 'color'
Область применения:	все элементы
Наследование:	нет
Процентное задание:	N/A
Применяется к:	устройствам визуального форматирования

'border-color'

Значение:	<цвет>{1,4} \| transparent \| наследуемое
Начальное значение:	см. индивидульные свойства
Область применения:	все элементы
Наследование:	нет
Процентное задание:	N/A
Применяется к:	устройствам визуального форматирования

Свойство 'border-color' определяет цвет всех четырех сегментов границы. Значения могут быть следующими:

<цвет>: Значение цвета.
transparent: Граница прозрачна (хотя она может иметь ширину).

У свойства 'border-color' может быть от одного до четырех значений, каждое из которых присваивается различным сегментам границы подобно тому, как это происходит у свойства 'border-width'.

Если цвет границы элемента не указан в свойстве границы, то агентам пользователей необходимо использовать значение свойства 'color' элемента в качестве вычисленного значения для цвета границы.

В следующем примере граница представляется сплошной черной линией.

P { 
  color: black; 
  background: white; 
  border: solid;
}

8.5.3 Стиль границы: 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style' и 'border-style'

Свойства стиля границы определяют стиль линии (сплошная, двойная, пунктирная и т.д.), выступающей в качестве границы блока. Свойства, рассматриваемые в этом разделе, относятся к типу значений <border-style>, который может принимаать одно из следующих значений:

none: Граница отсутствует. В результате вычисленное значение свойства 'border-width' будет равно нулю.
hidden: Подобно значению 'none', за исключением сценария разрешения конфликтов между границами, используемого для элементов таблицы.
dotted: Граница отображается пунктирной линией.
dashed: Граница отображается штрих-пунктирной линией.
solid: Граница отображается сплошной линией.
double: Граница отображается двумя непрерывными линиями. Сумма значений ширины двух линий и расстояния между ними равна значению свойства 'border-width'.
groove: Граница отображается вдавленной линией.
ridge: Противоположно значению 'groove': граница отображается выпуклой линией.
inset: Весь блок выглядит как бы вдавленным.
outset: Противоположно значнию 'inset': весь блок выглядит как бы выпуклым.

Все границы выводятся поверх фоновой заставки блока. Цвет границ для значений 'groove', 'ridge', 'inset' и 'outset' зависит от значения свойства элемента 'color'.

Конформные агенты пользователей, управляющие отображением HTML-документов, могут интерпретировать значения 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset' и 'outset' как 'solid'.

'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style'

Значение:	<border-style> \| наследуемое
Начальное значение:	none
Область применения:	все элементы
Наследование:	нет
Процентное задание:	N/A
Применяется к:	устройствам визуального отображения

'border-style'

Значение:	<border-style>{1,4} \| наследванное
Начальное значение:	см. индивидуальные свойства
Область применения:	всем элементам
Наследование:	нет
Процентное задние:	N/A
Применяется к:	устройствам визуального форматирования

Свойство 'border-style' определяет стиль всех четырех сегментов границ. Оно может иметь от одного до четырех значений, каждое из которых присваивается различным сегментам подобно тому, как это происходит у свойства 'border-width'.

#xy34 { border-style: solid dotted }

В приведенном примере горизонтальные сегменты границы будут иметь значение 'solid', а вертикальные - 'dotted'.

Так как начальное значение стиля границы равно 'none', то она не будет видна до тех пор, пока для нее не будет указан некоторый другой стиль.

8.5.4 Стенографические свойства границ: 'border-top', 'border-bottom', 'border-right', 'border-left' и 'border'

'border-top', 'border-right', 'border-bottom', 'border-left'

Значение:	[ <'border-top-width'> \|\| <'border-style'> \|\| <цвет> ] \| наследованное
Начальное значение:	см. индивидуальные свойства
Область применения:	все элементы
Наследование:	нет
Процентное задание:	N/A
Применяется к:	устройствам визуального форматирования

Данное свойство является стенографическим свойством для настроек ширины, стиля и цвета для верхнего, правого, нижнего и левого сегментов границы блока.

H1 { border-bottom: thick solid red }

Приведенное правило установит значение ширины, стиль и цвет нижнего сегмента границы элемента H1. Свойства, значения которых не указаны, принмут свои начальные значения. Так как в следующем правиле цвет границы не указан, ей будет присвоен цвет, заданный свойством 'color':

H1 { border-bottom: thick solid }

'border'

Значение:	[ <'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', в данном случае не имеет особого значения.