Шаг 6 - Обрамление и размерности

В официальном руководстве CSS набор этих свойств называется Box Attributes. Box, потому что свойства эти изменяют отображение не текста, содержащегося в тэге элемента, а самого этого элемента как графической области (прямоугольника с плавающими размерами). Какие же свойства может иметь прямоугольник? Правильно, размеры, рамку, отступ и тому подобное. Обратите внимание, что под отступом понимается в данном случае расстояние всей строки (абзаца) от базового края, а не первой его линии, как это было со свойством text-indent.

Перед тем как приступить к собственно атрибутам, полезно будет рассмотреть единицы, которыми можно задавать длины в таблицах стилей.

Width, Height

Значения высоты и ширины, применимые к блочным элементам и элементам ввода. В дальнейшем, при рассмотрении некоторых свойств CSS2 и соответствующих возможностей JavaScript, мы увидим, что размер и положение можно будет менять не только для блочных (элементов с определяемой шириной и высотой), но и для таких тэгов, как <div>, например. Задаются в элементах длины. table { width:80%; height:100% }

Полезно таким образом растягивать таблицу документа верхнего уровня. Для того, чтобы таблицу эту выровнять по центру (в случае width<100%), следует воспользоваться внешним тэгом <center> или любым другим, имеющим свойство text-align: center

Float, Clear

Опреляет такой интересный аспект HTML и CSS, как "плавание" изображений и других элементов в тексте, и соответственно "обтекание" текстом этих элементов. Первой отвечает за плавание и может принимать значения left, right, none - соотвественно, разрешение плавать слева, справа, или отключение этой возможности. Второй - Clear - определяет, разрешено ли обтекание данным элементом других плавающих слева, справа, с обеих сторон или запрещено - left, right, both, none.

Margin-Top, Margin-Left, Margin-Bottom, Margin-Right, Margin

Атрибуты, определяющие соответствующие отступы для элемента. Атрибут Margin устанавливает отступ со всех сторон.

td.menu { margin: 3px; margin-bottom: 0 }

Padding-Top, Padding-Left, Padding-Bottom, Padding-Right, Padding

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

table { padding: 5px }

Border-Top-Width, Border-Left-Width, Border-Bottom-Width, Border-Right-Width, Border-Width

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

h1.title {border-width: 1px; border-top-width: 0 }

Border-Color, Border-Style, Border

Ну, первое свойство, как это ни парадоксально, определяет цвет рамки. Здесь никаких особых причуд не наблюдается, цвет задается как обычно в CSS. Border-Style дает возможность изменить вид бордюра. А бывает он (вид) таким:

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

Свойство Border позволяет задать все эти атрибуты разом в одном флаконе. Синтаксис таков:

border: border-width | border-style | color

Например:

h2 { border: 1px solid silver }

Предыдущий Шаг | Оглавление
Автор Аванесов Самвел.