28. Блоки. Визуальное форматирование

Блоки

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

Совет

При знакомстве со свойствами блоковых элементов желательно иметь перед глазами схему параметров форматирования блоковых элементов, схематически представленную на рис. 10.3. В группу форматирования поля входят свойства, устанавливающие ширину верхнего (margin-top), Правого (margin-right), нижнего (margin-bottom) и левого (margin-left) поля элемента. В свойстве margin можно одновременно установить значения всех четырех параметров поля элемента. Ширина соответствующих полей задается значением длины или в процентах от ширины ближайшего элемента-родителя. Начальные значения всех полей равны 0. Если в свойстве argin заданы четыре значения, то они, соответственно, относятся к верхнему, правому, нижнему и левому полю. Если определено только одно значение, то оно применяется ко всем сторонам поля элемента. При задании двух или трех значений недостающие значения берутся из установок противоположных сторон. Например: BODY {margin: 1em 2em} /* верх и низ = 1em, право и лево = 2em */

Ширина верхнего, правого, нижнего и левого отступа определяется значением, соответственно, свойств padding-top, padding-right, padding-bottom и padding-left. Свойство padding позволяет одновременно установить значения всех четырех отступов элемента. Все, что было сказано о задании значений для одновременной установки полей, относится и к этому свойству. Ширину верхней, правой, нижней или левой границы задают соответственно свойствами border-top-width, border-right-width, border-bottom-width и border-left-width. Значения свойства border-width определяют ширину границы элемента для всех перечисленных ее частей. Все, что было сказано о задании значений для одновременной установки полей, относится и к этому свойству. Значениями этих свойств могут быть ключевые параметры thin, medium и thick или значение длины. Ширина границы, определяемая ключевыми параметрами, зависит от браузера. Единственное, что можно гарантировать, — это то, что ширина thin не больше ширины medium, которая, в свою очередь, не больше ширины thick. Цвета частей границы задаются значениями свойств border-top-coior, border-right-color, border-bottom-color и border-left-color. свойство border-color определяет цвета всех частей границы. Четыре параметра цвета подчиняются все тем же правилам, описанным при задании полей элемента. Если задан тип границы (см. ниже), но не задан цвет границы, то по умолчанию используется цвет самого элемента. Все предыдущие установки свойств границы не будут иметь никакого воздействия на отображение элемента, если не установлен тип границы, так как по умолчанию тип границы не определен, и она не отображается. Для задания типа любой из четырех частей границы применяются свойства border-top-style, border-right-style, border-bottom-style и border-left-style. Свойство border-style определяет одновременно типы всех частей границы. Значениями этих свойств могут быть ключевые параметры none, solid, double, groove, ridge, inset, outset. Типы границ, соответствующих всем перечисленным значениям, представлены в табл. 10.5.

Таблица 10.5. Типы линий границы

Ключевой параметр	Тип границы
none	Граница не отображается (несмотря на значение свойства border-width)
solid	Граница отображается сплошной линией
double	Граница отображается двойной линией (сумма толщины двух линий и промежутка между ними равна значению свойства border-width
groove	Граница отображается, как будто она вдавлена в лист ("желобок")
ridge	Граница отображается, как будто она выдавлена из листа ("барельеф")
inset	Весь блок элемента отображается, как будто он вдавлен в лист
outset	Весь блок элемента отображается, как будто он выдавлен из листа ("барельеф")

Последняя большая группа свойств позволяет установить ширину, тип и цвет частей границы или всей границы в целом. Свойства border-top, border-right, border-bottom и border-left Определяют ширину, тип и цвет, соответственно, верхней, правой, нижней и левой границы. Свойство border определяет одновременно параметры всех частей границы. В отличие от аналогичных свойств, задающих параметры полей и отступов, данное свойство устанавливает одинаковые значения для всех частей границы.

Визуальное форматирование

Каскадные таблицы стилей предоставляют разработчику Web-документов мощные средства компоновки элементов HTML на странице документа, определяющие внешний вид страницы HTML в окне браузера. В CSS1 большинство этих свойств относилось к категории позиционирования, и, ввиду большой важности, их описание было выделено в отдельный документ рекомендаций, подготовленный Консорциумом W3. В CSS2 эти и некоторые другие свойства сгруппированы в разделах, относящихся к визуальному форматированию.

Элементы HTML отображаются браузером последовательно, в том порядке, как они определены в тексте HTML-файла с учетом их положения в структуре документа и расположения предыдущих отображенных элементов и элементов-контейнеров, в которых они могут содержаться. При компоновке страницы используются установки браузера для определения положения каждого элемента. Например, два последовательных абзаца следуют друг за другом, причем каждый начинается с новой строки.

Свойство position элемента позволяет определить способ его позиционирования на странице: статический, относительный или абсолютный. Относительный способ определяет смещение элемента относительно его естественного положения в потоке отображения элементов. Абсолютный способ удаляет элемент из естественного потока позиционирования и позволяет разместить его на странице абсолютно произвольным образом. Статический способ, являющийся умалчиваемым способом позиционирования элементов, предполагает естественный поток отображения элементов страницы в окне браузера в соответствии с иерархией объектов документа.

Значения static, relative и absolute свойства position определяют соответствующий способ позиционирования элемента, который, в конечном счете, складывается из значения указанного свойства элемента, его положения в иерархической структуре документа, местом его определения в исходном файле HTML и значениями его свойств top и left. Эти последние свойства определяют смещение вниз и вправо левого верхнего угла блока отображения элемента (см. выше раздел "Модель форматирования).