Стили, задающие параметры контейнеров

Вспомним, что мы знаем о контейнерах, и блочных, и встроенных. Они никак не отображаются в Web-обозревателе!

Чтобы ощутить пользу от контейнеров, мы должны применить к ним стили. Именно для этого контейнеры и предназначены. Поэтому сейчас мы займемся атрибутами стиля, задающими параметры контейнеров. Атрибуты стиля и задаваемые ими параметры делятся на две группы.

Параметры размеров

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

Атрибуты стиля width и height позволяют задать, соответственно, ширину и высоту элемента Web-страницы:

width: auto|<ширина>|inherit
height: auto|<высота>|inherit

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

#cnavbar { width: 100px }

Можно задать относительное значение размера в процентах от соответствующего размера родительского элемента. При этом размер элемента будет изменяться при изменении размеров окна Web-обозревателя:

#cheader { height: 10% }

Значение auto отдает управление этим размером на откуп Web-обозревателю (обычное поведение). В последнем случае Web-обозреватель установит такие размеры элемента Web-страницы, чтобы в нем полностью поместилось его содержимое, и не больше.

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

Атрибуты стиля min-width и min-height позволяют определить минимальную ширину и высоту элемента Web-страницы:

min-width: <ширина>
min-height: <высота>

Значение ширины или высоты может быть как абсолютным, так и относительным.

Пример:

TABLE { min-width: 500px;
min-height: 300px }

Аналогичные атрибуты стиля max-width и max-height позволяют задать максимальную, соответственно, ширину и высоту элемента Web-страницы:

max-width: <ширина>
max-height: <высота>

И здесь значение ширины или высоты может быть как абсолютным, так и относительным:

TABLE { max-width: 90%;
max-height: 60% }


Параметры размещения. Плавающие контейнеры

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

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

Однако мы можем установить для блочного элемента выравнивание по левому или краю родительского элемента (блочного контейнера, в который она вложена, или самой Web-страницы). При этом блочный элемент будет прижиматься к соответствующему краю родителя, а остальное содержимое будет обтекать его с противоположной стороны.

Атрибут стиля float как раз и задает, по какому краю родительского элемента будет выравниваться данный элемент Web-страницы:

float: left|right|none|inherit

Возможны три значения:

- left — элемент Web-страницы выравнивается по левому краю родительского элемента, а остальное содержимое обтекает его справа;

- right — элемент Web-страницы выравнивается по правому краю родительского элемента, а остальное содержимое обтекает его слева;

- none — обычное поведение элемента Web-страницы, когда он следует за своим предшественником и располагается ниже его.

Пример:

TABLE.left-aligned { float: left }

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

А что если мы зададим одинаковое значение атрибута стиля float для нескольких следующих друг за другом блочных элементов? Они выстроятся по горизонтали друг за другом в том порядке, в котором они определены в HTML-коде, и будут выровнены по указанному краю родительского элемента. Настоящая находка!

Данный атрибут стиля обычно применяют для блочных контейнеров, формирующих дизайн Web-страниц. Такие контейнеры называют плавающими.

Возьмем атрибут стиля float на заметку. И пойдем дальше.

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

Для этого служит атрибут стиля clear:

clear: left|right|both|none|inherit

Как видим, доступных значений здесь четыре:

- left — элемент Web-страницы должен располагаться ниже всех элементов, для которых у атрибута стиля float задано значение left;

- right — элемент Web-страницы должен располагаться ниже всех элементов, для которых у атрибута стиля float задано значение right;

- both — элемент Web-страницы должен располагаться ниже всех элементов, для которых у атрибута стиля float задано значение left или right;

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

Пример:

#ccopyright { clear: both }

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


Представление для нашего Web-сайта

Полученных нами знаний уже достаточно для того, чтобы создать контейнерный дизайн для нашего Web-сайта. Давайте займемся этим.

Как обычно, выпишем список параметров для всех созданных ранее контейнеров.

Для контейнера с заголовком Web-сайта (cheader):

- ширина — 100% (все окно Web-обозревателя).

Для контейнера с полосой навигации (cnavbar):

- ширина — 30% (примерно треть ширины окна Web-обозревателя);

- минимальная ширина — 240 пикселов (это значение получено автором в результате экспериментов; оно примерно равно ширине полосы навигации);

- выравнивание — по левому краю (т. е. это будет плавающий контейнер).

Для контейнера с основным содержимым (cmain):

- ширина — 70% (примерно две трети ширины окна Web-обозревателя);

- выравнивание — по левому краю.

Для контейнера со сведениями об авторских правах (ccopyright):

- ширина — 100% (все окно Web-обозревателя);

- расположение — ниже всех плавающих контейнеров, выровненных по левому и правому краям.

Как видим, ни у одного контейнера явно не задана высота. Web-обозреватель сам установит ее такой, чтобы контейнер при указанной ширине полностью вместил свое содержимое.

На основе перечисленных требований напишем CSS-код, определяющий нужные стили (листинг 10.5).

Стили, задающие параметры контейнеров

Поместим этот код в самый конец таблицы стилей main.css, после чего сохраним ее. Откроем Web-страницу index.htm в Web-обозревателе и посмотрим, что получилось (рис. 10.2).

Мы сделали это! Много времени ушло на изучение HTML и CSS, но результат того стоит. Вот она — наша первая Web-страница, выполненная по канонам современного Web-дизайна.

Параметры контейнеров