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

— right — прижимается к правому краю.

Формат задания вертикальной позиции фонового изображения таков:

<числовое значение>|top|center|bottom

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

Также возможны следующие значения:

— top — фоновое изображение прижимается к верхнему краю элемента Web-страницы (это обычное поведение);

— center — располагается по центру;

— bottom — прижимается к нижнему краю.

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

Пример:

TABLE.bgr (background-position: 1cm top }

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

TABLE.bgr (background-position: right }

Когда мы прокручиваем содержимое Web-страницы в окне Web-обозревателя, вместе с ней прокручивается и фоновое изображение (если оно есть). Стандарт CSS предлагает забавную возможность — запрет прокрутки графического фона Web- страницы и фиксация его на месте. Фиксацией фона управляет атрибут стиля background-attachment:

background-attachment: scroll|fixed;

Значение scroll заставляет Web-обозреватель прокручивать фон вместе с содержимым Web- страницы (это поведение по умолчанию). Значение fixed фиксирует фон на месте, и он не будет прокручиваться.

НА ЗАМЕТКУ

Вероятно, имеет смысл фиксировать только графический фон, заданный для самой Web-страницы. Графический фон у отдельных элементов Web-страницы фиксировать не следует.

На этом мы пока закончим с атрибутами стиля CSS. Рассмотрим новую разновидность элементов Web-страниц, с которой еще не сталкивались. Это…

Контейнеры. Встроенные контейнеры

В самом начале данной главы мы узнали, что все рассмотренные нами атрибуты стилей можно указывать для любых элементов Web-страниц: и блочных, и встроенных. Значит, мы можем задать размер шрифта и для абзаца (блочного тега <P>), и для важного текста (встроенных тегов <STRONG> и <EM>). Это очень полезная возможность.

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

<STRONG>. Может ли CSS нам в этом помочь?

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

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

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

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

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

Встроенный контейнер создается с помощью парного тега <SPAN>. Фрагмент блочного элемента, который нужно превратить в содержимое встроенного контейнера, помещают в этот тег:

<P><SPAN>Представление</SPAN> создается с помощью стилей CSS.</P>

Здесь мы поместили во встроенный контейнер фрагмент абзаца.

Толку от нашего первого встроенного контейнера никакого. Поэтому давайте привяжем к нему какой-нибудь стиль (листинг 8.1).

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

Изучив гору теории, приступим к практике. Начнем создавать представление для нашего первого Web-сайта.

Все стили, которые мы применим к Web-страницам, поместим во внешнюю таблицу стилей main.css. Создадим ее и поместим в корневой папке Web-сайта. После чего привяжем ее ко всем Web-страницам, входящим в него. Как мы помним из главы 7, это выполняется с помощью тега <LINK>.

Для главной Web-страницы index.htm этот тег будет выглядеть так:

<LINK REL='stylesheet' HREF='main.css' TYPE='text/css'>

Для всех Web-страниц, хранящихся в папке tags, он будет таким:

<LINK REL='stylesheet' HREF='../main.css' TYPE='text/css'>

Внесем в HTML-код всех Web-страниц этот тег и сохраним их.

В тегах <LINK>, привязывающих таблицу стилей к Web-страницам, мы указали относительные интернет-адреса. Это позволит нам просматривать Web-страницы, открывая их в Web-обозревателе без использования Web-сервера. Так проще.

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