HTML 5, CSS 3 и Web 2.0. Разработка современных 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-сайта, часть 4

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

Как обычно, выпишем список параметров для всех созданных ранее контейнеров. Для контейнера с заголовком Web-сайта (cheader):

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

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

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

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

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

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

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

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

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

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

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

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

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

Листинг 10.5

#cheader { width: 100 % }

#cnavbar { width: 30 %; min-width: 240px; float: left }

#cmain { width: 70 %; float: left }

#ccopyright { width: 100 %; clear: both }

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

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

Еще немного полюбуемся на преобразившуюся Web-страницу. И снова за дело.

Рис. 10.2. Web-страница index.htm, выполненная на основе контейнерного Web-дизайна, в Web-обозревателе

Параметры переполнения. Контейнеры с прокруткой

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

Но что случится, если мы зададим для контейнера высоту? Тогда может выйти так, что содержимое контейнера не поместится в нем, и возникнет переполнение контейнера. Поведение контейнера зависит от параметров, которые мы зададим для него.

Атрибут стиля overflow как раз и задает поведение контейнера при переполнении:

overflow: visible|hidden|scroll|auto|inherit

Здесь доступны четыре значения:

— visible — высота контейнера увеличится, чтобы полностью вместить все содержимое (обычное поведение);

— hidden — не помещающееся в контейнер содержимое будет обрезано. Контейнер сохранит свои размеры;

— scroll — в контейнере появятся полосы прокрутки, с помощью которых можно просмотреть не помещающуюся часть содержимого. Эти полосы прокрутки будут присутствовать в контейнере всегда, даже если в них нет нужды;

— auto — полосы прокрутки появятся в контейнере, только если в них возникнет необходимость.

Пример:

#cmain { overflow: auto }