Настройка расположения элементов на странице

Мы уже достаточно много узнали о таблицах стилей, которые представляют собой набор свойств, описанных в виде правил и определяющих, как некоторый элемент НТМL-документа должен выглядеть в окне браузера или на другом устройстве вывода. Теперь давайте познакомимся с обширным инструментарием CSS, который позволяет создавать блоки на основе любых элементов НТМL-документа и точно позиционировать их на экране. При этом НТМL-таблицами пользоваться не нужно, в результате чего код страницы становится более логичным, понятным и легко читаемым. Естественно, и размер кода при применении CSS в большинстве случаев становится меньше.

Формирование страницы с помощью средств CSS сводится к следующему:

Каждый блок имеет информационную (контентную) часть, в которой располагается его содержимое: текст, рисунки, таблицы, т.е. любые необходимые элементы. Вокруг области контента могут быть пустые, не занятые содержимым области, называемые отступами (padding). С точки зрения дизайна последние обеспечивают содержимому эстетически более привлекательный вид. При наличии отступов определенного размера текст не примыкает вплотную к границам блока, поэтому такой текст, напечатанный на листе или выведенный на экран дисплея, читать удобнее и приятнее. Непосредственно за полями проходит граница блока (border), которая может иметь определенную толщину и стиль линий. Стиль линий границы может быть различным, от простой линии до объемных вариантов. Кроме того, граница может иметь произвольный цвет. Снаружи от нее, обрамляя со всех сторон, могут быть заданы поля (margin) – свободная область, окружающая блок с внешней стороны.

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

Итак, контентная часть блока может быть окружена отступами, рамками и полями, для которых могут быть установлены собственные значения ширины – от нуля до про­извольно заданных. Согласно спецификации CSS, контентная часть блока имеет собст­венную ширину (width) и высоту (height), не зависящие от размеров отступов, рамки и полей. Причем ширина блока может быть любой – от нулевой (граница не видна) до произвольно заданного значения в некоторых единицах измерениях длины.

Общая ширина контейнера блока складывается из собственно ширины блока, шири­ны левого и правого отступов, толщины левой и правой границ, а также ширины левого и правого полей. Аналогичным образом определяется общая высота контейнера блока.

Все поля, границы и отступы делятся соответственно на верхние, нижние, правые и левые. Для каждого из них можно указать значения независимо от других посредством соответствующих свойств. Подробнее они будут рассмотрены чуть ниже. Ширина контентной части блока задается при помощи свойства width, высота – свойства height.

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