3. Каскадные таблицы стилей

• Общин правила построения каскадны таблиц стилей
• Шрифты
• Цвет и фон
• Форматирование текста
• Блоки
• Визуальное форматирование
• Визуальные эффекты

3.5. Блоки

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

В группу форматирования поля входят свойства, устанавливающие ширину верхнего (margin-top), правого (margin-right), нижнего (margin-bottom) и левого (margin-left) поля элемента. В свойстве margin можно одновременно установить значения всех четырех параметров поля элемента.

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

Если в свойстве margin заданы четыре значения, то они, соответственно, относятся к верхнему, правому, нижнему и левому полю. Если определено только одно значение, то оно применяется ко всем сторонам поля элемента. При задании двух или трех значений недостающие значения берутся из установок противоположных сторон. Например:

В данном примере верх и низ равны 1 em, а право и лево – 2 em.

Ширина верхнего, правого, нижнего и левого отступа определяется значением, соответственно, свойств 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 – граница не отображается (несмотря на значение свойства border-width);
• solid – граница отображается сплошной линией;
• double – граница отображается двойной линией (сумма толщины двух линий и промежутка между ними равна значению свойства border-width);
• groove – граница отображается, как будто она вдавлена в лист;
• ridge – граница отображается, как будто она выдавлена из листа;
• inset – весь блок элемента отображается, как будто он вдавлен в лист;
• outset – весь блок элемента отображается, как будто он выдавлен из листа.

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