Блоки
Свойства этой категории устанавливают параметры блоковых элементов (см. страницу " Модель форматирования ") . Среди них можно выделить три больших группы, формирующих блоки полей, границ и отступов, причём группу, работающую с границей, можно подразделить ещё на четыре группы, устанавливающие значения цвета, стиля, ширины и одновременно всех перечисленных свойств границы. Все эти группы отличает то, что в них включены свойства для задания параметров верхних, нижних, правых, левых и одновременно всех четырёх частей соответствующих блоков форматирования элемента.
Совет
При знакомстве со свойствами блоковых элементов желательно иметь перед глазами схему параметров форматирования блоковых элементов. Чтобы открыть её (рисунок в формате .bmp) в новом окне кликните здесь.
В группу форматирования поля входят свойства, устанавливающие ширину верхнего ( margin-top ), правого ( margin-right ), нижнего ( margin-bottom ) и левого ( margin-left ) поля элемента. В свойстве margin можно одновременно установить значения всех четырёх параметров поля элемента.
Ширина соответствующих полей задаётся значением длины или в процентах от ширины ближайшего элемента-родителя. Начальные значения всех полей равны 0.
Если в свойстве margin заданы четыре значения, то они, соответственно, относятся к верхнему, правому, нижнему и левому полю. Если определенно только одно значение, то оно применяется ко всем сторонам поля элемента. При задании двух или трёх значений недостающие значения беруться из установок противоположных сторон. Например:
BODY { magrin: 1em 2 em } /* верх и низ = 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-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 . Описание типов границ, соотетствующих всем перечесленным значениям, представленны в таблице.
Ключевой параметр |
Тип границы |
none |
Граница не отображается (несмотря на значение свойства border-width ) |
solid |
Граница отображается сплошной линией |
double |
Граница отображается двойной линией (сумма толщины двух линий и промежутка между ними равна значению свойства border-width ) |
groove |
Граница отображается, как будто она вдавлена в лист ("желобок") |
ridge |
Граница отображается, как будто она выдавлена из листа ("барельеф") |
inset |
Весь блок элемента отображается, как будто он вдавлен в лист |
outset |
Весь блок элемента отображается, как будто он выдавлен из листа ("барельеф") |
Последняя большая группа свойств позволяет установить ширину, тип и цвет частей границы или всей границы в целом. Свойства border-top , border-right , border-bottom и border-left определяет ширину, тип и цвет, соответственно, верхней правой, нижней и левой границы. В отличии от аналогичных свойств, задающих параметры полей и отступов, данные свойства устанавливают одинаковые значения для всех частей границы.