|
|
|
|
Блочные элементы (блоки текста или box) позволяют оперировать с текстом в терминах прямоугольников, которые этот текст занимает. При этом блок текста становится элементом дизайна страницы с теми же свойствами, что и картинка, таблица или прямоугольная область приложения. Свойства этой категории устанавливают параметры блоковых элементов. Среди них можно выделить три больших группы, формирующих блоки полей, границ и отступов, причём группу, работающую с границей, можно подразделить ещё на четыре группы, устанавливающие значения цвета, стиля, ширины и одновременно всех перечисленных свойств границы. Все эти группы отличает то, что в них включены свойства для задания параметров верхних, нижних, правых, левых и одновременно всех четырёх частей соответствующих блоков форматирования элемента.
В группу форматирования поля входят свойства, устанавливающие ширину верхнего (margin-top), правого (margin-right), нижнего (margin-bottom) и левого (margin-left) поля элемента. В свойстве margin можно одновременно установить значения всех четырёх параметров поля элемента. Ширина соответствующих полей задаётся значением длины или в процентах от ширины ближайшего элемента-родителя. Начальные значения всех полей равны 0. Если в свойстве margin заданы четыре значения, то они, соответственно, относятся к верхнему, правому, нижнему и левому полю. Если определенно только одно значение, то оно применяется ко всем сторонам поля элемента. При задании двух или трёх значений недостающие значения беруться из установок противоположных сторон. Например:
Ширина верхнего, правого, нижнего и левого отступа определяется значением, соответственно, свойств 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-color, 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. Описание типов границ, соотетствующих всем перечесленным значениям, представленны в таблице.
Последняя большая группа свойств позволяет установить ширину, тип и цвет частей границы или всей границы в целом. Свойства border-top, border-right, border-bottom и border-left определяет ширину, тип и цвет, соответственно, верхней правой, нижней и левой границы. В отличии от аналогичных свойств, задающих параметры полей и отступов, данные свойства устанавливают одинаковые значения для всех частей границы. |
