Введение в блоковую модель

Любой элемент на Web-странице (или группу элементов) можно представить как отдельный прямоугольный блок. Можно задать: цвет фона

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

Блоки элементов состоят из четырех основных компонентов. В основе блока лежит его содержание. Содержание окружает определенный интервал, после чего идет граница, окруженная полями, как показано на рисунке.

· Интервалы, границы и поля не являются обязательными. Область интервала (padding) – это пространство между краем области содержания и границей (если она есть). Фоновый цвет или изображение, применяемые к элементу, доходят до этой области. Границы (borders) создаются стилевыми свойствами, которые определяют их вид (сплошной или пунктирный), толщину и цвет. Если в границе есть пустое пространство (щель), в этом пространстве отображается фон. Иными словами, фон распространяется под границей до ее наружного края.

· Поля (margins) всегда прозрачны, а это значит, что сквозь них будет виден фоновый цвет или изображение родительского элемента.

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

· Стиль для верхней, правой, нижней и левой сторон блока может задаваться независимо.

Чтобы определить границу блока, необходимо указать ее стиль: стиль границы задается свойством: border – style: значения:

none – нет границы

solid – сплошная прямая линия

double – двойная линия

groove – вдавленная линия

ridge – выпуклая трехмерная линия

inset – трехмерная ступенька вниз (текст вдавлен)

outset – содержимое приподнято над страницей

dotted – пунктирная линия

dashed – штриховая линия

 

Блок можно задать следующим образом:

- в области заголовка: < style> #d1_{свойства: значения; свойство: значение}< /style>

- в тексте: < div_id=d1> текст < /div>

Cвойства блока:

border – color: цвет – цвет границы

border – width: число – толщина границы

padding: расстояние между текстом и границей

margin: расстояние между границей и внешним элементом

Границы нумеруются top, bottom, left, right.

 

Пример: border: red blue green black;

или border - top - color: red; …

 

Спецификации CSS не сводятся лишь к «украшательству» элементов, образующих документ. Их также можно использовать для задания базовой структуры страницы. Познакомимся с двумя принятыми в CSS методами упорядочения элементов: свободным размещением (float-ing) и позиционированием (positioning).

Перечислим свойства, управляющие положением элементов в CSS2.1: