TML, CSS, СКРИПТЫ: практика создании сайтов

Собственно говоря,

разделение элементов на блочные и внутристрочные, понятие нормального

потока — все это относится к ее владениям.

Мне не очень хотелось бы глубоко вдаваться в терминологические изыски,

наличествующие в описании модели визуального форматирования. Наша

первоочередная задача — научиться применять соответствующие CSS-

свойства на практике.

Прежде, однако, чем приступить к обсуждению этих свойств, необходимо

сделать небольшое отступление, посвященное селекторам.

178 Часть II. Применение веб-технологий стороны клиента для создания сайтов

Селекторы классов и уникальных элементов

До сих пор мы обходились достаточно простыми селекторами. Терпеть,

однако, уже невмоготу — рассмотрение взаимоотношений между несколькими

однотипными элементами требует осведомленности об удобном способе их

идентификации.

В конце главы 3 мы замолвили несколько слов о том, что функциональные

области веб-страниц обычно определяются при помощи семантически

нейтральных элементов

. Для страницы, включающей в себя

«шапку», блок навигации, область основного текста и «подвал», таким

образом, понадобится как минимум 4 подобных элемента. В то же время мы

прекрасно знаем, что правило вида div {…} в листе стилей, связанном с нашей

веб-страницей, сделает оформление всех элементов

совершенно одинаковым, что, разумеется, нам совсем не нужно. Можно, конечно,

использовать атрибут style, но этот способ, как мы уже говорили, лишен

гибкости и элегантности.

Как же быть? Очень просто: использовать вместо style слегка другие

атрибуты— id ИЛИ class.

При помощи атрибута id можно назначить тому или иному элементу

уникальный идентификатор. К примеру, мы можем наделить «говорящим»

именем header элемент, описывающий «шапку» нашей страницы; блоку

навигации присвоить идентификатор menu; область основного текста наименовать

словом text; и, наконец, закономерное имя footer назначить «подвалу»:

Атрибут class нужен, в сущности, для тех же самых целей — с тем лишь

отличием, что одно и то же значение данного атрибута может быть присвоено

нескольким элементам.

После этого в листе стилей, относящемся к нашей странице, мы сможем

использовать правила примерно следующего толка:

? div#header {…} — определяет представление элемента

;

? #header {…} — применяется к элементу, заданному любым тегом,

дополненным атрибутом id со значением header;

? p.comment {…}— задает оформление абзацев, определенных тегами

…р>;

Глава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 179

? .picture {…}— используется для любых элементов, для которых при

помощи HTML-разметки определен атрибут class со значением picture.

Следующий пример, код которого мы приводим целиком, демонстрирует

использование классов и идентификаторов элементов.

j Листинг 4.4. Применение селекторов классов и уникальных элементов \

^ «http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd»>

180 Часть II. Применение веб-технологий стороны клиента для создания сайтов

Внешний вид страницы, описанной в листинге 4.4, представлен на рис. 4.6.

Я* Шж* &ид переход *«««* ттненты Сцшкв О

Ф — Ф *& Я1 © |ГГЗ о п**«и Щ

#

Это область «шапки»,

А это — абзац основного текста.

II еще один абзац основного текста.

Абзац примечания.

Опять абзац основного текста.

И снова абзац примечания

|^бгаво

Рис. 4.6.