HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

<P>Приветствуем на нашем Web-сайте всех, кто занимается Web-дизайном! Здесь вы сможете найти информацию обо всех интернет-технологиях, применяемых при создании Web-страниц. А именно, о языках

<DFN>HTML</DFN> и <DFN>CSS</DFN>.</P>

<HR>

.

<H2>Теги HTML</H2>

<P><CODE>!DOCTYPE</CODE>,

<CODE><A HREF='tags/t_audio.htm'>AUDIO</A></CODE>,

<CODE>BODY</CODE>, <CODE>EM</CODE>, <CODE>HEAD</CODE>,

<CODE>HTML</CODE>, <CODE><A HREF='tags/t_img.htm'>IMG</A></CODE>,

<CODE>META</CODE>, <CODE>P</CODE>, <CODE>STRONG</CODE>,

<CODE><A HREF='tags/t_title.htm'>TITLE</A></CODE>,

<CODE><A HREF='tags/t_video.htm'>VIDEO</A></CODE></P>

</DIV>

<DIV ID='ccopyright'>

<ADDRESS>Все права защищены.<BR>&#0169;

<A HREF='mailto: [email protected]'>читатели</A>, 2010 год.</ADDRESS>

</DIV>

Сохраним Web-страницу index.htm и откроем ее в Web-обозревателе. Что-то изменилось по сравнению с тем, что было ранее? Ничего.

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

И неудивительно. Вспомним, что мы знаем о контейнерах, и блочных, и встроенных. Они никак не отображаются в 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 }