Использование контейнеров для задания стилей отображения

Элементы-контейнеры позволяют применять CSS-правила к содержимому HTML-страницы. Пример такого использования каскадной таблицы стилей показан ниже:

body {font-family: Verdana; font-size: 9pt; text-align: right;}.

div {font-family: Georgia;}.

.important { background-color: #ffffde; border: thin black ridge;}.

Здесь начинается текст тела страницы.

A здесь идет текст div-контейнера. Этот текст пишется другим шрифтом. Текст тела страницы продолжается в span-контейнере и здесь заканчивается.

Это очень важная информация в другом divконтейнере ! А здесь текст тела страницы заканчивается.

Браузер отображает данную страницу так, как показано на рис. 1.8.

Рис. 1.8. Отображение HTML-страницы с использованием описанной в ней таблицы стилей.

Позиционирование элементов страницы

Когда браузер получает данные от сервера, он выводит их на страницу в том порядке, в котором они записаны. Этот порядок называется нормальным потоком, т. е. браузер получает какой-то элемент, вычисляет его размеры и располагает следом за предыдущим элементом. При обработке данных из нормального потока браузер выводит данные строка за строкой, добавляя перевод строки при появлении структурного блока. В связи с этим, в частности, с помощью стандартного HTMLкода нельзя организовать вывод, например, нескольких колонок текста. Первоначально для задания взаимного расположения частей web-страницы на экране использовались таблицы (элементы table), имеющие нулевую толщину границы (т. е. таблицы на экране не показывались). В ячейках таблицы размещаются разделы HTML-страницы.

Однако с помощью каскадных таблиц стилей CSS стало возможным задавать не только оформление элементов HTML-документа, но и взаимное расположение (позиционирование) отдельных его частей (блоков). Позиционирование задается с помощью свойства position. Есть два способа позиционирования блока в нормальном потоке: relative и static. Способ static используется по умолчанию и выполняет стандартное форматирование, оставляя блок в нормальном потоке. Способ relative позволяет сдвинуть положение блока относительно того положения, которое он занимал бы в нормальном потоке. Например, если задано position: relative; left: 20рх; color: green; то положение левого края блока сдвигается на 20 пикселей относительно предыдущего элемента в нормальном потоке, в результате чего сам блок смещается вправо. Если указать отрицательное смещение, то блок сдвинется влево. Аналогично можно сдвигать блок по вертикали — для этого используется свойство top.

Кроме этого, имеется другой способ позиционирования — абсолютное позиционирование, позволяющее точно указать расположение блока на странице. В этом случае блок изымается из нормального потока размещения и помещается браузером в заданное место экрана. Использовать абсолютное позиционирование достаточно удобно в строгих сайтах с фиксированным размером страницы. Наиболее типичной является ситуация, когда страница разбивается на несколько абсолютно позиционированных блоков, внутри которых используется относительное позиционирование (а т. к. вложенные блоки позиционируются относительно родителя, то структура страницы сохраняется).

Еще одним способом позиционирования является «плавающее позиционирование»: float. Плавающие блоки ведут себя очень похоже на картинки с указанным тегом align: они прижимаются к указанному краю контейнера, заставляя «нормальный поток» их обтекать. Такие блоки довольно удобно использовать для организации так называемой резиновой верстки, когда заданы несколько плавающих блоков, которые располагаются один за другим по горизонтали (если их суммарная ширина нс превышает ширины страницы). Для того чтобы заставить отображать блок ниже плавающего блока, нужно использовать атрибут clear со значением both.

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