ess
^ь,
ess
cs
ess
ss
«
cs
Ss
nepevA
CSs
cs
ess
Cs
%
cs
о
CO
и
a
и
о
0)
О
О
ess**
ess
>£$
\A^
V\HVO
C?
ss
^e
.otf**'
C$
*>
J
I
г
j
L
nil
I
■
j
UJ
J rJ r-i
u-
\
NT
PRESS
Неш
Riders

4
Чарльз Уаик-Смит
льныи сайт
§
i
i
К
NT Press
Москва, 2007

>_< 004.738.5
5"ч 32.973.26-018.2
У13
Подписано в печать 23.06.2006. Формат 70x90 l/ie. Гарнитура «Баскервиль».
Печать офсетная. Усл. псч. л. 28,9. Тираж 4000 экз. Зак. 69L4
Уайк-Смит Ч.
.• .3 Стильный сайт с помощью CSS / Чарльз Уайк-Смит ; пер, с англ. Г. П.
Ковалева. - М.: НТ Пресс, 2007.- 272 с.: ил. - (Школа Web-мастерства).
ISBN 5-477-00322-7
Книга Чарльза Уайк-Смита посвящена применению CSS для создания внешнего
облика Web-сайта. Ее структура чрезвычайно проста и логична: первые главы посвящены
созданию отдельных компонентов Web-сайта с применением CSS. В последней главе все
эти компоненты сводятся в единое целое - читателю предлагается подробная
инструкция по их объединению в готовый к работе сайт. В книге содержатся примеры кода для
всех рассматриваемых компонентов сайта и вариантов разметки, которые можно
использовать как заготовки для своих целей, внеся в них необходимые изменения.
Данное издание ориентировано как на начинающих дизайнеров, которые смогут
использовать книгу как руководство для знакомства с CSS, так и на тех, кто ранее не
имел опыта работы с CSS.
УДК 004.738.5
ББК 32.973.26-018.2
Authorized translation from the English language edition, entitled STYLIN' WITH CSS:
A DESIGNER'S GUIDE, 1st Edition, ISBN 0321305256, by WYKE-SMITH, CHARLES, published
by Pearson Education, Inc, publishing as New Riders, Copyright © 2005.
All right reserved. No part of this book may be reproduced or transmitted in any form or by
anv means, electronic or mechanical, including photocopyright, recording or by any information
storage retrieval system, without permission from Pearson Education, Inc. RUSSIAN language
edition published by NT PUBLISHING HOUSE, Copyright © 2006.
Вес права защищены. Любая часть этой книги не может быть воспроизведена в какой бы то
ни было форме и какими бы то ни было средствами без письменного разрешения владельца
авторских прав.
Материал, изложенный в данной книге, многократно проверен. Но. поскольку вероятность
технических ошибок все равно остается, издательство не может гарантировать абсолютную
точность и правильность приводимых сведений. В связи с этим издательство не несет
ответственности за возможный ущерб любого вида, связанный с применением содержащихся здесь сведений.
ISBN 0-321-30525-6 (англ.) Copyright © New Riders, 2006
ISBN 5-477-00322-7 (рус.) © Издание на русском языке,
перевод па русский язык,
оформление «НТ Пресс», 2006

Для Джемы и Люси

Оглавление
Благодарности 10
Об авторе 12
Введение 13
Глава 1. XHTML: структурируем содержимое 14
Извините, ЭНРВМ1Е 16
Время перемен 19
Наследство клуджей 19
Найди содержимое! 20
Будущее наступает 21
XHTML и правила его написания 22
Правила разметки XHTML 23
Разбор кода 28
Иерархия документа: знакомство с семейством XHTML 36
Глава 2. Как работает CSS 38
Три способа добавления стилей к документу 40
Линейные стили .40
Вложенные стили 41
Знешний файл со стилями 42
-атомия правила CSS .- 44
писание правил CSS 44
Е=.^ор тегов в иерархии документа для применения правил 46
Гэименение контекстных селекторов 46
~р,*менение дочерних селекторов 50
i

Оглавление 7
Добавление классов и идентификаторов 51
Простое использование класса 51
Контекстные селекторы класса 52
Знакомство с идентификаторами 55
Разница между классами и идентификаторами 56
Универсальный селектор 57
Смежный сестринский селектор 57
Селекторы атрибутов 58
Подведем итог по селекторам 59
Псевдоклассы 60
.Псевдоклассы ссылок на якорь 60
Другие полезные псевдоклассы 61
:FIRST-CHILD \ 61
:FOCUS ." 62
Псевдоэлементы „ 62
Наследуемость 63
Каскад 64
Источники стилей 65
Правила каскада *. 66
Объявления правил 69
Числовые значения ....70
Цветовые значения 71
Глава 3. Стили для шрифтов и текста 72
Задаем шрифт с помощью CSS 74
Знакомство с наборами шрифтов 75
Знакомство с семействами шрифтов 78
Применение вложенных стилей 80
Указываем семейство шрифтов для всей страницы 81
Размер шрифта 82
Наследуемые стили во вложенных тегах 86
Свойства шрифта 88
Font-style 88
Font-weight 89
Font-variant 90
Сокращенное свойство font 90
Свойства текста 91
Text-indent 92
Letter-spacing 94
Word-spacing :... 96

С ьный сайт с помощью CSS
Text- c^c aiion 96
15X1*3 Q"" * •- У '
U're-r-gr.: '. 98
Тех:-: ~-sform 99
Ve "--'-clign 99
ript..vc ение стилей шрифта и текста 101
Глава 4. Расположение элементов 104
Е"-ная модель 107
Граница блока 108
Отступы блока 110
Поля блоков 111
Накладывание полей 112
Размер блока 113
Свойство position 116
position: static 116
position: relative 117
position:absolute 118
position :fixed 119
Контекст расположения 120
Плавающие элементы и очистка 121
Свойство float 122
Свойство clear 124
Сзойство display 126
Глава 5. Базовая разметка страницы 128
-стая разметка с двумя колонками 129
"азметка с тремя колонками 134
"Сметка из трех колонок с заголовком 138
"z** етка из трех колонок с плавающими элементами и очисткой 143
гособ очистки Олсетта , '. 148
Глава 6. Расширенная разметка страницы 152
~^з\ ышления о фоновых изображениях 152
"г-^зыфона 154
^гзлачие разметки с полноразмерными колонками 157
"г-^-ые колонки ; 157
\-*—\чки для гибкой центрированной разметки 163
-1Л- ая гибкая разметка ; 165
_-f - -н с отрицательными полями 170

Оглавление 9
Глава 7. Создание компонентов интерфейса 174
Списки 175
Добавление стилей к спискам 178
Добавление стилей к ссылкам 185
Создаем CSS-меню 187
Горизонтальные компоненты навигации 187
Эффект наведения указателя мыши в Internet Explorer 194
Создание раскрывающихся меню 196
Разметка раскрывающихся меню 197
Создание многоуровневых раскрывающихся меню 204
Эффекты наведения указателя мыши с графическими фонами 207
Разработка форм 210
Знакомство с элементом form 210
Добавляем кнопки с зависимой и независимой фиксацией 214
Создание раскрывающегося меню для формы 216
Окончательные штрихи , 217
Реализация поиска 219
Глава 8. Создание Web-сайта 220
Начинаем создавать сайт о гномах 222
Создание структуры каталогов 223
Создаем архитектуру сайта 226
Изменяем разметку 227
Создание заголовка 230
Создаем область навигации слева 232
Добавляем стили к правой колонке 234
Задаем стили ссылок на новости 237
Создание области содержимого 240
Создаем подпись под рисунком 240
Задаем стили нижнего колонтитула 242
Окончательная настройка 245
Ограничение минимальной и максимальной ширины 250
Заключение 252
Приложение. Свойства CSS и их значения 254
Предметный указатель 264

агодарности
С рдечно благодарю свою жену Бэт и любимых дочерей, страдавших на протя-
-- ении девяти месяцев, в течение которых я запирался в домашнем кабинете
г!2>лый вечер и выходные, работая над книгой. Я вас очень люблю и обещаю
зозместить все пропущенные мною вечеринки, филымы и домашние дела, от
которых я увильнул.
Я также благодарю Майкла Нолана (Michael Nolan) из издательства New
Riders, моего давнего друга, бизнес-партнера и редактора в New Riders, посове-
-озавшего мне написать эту книгу и звонившего через день, чтобы узнать,
когда она будет готова. Также выражаю благодарность редактору Шэрил Инглэнд
(Cheryl England) из компании Peachpit Press за поддержку, энтузиазм и
добросовестность. С ее помощью эта книга стала гораздо лучше.
Также, говоря о Peachpit, хочу сказать спасибо управляющему редактору
Мэрджори Баэр (Marjorie Baer), координатору производства Андрею
Пастернаку, дизайнеру Мими Хефт (Mimi Heft), дизайнеру обложки Арену Хоуэллу
(Aren Howell) и маркетолог)' Ким Ломбарди (Kim Lombardi). Отдельное
спасибо одному из умнейших людей в области Сети - Шону Инмэну (Shaun Inman),
который выступал в качестве научного редактора этой книги, устранил все мои
огрехи и добавил некоторые комментарии.
В Nacio, где я работаю, благодарю Стивена Кинга (Stephen King), Тома Кэн-
нона (Thorn Kennon) и Мюррея Голденберга (Murray Goldenberg),
предоставивших мне время и поддержку для создания этой книги, а также Адама Лондона
(Adam London), Эдди Колманареса (Eddie Colmanares), Аркадия Камински, Де-
метрио Каццокреа (Demetrio Cuzzocrea) Криса Фрагмени (Kris Fragmeni)
и Херба Готтлиба (Herb Gottlieb) за помощь в работе.
Склоняюсь в почтении перед Джеффри Зельдманом (Jeffrey Zeldman), Мол-
"ш Хольцшлаг (Molly Holzschlag), Эриком Мейером (Eric Meyer) и Дугом Баумэ-
ном (Doug Bowman) - Web-гуру, благодаря которым изменилось лицо Сети. На
своих семинарах они научили меня и тысячи других дизайнеров очень
многому; мы отлично провели время на интерактивной конференции в Остине, штат
Техас, прошедшей в 2005 году.

благодарности 11
Перейдем ближе к дому - спасибо Расу, Элизабет, Дэвину и Шэннон Мэйхью,
а также Роберту, Бонни и Дакоте Миллер за поддержку, оказанную нашей
семье, пока я писал книгу.
Благодарю Кена Руотоло (Ken Ruotolo) из фирмы ANTS Software Inc., моего
настоящего друга, делового партнера и клиента, и Дэйва Клайнберга (Dave
Kleinberg), наставника, оказавшегося к тому же еще и великолепным
музыкантом.
Хочу упомянуть и Роба Мейера (Rob Meyer), недавно скончавшегося
слишком рано.
Также снимаю шляпу перед моими друзьями и вдохновителями: Чаком
Бергом, Стивом Хэйни, Фрэнком Руотоло, Джуди Дэнг, Джимом Холленбеком,
Остином Маркусом, Данной Кэйси, Полом Мэрканом, Дэбби Торган, Рафаэлем
Оливас и Рассом Волкманом.
Я рад, что знаком со всеми упомянутыми здесь людьми.
Чарльз Уайк-Смит, 28 марта 2005 года

б авторе
Чарпьз Уайк-Смит создает Web-сайты с 1994 года и в настоящий момент
возглавляет производственный отдел в компании Nacio (www.nacio.com).
занимающейся разработкой pi хостингом сайтов. В 1986 году Чарльз основал PRINTZ
Electronic Design - первую полностью компьютеризированную дизайнерскую
фирм)' в Сан-Франциско. Бывший вице-президент отдела разработки сайта
eStar.com. информирующего читателей о жизни знаменитостей, Уайк-Смит
также работал консультантом по Web-дизайну для таких заказчиков, как Wells
Fargo, ESPN Videogames и Университет Сан-Франциско. Он провел множество
семинаров и прочитал огромное число лекций, посвященных дизайну
интерфейсов и мультимедиа. Чарльз проживает в городе Нала Вэлли, штат
Калифорния, с женой Бэт и двумя дочерьми. В свободное время он любит музицировать
и сочиняет музыку в своей домашней студии. Чарльз также написал один
киносценарий и теперь работает над вторым.
/

\
Введение
Написать книгу меня подтолкнул мой приятель Дэн Рейх, позвонивший как-то
весной 2004 года с вопросом о CSS. Получив подробную консультацию, он
сказал, что мне стоит написать книгу об этом. Я набросал несколько идей будущей
книги и задвинул их подальше в ящик. Затем, спустя месяц, мне позвонил мой
друг и бывший деловой партнер Майкл Нолан, работающий редактором в
издательстве New Riders. Он спросил, могу ли я порекомендовать ему авторов,
пишущих о Сети. Я скромно предложил собственную кандидатуру. Обсудив
вкратце суть книги, я отправил ему общий план. Спустя две недели
переговоров книга, которую вы держите в руках, была утверждена для издания. Все что
оставалось сделать - это написать ее.
Оказывается, написать книгу гораздо сложнее, чем кажется. Я спросил
Джесса Джеймса Гаррета, пишущего для New Riders, нравится ли ему писать.
«Мне нравится, когда книга написана», - ответил Джесс, и теперь я понимаю,
что он имел в виду. Причиной такого большого срока написания книги - девять
месяцев - является мое стремление сделать ее одновременно исчерпывающей
и легкой для чтения. Ведь если вы хотите использовать CSS для дизайна
сайтов, нельзя делать это наполовину. Либо вы в игре, либо - нет.
За последние несколько лет Web-дизайн существенно изменился, и CSS
находится в самом центре этих перемен. Теперь основной акцент делается на
структуре, а не на презентации, чтобы содержимое сайта оставалось
свободным от презентационных тегов вроде FONT и вложенных таблиц, благодаря
которым предыдущие 10 лет создавались ужасные сайты, оставшиеся нам в
наследство. Сегодня мы хотим, чтобы содержимое сайтов было доступно таким
пользовательским агентам, как современные совместимые со стандартами Web-
браузеры, сотовые телефоны и карманные компьютеры. Проблема в том, что
большинство существующих сайтов покрыто толстым слоем «шоколадного
соуса», добавленного, чтобы хорошо выглядеть в устаревших браузерах. Для
таких сайтов трсб)ется серьезная работа по разделению содержимого от
презентации.

Стильный сайт с помощью CS5
Результаты этого труда просто великолепны: с помощью CSS мы можем ис-
~ тьзовать четкую логичную разметку и, применяя таблицы стилей, добавить
_ згччный дизайн, сделав сайт доступным для массы пользовательских агентов.
~~ • ты вроде CNN давно осознали преимущества этого подхода и преобразова-
Web-страницы в совместимые со стандартами, отказавшись от презентаци-
-^ных элементов и применив CSS для контроля внешнего облика. Такие сайты
г - товы к будущему, их содержимое без проблем легко и экономично
отображайся в различных пользовательских устройствах. В книге мы рассмотрим прак-
. -гескую пользу этого подхода.
Эта книга является очень практичным изданием, из которого вы легко
моете позаимствовать идеи или код для собственных нужд. Здесь вы
познакомитесь с CSS, начиная с установки параметров шрифтов и заканчивая созданием
"ожной разметки, в основе которой лежит простой код XHTML, а все аспек-
-ц дизайна контролируются с помощью CSS. В каждом последующем рассмат-
.ггваемом примере мы будем чуть усложнять используемый код, постепенно
•v-хрепляя ваши навыки работы CSS.
Не стесняйтесь копировать примеры кода, прямо из книги или с сайта
книги www,bbd.соm/stylin и вставлять их в свои страницы, добавляя такие готовые
этементы, как элементы навигации, раскрывающиеся меню или графические
ссылки. На Web-сайте книги вы найдете готовые шаблоны страниц всех типов
азметки, рассматриваемых в книге, которые рассортированы по главам.
Мы также обсудим различные уловки, или трюки, - приемы,
предназначенное для одинакового отображения страниц как в новых, совместимых со стан-
Z- тами, так и в старых, неспособных корректно обрабатывать CSS, версиях
" -гаеров, все еще используемых некоторыми пользователями. Мы не сможем
о-казаться от применения этих уловок до тех пор, пока Microsoft не начнет
Б"г>скать браузеры, совместимые с Web-стандартами и корректно обрабаты-
вг^-i^ie их.
Более всего я надеюсь, что эта книга поможет вам успешно реализовать соб-
ствечные творческие идеи. Естественно, это не книга о дизайне, но книга для
дизайн s, содержащая ключевые приемы, необходимые для воплощения
совместимой со стандартами Web-страницы в реальность. Если вы хотите взять
CSS на вооружение для создания Web-страниц, эта книга для вас.

.*
^ .XHTML:
структурируем содержимое
Наша книга посвящена созданию Web-страниц, которые привлекательно
выглядят, интуитивно понятны для пользователей, доступны для различных
пользовательских агентов (браузеров, карманных компьютеров, мобильных
телефонов и т.д.) и содержимое которых можно легко обновлять и
распространять в других средах.
Ваши возможности воплотить в реальность творческие задумки
ограничиваются техническими навыками. В этой книге мы не будем подробно
рассматривать все мельчайшие механизмы работы сети, но отметим, что без
определенной степени технических знаний хороший Web-дизайнер творить не может.
Таким образом, из нашей книги вы узнаете основные технические сведения,
необходимые для творческой реализации, которые помогут вам двигаться
дальше и совершенствовать навыки дизайна самостоятельно. Но более
пристальное внимание мы уделим именно дизайну, в широком смысле слова - не только
визуальном)' облику страницы, но и ее эргономике и функциональности.
Вся книга основана на Web-стандартах - наборе правил для браузеров,
определенных рекомендациями организации W3C (World Wide Web Consortium),
с которыми согласились все производители браузеров. Как вы увидите,
браузеры на основе движка Gecko (текущие версии - Mozilla/Firefox и Netscape)
и движка Konquerer (включая отличный браузер Safari для Мае) гораздо лучше
обрабатывают совместимые со стандартами страницы.
Примечание Если вы встретили в книге упоминание о CSS2 или CSS3, имейте в виду, что это
просто версии стандарта CSS. Как и любая другая технология, CSS
продолжает развиваться.

16
ГЛАВА 1- XHTML; структурируем содержимое
Специальный размер шрифта заголовка
I QX Ап^^^^еБлу-^УйЬрр!" jNews;V_. PBS fads ^
*■ * * *■*£ -wt> *.>Я " А: Г.*" f -=--^ *-**.
Теги для
добавления
изображения
Как разделить
содержимое
и презентацию
Как и зачем
проверять код
-с
.Нумерованный и
- ^нумерованный —
список
Sty I in'
the designer's guide to
Cascading Style Sheets
r
a New Riders book by Charles Wyke-Smith
MOVING TO XHTML
Creating XHTML compliant pages simply requires following a few simple rules. These
rules may seem counter-intuitive or just a lot of extra work at first, but the
benefits are significant and actually make coding sites much easier. Also, XHTML
code can be easily validated online so you can be sure your code is correctly
written.
Here are the key requirements for successful validation of your XHTML code.
1. Declare a DOCTYPE
2. Dedare an XML namespace
J. Declare your content type
4. Close every tag, enclosing or поп-enclosing
5. AJl tags must be nested correctly
6. Inline tags can't contain block level tags
7. Write tags in lowercase
8. Attributes must have values and must be quoted
9- Use encoded equivalents for left brace and ampersand
more about these reoufrernents
Here are some useful links from the web site of the
Consortium), the guiding body of the web's devel
♦ W3C's XHTML validator
w*c
'•• '•A.-Zlr.". A...
-■■-- > ■- ... -.- л » > '<
World Wide Web
ent.
■i*
v\
\J
p-
F
4.
.*;.:-
Как выделить акронимы в тексте
звините, ЭНРВМ1Е
Вголне тогично предположить, что Internet Explorer в связи с текущим домини-
заь--тем па рынке, является лучшим браузером, но на самом деле это далеко
н^ . Зачастую при описании той или иной функции мы будем называть ее
~Н?ВМ1Е - Это Не Работает В Microsoft Internet Explorer. Дело в том, что Inter-
г ~: Explorer остался замороженным в прошлом, несовместимым со стандартами.
-Cz.-: сгедствие, этот браузер стремительно теряет привлекательность и долю

I
Извините, ЗНРВШЕ 17
на рынке. Для устранения некоторых недостатков Internet Explorer есть
специальные трюки - своеобразные уловки CSS, позволяющие заставить браузер
увидеть или проигнорировать определенные стили. Добавлять трюки
утомительно и отнимает дополнительное время, но пока Microsoft не начнет выпускать
совместимые со стандартами браузеры, отказаться от этого не представляется
возможным.
Для Web-дизайнеров и посетителей Web-сайтов Web-стандарты являются
гарантией четкого и последовательного отображения и функциональности
сайтов во всех браузерах на любой платформе. Пока что мы не можем насладиться
этим в полной мере, но дни, когда каждый браузер поддерживал различный
набор функций, в результате чего разработка сайтов для нескольких платформ
существенно затруднялась и замедлялась, похоже, остались позади.
Итак, согласно сущности Web-стандартов, прочитав нашу книгу, вы научитесь
публиковать в сети содержимое, определяя его структуру с помощью XHTML и
добавляя внешний облик с помо ью CSS.
Внимание Помните, что XHTML отвечает за структуру документа, а CSS - за презентацию.
1. Содержимое - эго термин, использующийся для обозначения текста,
изображений, видео, аудио, анимации и файлов (например, документов
в формате PDF), размещаемых на Web-странице.
2. XHTML (extensible HyperText Markup Language) - позволяет указать, что
представляет собой каждый элемент содержимого вашей страницы:
заголовок или абзац, список, гиперссылку или изображение. Для этого мы
используем код XHTML, состоящий из тегов, заключенных в угловые
скобки < >. Создать элемент XHTML можно, поместив фрагмент
содержимого между открывающимся и закрывающимся тегом:
<р>Содержимое помещается внутрь тегов, например, это - абзац текста</р>
или, если содержимое не является текстом (например, изображение), оно
помещается в один тег:
<img src="image/fido.gif" alt="изображение моей собаки" />
В данной главе мы коснемся XHTML и его использования, но перед этим
необходимо запомнить самое главное правило: XHTML задает структуру
документа.
3. CSS (Cascading Style Sheets) - позволяет указать, как будет выглядеть
каждый элемент содержимого страницы на экране: используется ли шрифт
Helvetica или Times, выделен ли он жирным или курсивом, насколько он

18 ГЛАВА 1. ХНТ№; структурируем содержимое
отступает от края страницы. CSS контролирует форматирование и
расположение каждого элемента. Например, для форматирования размера
шрифта в абзаце можно использовать такое правило:
р {fone-size: 12px}
Оно означает, что размер шрифта будет равен 12 пикселам. Практически
вся наша книга посвящена CSS, но уже сейчас вы можете запомнить
важное правило: CSS отвечает за презентацию содержимого.
Разделение структуры документа и его презентации было основной целью
возникновения Web-стандартов. Это является ключевым моментом в
разработке сайтов, доступных для просмотра в различных устройствах.
10 главных преимуществ использования Web-стандартов
Зозможно, бы задаете себе вопрос: «Почему я должен отказаться от способов
создания сайта, которые использую уже несколько лет?» Вот 10 причин сделать это.
1. Доступность для различных пользовательских устройств. Созданная по стандартам
Web-страница будет одинаково доступна как пользователю с обычным браузером
и ПК, так и просматривающему ее на экране карманногокомпьютера или мобильного
телефона, а также пользователям специальных программ считывания информации
с экрана. Вы можете просто создать разные таблицы стилей для каждой среды.
. Улучшение быстродействия. Благодаря меньшему размеру страниц они быстрее
загружаются, так как содержат минимальный размер кода. Мы можем заменить все
презентационные теги, указываемые ранее в каждой странице для каждого
элемента, всего на одну таблицу стилей. Она определяет облик всегЬ сайта и
пользователю достаточно загрузить ее только единожды.
4 Совместимость со всеми браузерами. Без особых усилий вы сможете обеспечить
корректное отображение страницы во всех браузерах.
- Разделение содержимого и презентации. Благодаря этому вы сможете легко изме-
ить содержимое или внешний облик сайта, не затрагивая друг друга.
5 Создание гибких страниц. Стандарты облегчают создание разметок, способных
«местить варьирующийся объем содержимого.
z Возможность проверить код. Службы проверки CSS и XHTML позволяют обнаружить
закравшиеся ошибки и устранить их. Таким образом, отладка страниц ускоряется
и обеспечивается корректное отображение сайтов в пользовательских браузерах.
i токовое производство. Производство сайтов за счет стандартов становится го-
—здо более эффективным. При таком подходе следить за содержимым и
обновить его сможете не только вы - дизайнер, способный найти текст среди запутан-
-=« лабиринтов презентационных тегов, но и команда контент-менеджеров. А вы
с ожете сосредоточиться непосредственно на Web-дизайне.
z ~^остота распространения содержимого. Распространять и передавать третьим
• ^ам содержимое, свободное от презентации, гораздо проще, чем при
использовании презентационного кода, из-за которого это, зачастую, и вовсе невозможно.

Извините, ЗНРВМ1Е 19
9. Доступность. С помощью стандартов сделать сайт доступным для пользователей
с ограниченными физическими способностями стало существенно легче.
10. Меньше работы. Вам потребуется написать меньший коддля создания сайта, объем
работ по последующему изменению дизайна сайта значительно снижается.
Время перемен
Чтобы понять, насколько далеки от Web-стандартов многие современные
сайты, следует взглянуть на разработку HTML-сайтов и отметить стоящие перед
их разработчиками трудности.
По состоянию на первую половину 2005 года код типичного Web-сайта
перегружен массой презентационных тегов, нацеленных на браузер, для
которого была разработана страничка (например, Internet Explorer 5 для Windows или
безнадежно устаревший Netscape 4.0). В современном информационном
пространстве, когда ваш сайт может быть просмотрен не только в браузере ПК, но
и на карманном компьютере, мобильном телефоне и даже на экране, встроен-
" ном в дверцу холодильника, вы можете обнаружить, что такие сайты «зажаты»
в тиски кубометров презентационного кода.
Наследство клуджей
Изначально предполагалось, что HTML будет использоваться при разметке
текстовых страниц, содержащих гиперссылки на другие текстовые страницы.
Он не был предназначен для создания сложных брошюрных разметок. Но, как
только сеть из тесного академического пространства вырвалась в мэйнстрим,
именно это начали делать дизайнеры. Тогда и стали плодиться клуджи.
Например, если изображение (скажем, фотография) располагалось
слишком близко к краю страницы, дизайнер использовал прозрачное изображение
GIF размером в один пиксел, которому задавалась требуемая ширина, для
смещения фотографии от края страницы.
Также очень часто использовались таблицы, но не для отображения табличных
данных, а в иных, творческих, целях. Например, если требовалось разделить
страницу на заголовок, область навигации и область содержимого, можно было взять
таблицу и поместить каждый элемент в отдельную ячейку. Фактически,
использование вложенных таблиц стало неким негласным стандартом Web-дизайна и
описывалось в качестве разумного способа создания сайтов во многих книгах.
Хочется отметить, что когда речь заходит о HTML, мы знаем, о чем
говорим, так как автор сам вместе с Web-дизайнерами по всему миру использовал
точно такие же подходы - другого способа просто не было.

20 ГЛАВА 1. XHTF/5L: ст|ууктурнру<яи содержимое
Несмотря на то, что результат зачастую оправдывает средства, в данном
стучае имелся один игнорируемый побочный эффект - содержимое
Web-сайтов оказалось переполненным презентационным кодом, заданным только для
того, чтобы получить желаемый внешний облик страниц в устаревающих
браузерах. Можно с уверенностью сказать, что большинство Web-сайтов на 60%
ч оолее состоят из презентационного кода, в результате фактическое
содержимое извлечь оттуда практически невозможно.
Раз уж мы затронули эту грустную тему, давайте поиграем в игру,.
Найди содержимое!
Взгляните на этот фрагмент кода, взятый с домашней страницы Microsoft
1 июля 2004 года.
<-^Ые cellpaddir.g^O" cellspacings"0" width=n100%" heights"19" border=,l0"
11= ГаЫеБ "> _ ч
<zr>
<zd nowrap=,,truen id="honiePageLink"><></td>
<~dxspan class="ltsep"> l</spanx/cd>
<~d class=,,lt0" nowrap="truen onmouseenter="mhHover {' localToolbar1 , 0*2+2,
'I:-1)n onmouseleave="mhHover('localToolbar', 0*2+2, 'ltO')"><a
hrsf=f,http://go.microsoft.com/?linkID=508110,l>MSN Home</ax/td>
<rixspan class="ltsep">I</spanx/td>
<Cxl zlass=,1lc0" nowrap=,,true" omnouseenLer=nmhKover {' localToolbar' , 1*2+2,
■lei1)" onmouseleave=,lmhHover( 'localToolbar1, 1*2+2, 'ItO1) "><a
href=nhttp://go.microsoft.com/?linkid=317769">Subscribe</ax/td>
<"dxcpan class=,,ltsepn>|</spanx/td>
<-d cldss^'lto" novjrap="true" onmouseencer=BmhHover{' localToolbar' , 2*2+2,
'I-l')" onmouseleave="mhHover('localToolbar1, 2*2+2, ' ItO')"><a
href="http://go.microsoft.com/?linkid=317027">Manage Your Profile</ax/td>
<w- widch="100%"x/ta>
< ir>
< rahle>
Весь этот код нужен для создания лишь одной строки с кнопками (рис. 1.1).
Фактическое содержимое корр. выделено жирным шрифтом - 247 символов из
^56. что составляет менее 26%. Оставшиеся 74% являются тем самым толстым

22 ГЛАВА 1. XHYIV1L: структурируем содержимое
то, что переделка имеющегося сайта в соответствии со стандартами может
потребовать определенных усилий и времени, вы можете утешить себя тем,
что, сделав это единожды, уже не должны будете возвращаться к этому. Если
вы создаете новый сайт, то можете сделать это правильно с самого начала.
С помощью нашей книги вы научитесь создавать сайты за счет разделения
структуры и содержимого - с помощью XHTML мы создадим структуру и
зададим ссылку на файл с таблицами стилей, содержащими всю информацию для
получения нужного визуального облика страницы.
Преимуществом такого подхода является возможность использовать
различные таблицы стилей для браузеров, КПК, мобильных телефонов, вывода
страницы на печать, программ считывания информации с текста для
пользователей с ослабленным зрением и т.д. Каждая таблица стиля будет обеспечивать
оптимальный облик страницы в той или иной среде, но при этом вам
потребуется лишь одна версия кода XHTML-страницы^ которая будет сама выбирать
подходящую таблицу стилей для текущей среды.
XHTML и правила его написания
Так как CSS является способом придания стиля для XHTML, нельзя
использовать CSS без предварительного создания XHTML-кода страницы. А что именно
представляет собой XHTML? Попросту говоря, XHTML основан на структуре
XML, в которой теги можно называть так, чтобы они фактически описывали
помещенное внутри них содержимое. Например, <president>nynnH</presi-
JLe~z>. Эта очень мощная функция XML подразумевает, что при разработке
тегов для содержимого вам также требуется создать второй документ,
называемые DTD (определение типа документа), объясняющий устройству, которое
обрабатывает XML, как эти теги трактовать.
XML завоевал высокую популярность во всем мире, и появление X
(extensible) в XHTML подчеркивает неотвратимое движение вперед, к разделению
содержимого и презентации.
Примечание Если вы хотите более подробно ознакомиться с XML, обратитесь к учебнику по
XML на сайте http://www.realcoding.net/article/rubric/webtech/XMLbook или
www.spiderpro.com/bu/buxmim001.htmi.
Оставшаяся часть этой главы посвящена последней, полностью
переработанной и наиболее гибкой версии HTML. Дамы и господа, встречайте -
XHTML!

XHTML и правила его написания 23
Правила разметки XHTML
Безошибочная разметка XHTML повышает вероятность корректного
отображения вашей страницы в большинстве браузеров и других пользовательских
агентах в ближайшие несколько лет. Четкость, простота в написании и
гибкость XHTML позволяют создавать компактный быстро загружающийся код,
понятный при его редактировании в будущем, и подготовить содержимое для
просмотра в различных пользовательских агентах.
Определить, соответствует ли сайт Web-стандартам очень легко: если вы
используете только допустимый код XHTML и правила CSS, - сайт совместим
со стандартами. (Привлекательность дизайна это уже другой вопрос, который
мы также обсудим).
Допустимый XHTML означает, что вы используете только XHTML, без
бессмысленных, незакрытых или устаревших тегов HTML. Вы можете проверить код
с помощью валидатора - Web-программы проверки кода (http: / /validator.w3.org).
в которой необходимо ввести адрес вашей страницы. Если все в порядке, вы
увидите сообщение This page Is Valid XHTML! (рис. 1.2). CSS можно проверить по
адресу http://jigsaw.w3.org/css-validator тем же образом.
* ' * Я "Д №*■■■' A Д ?>1 + f^QhttP://val^ator.w3.org/check?uri=http^.AX2F%2Fvw>'wC) ,-\Q- Google „
\AAf • u*uty Markup Validation Service-«аёУ^ гт ;чЕ^г "* ^Ч»-
Home About... j News J Docs j Hew & FAQ \ Feedback ] ЫкСйгсхея . j ,
Jump To:
This" Page Is Valid XHTML 1.0 Strict! ""**■ j
Tip Op Th£ Day: Ue* headings to structure your document .. I
r
W<*E: The Validator XML support has some limitations.
note: you can ajso vjew verbose results by setting the corresponding option on the Extended
Interface.
The document located at <http^Avww. bbd.com/styNn/ch1 xhtml/sample XHTML markup ch1,htm>
was checked and found to be valid XHTML 1.0 Strict. This means that the resource in question
identified itself as "XHTML 1.0 Strict11 and that we successfully performed a formal validation using an
SGML or XML Parser (depending on the markup language used).
Рис. 1.2. Если ваш сайт соответствует стандарту XHTML, вы увидите сообщение
This page Is Valid XHTML!

24 ГЛАВА 1, XHTML: структурирует содержимое
Примечание Список устаревших тегов, которые следует заменить эквивалентами CSS,
можно найти на сайте About.com (http://webdesign.about.com/library/tags/bltags-
deprecatedtags.htm).
Ниже приведен полный (и, к счастью, короткий) список всех требований
к коду для совместимости с XHTML.
1. Указывайте DOCTYPE. В самом начале кода, перед открывающимся тегом
html, следует указать DOCTYPE, сообщающий браузеру, использует ли эта
страница HTML, XHTML или и то, pi другое, и указывающий ему, как
интерпретировать данную страницу. Есть три основных типа DOCTYPE:
• Strict - код полностью совместим с XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
,,http://wvw.vj3.org/TR/xhLinll/DTD/xhLirill-strict.dccl">
• Transitional - это переходный вариант, сочетающий в себе как XHTML,
так и HTML. Он используется на многих сайтах, так как обеспечивает
одновременно работу и имеющегося HTML, и добавляемого XHTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
• Frameset - то же самое, что и переходный вариант, но в этом случае
разрешается использовать фреймы:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
Очень важно не забывать указывать DOCTYPE. Если браузер не
обнаружит его, он предположит, что страница была разработана для браузеров,
созданных задолго до появления Web-стандартов.
Без DOCTYPE многие браузеры переходят в Традиционный режим
(Quirks), обеспечивающий обратную совместимость и поддерживаемый
такими браузерами, как Mozilla, IE6 для Windows и IE5 для Macintosh.
В традиционном режиме браузер ведет себя так, будто он не имеет ни
малейшего понятия о Web-стандартах и DOM.
нмечание Более подробно о традиционном режиме браузеров можно узнать по адресу
http://diveintomark.org/archives/2002/05/29/quirks mode.

i
XHTML и правила ег© написания 25
Обратите внимание, что по какой-то странной причине тег DOCTYPE
всегда указывается заглавными буквами и не нуждается в закрывающем
теге с косой чертой. Это полностью противоречит пунктам 4 и 7 правил
XHTML, приведенным ниже. Попробуй, разберись!
2. Указывайте пространство имен XML. Сделать это следует сразу после
объявления DOCTYPE, например, так:
<html xHilns="http://www.w3.org/1999/xhcml" lang="en" xml:lang="en">
Когда браузер обрабатывает XHTML-страницу pi хочет знать, что
содержится в DTD, указывающем допустимые теги XHTML, с помощью этой
ссылки он может найти нуж1гую информацию, в данном случае
расположенную в глубинах серверов W3C.
Иными словами, DOCTYPE и пространство имен гарантируют, что
браузер верно обработает созданный вами XHTML-код.
Примечание Объявления DOCTYPE и пространств имен вы можете найти в шаблонах
страниц на сайте нашей книги www.bbd.com/stylin. Вы можете использовать эти
шаблоны как начальную точку для создания собственных страниц.
3. Укажите тип содержимого. Объявление типа содержимого располагается
в начале документа, вместе с другими мета-тегами:
<meta hctp-ecuiv="Content-type" content="text/html; charset~windows-1251" />
Этот тег просто указывает кодировку (в данном случае это кириллица). Если
вы хотите создать страницу; содержащую символы других языковых групп,
вам понадобится указать другое значение char set. Полный их список
можно найти по адресу http://msdn.microsoft.com/library/default.asp?url=/
workshop /author /dhtml/reference /charsets /charset4.asp.
Совет При копировании объявления DOCTYPE или пространства имен с другого сайта
убедитесь, что все пути в нем абсолютны, то есть начинаются с http://, после чего следует
полный путь к документу. Дело в том, что некоторые сайты используют собственные
файлы DOCTYPE и пространств имен, и указывают относительные пути к ним.
Скопировав объявления с указанными относительными путями к файлам, которых на вашем
сервере нет, ваша страница будет выглядеть непредсказуемо.
4. Закрывайте все теги, вмещающие и невмещающие. Вмещающий тег
содержит внутри себя некоторое содержимое:

26 ГЛАВА 1. XHTML: структурируем содержимое
<р>Это текст, помещенный внутри тегов абзаца. Для соответствия
стандарту XHTML, для каждого открывающего тега необходимо иметь
и закрывающий, как в данном случае.</р>
Невмещающие теги не имеют внутри себя содержимого, но все равно
должны быть закрыты:
<img src="images/Siamese.jpg" alt=nMy cat" />
5. Следите за вложенными тегами. Важно, чтобы все вложенные теги были
организованы надлежащим способом. Если тег открывается перед
закрытием другого, он также должен быть закрыт перед закрывающим
элементом содержащего его тега:
<р>Очень <strong>BaKHO</strong> корректно организовывать вложенные теги</р>
Здесь тег <strong> помещен внутри тега <р>. Тег, находящийся внутри дру-
гого, называется вложенным.
А вот пример неправильного вложения:
<р>Этот тег вложен <strong>HenpaBWibHO</p></strong>
Внутрь одного элемента-контейнера может быть вложено и несколько
тегов. Например, для обозначения списка мы используем несколько тегов
<И> внутри,одного тега <ul>:
<ul>
<Н>Пункт l</li>
<Н>Пункт 2</li>
<Н>Пункт 3</li>
</ul>
Так как от корректных вложений зависит работа CSS по применению
определенных стилей к нужным элементам, важно правильно вкладывать теги.
6. Строчные теги не могут содержать блочные теги. Блочные теги создают
визуальную структуру вашего документа, например р (абзац) и div
(раздел). Блочные элементы располагаются один поверх другого - если у вас
есть два абзаца, то второй будет расположен под первым, указывать
перенос строки не требуется. Строчные или линейные теги, например а или
аг^ располагаются в обычном потоке текста и не отображаются каждый
г*а новой строке.
Более подробно строчные и блочные элементы мы обсудим в главе 4, но
пока просто запомните, что вкладывать блочный элемент внутрь
строчного нельзя.

ж
J»
ХНТШ и правила его написания 27
Кроме того, некоторые блочные элементы также не могут содержать
внутри себя другие блочные элементы, например теги заголовка hl-h6 не
могут содержать внутри себя тег абзаца.
7. Указывайте теги только строчными буквами. Не употребляйте заглавные
буквы.
8. Для всех атрибутов необходимо указывать значения в кавычках. В HTML-
атрибуты некоторых тегов могли указываться без значений, но это не
действует в XHTML. Например, если раньше можно было использовать
. тег select для создания раскрывающегося меню и указать, какой пункт
отображается по умолчанию с помощью такого кода:
<SELECT NAME=ANIMALS>
<OPTION VALUE=Cats>KouiKM</OPTION>
<OPTTON VALUE=Dogs SELECTED>Co6aKM</0PTT0N>
</SELECT>
то эквивалентом в XHTML будет следующий код:
<select name="animals">
<opcion value=cats>KomKM</option>
<option value= "clogs" selected=I,eelected">Co6aKH</option>
</select>
Обратите внимание, что во втором варианте мы используем только
строчные буквы, а все значения атрибутов заключены в кавычки. Значения
атрибутов в кавычках могут быть указаны и с прописными буквами, но в
целом рекомендуется не делать этого и придерживаться единого стиля.
Что такое «атрибут»
Атрибуты добавляются к тегам и позволяют более точно задать тег. Каждый атрибут
состоит из двух частей: имени атрибута и значения атрибута в формате имя_атрибута-
= "значенке_атрибута". Например, этот тег вставки изображения:
<img src="images/myPicture.jpg" а1Ь="моя любикая картинка">
имеет два атрибута - img sre со значением "images /ray Picture, jpg" и alt со
значением "моя язбикая картинка".
До появления Web-стандартов распространенным явлением было добавлять тегам
презентационные атрибуты. Теперь мы можем отказаться от этого и перенести
ответственность за внешний вид страницы на таблицу стилей CSS, что существенно сокращает
размер кода.

28 ГЛАВА 1. XHTML: структурируем содержимое
9. Пспспьзуйте кодовый эквивалент левой угловой скобки и амперсанда.
Когда в XHTML встречается левая угловая скобка (<), или как ее еще
называют, знак «меньше», предполагается, что за ней последует тег. Но что
если вы хотите просто отобразить этот символ в тексте? В таком случае
зам придется использовать кодовый эквивалент из нескольких символов,
представляющий тот или иной символ. Например, кодовым
эквивалентом левой угловой скобки является комбинация $lt;.
Кодовые эквиваленты не только позволяют избежать ошибок обработки
кола, они также позволяют добавлять в текст некоторые специальные
символы, например © - для него используется кодовый эквивалент &сору;. Все кодо-
зые эквиваленты символов начинаются со знака & и заканчиваются точкой с
запятой. Соответственно, XHTML рассматривает встречаемые символы
амперсанда как начало кодового эквивалента символа. Чтобы отобразить сам
амперсанд в тексте, используйте кодовый эквивалент &атр;.
Мы рекомендуем вам использовать кодовые эквиваленты для любого
символа, отсутствующего непосредственно на клавиатуре.
Всего имеется порядка 50 000 кодовых эквивалентов, самые
распространенные из которых вы можете найти на сайте Web Design Group (www.htmlhelp.
com reference /htmHO /entities).
Вот, пожалуй, и все правила XHTML. Они относительно просты, но обяза-
тетьны к выполнению, если вы хотите, чтобы код ваших страниц
соответствовал стандарту.
Совет Есть различные утилиты, позволяющие преобразовать имеющийся код HTML в XHTML
Из них стоит отметить HTML Tidy. На сайте Infohound (http://infohound.net/tidy/)
имеется онлайн-версия этой программы и ссылки, позволяющие загрузить программу
и документацию. Не забудьте после применения HTML Tidy вручную проверить код
и подчистить его.
Разбор кода
На рис. 1.3 показана простая XHTML-страница без добавления стилей,
иллюстрирующая правила XHTML (рис. 1.3).
Примечание Минимальный дизайн, который вы видите на этой странице, например
различный размер шрифта, маркированный список, ссылки и т.п., образован за счет
внутренней таблицы стилей браузера, применяемой к стандартным XHTML-
страницам. Таким образом, правильно разметив страницу, вы сможете
обеспечить ее минимальный дизайн и логику, если вдруг ваш CSS-файл со стилями
окажется по каким-либо причинам недоступен пользователю.

KHTilL и щавтт егс? написания
29
* ? ■ * 4 л
;; A Sample■ XMTML.ppcumcsijt^^
- * **f^M A^= ffif^«f^^Qhnp://www.bbd.cor
j^K л -чл-. Г*-к.-:;.. ... . ■" -v.-.-:- ^ . *•" >j ..- „... - . . - —.: ... -,, у v
■^:'- ^.:.:'-^^^ " ■*=*'«■- .J,i--t*?* " »-Л
-■-^ ■■"*. *
"■*".•>..*"<:ws! ?
com/stylin/chi_xhrm!/sarnpleJ(HTV^>Q- Google
■- ЁШ-'х-^'г^й ^:«8ау=: Vafcbof- "^New$:v :PBS'Kirfs^ : V M" "'"<
' :<.■:.-Д:. '.'■■>
*li «
■a-
^ Ъ*™^"41^-^*f ■■■.■
.4
5ty//wf
the designer's guide to
Cascading Style Sheets
a New Riders book by Charles Wyke-Smith
Moving to XHTML
Creating XHTML compliant pages simply requires following a few simple rules. These rules may seem
counter-intuitive or just a lot of extra work at first, but the benefits are significant and actualJv make coding
sites much easier. Also, XHTML code can be easily validated online so you can be sure your code is correctly
written.
Here are the key requirements for successful validation of your XHTML code.
1. Declare a DOCTYPE
2. Declare an XML namespace
3. Declare your content type
4. Close every tag, enclosing or non-enclosing
5. All tags must be nested correctly
6. Inline tags can't contain block level Eags
7. Write tags in lowercase
S. Attributes must have values and must be quoted
9. Use encoded equivalents for left brace and ampersand
more about these requirements
Here are some useful links from the web site of the WC3 (World Wide Web Consortium), the guiding body of
the web's development.
• WC3's XHTML validator
• WC3's CSS validator
• XHTML Resources
• CSS Resources
О 2004 Charlie Wykc-Smith and New Riders.
r*\
■1..
■A
"ч*7*- -"" ""■ -^ У- " .- - --- " 4-3'- Jb н-^ > л - - Ль -< "
■■:■]:*
У-у ■£ ... :
11 Л ...... .....
; у. ^л. >■--■"* j "> j
Рис. 1.3. К этой XHTML-странице не добавлены стили, но она полностью соответствует стандарту
Понятно, что красивой страницу не назовешь, но она определенна,
читаема и функциональна. Код страницы логичен и прост. Отсутствуют
презентационные элементы, и страница проходит проверку валидатора W3C. В главе 3 мы
узнаем, как добавить дизайн и стили к этой странице и повысить ее
привлекательность с помощью CSS.
Теперь более подробно изучим код страницы.

30 ГЛАВА 1. XHTML: структурирует содержимое
Строка 1-2
<-ГС:ТУРЕ html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//SN"
,-:r?://wvw.w3.org/TP./xhtmil/DTD/xhtmll-strict.dtd">
Здесь мы видим объявление DOCTYPE XHTML 1.0 Strict. Так мы указываем
" аузерам, что код страницы следует обрабатывать как полностью совмести-
'--*. с XHTML.
Мы постоянно будем использовать именно этот DOCTYPE, что означает
отхаз от устаревшего HTML. Если вам требуется поддержка устаревших HTML-
тгоз, например фреймов, следует указать другой DOCTYPE.
Строка 3
<г-1-1 xmlns="http://www.w3.org/1999/xhtml" lang=Men" xml:lang="en">
Здесь мы видим открывающийся тег html, для которого ранее указывать
_триб\ты не следовало. Теперь'он содержит ссылку на пространство имен (на-
d объявлений и атрибутов XML) для данного документа.
Как упоминалось ранее, объявление DOCTYPE и пространства имен
гарантируют, что браузер корректно обработает код вашей страницы.
Строка 4
<~еас>
Этот тег открывает заголовок документа. Заголовок страницы заключен
между тегами head и /head и содержит информацию, невидимую для
посетителя (за исключением названия страницы). Помимо необходимых тегов head мы
-ахже указали необязательные мета-теги (строки 5-9), содержащие различную
служебную информацию (описание страницы, ключевые слова, имя автора),
1Сполъзуемую поисковыми службами или другими программами
индексирования.
Здесь также могут быть расположены теги стилей с правилами JavaScript
лти CSS, применяемыми исключительно для данной страницы.
Совет Дополнительную информацию о мета-тегах можно найти на сайте Webdeveloper (www,
webdeveloper.com/html/html metatags.html) или на сайте http://doc.woweb.ru/index.
htm/id/1067164146.
Строка 5
<title>A Sample XHTML Document</title>

XHTML и яравияа его написания 31
Технически добавлять строку с именем страницы необязательно, но, если
вы не добавили ее, валидатор выдаст рекомендацию сделать это, а прочитав
. следующую врезку, вы поймете почему всегда нужно указывать имя страницы.
О тегах заголовков
i
Заголовки страниц, отображаемые в самом верху окна браузера, несут на себе
большую нагрузку с точки зрения поисковых служб. Например, попробовав задать поиск на
сайте Google, вы увидите, что первыми в списке результатов отображаются страницы,
содержащие слова вашего запроса именно в заголовке. Поэтому имеет смысл
задавать имена страниц, содержащие слова, которые могут быть заданы пользователями
в виде ключевых при поиске содержимого ваших страниц. Не стоит тратить заголовок
на что-то банальное и бессодержательное вроде «Добро пожаловать!».
Строки 6-7
<meta hctp-equiv= "Content -type-" content^text/html; charset=iso-8859-l" />
<meta http-equiv="Concent-Language" concent="en-us" />
Эти два обязательных мета-тега содержат информацию, необходимую
серверу и браузеру для корректной обработки и отображения страницы.
По правилам XHTML необходимо всегда указывать информацию о
кодировке. В данном случае это iso-8859-l - кодировка Latin-1, используемая для
текста на английском и некоторых других языках. Для кириллицы используйте
windows-12 51. Обратите внимание, что эти невмещающие теги закрыты с
помощью косой черты и правой угловой скобки.
Второй тег указывает язык страницы, в данном случае это американский
английский. Для русского следует указать ru-ru вместо en-us. Некоторые
значения, например для китайского языка, отображают символы справа налево.
Строки 8-9
<link href ="demo_styles.ess" rel="stylesheec" type="text/ess-" />
</head> ■
С помощью link мы задаем ссылку на таблицу стилей CSS, представляющую
собой отдельный фашь указанный с помощью href. (Мы объясним, как
создавать ссылки на файлы CSS, несколько ниже, пока же браузер не найдет файл со
стилями и просто проигнорирует эту строк}'). С помощью link можно указать
ссылку на один и тот же файл со стилями для всех страниц сайта, чтобы
придать им всем одинаковый облик. Также можно указать ссылку на файл со
стилями и с помощью тега @import - мы обсудим оба метода когда придет время.

3 2 ГЛАВА 1. XHTRTtt: структурируем содержимое
Не забудьте закрыть тег head.
Строка 10
<body>
Начинается тело документа, оно вмещает в себя все содержимое,
отображаемое на странице.
Строка 11
<!-header—>
Это комментарий. Он не отображается на экране пользователя, а просто
поясняет код. Обратите внимание, что в XHTML требуется использовать два
дефиса вместо любого их числа, допустимого в HTML.
Комментарии о комментариях
Браузер не показывает комментарии, но пользователь может просмотреть их, если
откроет исходный код страницы. Мы обычно щедро добавляем комментарии в код,
особенно для пояснения начала различных разделов \Л/е1>страницы. Это помогает
быстрее сориентироваться в коде при дальнейшей работе с ним. Зачастую создание
страницы начинается с написания комментариев, а затем мы просто добавляем
соответствующие теги между ними. Помните, что комментарии - это ваши друзья. Потратив
чуть больше времени на их добавление, вы поймете, что сделали это не зря. Заметьте,
что для каждого открывающегося комментария мы добавляем и закрывающий
комментарий, указывающий, например, конец раздела. Часто между этими двумя
комментариями могут содержаться сотни строк, поэтому с помощью комментариев
ориентироваться в коде гораздо удобнее.
Строка 12
<div id="logo"> <img src=I,iEiages/stylin_logol.gif" width="150" height=nBOn
=l"nStylin logo" />
С помощью div мы делим страницу на прямоугольные разделы, невидимые
пользователю, если только мы не включим отображение их границ или
применим к ним фоновый цвет. Тег div в нашем случае имеет атрибут id со
значением "logo" - мы можем использовать это имя id для применения правил CSS
к данному элементу; его выравнивания, указания размера, фонового цвета и т.п.
Бочее того, div позволяет организовать все содержимое внутри него в виде
rpvnnbi и применять стили к каждому тегу, содержащемуся внутри.
Тег изображения с логотипом (img) не является вмещающим элементом
и поэтому закрыт с помощью косой черты и закрывающейся угловой скобки.

KMTML и правила его написания 33
Обратите внимание на тег alt, содержащий описание изображения, которое
отображается, пока изображение не загрузится или если оно недоступно, а
также если страница считывается с помощью программы считывания текста с
экрана. Следует добавлять тег alt ко всем изображениям, указывая в них
текстовый эквивалент рисунка. Если же изображение не несет смысловой нагрузки,
просто укажите "". Обратите также внимание, что все значения атрибутов
заключены в кавычки.
Имена классов и идентификаторов
Атрибуты класса (class) и идентификаторы (id) идентифицируют теги. Добавить их
можно к любому тегу, но наиболее часто они применяются к блочным элементам.
Идентификаторы и классы помогают привязать правила CSS к нужным элементам или
набору элементов. Разницу между классами и идентификаторами мы опишем чуть ниже-
Пока лишь запомните, что значением атрибута должно быть одно слово, хотя можно
использовать и несколько слов, указанных через дефис или нижнее подчеркивание:
class="navigation_iinks".
Так как браузер может неверно истолковать имена атрибутов из множества нескольких
слов, советуем начинать их с буквы или слова, а не с цифры или символа. Так как
единственным предназначением класса или идентификатора является назначение имени
элемента, которое можно использовать прикрепления правил CSS или кода JavaScript,
в качестве имени может использоваться любое слово. Поэтому желательно называть
классы и идентификаторы осмысленно. Также не рекомендуется применять
сокращения. Лучше укажите footer, а не fг, так как через неделю вы потратите немало
времени, пытаясь вспомнить, что значит то или иное сокращение.
Строки.13-15 '
<h3>a New Riders book by Charles Wyke-Smith</h3>
</div>
<!-end header—>
Заголовок третьего уровня является блочным элементом и поэтому
располагается на новой строке, или, точнее говоря, под предыдущим элементом.
Теги Ьг для перехода на новую строку не нужны. Не забудьте закрыть раздел
заголовка страницы с помощью </div>.
Строки 16-20
<!-rnain concent->
<div id="com:entarea,,>
<hl>Movina to XHTML</hl>

34 ГЛАВА 1. XHTML; структурируем есдерж^глсе
<p>Cre~cing XHTML compliant pages simply requires following a few simple
r^Ies. These rules may seem counter-intuitive or just a lot of extra work
c" first, but the benefits are significant and actually make coding sites
ruch easier. Also, XHTML code can be easily validated online so you can be
sure your code is correctly written.</p>
<p>Here are the key requirements for successful validation of your XHTML
code.</p>
Теперь с помощью div начинается область основного содержимого,
являющаяся блочным элементом. Мы указали для нее заголовок первого уровня,
затем идут два абзаца. Обратите внимание, что абзацы являются блочными
элементами и по умолчанию окружены отступами со всех сторон.
Строки 21-31
<ol>-
<li>Declare a DOCTYPE</li>
<li>Declare an XML narnespace</li>
<li>Declare your content cype</li>
' <li>Close every tag, enclosing or non-enclosing</li>
<li>All tags must be nested correccly</ii>
<li>Inline tags can't contain block level cags</li>
<li>Write tags in lowercase</li>
<li>Attributes must have values and must be quoted</li>
<li>Use encoded equivalents for left brace and ampersand</li>
</ol>
Это нумерованный список, каждый его элемент располагается под своим
номером. Ненумерованный список (ul) использует круглые маркеры для
каждого пункта.
Строка 32
<а href="more.htm">more about these requirements</a>
Это гиперссылка, указывающая на страницу more. htm, расположенную в той
же папке, что и наша страница.
Строки 33-34
</div>
<I-end main content->
Закрывающий div области основного содержимого и закрывающий
необязательный комментарий.

XHTiVIi. и правила ©го написания 35
Строки 35-37
<.-navigations
<ziv id=nnavigations
<p>Here are some useful links from the web site of the <acronym
-icle=nWord Wide Web Consortium">W<sup>3</sup>C</acronym> (World Wide Web
Consortium), the guiding body of the web's development.</p>
Считается разумным выделять сокращения из общего текста. Internet
Explorer по умолчанию никак не выделяет акронимы, Safari отображает их
курсивом (например, как на рис. 1.3). Если добавить к акрониму тег title, при
наведении на него указателя мыши пользователь увидит всплывающую подсказку
с текстом. Указать пользователю на возможность просмотреть расшифровку
акронима можно, добавив к нему пунктирное подчеркивание. Точно так же мож-
чо использовать и тег abbr.
Строки 38-45
<ul>
<lixa href="http://validator.w3.org">W3C's XHTML validator</ax/li>
<lixa href="http://jigsaw.w3.org/css-validator/">W3C's CSS
vaiidator</ax/li>
<lixa href=*'http: //www.w3 .org/MarkUp/">XHTKL Resources</ax/li>
<lixa href ="http://www.w3.org/Style/CSS/">CSS Resources</ax/li>
</ul>
</div>
<!-end navigation->
Эта секция навигации является, по сути, простым списком из гиперссылок.
Они помещены внутрь блока div с идентификатором, позволяющим точно
ссылаться на данный элемент при добавлении стилей. Обратите внимание, что
здесь также не требуются теги перехода на новую строку, так как элементы
списка по умолчанию являются блочными и располагаются на отдельных
строках.
Строка 46-50
<!-footer->
<civ id="homepagefooter">
<p>&copy; 2004-Charlie Wyke-Smith and New Riders.<-/p>

36 ГЛАВА 1. XHTML: структурируем содержимое
< с1л'>
<!—end footer->
Последним элементом страницы является div, содержащий текст нижнего
котонтитула внутри тега абзаца.
Строки 51-53
</body>
</html>
<!—end sample doc->
Вот и весь код страницы. Вопросы? Нет? Хорошо! Двигаемся дальше.
Иерархия документа: знакомство
с семейством XHTML
Еще одной важной концепцией, с которой следует познакомиться перед тем,
как мы начнем работать с CSS, является иерархия документа. Иерархия
документа похожа на генеалогическое древо или на диаграмму, состоящую из
вложенных XHTML-тегов страницы. Чтобы лучше понять это', взглянем на фрагмент
кода только что рассмотренной страницы без содержимого, оставив только
теги:
<!-header - это не кед а просто комментарий—>
</div id="logo">
<img />
<h3> </h3>
</div>
< body>
Теперь мы четко видим взаимоотношения тегов. Например, в коде тег body
содержит все остальные теги. Мы также заметили, что тег div с
идентификатором "logo" включает два тега - тег изображения и заголовка третьего уровня.
На рис. 1.4 мы видим иерархическую диаграмму, представляющую этот
фрагмент кода графически.

XHTML и правила его написания 37
body
I
IV
img h3
Рис. 1.4. Иерархическая структура диаграммы
Набор начинающего для работы с XHTML
Если после всего прочитанного у вас разгорелся аппетит, и вы хотите немедленно
приступить к созданию совместимых XHTML-сайтов., представляем базовый шаблон такой
страницы (вы также можете загрузить его и шаблон рассмотренной выше страницы
с сайта www.bdd.com/stylin). Дополнительные шаблоны HTML и XHTML можно найти по
адресу www.webstandards.org/learn/templates/index.html. Просто" измените текст
внутри тегов title на название вашей страницы и добавьте XHTML-код внутрь тега body.
<!DOCTYPE hcml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
■http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dcd">
<html xmlns="http: //www.w3 .org/1999/xhtml" lang=,,en" xml :lang="en">
<head>
<^itle>A Sample XHTML Document</ticle>
<meta http-equiv="Content-суре" content^"text/html; charset=iso-8859-l" />
<meca htcp-equiv="Content-Language" content="en-us" />
«clink href="demonstyles.ess" rel="stylesheet" cype="text/ess" />
</head>
<body>
<!-СЮДА ВСТАВЬТЕ ВАШ ХНТМЬ-К0Д->
</body>
</html>
Посмотрев на данную иерархическую диаграмму, мы видим, что теги img
и Ь.З являются дочерними для тега div, так как они расположены внутри него.

38 ГЛАВА 1, XHTML: структурируем содержимое
В свою очередь, тег div - родительский для обоих элементов, а теги img и h3 -
сестринские друг для друга, так как находятся на одном уровне иерархии.
Эту иерархию можно использовать при написании правил CSS:
div#logo img {здесь правила CSS}
Такая строка предназначается только для тегов img, расположенных внутри
div с id="logo" (# в CSS заменяет id). Другие теги img на странице не
попадают под действие этого правила, так как они не расположены внутри div с
идентификатором "logo". Таким способом можно задать, например, границу
только вокруг одного изображения или с помощью полей сместить изображение
подальше от окружающих элементов.
Более подробно мы познакомимся с написанием правил CSS в следующей
главе. Главное же пока - запомнить, что все элементы в теле документа
являются дочерними по отношению к тегу body и в зависимости от своего
расположения могут быть дочерними, родительскими или сестринскими по отношению
к другим элементам.
Создавая правила, использующие идентификаторы и классы в
иерархической структуре, вы можете точно и избирательно применять различные
правила CSS к выбранным элементам XHTML, и именно этому мы научимся в
следующей главе.

* .»*т,*
i+*
. Как работает CSS
Узнайте,
как работают—
каскады
em
Научитесь
задавать стиль для
определенных
элементов
- ,, ■ ^-_у ,с ■-„■-■■■у ■■ ;,.,.,, j, ■ ■ т г. , , 1; 1....-,иД ■■■«, ч^ ;- *
: ^-^-Ц^М А АТ1J^ И + l^@http://www.bbdcom/styiliQ^: Q- Google £
, UJtL3S$^ PBSteas-ГЧ. J^~ "" е?л£ "'* * "" °'"":
-Ct Contextual selectors are very selective.
Узнайте о
ьаследственности
-с:
Вложенные >—г
и локальные стили -f This example shows how to target a specific tag using the document hierarchy.
ротив глобальных ч-4-
Tags only need to be descendants in the order stated in the selector: other tags can
be in between and the selector still works.
•":....;. : s^**". *."*■■■ ■ ii "J»u 'jj^'i ^
3 предыдущей главе мы показали вам, как код XHTML создает структурную
иерархию тегов, по ходу дела отметили, как можно использовать CSS для
добавления стилей к этим тегам, точного контроля над разметкой и внешним видом
элементов (текста и графики) на экране. Теперь пришло время познакомиться

40 ГЛАВА 2. Как работает CS5
с CSS. Дочитав эту главу до конца, вы будете готовы создавать собс гвеиные стили
и применять их, допустим, к XHTML-коду, рассмотренному в предыдущей главе.
Три способа добавления стилей
к документу
Есть три способа добавления CSS к Web-странице: линейный, вложенный
и с помощью ссылки на отдельный файл CSS. Мы рассмотрим их все, несмотря
на то, что логичным является только использование ссылки на CSS-файл.
Таблица стилей является отдельным файлом, содержащим только правила
CSS. Использовать такой файл может неограниченное число Web-страниц, что
позволяет обеспечить цельный и одинаковый облик всех страниц сайта.
Линейные стили
Линейные, или локальные, стили добавляются непосредственно к тегу с
помогаю XHTML-атрибута style:
<r>?his paragraph simply takes on the browser's default paragraph scyle.</p>
<? style="font-size: 25pt; font-weight:bold; font-style:italic;
color:red;">By adding inline CSS styling to chis paragraph, we can override
ir.e default styles.</p>
<p>And now we are back to a regular default paragraph without any inline
=~yles.</p>
Результат мы видим па рис. 2-1. Первый и третий абзацы отображаются со
стилем абзаца браузера по умолчанию. Во втором абзаце мы добавили линей-
"1ый стиль и изменили его внешний вид.
Вот некоторые особенности локальных стилей, о которых следует знать:
• очень узкая область действия - они влияют только на тег, для которого
указаны;
• применение локальных стилей - это всего лишь еще один способ
добавить презентационный код, что, по сути, ничем не отличается от
устаревшего HTML с его вложенными таблицами, и переизбытком
презентационного кода;
• локальные стили являются незаменимыми в тех редких ситуациях, когда
требуется изменить стиль лишь одного элемента, однако, практически
всегда можно этого избежать, создав уникальный идентификатор и
присвоив ему нужный стиль в таблице стилей;

Три сп©се>£з добавления стилей к документу
41
& ^^ч^гч1^^"- * *■
«Ul& < : Й'-IJ * "" ;'* iV: V'*"=^
> ^1 ■«>:=-.>! Л л .Л-'А]: & : +-чвЬпр:/;©^Ог metal
This paragraph simply lakes on Ihe browser's default
paragraph style.
By adding inline CSS styling
to this paragraph, we can
override the default styles.
And now we are back 10 a regular default paragraph without
any inline styles.
5sFs IX^^W
«fci i jt ^ >■-■-■-■ ■:- J--
у * - у. -> ■■
■:■ .jj. .-. ч>-:.- ■:
mm
Рис. 2.1. Линейные стили применяются только к тегу, к которому они прикреплены
• локальный стиль можно проверить на практике прежде, чем добавлять
в таблицу стилей, только не забудьте удалить атрибут style при
копировании локального стиля из кода страницы в файл CSS; в противном
случае вы потратите массу времени, пытаясь обнаружить ошибку в вашей
таблице стилей, а виной всему окажется именно style, оказавшийся но
ошибке в файле CSS:
• локальные стили имеют приоритет перед вложенными (описанными
ниже), которые, в свою очередь, имеют приоритет перед глобальными.
Вложенные стили
Группу стилей CSS можно поместить непосредственно в документ XHTML,
между тегами head, - это будут вложенные стили (или стили страницы).
Вложенные стили работают следующим образом:
<head>
<xitle>Inline Styles"* example</citle>
«стела http-equiv="Content-type" contenc="texc/html; charset=iso8859-l" />
<meca http-equiv= "Content-Language" concent="en-us" />

42 ГЛАВА 2. Как работает CSS
<style type="text/css">
/* <![CDATA[ */
hi { font-size: 16pt; font-weight: bold; }
p { color:blue;}
/* ]]> */
</style>
</head>
Тег style указывает браузеру, что после него следует код CSS, а не XHTML.
Если вы хотите добавить JavaScript, укажите для тега style атрибут "text/
javascript".
Примечание Закомментированные теги CDATA (/* <! [СВАТА[ */ и /* ] ] > */)
помещены вокруг стилей. Это предотвращает их обработку как XML, что может приве-
сти к ошибке в обработке других символов, которые в XML указываются с
помощью закодированных эквивалентов (не забывайте, что XHTML основан на
XML). Для вложенных стилей в этом примере мы не стали добавлять теги
CDATA, и никогда не сталкивались с неприятностями, вызванными их
отсутствием. Тем не менее, вы можете сами решать, добавлять их или нет, прочитав
статью о XML CDATA {www.w3schools.com/xml/xml cdata.asp).
Вот некоторые замечания о вложенных стилях:
• область действия вложенных стилей ограничена страницей, содержащей их;
• если ваш сайт состоит из одной единственной страницы, можно
использовать вложенные стили, но в этом случае вы не отделите содержимое от
презентации, так как и код и стили содержатся в одном документе;
• при разработке страниц, особенно со сложной разметкой, можно
вначале указать стили как вложенные, чтобы при отладке не переключаться
между двумя файлами: таблицей стилей и кодом страницы; однако после
отладки следует перенести вложенные стили в отдельный файл CSS;
• вложенные стили имеют приоритет перед глобальными, но уступают
линейным.
Внешний файл со стилями
Можно поместить стили в отдельный файл (таблицу стилей), связав его с
неограниченным числом страниц сайта, чтобы стили имели глобальное (на
уровне сайта) действие. Заданные стили будут воздействовать на все страницы сайта,

Три способа добавления стилей к документу 43
а не только на отдельные теги или страницы. Это единственный из трех
рассматриваемых методов, который подразумевает полное разделение структуры
и презентации. Сведя все правила CSS в один файл, вы существенно облегчите
редактирование и изменение дизайна сайта.
Например, если потребуется внести изменения в дизайн всего сайта
(допустим, клиент попросил сделать шрифт текста синим, а не черным), можно
просто изменить одно правило CSS в таблице стилей. Это гораздо легче, чем менять
каждый атрибут FONT для каждого абзаца (так происходило до появления CSS).
Можно добавить таблицу стилей к любому количеству XHTML-страниц с
помощью всего одной строки кода, добавленной в раздел head каждой страницы:
V <link href="my_style__sheet.ess" media="screen" rel="stylesheet" type="text/ess" />
После этого в ходе загрузки стили будут добавляться к каждой странице.
Обратите внимание, что в теге link атрибут media указан как "screen". Это
означает, что таблица стилей создана для отображения страницы на экране, то
есть для просмотра в браузере. Определенные пользовательские агенты ищут ат-
рибугьТпри вы"боре загружаемых стилей, наиболее подходящие им. Среди
возможных вариантов есть атрибуты all, projection, handheld, print, aural. Полный
список вы можете найти на сайте W3 Schools (www.wSschools.com /ess /
ess mediatypes.asp).
Теперь благодаря тегу 1 ink при открытии страницы браузер будет загружать
и таблицу стилей. Добавив второй тег link со значением "print" для атрибута
media, мы можем использоватьвторую таблицу стилей, кот# # # £ • - • б i -
использоватьдля печати. В частности, таолица стилей для печати может
скрывать навигацию и прочие элементы, не имеющие смысла на бумаге.
Если создать вторую таблиц}' стилей для печати, тег 1 ink будет выглядеть так:
\У<Нпк href="my_style_sheet_print.ess" ir.edia= "print" rel="stylesheet"
type="text/cssM />
Теперь мы знаем, что такое таблицы стилей, поэтому давайте узнаем, как
писать правила CSS и такие концепции, как наследственность, каскад и
специфичность.
Что такое CSS?
Каскадные таблицы стилей - что такое таблицы стилей и при чем здесь каскады? На
первый вопрос мы ответим сейчас, а на второй, хотя я уже и намекнул вам ответ, - чуть
позднее.
Итак, таблица стилей - это текстовый файл с расширением .ess. Таблица стилей
представляет собой список правил CSS. Каждое правило задает стиль, применяемый
к определенному элементу XHTML-кода. Правило может, например, задавать размер

44 ГЛАВА 2. Касс работает €§:
шрифта текста абзаца или толщину рамки вокруг изображения, расположение
заголовка или цвет фона и т.д. С помощью CSS можно воссоздать многие функции мощных
дизайнерских программ, например Adobe InDesign. CSS предлагает исчерпывающие
средства для создания любого дизайна без применения таких уловок, как вложенные
таблицы или прозрачные GIF-изображения-отступы.
Анатомия правила CSS
Начнем знакомство с CSS с рассмотрения простого правила, выделяющего
шрифт текста всех абзацев документа красным цветом:
р {color: red}
Теперь, если в XHTML-коде у нас есть следующий фрагмент:
<р>Очень важный текст.</р>
он будет выделен красным.
Примечание Тогда как в XHTML теги заключаются в угловые скобки, в CSS тег указывается
без скобок.
Правило CSS состоит из двух частей: селектора, определяющего, к какому
тегу (в данном случае это абзац) применяется правило, и объявления,
укалывающего, что произойдет после применения правила (текст абзаца станет
красным). Само объявление состоит из двух элементов: свойства, называющего
объект применения (цвет текста) и значения, указывающего состояние свойства
(красный цвет). Посмотрите на рис. 2.2, чтобы точно уяснить к чему именно
относятся эти термины.
j
Селектор Объявление
l {color: red;}
I Свойство Значение
Рис. 2.2. Правило CSS состоит из двух основных элементов и двух подэлементов
Написание правил CSS
Базовую структуру селектора и объявления можно расширить тремя способами.
^ Правило может содержать несколько объявлений.

Написание правил CSS 45
\
р {color:red; font-size:12рх; line-height:15px;}
Это правило задает красный цвет для шрифта текста абзаца, размер
шрифта 12 пунктов и высоту строки в 15 пунктов.
Внимание CSS требует абсолютной точности - если вы пропустите, например, точку с
запятой, все правило будет проигнорировано.
Обратите внимание, что каждое объявление заканчивается точкой с запятой,
которая разделяет их между собой. Последняя точка с запятой перед
закрывающейся скобкой является необязательной, но в дальнейшем это позволяет
добавлять объявления в правило, не вспоминая о том, что перед ними необходимо
поставить точку с запятой.
Молено сгруппировать несколько селекторов.
Допустим^ если вы хотите выделить шрифт заголовков с 1 по б уровень
жирным и синим, то можете сделать это с помощью следующего правила:
hi {color:blue; font-weight:bold
h2 (color:blue; font-weight:bold
h3 {color:blue; font-weight:bold
h4 {color:blue; font-weight:bold
h5 {color:blue; font-weight:bold
h6 {color:blue; font-weight:bold
Либо можно просто сгруппировать селекторы в одном правиле, указав их
через запятую:
hi, h-2, h3 , h4, h5, h6 {color :biue; font-weight :bold;}
Так гораздо легче. Просто не забудьте добавить запятую после каждого
селектора за исключением последнего. Пробелы ставить необязательно, но они
помогают сделать код более удобным для чтения.
К одному селектору молено применить несколько правил.
Если, написав предыдущее правило, вы решили, что хотите сделать
заголовок h3 выделенным курсивом, можно просто добавить:
\\ hi, h2, h3, h4, h5, h6 {color:blue; font-weight:bold;}
h3 {font-style:italic;}
Примечание Возможно, вам не терпится узнать, какие еще значения свойств могут быть.
Например, можно ли указать цвет с помощью RGB, а не названия цвета
(можно), но пока давайте сосредоточимся на принципе работы селекторов Чуть
далее в этой главе мы обсудим объявления правил.

46 ГЛАВА 2, Как работает CSS
Выбор тегов в иерархии документа
для применения правил
Если вы уже забыли, что значит иерархия документа, обратитесь к первой
главе, чтобы нам не пришлось повторяться.
Применение контекстных селекторов
Если вы создадите правило, в котором просто укажите тег в качестве
селектора, оно будет действовать для всех таких тегов. Например, задав правило:
р {color:red;}
мы выделим красным цветом все абзацы сайта. А если необходимо выделить
красным только один конкретный абзац? Для более точного выбора тегов
используются контекстные селекторы. Вот пример:
civ p {color.-red;}
Теперь красным будут выделены только абзацы, содержащиеся внутри тегов
div.
Как видно из этого примера, контекстные селекторы используют не просто
имя одного тега. Теги, расположенные ближе к объявлению, (в данном случае
это р), являются целевыми, оставшийся тег или теги указывают, где в коде
должен располагаться целевой тег, чтобы правило было применено. Давайте бо-
iee подробно обсудим эту идею.
Примечание Просмотреть приведенный ниже код вы можете, загрузив файл contextual_$e-
lectors_tmpl.htm с сайта www.bbd.com/srylin.
Взглянем на код:
<hl>Contextual selectors are <em>very</em> selective.</hl>
<p>This example shows how to target a <em>specif ic</err,> tag using the
document hierarchy.</p>
<p>Tags only need to be descendants <span>in the <em>order stated</em> in
the seiector</span>; other tags can be in -between and the selector still
works.</p>
Оба абзаца содержат теги em, и если мы напишем правило для тегов em,
заключенных внутри тегов р, оно будет применено для обоих этих абзацев. Однако

Выбор тегов в иерархии документа для применения правил
47
если мы напишем правило для тегов em внутри тегов span внутри тегов р, оно
будет применено только ко втором}' абзацу.
Примечание Если вы - новичок в мире XHTML, обратите внимание, что span является
нейтральным контейнером. Иными словами, span не оказывает влияния на
разметку до тех пор, пока вы не укажете стили. В отличие от div - блочного
элемента, который располагается на отдельной строке, span - линейный элемент. По
умолчанию, без добавления стилей, текст внутри strong выделяется браузе-
юм жирным шрифтом^а em - курсивом.
На рис. 2.3 мы видим, как выглядит такой код в браузере без добавления
стилей.
4.!*j iCI^f -А-^А#1 С4"-1 + k 0htTp://www.bb±com/styliiC)^ Q- Google
■; уЬтлшай 9-$Щ& v#a™&f:.-^«wsitr;:P8S Kidsv ^:A :-**v-* *д*;г:я *к.ад;;лгЬ = ■£■«<*
Contextual selectors are very selective.
This example shows how to target a specific tag using the document hierarchy.
Tags only need to be descendants in the order stated in the selector, other tags can
be in between and the selector still works.
Рис. 2.З. Наша страница со стилями браузера по умолчанию
На рис. 2.4 показана иерархия этой разметки.
em
Рис. 2.4. Графическое представление иеоархии рассматриваемой страницы

48 ГНАВ А 2. Как работает CSS
На данной диаграмме виден принцип расположения тегов внутри друг
друга. Теперь, если мы напишем правило:
em {color:green*
и поместим его между тегами style в области head шаблона contextual
seleclors_tmpl.htm, то выделим зеленым текст, расположенный между тегами em
(рис. 2.5).
"I .« *.* :; <$ |* А = А I 1 С +"■ -0 http://www.bbd.com/stylin/ .-*4--Q- Google =:
■аДь^ Ч ■ ■ i Т«и>^1-^^ч№»ц*м ■ ■«■■■■■ pi i щ ■ ■■ i ■ ■ ■ щ «.ГЧ* *■■ Jjpfri p ■ 11" ■ I ■ i ■ ■ ■ i ■ ш*++ wiw**' ■■ ■■ >Hi^i **шщг^т*^*ЫЛ*^ШЬлАл** «j' ■ i ■ ■ ■■■■■■ taitf^MH'p'^Mi lijt^rt**' ■■■ ■■!■ ■
...>, ■■ ■'■! "*'- • iT. i Г->иИ Дим ...■"■ ' / ■<• i .Ynii'iMii .i .. ■ " ;■■<—.■■ ■ ■•!■■. .' 'JiVfi'tuiM.^ ■ ■ ■"■ ."'■ • ■■ • .in "У* full fiif Jto...-.—™
Contextual selectors are very selective.
This example shows how to target a specific tag using the document hierarchy.
Tacs only need to be descendants in the aider stated in the selector: other tags can
be in between and the selector still works.
E *** ■■." *-K ■*: -
■■ ■■■■■■ ■"" - ■■■■ it й ;.-.„.- ■ ■■ . ■- ,\,}
Рис. 2.5. Мы выделили зеленым текст в тегах em
Но как быть, если мы хотим быть более избирательными - допустим,
сделать зеленым только текст внутри тегов еш в абзацах, но не в заголовке? Тогда
нам понадобится правило:
: " с 'Cdhtextual SelGCtors. exarnpie^.4
■«Df-.v < >.
^
^ ^>-|| <jif А й А 'j С + ^0hnp://www.bbd.com/stylinw- Or Google
■J ■• Л-.." -■.:'- V ■■■ ■ ■ ■-■■-*h\ . . / ^ -**Ь • -■■ "--'■ ... -
■— 'Ли.1,'.-.1,1 , , . ■ ^—Р ' . 1* -| ■ ■■ ■■ '--' -■'■- -"■- ■■ - --■ - ■■ ■ ■• - -■■ , -- *- ' ■ ■■*■»! ■'
■~9
У;ХЗЦ;^Аптагрп. ' «Say; .Yabco? ■ Nevvi"▼ ■ ■ PBS-Rids" *. ^
Contextual selectors are very selective.
This example shows how to target a specific tag using the document hierarchy.
Tags only need to be descendants in the order suited in the selector; other tags can
be in between and the selector still works.
j; 'WK-,.-*- S.if : к> . . -. ■-■ v'v ■»■""■■ ■»: £'■> -j- ■:■
■u-:-, .-, -4
Рис. 2.6. С помощью контекстного селектора мы выделили зеленым только текст в абзацах,
но не в заголовке

1ышр тегов з иерархий документа для применения правил
49
р em {color:green}
результаты добавления которого показаны на рис. 2.6.
Так как перед em мы добавили селектор р, теперь правило применяется
только для тегов em, расположенных внутри тегов р. Теги em внутри h2 не попадают
под действие правила.
Правила с групповыми селекторами применяются для всех перечисленных
тегов, а правила с контекстными селекторами - только к последнем}7
указанному тегу, содержащемуся внутри предыдущих, вне зависимости оттого, имеются
ли между ними какие-либо дополнительные теги. Поэтому наше правило было
применено к тегам em внутри тегов span. Несмотря на го, что em не является
прямым дочерним элементом для р, правило все равно действует, так как em -
потомок р.
Ниже приведен пример способа, при помощи которого можно указать
несколько тегов в селекторе, чтобы указать целевой тег еще более избирательно:
р span em {color:green}
Результат показан на рис, 2.7.
®tiF}*J$ ^ *" CotttextijaJ Selectors example с
= I < К ,J Ф f j А А» С [ + i 0hnp://www.bbd.com/stylIn/cl^: <V Google
Contextual selectors are very selective.
This example shows how to target a specific tag using the document hierarchy-
Tags only need to be descendants in the order stated in the selector; other tags can
be in between and the selector still works.
\
v
ТГ
У., -, * - ■■:: -:-: ^vy^^.- :.■:: Л-
Рис. 2.7. Указав три тега в селекторе, можно применить правило очень избирательно
Теперь, согласно нашему правилу, зеленым выделен только текст внутри тега
em внутри тега span внутри тега р. Заданное правило очень конкретное и под
него подпадает только один тег страницы. С помощью контекстных
селекторов можно указывать сколько угодно тегов, чтобы гарантировать применение
правила именно к нужному вам.
Тем не менее, обратите внимание, что при необходимости применить
правило только к слову specific, все становится немного сложнее. Как мы видим

50
ГЛАВА 2. Как работает CSS
на рис. 2.5, правило р em {color:green;} применяется к тегам em обоих
абзацев, и мы не можем применить его только к одному нужному нам тегу. Поэтому
вместо контекстного нам потребуется дочерний селектор.
Применение дочерних селекторов
В главе 1 мы упоминали, что дочерний тег является прямым потомком
содержащего его тега. Если вам нужно создать правило, применяемое только к тегу,
являющемуся дочерним для определенного тега, можно написать правило:
p>em {color:green;}
Внимание Символ > между двумя селекторами означает «дочерний для».
Такое правило будет применяться в нашем случае только к слову specific,
не влияя на другие теги em, так как specific содержится в теге em, являющемся
дочерним для тега р, а слова carder и stated - нет (рис. 2.8).
Contextual selectors are very selective*
This example shows how to target a specific tag using the document hierarchy.
Tags only need to be descendants in the order stated in the selector, other tags can
be in berween and the selector still works.
X 4*.? "■
i т.~k» "f
Рис. 2.8. В данном случае мы смогли выбрать слово «specific» с помощью дочернего селектора
Прежде чем вы закроете книгу pi начнете создавать дочерние селекторы,
обратите внимание, что (на момент написания книги) дочерние селекторы не
поддерживаются браузером Internet Explorer для Windows - он просто
игнорирует их (хотя Internet Explorer для Macintosh обрабатывает их корректно). Тем
не менее, если вы окажетесь в ситуации, как единственным способом решения
проблемы окажется дочерний селектор, имейте в виду, что есть способы
обойти эту неприятность с IE/Win. Как вы вскоре увидите, классы и
идентификаторы позволяют применить стили к любым отдельным тегам, но взамен
придется слегка пожертвовать компактностью кода.
i

Выбор тегов в иерархии документа для применения правил 51
Таким образом, пока Internet Explorer не научится правильно понимать
дочерние селекторы, в основном вы будете использовать их для создания
различных вариаций в таблице стилей при обхождении различных несовместимых со
стандартами странностей браузера IE.
Добавление классов и идентификаторов
Пока что мы разобрали правила, в которых при указании селектора с тегом
вроде р или hi правило применялось к каждому экземпляру этого тега. Мы
также научились использовать контекстные и дочерние селекторы для более
точного выбора.
Однако можно применить правила и к определенным областям документа,
указав идентификатор или класс для тегов в коде. Идентификаторы и классы
предлагают другой подход к добавлению стилей - независящий от иерархии
документа.
Простое использование класса
Позвольте показать вам, как используется класс, с помощью следующего
фрагмента кода:
<hl class="specialtext">This is a heading with the <span>same class</span>
as the second paragraph</hl>
<p>This tag has no class.</p>
<p class="specialtextn>When a tag is identified with a class, we can target
it <span>regardless<7span> of its position in the hierarchy.</p>
Обратите внимание, что мы добавили атрибут класса special text к двум
тегам. Давайте теперь применим следующий стиль к данному коду, выделив текст
specialtext жирным (рис. 2.9):
Внимание Указывая селектор класса, не забывайте ставить перед ним точку.
р {font-family: Helvetica, sans-serif;}
.specialtext {font-weight:bold;}
В результате применения правил текст обоих абзацев отображается
шрифтом Helvetica, абзац с классом specialtext выделен жирным. Текст заголовка
внутри тега hi отображается шрифтом по умолчанию, но он также выделен
жирным, так как тоже относится к классу specialtext. Обратите внимание,
что span, тег без атрибутов по умолчанию, не оказывает никакого воздействия
на облик страницы, так как мы не указали для него никакого стиля.

52
ГЛАВА 2. Как работает CSS
'1
^i^rs:':
::,-.* **> "- .'
Oass .Selectors :e>&fttpie< * . ..-.
:. _ ^ >■■ > ■--- ' у ■■■.-■ '- = ■'■- ' ■' -■■ Л ■ Z. ...'----..'■-■■. ^
■ «-..-^ Г О- Ё i -А ■ А 1-Гс1::| + |%0http://www.bbd.com/stylin/^-:0^ Google t
!-: Wr- ...■■ ■:'-■>> '■'.. ■! ■ ** ?— ~г^ хЧ'У"' " ЧТГГГ^.!Т. <■ : *":■■*. ■ ■ '- /■■*<* v " •.;; V. ; - f ^"t * "" f.. ■; .. -rr tya
„IT 'Amazon "eBay.-. .Yahoo!-.0 News'* PBS Kids
■I Й-. > Л
KL<f->-:-l ■
¥ ¥* '% ^ :ч X
This is a heading with the same class
as the second paragraph
This tag has no class.
When a tag is identified with a class, we can target it regardless of its
position in the hierarchy.
> ***;& V*^*'* ^ *'■? < "
> : ■■*^--^ ^v.-u -
■s" :■
: **Ш£-А *^§3
Рис. 2.9. Мы использовали селекхрр класса для выделения жирным двух разных тегов
Контекстные селекторы класса
Если требуется применить правило только к одном)7 абзацу класса, следует
создать селектор, сочетающий нужный тег и класс (рис, 2-10):
7 {font-family: Helvetica, sans-serif;}
N
.specialtext {font-weight:bold;}
p.specialtext {color:red;}
;r^V^>0^::V. V Г '" Г ч* ""CUss Selectors-sample —
j-.-jAfA ivimni». y-..^ у :jii i..". .,4 . ^.i-i.. ^a ■—v ■ ■■.■■■; д>. " ' - "
k*-' :■-■>? ■: l ' . -.
*X
« J*
1
IS
A A
+
http://www.bbd.eom/siylin/i "" Or Google
FLTLT
'v:
,'. ' At "■
"-:j .-: .:.тЛ-.->
-> \ £EK~ ^Ahtaiorn.,; >Bay t: YahobL , .NeWs ▼ P85^ Kid5 "
...у .-■*-■ . "^ ^-". " ■-
This is a heading with the same class
as the second paragraph
This tag has_no class.
When a tag is identified with a class,, we can target it regardless of its
position in the hierarchy.
-■.■■чЫ.ЛиУ.л —i . ■ ..-■■-——j ,,..-■■
TiSr^-y—;-.:-. ■-- i. * ■
>" £. л *: >..:-^^W^^
Рис. 2.10. Соединив тег и класс, мы получили более конкретный селектор"

Выбор тегов в иерархии документа для применений правил
53
Это еще одна разновидность контекстного селектора, так как класс должен
быть в контексте абзаца, чтобы правило было применено.
Можно сделать еще один шаг и написать такое правило (рис. 2.11):
р {font-family: Helvetica, sans-serif;}
.specialtext {font-weight:bold;}
p.specialtext {color:red;}
p.specialtext span {font-styie:italic;}
■*■' a^'*—1 -- *tt.w. ^У"" ""Ч>: J.^—'- — — 1ьч,дм»'|/^ ritwiiw... .'■ i.iwfc.i»nh^. ■■ —- •■'■■"... Г. *■■,..., ■ ■" -:" ■ «J. -■ ^ "
< > Ц&% А А-И С К + I/@http://www.bbdcom/stylin/iHOr Google "?
■iwbwji ■■ i JKu№- i_ ■ ■ n«-w ■ i it I it i hi» hi и i Л К- i , ■■!- ■■■ -. . ■ n.>WC- ч.: , . : . . ч-
Й-.Ш/ гАтайй\>еЙ# ^Yabocf ~ *fewsr* PBS,Kids * ;Д %". ? *"£ЦГ /^^ £ - -
This is a heading with the same class
as the second paragraph
This taa has no class.
When a tag is identified with a class, we can target it regardless of Its
position in the hierarchy.
-^. * nJi
> >- -^ ^: :;■ -^, л|
■ ,^^^^^л1^н^-^^^~?#л;^г.З
Рис. 2.11. Добавив второй селектор, можно добиться высочайшей точности при выборе тега
для применения правила
Слово regardless выделено жирным и курсивом, так как находится внутри
тега span, расположенного в абзаце с классом specialtext. Если теперь
потребуется создать правило для применения к span внутри тега hi, можно изменить
его двумя способами. Самое простое - не связывать класс с каким-го
определимым тегом (рис. 2.12).
.specialtext span {font-style:italic}
Теперь слова same и class в заголовке также выделены курсивом. Удалив р из
селектора, мы отказались от требования, чтобы класс был прикреплен к опре-
дечениому тегу, поэтому теперь правило действует для обоих тегов span, Co-
"тасно этому правилу, тег span может быть потомком любого тега с классом
specialtext.
Преимуществом данного подхода является возможность использовать класс
вне зависимости от тега, к которому он прикреплен, избегая таким образом
ограничений наследуемости иерархии.

54 ГЛАВА 2. Как работает CSS
**
■:>:'-:"^ ' .-* к г. :Glass,Selectors exampleл :и*а*^х-Т* " ::., ^.\:,\\
<.*.>** ф j: ^ A g 6-fcl + [t^hup://vvvvw.bbdxom/stylin/<^' Or Google
This is a heading with the same c/ass
as the second paragraph
This tag has no class.
When a tag is identified with a class, we can target it regardless of its
position in the hierarchy.
^т^.^ш- **r?, y.£:, ,">:-:ш^ ■ ■•.-. ■ ;-.;->~- ж.. -:: £?я;££&*Я
Рис. 2.12. Указав менее специфичный селектор, мы применили правило и к тегу span заголовка
Недостатком данного метода является возможность применения стиля
и к другим ненужным тегам, так как это правило является менее конкретным.
То есть, если впоследствии вы добавите span внутрь другого тега с классом spe-
cialtext, например:
<div class="specialtext">In this div, the span Lag <span>may or may not</
span> be styled.</div>
, <u .1 A \ A !|^fT1^0hnp://vvvvw.bbd.com/s^ Google
^YfJ^'
**»**•
. *»> reg^^^Hc^K.-WtwsV- 'PeSKWsi
•V;
This is a heading with the same class
as the second paragraph
This tag has no class.
When a tag is identified with a class, we can target it regardless of its
position in the hierarchy.
In this div; the span tag may or may not be styled.
TT£~^
ш£
IS&^t-m&iSm&r-V
. yi^ s- л.,
л- , --X->.. ■*-■■& ■ ft
':.>-• ..W.
ЙТЕ
i ; ——a
■щ. -. »..4i i i ■ Л WW
Рис. 2.13. Чем менее конкретен селектор, тем выше вероятность неадекватного применения правила

Выбор тегов в иерархии документа для применение правил 55
текст внутри span будет также выделен курсивом, что может оказаться и
нежелательным (рис. 2.13).
Если вы не хотите добавлять стиль к новому тегу, можно использовать
второй, более точный подход (рис. 2.14):
p.specialtext span, hi.specialtext span {font-style:italic}
This is a heading with the same class
as the second paragraph
This tag has no class.
When a tag is Identified with a class, we can target it regardless of its
position in the hierarchy.
In this div, the span tag may or may not be styled.
Рис. 2.14. Используя два сгруппированных правила, можно выбрать определенные целевые теги
Теперь правило действует только на два нужных тега, а на новый не
распространяется. Возможно, вам это покажется слишком сложным всего для
четырех строк текста, однако такие приемы, несомненно, могут понадобиться вам
при работе с полноценной страницей и таблицей стилей.
Знакомство с идентификаторами
Идентификаторы указываются так же, как классы, но с добавлением # вместо
точки.
rspecialtext {fone-weight:bold;}
Если абзац помечен идентификатором, например, так:
<р id="uniquetext">3To особенный текст</р>
соответствующий контекстный селектор выглядит следующим образом:
p#uniquetext {здесь правила CSS}

56 ГНАВ А 2. Как работает CSS
За исключением этого, идентификаторы работают так же, как классы, и все,
описанное выше, к ним применимо. Так в чем же разница?
Разница между классами
и идентификаторами
Пока что мы использовали классы и идентификаторы так, что у вас могло
создаться ощущение их взаимозаменяемости - ведь мы применяли их для
идентификации тегов в коде. Однако идентификатор является более мощным
средством, чем класс, как в шахматах ферзь является более мощной фигурой,
чем пешка. В одной странице может быть только один уникальный
идентификатор (допустим, id="mainmenu"), тогда как одинаковых классов
(например. class="strongparagraph") может быть сколько угодно.
Таким образом, если требуется идентифицировать уникальный элемент
кода, например главное меню навигации, к которому требуется применить
отдельный набор стилей, используйте идентификатор. Для идентификации
нескольких элементов и применения к ним одного стиля применяйте класс.
Идентификаторы также можно использовать для прикрепления JavaScript
к нужному тегу (ьгапример, для активации анимации DHTML при наведении
указателя мыши на ссылку). Атрибут id пришел на смену устаревшему атрибуту
паше, использовавшемуся для этих целей ранее. Стоит отметить, что при
использовании JavaScript особенно важно следить, чтобы связанные с ним
идентификаторы указывались в коде страницы только один раз, иначе JavaScript
может вести себя очень непредсказуемо.
Не переусердствуйте с классами
Рекомендуем вам добавлять классы и идентификаторы бережливо, например,
прикреплять их к div, содержащим основные разделы кода и затем добавлять правила CSS с
помощью контекстных селекторов, начинающихся с упоминания нужного класса или иден-
тиф и катера.
Постарайтесь избегать класситсов (как называет это явление Джеффри Зельдман), то
есть переизбытка классов и идентификаторов в коде, когда они добавляются к каждому
тегу. Ведь это практически ничем не лучше применения тегов font и прочих
презентационных элементов. Если вы уже успели приобрести нехорошую привычку расставлять id
или class возле каждого тега, взгляните на код страницы, рассмотренной в главе 1,
держа в уме все полученные знания. Вы увидите, что довольно легко можно добавить нужные
стили к любому тегу,_не применяя дополнительные классы или идентификаторы.
Если вы используете идентификаторы и классы только для указания основных
разделов разметки или тегов, идентифицировать которые другим способом невозможно, вы
на правильном пути. Так вы сможете еще и упростить применяемые таблицы стилей,
что немаловажно.

Вы&ор тегов в иерархии документа дш применения правил 57
Поясним, что на странице можно использовать несколько атрибутов id, но
при условии, что они будут иметь разные значения, тогда как один класс
можно применить к любом)' числу тегов. Давайте теперь взглянем на другие
селекторы, которые являются не менее мощными средствами, чем контекстные
классы и идентификаторы, хотя вы и не будете использовать их так часто.
Универсальный селектор
Селектор звездочка (*) означает «все». Если написать правило:
* {color:green;}
весь шрифт страницы будет зеленым, если только вы не зададите другой цвет
в отдельном правиле. Данный селектор можно также использовать для выбора
недочёрних элементов:
р * em {font-weight:bold;}
Этим правилом мы указываем, что любой тег em, не являющийся дочерним
(а хотя бы внучатым) для тега р, попадает под действие правила. При этом
родительским тегом для em может быть любой тег.
Смежный сестринский селектор
Такое правило действует на тег. следующий за определенным сестринским
тегом (сестринские теги расположены на одном уровне иерархии, то есть имеют
один родительский тег). Вот пример:
hi + р {font-variant:small-caps} v
Применив это правило к коду:
<div>
<hl>All about siblings selectors</hl>
<p>There must be az least cwo selectors, with a + sign before the last
ne.</p>
<p>The targeted selector will only be affected if ic is a sibling to, and
preceded by, the one before the + sign.</p>
</div>
ibi получим результат, показанный на рис. 2.15, так как только перед первым
абзацем находится сестринский тег hi.

58 ГЛАВА 2. Как работает CSS
■ :Ч^=>~ Й ф'Г ;а■: г. А ^Г^^СД-10hnp://www.bbdcom/styli v Or Google
All about siblings selectors
There must be at least two selectors, with a + sign before the l ast one.
The targeted selector will only be affected if it is a sibling to, and preceded by,
the one before the + sign.
- o,>i«.-T'' ' 'Ж«!1Ж»*..г-.!*^>*:-"-:;*. . ■■■■ ,i"'»:,.4i;;;.?iii'.!.,*;iu.\A*' . .
Рис. 2.15. Сестринские селекторы выбирают теги, исходя из предшествующего тега в коде, и оба
тега должны находиться на одном уровне иерархии
Как видно, тег р, расположенный следом за тегом hi, отвечает заданному
условию правила и поэтому отображается маленькими заглавными буквами.
Второй тег р, не смежный с hi, не попадает под действие правила. (Все это не
относится к Internet Explorer для Windows).
Селекторы атрибутов
Селекторы атрибутов используют атрибуты тега. В основном они
используются в XML, но также применяются и в XHTML.
Правило:
img [title] {border: 2px solid blue;}
указывает, что любой тег img с атрибутом title, например:
<img src="images/sunset.jpg" alt=nLahina Sunset" title="Lahina Sunsetn>
должен отображаться с синей рамкой и толщиной 2 пиксела вне зависимости
от содержания атрибута title.
Атрибут title содержит текст, который отображается во всплывающей
подсказке при наведении указателя мыши на изображение. Обычно текст title
дублируется в атрибуте alt, содержащем описание изображения,
отображаемое, если само изображение загрузить не удалось. Значение атрибута alt
также озвучивается программами считывания информации с экрана.
Можно задать стили только для тегов с определенными значениями
атрибутов. Например, правило:

*,
Выбор тегов в иерархии документа для применения правил 59
img [alt="Stylin logo"} {border: 2px solid blue;}
добавляет рамку вокруг изображения, значением атрибута alt которого
является текст " Sty 1 in logo", иными словами, если в коде есть запись вроде
следующей:
<img src="iinages/stylin_logo" alt="Scylin logo">
Это правило становится еще более полезным, если знать, что в качестве
значения атрибута можно указать только первые буквы текста. Но в этом
случае прием сработает, если «общая» часть текста значения атрибута будет отде-
1ена от «отличающихся». Иными словами, при наличии кода:
<img src="images/carl.gif" alc="car-coyota-prius">
<img src="images/car2.gif" ait="car-honda-accord">
использовав символ | в правиле GSS:
img [alt|="car"] {border: 2px solid blue;}
мы добавим к этим двум изображениям синюю рамку толщиной в 2 пиксела.
Кстати, при этом рамка будет добавлена и к следующему изображению:
<img src="images/car_montage.gif" alt="car">
несмотря на то, что в данном примере значение тега alt не имеет
дополнительного расширения.
римечание Для простоты примера здесь мы используем краткие значения тега alt,
однако на самом деле рекомендуем вам применять полные и информативные
значения, так как это повысит доступность вашего сайта.
Подведем итог по селекторам
"1так, мы рассмотрели несколько способов указать тег для применения прави- ••
та CSS: с помощью селекторов, селекторов классов и идентификаторов, селек-
оров с комбинацией того и другого, и селекторов атрибутов.
Одной общей чертой этих селекторов является то, что все они ссылаются
на данные в коде - тег, класс, идентификатор, атрибут или значение атрибута.
Чо что произойдет, если мы захотим добавить стиль к событию, допустим, при
наведении указателя мыши на ссылку? То есть, требуется добавить правила ис-
одя из происходящих событий. Что ж, думаем, вы уже догадались, что такой
гпособ существует.

60 ГЛАВА 2. Как работает CSS
Псевдоклассы
Псевдоклассы являются классами, фактически не прикрепленными к тегам кода.
Они вызывают правила при совершении того или иного события. Наиболее
часто таким событием является наведение указателя мыши на объект или его
щелчок. При создании страниц для современных браузеров (к сожалению, кроме
Internet Explorer, по крайней мере, без добавления специальной функции
Javacript), с помощью псевдоклассов легко «научить» объекты реагировать иа
наведение указателя мыши. Например, можно использовать псевдоклассы для
добавления рамки к изображению, когда пользователь наводит на него указатель.
Псевдоклассы ссылок на якорь
Наиболее часто псевдоклассы используются с гиперссылками (тегами) для
таких эффектов, как изменение цвета или исчезновение подчеркивания при
наведении на них указателя.
Для ссылок на якорь имеется четыре псевдокласса, так как ссылки всегда
находятся в одном из четырех состояний:
• Link - просто ссылка, сидит и ждет пока ее кто-нибудь щелкнет;
• Visited - пользователь уже щелкнул эту ссылку, просмотренная ссылка;
• Hover - указатель мыши в данный момент наведен на ссылку;
• Active - ссылка в момент щелчка.
А вот пример соответствующих селекторов псевдоклассов для этих
состояний:
• a:link {color:black; };
• a:visited {color:gray;};
• a:hover {next-decoration:none;};
• a:active {color:navy}.
Внимание Двоеточие в селекторе обозначает псевдокласс.
Итак, не будем вдаваться в споры о самых подходящих цветах ссылок, а
лучше посмотрим на данные правила. Согласно им, изначально ссылка
отображается черным шрифтом (и по умолчанию имеет подчеркивание). Когда
пользователь наводит на нее указатель мыши (состояние hover), подчеркивание
удаляется, шрифт текста ссылки остается черным. Когда пользователь щелкает
ссылку (состояние active), она меняет цвет на синий и после этого отображается

Псевдоююссы 61
серым до тех пор, пока из браузера не будет удален или обновлен журнал
просмотренных ссылок. С помощью таких псевдоклассов мы имеем полный
контроль над внешним видом ссылок.
Но самое интересное начинается, когда вы используете псевдоклассы
ссылок на якорь как часть контекстных селекторов. Например, для создания
различных эффектов и облика разных групп ссылок - панели навигации, нижнего
колонтитула, боковых панелей и ссылок в тексте и т.п. Мы подробнее
рассмотрим применение псевдоклассов для добавления стилей ссылкам чуть ниже,
а пока отметим следующие моменты:
• все четыре состояния задавать необязательно - если вы хотите указать
особенности только состояния link и hover, в этом нет ничего
противоправного; во многих случаях нет смысла в отображении ссылок как
просмотренных;
• браузер может пропустить некоторые из этих правил, если вы
укажете их в порядке, отли*гно\ т нашего: link, visited, hover, active - можно
запомнить этот порядок с помощью возгласа LoVe-HA!
• для создания всевозможных эффектов при наведении указателя с
этими псевдоклассами можно использовать любой селектор (не только а);
например:
р:hover {background-color: gray}
Благодаря последнему правилу при наведении указателя мыши на абзац его
фоновый цвет изменится на серый.
Не забывайте» что старые браузеры не поддерживают эффекты наведения
указателя на любые объекты кроме ссылки на якорь.
Другие полезные псевдоклассы
Назначением исевдоклассов является имитация добавления классов коду при
наступлении определенных условий. Мы рассмотрели принцип их применения
хтя различных событий: щелчка мышью или наведения указателя па объект, но
псевдоклассы можно применять и исходя из определенных условий в коде.
:FIRST-CHILD
х:first-child /* пс вместо х следует подставить нужный тег */
Такой псевдокласс выбирает первый дочерний тег х. Например, правило:
liv. weather strong:first-child {color:red;} *

62 ГЛАВА 2. Как работает CSS
для кода:
<div class="weather">
It's <strong>very</strong> hot and <strong>incredibly</strong> humid.
</div>
будет применено для слова very, которое выделится красным, но не для слова
incredibly.
-.FOCUS
х: focus /* где вместо х следует подставить нужный тег */
Фокус такого элемента как поле или форма для ввода текста означает, что
пользователь его щелкнул. Например, код:
input:focus {border: lpx solid blue;}
добавляет синюю рамку вокруг такого поля, когда его щелкает пользователь.
Псевдоэлементы
Псевдоэлементы создают впечатление, что к коду добавляются
дополнительные элементы, несмотря на то, что на самом деле никаких дополнительных
элементов нет. Вот несколько примеров.
При помощи такого псевдокласса:
х: first- letter /* где вместо х следует подставить нужный тег */
p:firstletter {font-size:300%; float: left;}
создается большая прописная буква в начале абзаца.
А этот псевдокласс:
■
х: f irs t -1 ine /* где вместо х следует подставить нужный тег */
позволяет применить стиль к первой строке (абзаца или текста):
р:first-line {font-varient:small-caps}
Данное правило указывает, что первую строку следует отображать
маленькими заглавными буквами. На страницах с гибкой разметкой, когда в
зависимости от размера окна браузера длина строки варьируется, формат слов
автоматически меняется и заглавными буквами отображается только первая строка.

Наследуемость 63
Эти два псевдокласса:
х:before к хrafter
добавляют определенный текст перед элементом и после него. Таким образом,
код:
<hl class="age">25</hl>
и стили:
hi.age:before {content:"Возраст: "}
-1.age:after {content:" лет"}
дают Возраст: 25 лет. Обратите внимание на пробелы внутри текста,
обеспечивающие место для вставки нужного контента. Эти селекторы особенно
удобно использовать, когда содержимое тегов генерируется, например, для вывода
запроса к базе данных.
Примечание Есть еще четыре псевдокласса: : lang, применяемый к содержимому с
указанным определенным кодом языка и псевдоклассы : left, : right, : first,
применяемые к печати содержимого, а не к его просмотру на экране. Они редко
используются и слабо поддерживаются браузерами, поэтому мы не будем
подробно их описывать.
Обратите внимание, что поисковые системы не могут выбирать
содержимое псевдоэлементов (так как они не встречаются в коде). Не используйте
псевдоэлементы для указания важного контента, который должен быть виден для
поисковых систем.
Наследуемость
Наследуемость в CSS означает передачу чего-либо от предков к потомкам. Но
в отличие от наследства в виде зеленых купюр, которое вы ждете от богатого
дядюшки, в CSS по наследству передаются значения различных свойств.
Как вы помните из первой главы, тег body является предком всех остальных
тегов в коде страницы. Поэтом)', благодаря наследуемости CSS, если мы доба-
им к тегу body стиль:
"—*dy {font-family: verdana, helvetica," sans-serif; color:blue;}

64 ГЛАВА 2. Как работает CSS
текст во всех элементах страницы будет отображаться синим цветом и
шрифтом Verdana (или другим указанным при отсутствии Verdana) вне зависимости
от сложности иерархии. Эффективность этого способа налицо: вместо того
чтобы указывать нужный шрифт для каждого тега, мы просто зададим его один
раз в качестве основного для всего сайта. Затем нам потребуется только
добавить свойства для тегов, в которых мы хотим использовать другой шрифт.
Многие свойства CSS наследуются точно так же, особенно текстовые
атрибуты. Тем не менее, некоторые CSS-свойства не наследуются, так как в этом
просто нет смысла. К ним, в основном, относятся свойства выравнивания
и отображения блочных элементов: рамки, поля, отступы и т.п. Представьте,
что мы хотим создать боковую панель с текстом. Можно сделать это с помощью
div (подобия блока) с несколькими абзацами и добавить к div красную рамку
толщиной 2 пиксела. Однако нам совсем не требуется, чтобы эга рамка
наследовалась для каждого абзаца, и этого не будет - свойства рамки не наследуются.
Более подробно мы поговорим о наследуемости в главе 4 при знакомстве
с блочной моделью.
Примечание Пока что просто помните, что стили, относящиеся к шрифту и его цвету,
наследуются элементами-потомками. Стили же, относящиеся к внешнему виду
блоков, созданных с помощью div, абзацев и прочих элементов, - рамки, поля,
отступы и фоновый цвет - не наследуются.
Также будьте предельно осторожны при работе с относительными
единицами указания размера элементов - процентами и em. Если вы указали размер
шрифта равный 80%, для элемента, расположенного внутри другого элемента.
с размером шрифта 80%, реальный размер шрифта первого составит 64% от
базового (80% из 80%). Преимущества и недостатки абсолютных и
относительных величин мы рассмотрим в главе 3.
Каскад
Итак, теперь мы готовы обсудить один из самых сложных аспектов CSS - кос-
*
кад. Если вам этот раздел покажется слишком скучным, пропустите его и
переходите к врезке «Простой обзор каскадов от Чарли». В ней приведено
доступное описание, которого на первых порах вам может оказаться достаточно.
Как следует из названия, каскад в каскадных таблицах стилей подразумевает
передачу стилей от одного элемента документа к другим вниз по иерархии,
и позволяет браузеру решить, какой из многих возможных источников
определенного свойства определенного тега следует использовать.

Каскад 65
Каскад является мощным механизмом. Понимание принципа его действия
оможет вам освоить CSS и применять его наиболее экономично и логично. Вы
"можете создавать документы, выглядящие в браузере именно так, как вы
задумали, предоставляя при этом пользователю определенный контроль над их
знешним видом.
сточники стилей
Есть несколько источников стилей. Во-первых, нетрудно предположрггь, что
у ораузеров существует собственная- таблица стилей, то есть таблица стилей по
/молчанию, спрятанная внутри и автоматически применяющая определенный
стиль к некоторым тегам при отсутствии авторской таблиц стилей. Например,
^екст внутри тега hi отображается крупным и жирным шрифтом, теги em
выделяются курсивом, к спискам добавляются маркеры.
Примечание Более подробные сведения о внутренних таблицах стилей браузеров можно
найти на сайте Эрика Мейера (www,meyerweb,com/eric/thoughts/2004/09/
15/emreallyem-undoing-htmlcss).
Если на вашем компьютере установлен браузер Firefox, поищите файл html.css,
одержащий стили по умолчанию. Вы можете даже изменить его при желании.
Кроме того, имеются пользовательские таблицы стилей. Пользователь сам мо-
-г:ет создать таблицу стилей, автоматически применяемую ко всем просматрива-
1ым страницам. Это довольно удобно, например, для лиц с ослабленным
зрением, так как они могут увеличить базовый размер шрифта для всех сайтов или
•изменить цветовую гамму, сделав ее более контрастной. Добавить пользователь-
-ую таблицу стилей в браузер Internet Explorer можно, выбрав в главном меню
раузера Tools ** Internet options*.. (Сервис »* Свойства обозревателя...) и щелк-
лъ кнопку Accessibility (Оформление). Затем можно указать файл с
пользовательскими таблицами стилей. Например, добавить такое правило:
" dy {font-size:200%}
дваивающее размер шрифта всех элементов - наследуемость в действии.
Поэтому важно указывать размер шрифта в относительных, а не в абсолютных
диницах, чтобы пользователь мог вносить подобные изменения. Более
подобно мы коснемся этой темы в главе 3.
И не будем забывать про авторскую таблицу стилей, созданную Web-дизайне-
м. Мы уже обсудили способы ее добавления - с помощью ссылки, вложения
з начале страницы и линейного добавления стилей непосредственно к нужным
егам.

66 ГЛАВА 2. Как работает €$$
Вот порядок, в котором браузер производит поиск источников стилей:
• таблица стилей браузера по умолчанию;
• пользовательская таблица стилей:
• авторская таблица стилей;
• авторские вложенные стили;
• авторские строчные стили.
Внимание Каскад задает порядок просмотра стилей и их приоритет при наличии
нескольких источников стилей.
Это общие принципы каскадов, но на самом деле есть определенные
правила, которые контролируют каскад.
*
Правила каскада
Помимо порядка применения*Стилей следует также помнить о нескольких
правилах работы каскада.
Правило каскада 1. Найти все объявления, применяемые к элементу или
свойству. При загрузке каждой страницы браузер просматривает все ее теги,
чтобы убедиться, что правило предназначено для него.
Правило каскада 2. Сортировка по порядку и весу. Браузер
последовательно проверяет все пять источников, применяя найденные свойства. Если
свойство задано вновь в последующем источнике, его значение изменяется, и так
до тех пор, пока не будут проверены все пять возможных источников свойств
для каждого тега на странице. На экран выводится действие свойства с
последним найденным значением.
В табл. 2.1 показан этот процесс для страницы с несколькими тегами р.
Предположим, что к двум из этих тегов р добавлены строчные стили, задающие их
цвет красным.
В данном случае, текст всех тегов р отображается синим шрифтом, за
исключением имеющих локальные стили - они отображаются красным.
Таблица 2.1. Пример каскада
Расположение Тег Свойство Значение
Таблица стилей по умолчанию р color black
Пользовательская таблица стилей
Авторская таблица стилей р color blue
Авторские вложенные стили
Авторские линейные стили р color red

Каскад 67
Конечно, не все так просто. Следует также иметь в виду и вес объявления.
Повысить важность правила можно таким образом (обратите внимание на
восклицательный знак):
7 {color:red; !important; font-size:12pt}
Добавив ! important через пробел после нужного правила но перед точкой
с запятой мы повысим важность или вес этого правила.
Теперь вес этого правила повышается и текст отображается именно
красным, даже если далее он будет переопределен другим правилом. Подумайте
дважды прежде чем использовать ! important - ведь помеченное так правило
бгдет иметь приоритет перед пользовательскими стилям, заданными,
возможно, по весьма веской причине.
Простой обзор каскадов от Чарли
Согласно упрощенной версии объяснения принципов работы каскада, вам следует
запомнить три правила.
Правило 1. Селекторы с идентификаторами имеют приоритет перед селекторами
с классами, которые, в свою очередь, приоритетнее селекторов только с тегами.
Правило 2. Если одно и то же свойство для одного тега указано в каскаде несколько
паз, строчные стили имеют приоритет перед вложенными, которые, в свою очередь,
риоритетнее прочих стилей. При этом правило 2 проигрывает правилу 1 - если селек-
~оры более специфичны, они имеют более высокий приоритет.
Правило 3. Явно указанные стили имеют приоритет перед наследуемыми. Например,
унас есть код:
<civ id="cascadedeiRO">
7 id^'inheritancefact' ^Наследуемость икеет <еш>нкЗкий</ет> приоритет
- каскаде</р>
< div>
3 этом случае правило:
—" body div#cascadedemo p#inheritancefac" {color:blue}
зиводит к тому, что весь текст, включая низкий, отображается синим цветом, так как
ez наследует цвет родительского тега р. После того как мы добавим следующее прави-
э для em:
^r {color:red}
— <ст внутри тега em станет красным. Наследуемый стиль имеет низкий приоритет пе-
:2д явно указанным стилем.
SwT и все правила каскада. Не так уж и сложно, верно?

68 ГЛАВА 2. Как работает CSS
Правило каскада 3. Сортировка по конкретности. Конкретность правила
определяет точность его применения. Если таблица стилей содержит правило:
р {font-size:12рх}
и правило:
»
р.largetext {font-size:16рх}
то текст:
<р class=" largetext ">Пржер текста</р>
будет отображен шрифтом в 16 пикселов, так как второе правило является
более конкретным, и поэтому имеет более высокий приоритет.
А что произойдет, если вместо этого мы добавим следующие стили:
р {font-size:12px}
.largetext {font-size:16px}
- Оба эти правила применимы к нашем)' тегу, но побеждает правило с
указанным классом - текст отображается шрифтом в 16 пикселов. И вот почему:
числовая конкретность тега равна 1, кдасс обладает конкретностью 1-0. Вот как
можно подсчитать конкретность любого селектора - сделать это очень просто
с помощью трех значений: А-Б-В.
Подсчет происходит следующим образом.
1. Добавьте одну А к каждому идентификатору в селекторе.
2. Добавьте одну Б к каждому классу в селекторе.
3. Добавьте одну В к каждому имени элемента (имени тега).
4. Прочитайте готовый результат как число из трех цифр. Например, вы
можете получить результат 0-1-12, а стиль 0-2-0 окажется более
конкретным.
Взглянем на конкретность этих примеров, выраженную в числовом виде:
р {color:red} /*0-0-1 конкретность-1*/
p.largetext /*0-l-l конкретноегь= 11*/
рп largetext /*l-0-l конкретность=101*/
body p£largetext /* 1-0-2 конкретность=102*/
body p#largecext til.mylist /*1-1-Зконкретность=113*/
body p#larg_euext ul.mylist li /*1-14конкретносгь=114*/
Каждый последующий приведенный здесь пример обладает большей
конкретностью, чем предыдущий.

Обэдвлення правил 69
Правило каскада 4. Сортировка по порядку. Если есть два правила с
одинаковым весом, приоритет имеет правило, расположенное в документе ниже.
Примечание Конкретность важнее порядка расположения, поэтому более конкретное
правило, распложенное в документе выше, имеет приоритет перед менее
конкретным правилом, расположенным ниже.
Вот это и есть каскад, понять суть которого довольно непросто, особенно
е имея навыков работы с CSS. Поэтому мы предлагаем вашему вниманию
упрощенную версию правил каскада, применимую в 98% случаев. Если, применяя
упрощенную версию, вы обнаружите, что что-то происходит не так, обратитесь
л описанным выше полным правилам.
Объявления прави
~7ока что мы обсуждали, как использовать селекторы правил CSS при выборе
-егов, но вторая половина правила CSS - объявление - оставалась вне поля
зрения. Мы применяли некоторые объявления для иллюстрации селекторов,
^*о не объясншш их подробно. Теперь давайте взглянем на объявление
поближе.
На рис. 2.2 с диаграммой структуры правила CSS видно, что объявление со-
оит из двух частей: свойства и значения. Свойство указывает, какой аспект
~лемента затронут правилом (цвет, высота и т.п.), а значение указывает смысл
гзойства (зеленый цвет, 12 пикселов и т.п.).
У каждого элемента есть несколько свойств, которые можно изменить с
помощью CSS, Например, мы можем использовать свойство font-size для шриф-
-а. но не для изображения. Так как в CSS используется лишь несколько типов
--:ачений, взглянем на них сейчас:
• слова - например, слово bold в правиле font -weight: bold.
в числовые значения - числовые значения обычно указываются с
единицами измерения, например в правиле font-size: 12рх 12 является
числовым значением, а рх - единицей измерения.
• цветовые значения - цветовые значения указываются в шестнадцатерич-
ном формате, например color:#336699.
Говорить о значениях-словах пока рано, так как мы их практически не
использовали, и они являются специфичными для каждой ситуации. Числовые
=г£ и цветовые значения можно указывать только определенным образом.

70
ГЛАВА 2. Как работает CSS
Числовые значения
Числовые значения можно использовать для указания размера (высоты,
ширины, толщины и т.д.) всех типов элементов. Такие значения можно разделить на
две группы: относительные и абсолютные.
Абсолютные значения (табл. 2.2) описывают фактический размер
(допустим, 5 см), тогда как относительные представляют собой лишь размер,
относительно другого элемента.
Таблица 2.2
Абсолютное значение
Обозначение
in
cm
mm
Pt
pc
px
Пример
height:6in
height :40cm
height:500mm
height:60pt
height:9Ope
height:72px
3kbi
2.54
25,4
72
6
72
Эквивалент в дюймах
Дюймы
Сантиметры
Миллиметры
Пункты
Пики
Пиксели
При добавлении CSS для элементов фиксированного размера, например
изображений, мы используем только пикселы. Вы можете выбрать и любой другой
вариант, но учтите, что пиксел является единственной абсолютной единицей
измерения, используемой в примерах этой книги, кроме стилей для печати: так
как размер бумаги измеряется в сантиметрах или дюймах, имеет смысл
использовать для разметки печатной версии страницы такие же единицы.
Если абсолютные единицы измерения довольно очевидны, то
относительные (табл. 2.3) требуют дополнительного объяснения.
Таблица 2.3
Относительное значение
em
ex
проценты
Единица измерения
ех
em
%
Пример
height:1.2em
height:бех
height:120%
Единицы em и ex используются для указания размера. Em равняется высоте
текстового поля для шрифта, поэтому его размер зависит от используемого шрифта.
Ех является эквивалентом высоте строчного символа х выбранного шрифта.
Проценты удобно использовать для указания ширины элементов-контейнеров,
например div, относительно ширины окна браузера, что позволяет создавать
«гибкую» разметку, а также для указания размера межстрочных отступов. Более
подробно мы поговорим об этом в главе 3.

Объявления правил 71
Почему следует использовать em для указания размера шрифта
Есть два важных преимущества при использовании относительных единиц вроде em,
для указания размера шрифта:
• можно использовать наследуемость и указать базовый размер шрифта 1 ёт, а
размеры шрифта всех прочих элементов указывать относительно его: например, размер
шрифта абзаца - 0,8 em, а размер шрифта ссылок - 0,7ет; так задаются
пропорциональные размеры шрифта; обратите внимание, что IE не поддерживает
автоматическое изменения с помощью em при указании размера шрифта заголовков hl-h6 - для
них придется указать конкретный размер, иначе они останутся с фиксированным
размером по умолчанию; при таком подходе, если вам потребуется увеличить размер
шрифта всех элементов, просто измените базовое значение для body, указав,
например, 1,2ет;
• если вы не зададите размер шрифта с помощью относительных единиц,
пользователи не смогут менять размер шрифта, что помешает людям с ослабленным
зрением просмотреть ваш сайт; поэтому советуем указывать размер шрифта с помощью
em, а не в абсолютных единицах, допустим, пикселах.
ветовые значения
Лгя указания цвета можно использовать значения нескольких типов.
Шестнадцатеричные (#RRGGBB или #RGB). Если вы знакомы с языками
гпюграммироваиия вроде C++, PHP. JavaScript, вы имеете представление о ше-
г~надцатеричном выражении цветов. Формат записи таков: #RRGGBB.
В таком значении первые две цифры задают красный, вторые две - зеленый,
а последние - синий цвет. Компьютеры используют двоичную систему счисле-
~.я, поэтому шестнадцатеричное число кратно 16 (2 в 4 степени) за счет приме-
~ния комбинации цифр (0-9) и букв (A-F - для чисел 11-16)). Так как цвет в дан-
- ч случае представляется парой шестнадцатеричных чисел, для каждого цвета
_ /стимо 256 (16x16) значений, в целом - 16 777 216 цветов (256x256x256). Наи-
-~r.ee богатый выбор цветов доступен именно при использовании шестнадцате-
- ых значений. Однако зачастую можно обойтись и без них. Не забудьте доба-
символ решетки # вначале.
Итак, например, чистый красный цвет обозначается значением #FF0000,
-тш - #OOFFO0, зеленый - #0000FF. Можно также использовать и сокращен-
~ "i формат: #RGB.
При использовании значения, в котором каждая пара состоит из одинаковых
- чений, допустим #FF3322, можно использовать сокращенный формат: #F32.
ямечание На первый взгляд угадать цвет по шестнадцатеричному значению сложно. Но
если присмотреться к значениям, то это вполне возможно. Допустим, #7СА9ВЕ
представляет темный сине-зеленый цвет. Давайте взглянем на первый символ
каждой цветовой пары: 7, А, 3. Мы видим, что красный чуть ниже половины

72 ГЛАВА 2. Как рз&та&т €55
максимального значения 16, тогда как зеленый и синий имеют большие,
примерно одинаковые значения. Обладая такой информацией, угадать цвет
гораздо легче.
Проценты RGB (R%, G%, B%). Здесь мы указываем процентное значение
каждого цвета:
R%, C%, В%
Допустимы значения от 0% до 100%. Несмотря на то, что при этом мы
получаем всего лишь миллион цветов на выбор, для большинства ситуаций этого
более чем достаточно. Кроме того, так гораздо легче понять, что за цвет
представлен значением.
Например, 100%, 0%, 0% означает чистый красный цвет, 0%, 100%, 0% -
чистый зеленый, а 46%, 76%, 80% похоже на описанный во врезке темный
сине-зеленый цвет
Ключевое слово. Как вы'поняли из приводимых выше примеров, можно
просто указать цвет с помощью ключевого слова. Однако здесь есть
определенные ограничения. Точных спецификаций W3C по поводу отображения того
или иного цвета (например, olive (оливковый) или lime (лайм)) нет, и каждый
производитель браузеров делает это по-своему. Вот допустимые значения: aqua,
black, blue, fuchsia,gray, green, lime, maroon,navy, olive, purple,red, silver,
teal, white,yellow.
Большинство современных браузеров поддерживает больше цветов
(обычно до 140), но если вы указываете цвет с помощью ключевого слова, полностью
полагаться можно только па эти 14.
Мы обычно используем шестнадцатеричные значения. Чтобы вам было
легче сориентироваться в шестнадцатеричных значениях цветов, посетите сайт
w\^webcolors.freeserve.co.uk% там вы найдете палитры цветов и
соответствующие значения.
Не стоит ограничиваться безопасными для Сети цветами
Если вы используете Macromedia Dreamweaver или другой визуальный Web-редактор,
обычно выбор цветов ограничен 216-цветной палитрой, содержащей, в основном,
более яркие цвета и предлагающей скудный выбор темных цветов. Использовать эту
палитру безопасных для Сети цветов можно инженеру, но не дизайнеру.
Шестнадцатеричные значения используют только значения 0, 3,6, 9, С и F. Такая палитра ограничена
возможностями 8-разрядного VGA-монитора, и на протяжении многих лет мы
пользовались только ею. Но сегодня лишь 1% интернет-пользователей (согласно данным
www.thecoiinter.com) пользуется 8-разрядными мониторами, поэтому смело
используйте любые нужные вам цвета.
\

"лшШй I. Стили для шрифт в
текста
Немалая часть Web-дизайна связана со шрифтами - абзацы, заголовки, списки,
еню и формы. В результате, описываемые в этой главе свойства чрезвычайно
зажны, если вы хотите создать профессионально выглядящий сайт. Шрифт,
оольше чем любой другой фактор, свидетельствует о его качестве . Графика
.вляегся лишь сахарной глазурью, покрывающей торт, хороший дизайн
начинается С типографики.
Если, прочитав название главы, вы задали себе вопрос: «А разве шрифт
ч текст не одно и то же?», отвечаем - нет.
Шрифты являются различными типами гарнитуры шрифтов. Каждый шрифт .
представляет собой набор букв, цифр и символов с уникальным внешним видом.
Все шрифты относятся к определенным наборам, описывающим их внешний вид:
с засечками, без засечек и моноширинный. Наборы шрифтов состоят из
семейств, например Times или Helvetica.B свою очередь, семейство шрифтов
можно разделить на различные гарнитуры, являющиеся вариациями базового
семейства, например Times Roman, Times Bold, Helvetica Condensed, Bodoni Italic и т.д.
Текст же - это просто блок из букв, как это предложение или заголовок
главы, вне зависимости от используемого шрифта.
В CSS есть как свойства, относящиеся к шррхфту, гак и свойства,
относящиеся к текст): Свойства шрифта связаны с размером и внешним видом набора
шрифтов. Они описывают, например, используемое семейство, размер, выде-
теиие курсивом или жирным. Свойства текста относятся к способу обращения
с шрифтом - они задают высоту строки и расстояние между буквами,
подчеркивание и т.д.
Свойства шрифта, например выделение жирным или курсивом, можно
применить к одному символ)-, а свойства текста, например высоту строки или
межстрочный интервал, применяется только к боку текста, например к абзацу или заголовку
Итак, начнем со шрифтов.

74 ГЛАВА 3. €*шлн для шрифтов и текста
Узнайте
об основах—
типографии
Проверьте,
как различные
браузеры
отображают текст
г
Ш 6.0.2 Windows
A Serif headline
Senf paragraph text.
A Sans-Serif headline
Ssns-Serif paragraph text.
A Monospace headline
Monospace paragraph text.
A Cursive headline
Cursive paragraph text.
A Fantasy headline
Fantasy paragraph text.
Научитесь
работать
со скрытой —
текстовой
рамкой
Here is a long paragraph of text that just keeps going and going» Think of it
as в long, thin snake contained within the paragraph's box. The paragraph is a
containing box, but CSS also applies a box around the text text itself, and it is
this inner box to which the text properties are applied. In this example, the
containing element's box is in red and the inner box around the text is in
green. As you can see from the way the inner box is drawn, CSS sees the text
as one long strip, even though the width of the container causes it to be
broken across several lines.
Освойте
профессиональные
навыки—|
добавления
стилей к шрифту
Enjoy mountain spring H20 - it's 105 times better than tap(1) water!
2 This means water provided through a municipal distribution system
Задаем шрифт с помощью CSS
В этом разделе мы узнаем, как использовать CSS для выбора шрифтов. Чтобы
указать размер шрифта, вы можете использовать любые единицы, абсолютные или
относительные, но в целях соответствия примерам, приведенным в этой главе,
рекомендуем использовать относительные единицы измерения, например em,
чтобы пользователь мог легко изменить размер шрифта при необходимости.

Задает шрифт с помощью CSS 75
Знакомство с наборами шрифтов
Пример: body {font-family: sans-serif;}. Значения: serif, sans-serif,
rr.onospace, fantasy, cursive.
Самым простым способом указать шрифты с помощью CSS является
использование пяти общих наборов шрифтов: с засечками, без засечек,
моноширинного, декоративного и курсива. Эти наборы шрифтов сообщают
пользовательскому агенту (браузеру; КПК, мобильному телефон}' и т.д.) о необходимости
предоставить один из указанных типов шрифта. Общие наборы шрифтов
предлагают минимальный уровень стилей шрифтов, и, как вы вскоре убедитесь, CSS
предоставляет другие, более привлекательные варианты.
Шрифты с засечками (serif) имеют мелкие детали - засечки по концам
элементов символа. Особенно заметны засечки в заглавных буквах. В качестве
примера таких шрифтов можно привести Times, Bodoni, Garamond.
Шрифты без засечек (sans-serif) не имеют таких деталей, их внешний вид
более прост. Примерами таких ш ифтов могут служить Helvetica, Arial и
Verdana (рис. 3.1).
С засечками Без засечек
О
Times Arial
Рис. 3.1. Шрифты без засечек устроены проще, чем шрифты с засечками
Шрифты без засечек более пригодны для Сети
Зайдите на крупный, насыщенный текстом сайт, например CNN, MSNBC или Amazon.
Вы увидите, что практически все используемые шрифты не имеют засечек. Дело в том,
что шрифты с засечками добавляют определенную визуальную информацию при их
использовании для печати на бумаге, но при отображении текста на экране с
относительно низким разрешением, засечки выглядят не очень хорошо, особенно в тексте
с мелким размером шрифта.
Если вы являетесь новичком в Web-дизайне, рекомендуем использовать шрифты без
засечек, по крайней мере, до тех пор, пока вы не наберетесь достаточно опыта для
работы со шрифтами с засечками. Шрифты без засечек выглядят более четко и
профессионально, поэтому, просто заменив используемый по умолчанию Times на шрифт без
засечек, вы мгновенно улучшите облик вашего сайта, придав ему более
профессиональный вид.

76 ГЛАВА 3, Стили доя шрифтов и текста
Моноширинные шрифты (monospace). например Courier или Monotype,
*.мегот равные интервалы между буквами (то есть, для i отводится столько же
места, сколько и для т) и обычно используются для отображения примеров
кода в книгах по программированию (как и в нашей книге) или для имитации
текста, созданного на печатающей машинке:
Вот пример моноширинного шрифта, каждому символу отводится одинаковое
Тостранство по горизонтали.
Примечание Шрифты с засечками и без засечек являются пропорциональными, то есть
каждому символу отводится столько места, сколько ему требуется.
Курсивные шрифты (cursive) выглядят как написанные от руки. В качестве
примера можно привести Park Lane или Brush Script. Курсив идеально
подходит для создания пригласительных открыток, а в Сети используется нечасто,
так как в различных браузерах отображается по-разному.
&w гфпмф hffxi/$NOio t/фмфта
Декоративные шрифты (fantasy) не попадают в другие категории. Фантазия
заключается в том, что эти шрифты можно использовать для Сети.
Фактически предсказать вид фантазийного шрифта в том или ином пользовательском
браузере не представляется возможным, и поэтому лучше избегать их
использования. Вот пример такого шрифта:
Не рекомендуется ислользо&эть Эекорзтц&ные шрифты Ъ сети
из-За непредсказуемости их отображения
Совет Мы рекомендуем использовать шрифты с засечками, без засечек или моноширинные.
Если вы хотите применить декоративные или курсивные шрифты, будьте предельно
осторожны и не поленитесь проверить их отображение в различных средах и
браузерах.
Если вы хотите указать типовой шрифт, используйте подобное объявление:
body {font-family:sans-serif;}
В данном случае браузер предоставит Helvetica или Arial для отображения
страницы либо другой выбранный по умолчанию и имеющийся на
пользовательском компьютере шрифт без засечек (рис. 3.2-3.5). Такой способ является
самым простым указанием шрифта. Но можно сделать это и более точно, задав
семейство шрифтов, обычно именно так мы и делаем.

Задаем шрифт с помощью CSS
77
Firefox 0.8.0+
A Serif headline
Serif paragraph teKt.
A Sans-Serif headline
Sans-Serif paragraph text.
A Monospace headline
Monospace paragraph text,-
A Cursive headline
Cursive paragraph text.
A Fantasy headline
Fantasy paragraph text.
IE 5.2.3 Mac
A Serif headline
Serif paragraph text.
A Sans-Serif headline
Sans-Serif paragraph text
,A Monospace headline
Monospace paragraph text.
■ (Z&iaivt patapiafi/i tut.
A FANTASY HEADLINE
FANTASY PARAGRAPH TEXT.
Рис. З.2. Типовые семейства шрифтов
в браузере Firefox для Windows
Рис. 3,3. Типовые семейства шрифтов
в браузере Internet Explorer для Mac OS X
ffi 6.0.2 Windows
A Serif headline
Serif paragraph text.
A Sans-Serif headline
Sans-Serif paragraph text.
A Monospace headline
Monospace paragraph text.
A Cursive headline
Cursive paragraph text.
A Fantasy headline
Fantasy paragraph text.
Рис. 3,4. Типовые семейства шрифтов
в боаузере Internet Explorer для Windows
Safari 1.2.3
A Serif headline
Serif paragraph text.
A Sans-Serif headline
Sans-Serif paragraph text.
A Monospace headline
Monospace paragraph text.
A Cursive headline
Cursivejhxvuqyap/t Text.
A Fantasy headline
Fantasu paragraph text.
Рис. З.5. Типовые семейства шрифтов
в браузере Safari. Обратите внимание,
что для декоративного и курсивного шрифта
в заголовках используется обычный шрифт
Г

78 ГЛАВА 3. Стили для шрифтов и текста
Знакомство с семействами шрифтов
Для печати документов можно использовать любой шрифт - установить новый
или выбрать один из имеющихся на компьютере. При выводе документа на
печать этот шрифт отправится вместе с ним на принтер, либо при сохранении
документа в формате PDF шрифты будут преобразованы в векторы. Иными
словами, в такой ситуации вы можете выбирать любой из тысяч существующих
шрифтов, так как полностью контролируете ситуацию.
Что касается Web-дизайна, такой широкий выбор у нас отсутствует. При
создании сайтов следует иметь в виду, что вы ограничены выбором шрифтов,
предположительно имеющихся на компьютере пользователей, для которых
предназначен сайт. Шрифты не являются частью браузера, они используются
всеми установленными на определенном компьютере приложениями из
системной папки, в которой располагаются. Мы не можем точно знать, какой
именно шрифт (Times, Times Regular или Times Roman) установлен в
определенной пользовательской сист* ме.
Таким образом, шансы, что заголовок, заданный вами в шрифте Univers 87
Oblique, будет отображен в браузере пользователя этим же шрифтом, близки
к нулю. На самом деле, вы можете быть уверены в наличии в системе
пользователя (в Windows и Macintsoh) лишь очень малого числа шрифтов: Times, Arial,
Verdana и Courier.
Шрифты, общие для Windows и Мае
Ниже приведен список шрифтов с одинаковыми именами, поставляемых по умолчанию
с операционными системами Windows и Mac OS X. Полагаем, что эти шрифты можно
использовать с определенной уверенностью в качестве первого варианта, но также не
стоит забывать указать второй и третий варианты с помощью свойства fone-family:
Arial, Arial Black, Arial Narrow, Century Gothic, Comic Sans MS, Courier New, Franklin Gothic,
Georgia, Impact, Monotype, Palatino, Symbol, Tahoma, Times New Roman, Trebuchet MS,
Verdana, Webdings
Даже Helvetica, возможно самый популярный шрифт без засечек, не
поставляется по умолчанию с Windows, но в этой системе имеется собственный
практически идентичный шрифт - Arial.
В такой ситуации пользователь может загрузить требуемые шрифты с
вашего сайта. Несмотря на то, что GSS3 позволяет запросить шрифт с сервера для
отображения документа, в настоящее время браузеры не поддерживают эту
функцию. Однако в будущем, несомненно, это может воплотиться в реальность
(но даже тогда браузеры не будут устанавливать шрифт в систему, а всего лишь
станут загружать его для отображения страницы).

Знакомство с сеэдействанш шрифтов 79
Примечание CSS3 является следующей версией CSS. Соответствующие спецификации W3C
уже появились, но пока что эта версия не получила широкой реализации, за
исключением частичного применения в браузере Opera.
До тех пор пока шрифты нельзя будет загружать по требованию» мы
должны перечислять подходящие шрифты для отображения страницы в порядке
."меньшения предпочтительности. В этом перечислении следует указывать
~олько имена семейств, то есть Helvetica или Times, а не Helvetica Condensed
или Times Expanded.
Вначале мы указываем наиболее предпочтительный шрифт, а заканчиваем
общим семейством, например, с засечками или без:
font-family {"trebuchet ms", helvetica, arial, sans-serif}
Так как Trebuchet MS состоит более чем из одного слова, мы заключили его
з кавычки. Если мы указываем шрифт в строчном порядке внутри уже
имеющихся двойных кавычек, то используем одинарные кавычки:
<р style="font-family:'trebuchet ms', helvetica, arial, sans-serif;">
А следующим образом можно указать шрифт с засечками:
zont-family: {charcoal, times, serif}
В первом примере мы используем свойство font-family и говорим браузе-
pv: показать этот документ с помощью шрифта Trebuchet MS. Если его нет,
используйте шрифт Helvetica, если и этого шрифта нет, используйте Arial, а при
го отсутствии воспользуйтесь любым шрифтом без засечек. Важно в конце
объявления указывать общее семейство шрифтов на случай, если указанных ранее шрифтов
а системе пользователя не установлено.
Во втором примере использования свойства font-family мы вначале указали
.лрифт Charcoal, доступный только в системе Macintosh, так как хотим, чтобы
пользователи Macintosh могли насладиться этим прекрасным шрифтом.
Пользователи Windows увидят страницу со шрифтом Times.
Добавление стилей к документу
Лучшим способом научиться применять различные стили шрифта к документу является
практика. Откройте файл-затр1е_хп1т1_тагкир.Мт (его можно загрузить с сайта www.
bbd.com/stvlin) в браузере и в вашем графическом Web-редакторе (допустим, в
Macromedia Dreamweaver). Выполните следующие действия.
1. Загрузите файл с сайта www.bbd.com и сохраните его на жестком диске.
2. Откройте файл sample_xhtml_markup.htm в Web-редакторе через меню File (Файл).
\
I

80 ГЛАВА 3, Спши для шрифтов и тенета
3. Также откройте файл в браузере, чтобы просматривать изменения на странице по
мере ее редактирования в Web-редакторе.
4. Каждый раз, внося изменение в документ и сохраняя его в редакторе, переходите
в браузер и обновляйте страницу, чтобы видеть сделанные изменения.
Применение вложенных стилей
Для простоты примера мы покажем вам, "как создавать вложенные стили CSS
в начале документа, а также как удалить ссылку на внешний файл со стилями,
который пока что нам не понадобится. Таким образом, все стили пока будут
находиться непосредственно в самом HTML-документе. Впоследствии мы
создадим отдельный файл и перенесем туда всё наши стили.
Давайте воспользуемся HTML-документом, созданным в главе 1, и изменим
его, добавив элемент style:
<head>
<citle>A Sample XHTML Documeriv:</tit:le>
<meta http-equiv="Content-tupe" content=ntext/hanl; charset=iso-8-859-l" />
<ir.eta http-ecuiv= "Content-Language" concent = "en--usn />
<style type=^text/ess">
/* здесь укажем" нужные шрифты */
- • § _
</style>
</head>
Вместо примечания, заключенного в /*...*/ мы добавим CSS-правила.
Когда браузер встретит открывающийся тег style, он перестанет обрабатывать
код как XHTML и начнет обрабатывать его как CSS. Столкнувшись с
закрывающимся тегом style, он снова начнет обрабатывать код как XHTML. Поэтому
все, указанное внутри тега style, должно иметь синтаксис CSS. То есть, код
внутри тега style форматируется следующим образом:
селектор {свойство!.: значение; свойстзо2 : значение; и т.д.}
Не стоит забывать о том, пишите ли вы в данный момент XHTML или CSS,
и соответственно форматировать код. В нашем случае XHTML-код страницы
готов, а вам требуется лишь добавить элемент style и написать CSS-правила.

Знакомство с семействами шрифтов
81
называем семейство шрифтов для всей
страницы
Чтобы задать семейство шрифтов для всей страницы, вначале следует задать
его ~уш тела документа:
<scyie type="text/ess">
^ody {font-family: verdana, arial, sans-serif}
< style>
Сохраните внесенные изменения и обновите страницу в браузере. Результа-
~ы будут выглядеть, как на рис. З.б.
•*■- > '■ &Ц А---А |{ С Р + |ehKp://rtww.bbd.com/jcylin/ch3.tonts_text/5»mpIe_XKTMii.mafkupO "^ Or STYUN ^ ■
Sty I in'
ttie designer'! gutae to
Cascading Style Shtets
i
a New Riders book by Charles Wyke-Smith
Moving to XHTML
Creating XHTML compliant pages simply requires following a few simple rules. These rules may seem
counter-intuitive or just a lot of extra work at first, but the benefits are significant and actually make
coding sites much easier. Also, XHTML code can be easily validated online so you can be sure your code
is correctly written.
Here are the key requirements for successful validation of your XHTML code.
1. Declare a DOCTYPE
2. Declare an XML namespace
3. Declare your content type
4. Close every tag, enclosing or non-endosing
5. All tags must be nested correctly
6. Inline tags can't contain block level tags
7. Write tags In lowercase
8. Attributes must have values and must be quoted
9. Use encoded equivalents for left brace and ampersand
more about these requirements
Here are some useful links from the web site of the WC3 (World Wide Web Consortium), the guiding
body of the web's development.
• WC3's XHTML validator
• WCTs CSS validator
• XHTML Resources
• CSS Resources
© 2004 Charlie Wyke-Smith and New Riders.
Рис. З.б. Указав font-family для элемента body, мы изменили облик всей страницы

82 ГЛАВА 3. Стили для шрифтов и текста
Так как font-family является наследуемым свойством, его значение
передается потомкам, к числу которых относятся все элементы страницы, поскольку
body -это элемент верхнего уровня. Таким образом, добавив одну строку, мы
изменим облик всей страницы. Итак, двигаемся дальше.
Размер шрифта
Чтобы задать размер шрифта, можно использовать значения трех типов. Это
абсолютные (допустим, пикселы или дюймы), относительные (скажем,
проценты или em) и ключевые слова (например, x-small, small, large, xx-large). Все три
способа имеют свои недостатки и преимущества. Джеффри Зельдман и другие
специалисты по CSS рекомендуют использовать ключевые слова, вызывающие
меньше всего проблем (см. www.alistapart.com/articles /sizematters/). Но так как
ключевые слова требуют более глубоких познаний CSS, чтобы отображать
шрифты одинаковыми во всех .браузерах, и предлагают лишь ограниченный
набор размеров, мы будем использовать em для указания размера шрифтов.
«За» и «против» использования пропорциональных размеров
При создании таблицы стилей одним из ключевых моментов является выбор
абсолютных или относительных единиц для указания размера шрифтов. Internet Explorer и
другие слабо совместимые со стандартами браузеры не позволяю пользователю изменить
размер шрифта, заданный в абсолютных единицах, поэтому в настоящее время
наблюдается тенденция к предпочтению относительных единиц. Вот достоинства и
недостатки этого метода.
Достоинства:
• пользователь может менять размер шрифта, при этом шрифт всех элементов
страницы меняется пропорционально - это очень важный момент по повышению
доступности сайта и его дружелюбности к лицам с ослабленным зрением или к
пользователям, работающим с мониторами со сверхвысоким разрешением, где размер
пиксела неимоверно мал;
• в ходе отладки дизайна вы можете легко поменять размер текста всех элементов,
изменив базовый размер шрифта, - шрифт всех остальных элементов
автоматически изменится пропорционально.
Недостатки:
» если вы не будете достаточно осторожны, размер шрифта вложенных элементов
может оказаться чересчур мелким, так как является наследуемым свойством;
• при попытке пользователя увеличить размер шрифта существует возможность
разрушения CSS-разметки, не предназначенной для изменения объема текста или
размера шрифтов; при этом текст колонок или областей может выйти за их
границы, что крайне нежелательно; в главе 6 мы создадим разметку,
предусматривающую возможность изменения размера шрифта или объема текста.
(

Размер шрифта 83
Отметим, что сначала em может показаться вам странной единицей. На
самом деле данные единицы являются просто пропорциональным значением -
можно относиться к ним как к десятичным процентам, когда 0,9 em - это то же
самое, что и 90% от базового размера.
В большинстве браузеров по умолчанию используется размер 1 em
(эквивалент примерно 16 пикселам), и если вы зададите размер шрифта в 1 em, он
будет таким же. Если вы хотите, чтобы шрифт определенного элемента
составлял три четверти от базового, задайте его равным 0,75 em, половину
базового, - равным 0,5 em.
Совет Вы можете более подробно узнать о проблеме размеров шрифта, посетив страницу
Ричарда Раттера www.ciqgnut.com/bloQ/348. Отмечу, что если вы заботитесь о том,
чтобы пользователи могли менять размер шрифта ваших страниц, используйте
относительные единицы для указания размера шрифта.
Используя em, вначале следует задать базовый размер шрифта для всего
документа с помощью body 100%, после чего можно указать размер шрифтов
остальных элементов относительно этого базового размера.
Вначале изменим селектор body:
<зсу1е type="text/ess">
rody {font-family: verdana, arial, sans-serif; font-size: 100%;}
< style>
Несмотря на отсутствие видимого эффекта, теперь у нас есть базовый раз-
ер шрифта, от которого можно отталкиваться. Причиной, по которой мы
оказываем базовый размер в процентах, является то, что если IE видит размер
з em, он неправильно обрабатывает последующие селекторы, делая шрифт
оольше или меньше нужного при изменении его размера.
Возможно, вы заметили, что размеры по умолчанию для распространенных
элементов разметки, например hl-h6, p, ul и И, довольно крупные, и если нам
требуется разместить на странице определенный объем текст, с этими размерами
о умолчанию пользователю придется активно прокручивать ее вверх-вниз.
Согласно маркетинговым исследованиям, прокрутка страниц нежелательна, кроме
того, на наш взгляд такой большой размер шрифта лишь портит облик страницы.
В свою очередь, при использовании em можно по умолчанию задать чуть
.еныпий размер шрифтов, ведь пользователи всегда могут его увеличить.
Предположим, мы хотим задать новый базовый размер в 12 пунктов. Для
з^ого укажем размер для body, равный 76% от базового шрифта браузера по
-молчанию (16 пунктов), что составит требуемые 12 пунктов.

84 ГЛАВА 3. Стили для шрифтов н тенета
Примечание А разве 12 от 16 - это не 75%, спросите вы. Ответ заключается в том, что мы
получаем более устойчивый размер шрифта в разных браузерах при
использовании четных значений, поэтому округляем 75% до 76%.
Теперь, когда 1 em равняется 12 пунктам, 0,75 em - это 9 пунктов pi т.д.
Для тега html некоторые разработчики задают размер шрифта в 125% (20
пунктов), а размер шрифта элемента body - 50%. Таким образом, для всех дочерних
элементов 1 em = 10 pi, 0,9 em = 9 pt, 1,2 em = 12 pt и т.д., что существенно
облегчает подсчет размера.
Помните, что вне зависимости от используемых единиц браузер
преобразовывает их в пикселы, потом)" что именно так отображается информация па
экране. Каждый браузер использует для этой операции слегка отличный
алгоритм, поэтом)7 чем более целыми будут используемые при вычислении
значения, тем более целостным будет результат. Важность одинакового до пиксела
отображения страницы в брауз pax по-разному оценивается разными
дизайнерами, но постарайтесь не забывать о наших советах при установке базового
размера шрифта.
В целом, если при указаний размера шрифтов вы используете
пропорциональные значения для отдельных селекторов, то можете предоставить
пользователям шрифты подходящих размеров, выглядящие привлекательно и в
большинстве случаев устраняющие необходимость прокрутки. При этом сохраняется
возможность увеличения размеров шрифтов пользователем.
В следующих примерах мы будем использовать базовый размер шрифта по *
умолчанию - 100%, а впоследствии при создании собственных сайтов вы
сможете изменить его нужным образом.
Итак, отталкиваясь от 100-процентного значения свойства font-size, зададим
размер шрифта для каждого элемента с помощью em, начиная со строки под
логотипом (рис. 3:7). Мы поступим так потому, что использования 100%
вместо lem позволяет получить более согласованный результат при просмотре
страницы во всех браузерах. Тем не менее, чтобы указать размер шрифта для
элементов, мы воспользуемся em как более удобной единицей.
Данная строка относи гея к заголовку третьего уровня Ь.З, мы зададим для нее
размер в . 8еш. Вот что мы напишем:
■
<style type="text/ess">
body {font-family: verdana, arial, sans-serif; font-size: 100%;}
h3 {font-size:.8em}
</style>

Размер шрифта 85
Sty tin'
the designer's guide to
Cascading Style Sheets
a New Riders book by Charles Wyke-Smith
Moving to XHTML
.с. 3.7. Это исходная версия заголовка примера, рассмотренного в главе 1, со стилями по умолчанию
Результат мы видим на рис. 3.8.
sty I'm1
the designer's guide to
Cascading Style Sheets
в N«w Riders book by Charles Wyka-Smith
Moving to XHTML
Рис. 3.8. Теперь размер шрифта заголовка "A New Riders book..." является более приемлемым -
Шрифт заголовка стал более мелким. (Экспериментальным путем мы
определили, что его размер по умолчанию составлял 1,2 em или 16 х 1,2 = 19,2 pt).
Теперь давайте зададим размер шрифта для остальных элементов разметки:
-ryle type=ncext/css">
zody {font-family: verdana, arial, sans-serif; fontsize:100%;}
11 {font-size:lem}
z3 {font-size: . 8eirJ
- {font-size:.8em}
"1 {font-size:.75em}
zl {font-size:.75em}
=. {font-size: .7em}
«I
< scyle>
)

36 ГЛАВА 3. Стили для шрифтов и текста
Результат показан па рис. 3.9.
Г*"^
Stylm'
the designer's донге to
Cascading Style Sheets
a New Riders book by Charles Wyke-Smlth
Moving to XHTML
Creating XHTML compliant pages simply requires following a few simple rules. These rules may s^em
counter-intuitive or just a lot of extra work at first, but the benefits are significant and actually make
coding sites much easier. Also, XHTML code can be easily validated online so you can be sure your
code Is correctly written.
Here are the key requirements for successful validation of your XHTML code.
1. Declare a DOCTYPE
2. Declare an XML namespace
3. Declare your content type
4. Close every tag, enclosing or non-enclosing
5. Ail tags must be nested con'ectty
6. Inline tags can't contain block level tags
7. Write tags In lowercase
8. Attributes must have values and must be quoted
9. Use encoded equivalents for left brace and ampersand
more abcut tfresc reguire-pgnts
Here are some useful links from the web site of the WC3 (World Wide Web Consortium), the guiding
body of the web's development.
• WC3'5 XHTML vtftdactf
• WO-*-eSSvA1*cr
• Ш№ «<№'«!
• CSS Кисете*»
© 2004 Charlie Wyke-Smlth and New Riders.
It^v *&*. w^gfff ^-v-^y -Kr^jri
Рис. 3.9. Размеры шрифта элементов указаны с помощью em, но сочетание em и вложенных тегов
делает текст второго списка мельче
Пару слов об этих правилах. Во-первых, мы не задаем стиль для пунктов
меню (li), вместо этого мы задали стиль для нумерованного (ol) и
ненумерованного (ul) списка, содержащих li. Если бы мы задали стиль
непосредственно для li, оба списка отображались бы шрифтом одного размера, а при нашем
подходе можно задать разный размер для обоих типов списка.
Наследуемые стили во вложенных тегах
Во-вторых, несмотря на то, что мы уже несколько улучшили облик страницы,
размер шрифта ненумерованного списка оказался слишком мал, хотя для него
мы указали то же значение, что и для нумерованного списка.

Размер шрифта 87
Проблема заключается в том, что элемент ul имеет значение .75 em, а
вложенный в него элемент а - имеет значение .7ет. В результате элемент а
отображается с размером шрифта .525 em (.7*.75). Наследуемость размера шрифтов
может работать как на вас, так и против вас. К счастью, решить эту проблему
тегко, нужно просто задать контекстный селектор для этой ситуации:
<style type="text/css">
body {font-family: verdana, arial, sans-serif; fontsize:100%;}
hi {font-size:lem}
h3 {font-size:.8em}
p {font-size:.8em}
ol {font-size:.75em}
■
j1 {font-size:.75em}
ul a {font-size:inherit}
a {font-size:.7em}
</style>
Мы использовали значение inherit, чтобы элемент а использовал значение
размера шрифта своего родительского элемента. Это не только обеспечивает
отображение элемента шрифтом нужного размера, но и позволяет нам в
будущем изменить размер шрифта всех элементов списка, подкорректировав
значение селектора ol, при этом вложенный элемент а просто унаследует новое
значение. Результат показан на рис. ЗЛО.
Here are some useful links from the web site of the WC
body of the web's development.
• WC3's XHTML validator
• WC3's CSS validator
• XHTML Resources
• ess Resources
© 2004 Charlie Wyke-Smith and New Riders.
Рис. 3.10. Теперь список читается лучше, так как проблема наследования устранена
Теперь мы можем проверить масштабируемость нашей разметки.
1. В меню браузера выберите пункт View »♦ Text Size »♦ Largest (Вид ■*
Размер шрифта »♦ Самый крупный). Обратите внимание, что размер
шрифта всех элементов пропорционально увеличился.

88 ГЛАВА 2, Стили дня шрифтов и текста
2. Измените значение свойства font-size для селектора body. Попробуйте
указать 80% или 120%; сохраните страниц)' и обновите ее в браузере. Как
видно, все элементы отображаются в заданных пропорциях. Те из вас, кто
менял значения атрибутов size для сотен тегов font на десятках страниц
сайта после принятия решения увеличить или уменьшить размер шрифта,
оценят дашгую возможность. Когда в следующий раз ваш клиент попросит
изменить размер шрифтов, вы сможете сделать это для всего сайта за о с.
А мы двигаемся дальше.
з
Свойства шрифта
Пропорции размера шрифтов всех элементов страницы являются ключевым
способом отображения иерархии текста вашего документа. Это достигается за
счет понимания различных свойств шрифтов и их наследования в иерархии
"документа. Давайте рассмотрим свойства шрифтов.
Font-style
Пример: h2 {font-style: italic} (другие возможные значения: normal, oblique).
Это свойство определяет, выделен ли шрифт курсивом, или нет. Если вы
хотите выделить текст элемента курсивом, укажите правило:
р {font-style:italic}
Можно также вместо italic использовать oblique, но обычно результат
идентичен. Предполагалось, что разница между ними заключается в том, что
italic просто деформирует шрифт, наклоняя его вправо, a oblique является
фактически отдельным шрифтом, и теоретически для этого более оптимален.
В реальности такая схема не работает, кроме того, oblique вообще не
распознается старыми браузерами, например Netscape 4.7.
Таким образом, для свойства font-style фактически есть лишь два
значения: italic и normal. В данном примере:
р {font-style:italic;}
span {font-style:normal;}
<p>This is italicized text with <span>a piece of non-italic text</span> in
the middle.</p>
мы задаем результат, показанный на рис. 3.11. Так можно получить текст,
выделенный курсивом, внутри которого размещен обычный текст.

89
This is italicized text with a piece of non-italic text in the middle.
Рис. 3.11. Значение normal свойства font-style позволяет вставлять обычный текст внутрь текста,
выделенного курсивом
Замечания о значении normal
Значение normal отменяет любые возможные свойства, примененные к элементу. В
данном случае мы отказались от выделения курсивом фрагмента текста, но также можно
использовать эту особенность и для других целей. Например, заголовки hl-пб по
умолчанию выделяются жирным. Применив значение normal к h3 (лЗ {f one-weight: normal;}),
мы можем, например, отменить такое выделение для заголовков третьего уровня. Если
вы задали правило a {font-variant: small-caps} f то все ссылки будут отображаться
маленькими заглавными буквами. Чтобы отобразить одну ссылку.в обычном варианте с
заглавными и строчными буквами, следует добавить для нее правило a. speciallink {font-
varianc:normal;}.
Font-weight
Пример: a {font-weight: bold;}, возможные значения: 100, 200 и далее до 900
*in6obold, bolder, lighcer, normal.
Согласно рекомендациям W3C по применению этого свойства, каждое
последующее значение, числовое или ключевое слово, должно отображать
толщину шрифта равную, или превышающую толщину предыдущего значения.
Значения bold pi bolder описывают две степени толщины, значение lighter
позволяет сделать шаг в противоположном направлении, если вы хотите
получить шрифт меньшей толщины.
IFirefox 0.8.0+
|This is normal text
This is bold text
This is bolder text
Bolder made lighter
This is 100 weight
This is 200 weight
This is 300 weight
This is 400 weight
This is 500 weight
This is 600 weight
This is 700 weight
This is 800 weight
This is 900 weight
IE 5.2.3 Mac
This is normal text
This is bold text
This is bolder text
Bolder made lighter
This is 100 weight
This is 200 weight
This is 300 weight
This is 400 weight
This is 500 weight
This is 600 weight
This is 700 weight
This is 800 weight
This is 900 weight
IE 6.0.2 Windows
This
This
This
is normal text
is'bold text
is bolder text
Bofder made lighter
This
This
This
This
This
This
This
This
This
is 100 weight
is 200 weight
is 300 weight
is 400 weight
is 500 weight
is 600 weight
is 700 weight
is 800 weight
is 900 weight
Safari 1.2.3
This is normal text
This is bold text
This is bolder text
Bolder made lighter
This is 100 weight
This is 200 weight
This is 300 weight
This is 400 weight
This is 500 weight
This is 600 weight
This is 700 weight
This is 800 weight
This is 900 weight
Рис. 3.12. Так различные браузеры обрабатывают разные значения толщины шрифта

90 ГЛАВА 3. Стили для шрифтов и текста
На рис. 3.12 показан небольшой тест, выполненный в нескольких браузерах.
Кто-нибудь из вас может разглядеть больше двух вариантов отображения
шрифта в каждом браузере? И мы тоже не можем. Мы даже пытались
использовать разные шрифты, но безуспешно. Удалось добиться только двух вариантов
отображения шрифта - жирного и нормального. Поэтому, вариации жирности
могут быть неплохим средством показать иерархию документа, особенно если
есть возможность сгенерировать различные числовые значения
математически с помощью промежуточного программного обеспечения (допустим, ASP или
РНР) для автоматического выделения результатов, переходящих
определенные границы. В следующем разделе этой главы мы покажем вам относительно
простые и удобные способы представления, которые производители браузеров
могли бы предоставить нам, дизайнерам.
Font-variant
Пример: blockquote {font-variant: small-caps}, допустимые значения: small-
caps, normal.
Это свойство помимо normal понимает еще только одно значение - small-
caps. Оно отображает все строчные буквы маленькими прописными.
Например:
пЗ' {font-variant:small-caps;}
приведет к тому, что заголовок третьего уровня будет отображен
маленькими прописными буквами. Мы часто используем это значение для первой
строки псевдоклассов, например чтобы отобразить ее маленькими прописными
буквами.
Сокращенное свойство font
Пример:
р {font:bold italic small-caps 12pt verdana, arial, sans-serif;}
<p>Here's a piece of text loaded up with every possible font property.</p>
Результат показан на рис. 3.13. Мы только что применили к тексту все
возможные свойства шрифта.
I Here's a piece of text loaded up with every possible font property.
Рис. 3.13. Для создания такого стиля шрифта требуется всего одна строка CSS

Свойства текста 91
Свойство font позволяет применить все свойства шрифта в одном
объявлении. Это позволяет сократить объем необходимого CSS-кода и получить такой
же эффект. При этом следует указать значения в корректном порядке, чтобы
браузер смог верно обработать их.
Здесь действуют два простых правила.
Правило 1. Всегда следует указывать значения свойств font-size и font-
family.
Правило 2. Последовательность указания значений свойств такова: font-
* eight, font-style, font-variant в любом порядке, затем font-size и font-
family.
»
Примечание Немного забегая вперед, отметим, что в свойстве font-size можно также
указать и свойство line-height (которое является текстовым), задав размер в
виде 12pf/150%. Более подробно мы поговорим об этом в следующем разделе
«Свойства текста».
воиства текста
"еперь, узнав, как выбрать нужный шрифт, поговорим о применении стилей
тексту. Если требуется создать отступ для абзаца, верхний индекс (вроде 106),
увеличить отступ между буквами заголовка и решить многие другие задачи фор
атирования, вам нужные свойства текста CSS.
Всего есть восемь связанных с текстом CSS-свойств:
text-indent;
letter-spacing;
word-spacing;
text-decoration;
text-align;
line-height;
text-transform;
vertical-align.
j*
Текстовая змея
еобходимо понять один важный принцип обработки текста в CSS - CSS добавляет
-■эмку вокруг текста внутри элемента. Например, если мы поместим блок текста внутри
' пемента абзаца р, CSS будет обращаться с текстом как с одной длинной строкой, за-
пюченной в рамку, даже если фактически текст располагается на нескольких строках.
-а рис. 3.14 мы видим текст в зеленой рамке, находящейся внутри элемента, границы
«соторого выделены красным.

I
92 ГЛАВА 3, Стили для шрифтов и текста
Here is a long paragraph of text that just keeps going and going. Think of it
as a long, thin snake contained within the paragraph's box. The paragraph is a
containing box, but CSS also applies a box around the text text itself, and it is
this inner box to which the text properties are applied. In this example, the
containing element's box is in red and the inner box around the text is in
green. As you can see from the way the inner box is drawn, CSS sees the text
as one long strip, even though the width of the container causes it to be
broken across several lines.
Рис. 3.14. Текст заключен в длинную рамку, даже если он отображается на нескольких строках
Имейте в виду, что обычно обе эти рамки невидимы пользователю, тем не менее,
незримо они присутствуют. Для данного примера мы разметили текст следующим образом:
<pxspan>TeKCT абзаца.»</зрап>^</р>
и применили следующие стили:
р {border:2px solid red;}
span {border:2px solid green;}
Обратите внимание, что текстовая рамка разбивается при переносе строки и
закрывается только в конце текста.
Зная об этом, вы сможете быстрее добиваться нужного результата. Например, если
необходимо сделать отступ для первой строки абзаца, можно использовать свойство
text-indent. Как показано на рис. 3.14, к последующим строкам отступ добавляться не
будет, так как для CSS весь текст является одной строкой.
Если требуется добавить отступ для всего абзаца, следует задать свойство margin-
left, иными словами, сместить весь контейнер вправо. Помните, что текстовые
свойства применяются к длинной тонкой змееподобной рамке, окружающей текст.
Text-indent
Пример: р {text-indent:Зет}, допустимые значения: любые числа,
положительные или отрицательные.
Примечание Б рассматриваемых ниже примерах для наглядности отображается рамка
абзаца, обычно она не видна.
Так как мы уже касались этого вопроса ранее, давайте начнем именно со
свойства text-indent. Это свойство задает начальную позицию текстовой
рамки по отношению к содержащему ее элементу, или попросту говоря, отступ.

Свойства текста
93
Обычно по умолчанию первая строка не имеет отступа. Если задать для
свойства text-indent положительное значение, первая строка сдвинется вправо
(рис. 3.15).
;у"^ "*W:_.^~ . ^. Tewindent demo
f" М ^ff ^flff а А lif^^r+п^© hnp://www.bbd.com/styIin/chQ^ ~f<V Googte
z
-.■" -i .ч>
т—. _:.:—-ч
Я
*-
^^L
£ *ZV. ..:
.*<£¥
Л" ?* л :.*
Г This paragraph of text has an indent of 3 ems- Because its I
value is positive (greater than 0), all the text stays within the I
containing element. Things get more complicated if we start using |
negative margins to make the first line "outdent" instead.
Рис. 3.15. Указав положительное значение для свойства text-indent, мы создадим отступ
для первой строки
Указав отрицательное значение, мы создадим выступ. Если вы задаете
выступ, убедитесь, что для выступакйцей за пределы контейнеры первой строки
есть достаточно места, и она не будет наползать на соседний, расположенный
слева, элемент (рйс. 3.16). Если текст расположен возле левой кромки окна,
зыступающий текст будет обрезан.
*■ zz*. *■
<. ■> & л ...
iftHti л ■■■■'■•■;>,'■■ " ", ■' |. ■ | ■ I •'■ Л>-| I " щ -■ ■■■■■■..%..w . ■-. . . --. ■", ift,,-,, i(\r ' л,у i*- -:-
'-= У И«-\
indent,den?o
ОЙ.
S ф А- А (] С ■{■■ + : ©http://www.bbd.eom/stvlin/0 **Qr CooG:e Q *-
.1-...- .— 1. 1 ^t-шУ --- _--. — ~- ■ ■ ^" ■ . ■ ' " . -ГТ_ _. - - —. —*■. .*■ ... 1 л. Л - v- ^ "■ - ■ " л... . Г - — I Ь_^
us paragraph of text has a negative indent. Because the containing,
[element does not have enough space to its left, the hanging text is
jdipped by the edge of the browser. The border of the containing
ielement is displayed to help you see the nature of the problem.
-33 T-■■■ „v.
Рис. 3:16. Этот абзац с отступом расположен возле края окна, поэтому выступающий текст был
обрезан
Избежать этого можно всегда, указывал положительное левое поле, превы-
_j ющее левый выступ. На рис. 3.16 выступ составляет -1,5 em, а на рис, 3.17
иэи таком же выступе мы добавили левое поле величиной 2 em.
Вот код для создания абзаца, который показан на рис. 3.17:
г {~ext-indent:-1.5em; margin-left :2em; border: lpx solid red;}
Выступающие абзацы помогают придать сайту профессиональный облик,
збивая текст па логические элементы.

94 ГЛАВА 3, Стили для шрифтов и текста
- v.
..**_■■..
^-~п -■
^4r>> <5 :j А- А 6* j( •+^;[flhttp://www.bbd.coiT!/siyltn/ch:-/ Or Google ©
Th
s paragraph of text has the same negative indent as the
screenshot above, but because the containing element has a left
margin value greater than the negative indent value, the
hanging text is not dipped by the edge of the browser. The
border of the containing element is displayed to help you see
how a potential problem is avoided.
'?«;.-
■ ^^у;^ ■ %т*£о&ъ*м&
'■«К*
Рис. 3.17. Этот абзац имеет выступ и поле слева, благодаря чему выступающий текст не обрезается
и не накладывается на возможный соседний элемент
Рекомендуется задавать отступы и поля в em, чтобы они оставались
пропорциональными по отношению к длине строки, если пользователь решит
изменить размер шрифта.
Если вы хотите сэкономить место и отказаться от отступов между абзацами,
можно задать верхнее и нижнее поле равным нулю и использовать выступы или
отступы для логического выделения абзацев.
Наследуемые значения свойства text-indent
Следует отметить, что свойство text-indent наследуется дочерними элементами.
Например, если вы указали text-indent для aiv, все абзацы внутри этого div будут иметь
то же значение text-indent. Однако это не заданное значение, передающееся вниз по
иерархии, а вычисляемое значение. Вот пояснительный пример.
Предположим, у нас есть div, содержащий текст, шириной 400 пикселов с отступом
в 5%. Получается, что размер отступа составляет 20 пикселов (5% из 400). Внутри div
находится абзац шириной 200 пикселов. Как дочерний элемент абзац наследует
свойство text-indent, но наследуемое значение является результатом подсчета для
родительского элемента, то есть не 5%, а 20 пикселов. В результате абзац также
отображается с отступом в 20 пикселов, несмотря на его меньшую ширину. Таким образом, все
последующие абзацы отображаются с одинаковыми отступами, несмотря на,
возможно, разный размер.
Letter-spacing
Пример: р (letter-spacing: . 2em;}, допустимые значения - любые
положительные или отрицательные числовые значения.

Свойства текста 95
Это свойство позволяет задать трекинг, то есть межбуквенное расстояние.
Положительные значения увеличивают расстояние между7 буквами, а
отрицательные значения его уменьшают. Настоятельно рекомендуем использовать
относительные значения, например проценты или em, чтобы интервал между
буквами оставался пропорциональным при увеличении или уменьшении
размера шрифта (рис. 3.18).
Примечание Термин «трекинг» означает расстояние между буквами, а «кернинг» - на
стройку расстояния между двумя определенными буквами.
Altering the letter-spacing changes the space between individual
characters (numbers and symbols, as well as letters). This
paragraph has normal spacing.
Positive letter-spacing values
increase the space between every
character.
Negative letter-spacing values bring the characters closer
together.
Here is a regular headline
Here's a headline tightened
Рис. 3.18. Ha рисунке показано, как различное межбуквенное расстояние изменяет облик текста
Как видно из примера, можно придать профессиональный облик заголовкам,
слегка уменьшив расстояние между буквами. При увеличении размера шрифта
межбуквенное расстояние, применяемое по умолчанию, выглядит более
неряшливо.
В целом, текст тела документа не требует изменения межбуквённого
расстояния. Однако это зависит от личных предпочтений, и вы можете придать
странице уникальности только за счет чуть большего или меньшего межбуквенного
расстояния. Главное - не перестараться, ибо тогда будет очень трудно читать
текст. Обратите внимание, что в нижнем заголовке на рис. 3.18 мы сократили

96 ГЛАВА 3. Стили для шрифтов и текста
межбуквенное расстояние всего на .05 em - если убрать больше, буквы начнут
наползать друг на друга. Обычно добиться желаемого результата можно с
помощью малых значений, таких как ОД em.
Word-spacing
Пример: р {word-spacing: . 2em}, допустимые значения - любые
положительные и отрицательные числовые значения.
Это свойство схоже с предыдущим, но отвечает за расстояние между
словами, а не буквами. CSS считает словом любой набор символов, окруженный
пробелами. Обратите внимание, что обращаться с этим свойством следует еще
более аккуратно, чем с предыдущим, так как, задав слишком большое значение,
вы можете сильно затруднить читаемость текста (рис. 3.19).
Altering the word-spacing changes the space between individual
words. Words are groups of characters separated by spaces.
This paragraph has normal spacing.
Positive word-spacing values increase the space between
every word.
Negative word-spacing values bring the words closer together and
can reduce readability.
Here is a regular headline
Here's a headline loosened
JL
Рис. 3.19. Обращаться с расстоянием между словами следует очень осторожно
Text-decoration
Пример: .retailprice {text-decoration: strikethrough;}, допустимые
значения- underline, overline, strikethrough, blink.
С помощью этого свойства вы можете выделить текст подчеркиванием, над-
черкиванием, перечеркиванием или миганием.
Основным предназначением этого свойства является контроль над внешним
видом ссылок. Подумайте дважды перед тем, как добавить подчеркивание к тексту,

Свойства тагсста
97
не являющемуся ссылкой, а лучше и вовсе не подчеркивайте его, если это не
ссылка. Ведь пользователи настолько привыкли к выделению ссылок
подчеркиванием, что вы просто введете их в заблуждение.
Text-align
Пример: р {text-align: rdght ;■), допустимые значения -left,, right, center,
justify- ' ^-.
Это свойство может иметь только одно из четырех значений: влево, вправо,
по центру и по ширине. Текст выравнивается по горизонтали относительно
содержащего его элемента, причем свойство следует добавлять именно к элементу-
контейнеру. То есть, если нам нужно выровнять заголовок hi по центру внутри
iiv, необходимо задать свойство text-align для div, а не для hi. На рис. 3.20
показаны четыре возможных варианта применения свойства text-align.
This is text that is left aligned and
is the usual way that text is
aligned. It's easy to read because
every line starts against the left
edge of the containing element
and that's why it's the default
setting.
This is text that is centered. Small
blocks of text look good centered
but it's hard large amounts of text
to read as every line starts a
different distance from the edge
of the page.
This is text that is right aligned
and, like centered text, it can be
somewhat hard to read because
every line starts in a different
place.
Justified text is both left and right
aligned at the same time. This is
achieved by mathematically
increasing word space on a line by
line basis, but this can result in
gaps of white space throughout
the text, specially if the containing
element is narrow or if there are
numerous or extended
consecutive occurrences of
exceptionally lengthy words so
that only a few fit on each line.
Рис. 3.20. Четыре варианта выравнивания текста

98 ГЛАВА 3* Стили дли шрифтов и текста
Line-height
Пример: р {line-height: 1.5;}, допустимые значения - любое числовое
значение.
Свойство line-height отвечает за междустрочный пробел, то есть за
расстояние между строками текста. Оно задается в качестве расстояния между
основанием одной строки и основанием следующей строки. Это расстояние должно
быть больше высоты шрифта. По умолчанию браузер задает междустрочное
расстояние пропорционально размеру шрифта, обычно оно составляет 118% от
размера шрифта (по моим подсчетам).
Самым простым способом задания междустрочного расстояния является
использование свойства font: для указания размера шрифта и высоты строки:
divtincro {font: 1.2em/1.4;}
В данном случае междустрочное расстояние в 1,4 раза превышает размер
шрифта, равный 1,2 em. Обратите внимание, что для значения этого свойства
не требуется указывать единицы измерения, так как в данном случае CSS
просто подсчитывает число экранных пикселов - 1,2 em - и умножает их на 1,4.
Если затем мы увеличим размер шрифта до 1,5 em, междустрочное расстояние
все равно останется равным 1,4 по отношению к 1,5 em. Если указать высоту
строки в фиксированных единицах, например в пиксела, при увеличении
размера шрифта текст строк будет наползать друт на друга.
Следует отметить, что высота строки распределяется над и под текстом.
Давайте рассмотрим простой пример, иллюстрирующий этот принцип
действия. Предположим, что высота шрифта равна 12 пикселам, а высота строки -
20 пикселам (хотя мы не рекомендую использовать пикселы для указания
высоты строки по изложенным выше причинам, здесь они используются для
наглядности). В таком случае браузер добавляет 4 пиксела пустого пространства над
текстом строки и 4 пиксела под текстом строки -4+ 12 + 4 = 20. Когда же мы
смотрим на текст, то не замечаем этого, так как нам кажется, что в целом
между строками имеется 8 пикселов свободного пространства.
Вертикальное центрирование одиночных строк
Иногда для центрирования элементов по вертикали внутри содержащих их элементов
желательно использовать свойство vertical-align, но это не работает. Однако если
требуется выровнять по центру одну строку, это возможно. У таблиц есть атрибут valign,
перемещающий содержимое ячейки таблицы в центр по вертикали. В CSS такого же
результата для одной строки можно добиться, задав ее высоту равной высоте
содержащего контейнера. Так как высота строки делится на две части - сверху и снизу текста, -
получается, что текст выровнен по вертикали.

Свойства текста
99
Что касается вертикального выравнивания по центру текстового блока (например,
абзаца) внутри содержащего его элемента, то это практически невозможно, хотя и
достижимо с помощью дополнительных div. Подробнее ознакомиться с этим вопросом вы
можете в статье «Вертикальное центрирование блока средствами CSS» (http://xhtml.ru/
2005/05/24/vertical centerbox/).
В целом это достижимо, но за счет громоздкого кода. И почему такая простая функция
не была реализована в CSS?
Text-transform
Пример: р {text - trans form: capi tali ze;}, допустимые значения - uppercase,
lowercase, capitalize, none.
Свойство text-trans form изменяет соотношение прописных и строчных букв
текста. С его помощью вы можете отобразить строку текста только прописными
или строчными буквами, сделать первые буквы слов заглавными (рис. 3.21).
This is text that is not transformed. It's displayed in the usual
way that text is presented.
This Is Regular Text That Is Capitalized Using The Text-
Transform Capitalize Value.
THIS TEXT IS STYLED USING THE TEXT-TRANSFORM
UPPERCASE VALUE; IT IS IN ALL LOWERCASE LETTERS IN THE
MARKUP, INCLUDING THE FIRST LETTER OF THE FIRST WORD.
this is text that is actually written in all caps in the markup but
displays in lowercase because of the text-transform lowercase
value.
Рис. 3.21. Свойство text-transform может менять капитализацию букв
При указании значения capitalize все слова будут писаться с заглавной
буквы. Это особенно удобно использовать для заголовков. Более того, если
содержимое страницы поставляется из базы данных или другого источника (скажем,
XML), можно добиться такого эффекта автоматически.
Чтобы получить большие и маленькие заглавные буквы, воспользуйтесь свой-
твом font-variant. Для повышения привлекательности добавьте
отрицательное значение letter-spacing.
ertical-align
"ример: vertical-align: 60°o, допустимые значения - процентные значения,
а также ключевые саова sub, sup, top, middle, bottom. -

100 ГЛАЗА 3. Стали &ш шрифтов и текста
Это свойство смещает шрифт вверх или вниз относительно основания
строки. Наиболее распространенным применением является создание
надстрочных и подстрочных символов, формул или математических выражений, вроде
х4 -у5 или N^O.
XHTML-теги sup и sub создают подстрочный и надстрочный текст
автоматически, но, как показано на рис. 3.22, для достижения лучшего результата
предпочтительнее использовать сочетание vertical-align и text-size.
Enjoy mountain spring H20 - it's 10s times better than tap(1) water!
3This means water provided through a municipal distribution system
Рис. 3.22. Свойство vertical-align улучшает внешний вид надстрочного и подстрочного текста,
созданного с помощью тегов XHTML
Вот код для данного примере:
<style type="text/css">
body {font-family:verdana, arial, sans-serif; font-size:100%;}
h4 {margin: l.-4em 20px . 5em; color:#069;}
p {margin: 0 20px;}
p.iargertext {font-size:2em; margin-top: lem;}
span.raised {font-size:.4em; vertical-align:50%;}
p.custom sub {vertical-align: sub; font-size: 65%-;}
p.custom sup {vertical-align:65%; font-size:65%;}
p.customsmall {font-size:.8em;}
</style>
</head>
<body>
<p class=,,largert:ext">Vertical-align <span class="raised">can be used in
all kinds of</span> interesting ways.</p>
<h4>This example uses default settings of the xhtml tags "sub" and nsup"</h4>
/

Применение стнией шрифта и геисга 101
<p>Enjoy mouncain spring H<sub>2</sub>0 - it's 10<sup>5</sup> cimes better
znan tap<sup>&aagger;</sup> water!</p>
<p><sup>&dagger;</supxem>This means water provided through a municipal
distribution system</emx/p>
<h4>This example uses classes for custom vertical alignment and type
=izes</rT4>
<p class=,,cuscom">Enjoy mountain spring H<sub>2</sub>0 - ic's 10<sup>5</
5up> times better than tap<sup>&dagger;</sup> water!</p>
<p class="customsmall,l><sup>&dagger;</supxem>This means water provided
"hrough a municipal distribution system</emx/p>
< body>
Применение стилей шрифта и текста
спользуя разметку, созданную в главе 1, посмотрим, как можно преобразовать
е в более профессиональную. На рис. 3.23 мы видим разметку без добавления
стилей.
Применив только свойства, рассмотренные в этой главе, мы можем сделать
страницу более привлекательной (рис. 3.24).
Вот что мы добавили.
1. body {font-family:verdana, arial, sans-serif; font-size:100%;
margin: 1 em 2em;} - здесь мы задаем базовые стили для шрифта и
указываем поля страницы. Свойство font-family наследуется всеми
последующими элементами, и поля отодвигают содержимое от краев страницы.
2. * {margin: 0; padding: 0;} - мы «нейтрализуем» все поля по умолчанию
для всех элементов, съедающих слишком много места по вертикали в
версии разметки без стилей. Мы также обнуляем все отступы, что позволит
создать единый облик списков для всех браузеров. Удалив все поля и
отступы по умолчанию, мы добавим их только к нужным элементам.
3. h3 {font-size:.7em; word-spacing:lem; letter-spacing:-.05em;
margin: . 5em 0;} - этим правилом мы задаем меньшее межбуквенное
пространство и увеличиваем пробелы между словами.
4. hi {font-size:1.lem; text-transform:uppercase; text-align:center;
letter-spacing: .2em; margin: .5em 0;}- выравниваем заголовок по
центру и увеличиваем расстояние между буквами, которые делаем
заглавными.
i
/

102 ГЛАВА 3. Стили для шрифтов и тешгга
'*«*■ ***.'* Т**"*^-' -^Яй" *>Ч-'-.ЙЙ» " <-S*:
<ЛЧ-^ ._. >BJ?- ,.. ■*,.,
Н->"^нА А"4 С i;[ + f'0k^://vvwvy>bJ.cbm/styHn/clO%£*" Goo3,€ ъ
tlie designer's guide to
Cascading Style Sheets
a New Riders book by Charles Wyke-Smith
Moving to XHTML
Creating XHTML compliant pages simply requires following a few simple rules* These
rules may seem counter-intuitive or just a lot of extra work at first, but the benefits are
significant and acrually make coding sites much easier. Also. XHTML code can be
easily validated online so you can -sure your code is correctly written*
Here are the key requirements for successful validation of your XHTML code.
1. Declare a DOCTYPE
2. Declare an XML namespace
3. Declare your content type
4. Close every tag, enclosing or non-enclosing
5. All tags must be nested correctly
6. Inline tags can't contain block level tags
7. Write lags in lowercase
8. Attributes must have values and must be quoted
9* Use encoded equivalents for left brace and ampersand
more about these requirements
Here are some useful links from the web site of the W*C (World Wide Web
Consortium), the guiding body of the web's development.
• W3Cs XHTML validator
• W3C's CSS validator
• XHTML Resources
• C^SS Resources
© 2004 Charlie Wvke-Smith and New Riders.
■*
k^jgf^ ^^^^b.^^^x^^:^, ■ ^;^^ш>^^
ЙГТ
Рис. 3.23. Пример разметки без добавления стилей
5. р {font-size:.75em; line-height:1.5em; text-indent:-1.75em; margin:
0. 5ет 0 .7Бет 1.75ет;} - слегка уменьшаем размер шрифта, повышаем
высот)' строки и задаем отрицательный отступ для первой строки.,

гашение стилен шрифта м текста
103
:-VW
> ч.--. > -с,-jrv ■»-■:■ ^
j -« * i^is А А А С П + ■•f0http://wvvw.bbdxom/siyfini.©^<V Google i
*■■" г ■*^-T*hnnmAa*A-' ■
С
tfte designer's guide to
Cascading Style Sheets
a New Riders book
с
by Charles Wyke-Smith
VING TO XHTML
Creating XHTML compliant pages simply requires following a few simple rules. These
rules may seem counter-intuitive or just a lot of extra work at first, but the
benefits are significant and actually make coding sites much easier. Also, XHTML
code can be easiiy validated online so you can be sure your code is correctly
written.
Here are the key requirements for successful validation of your XHTML code.
i. Declare a DOCTYPE
2. Dedare an XML namespace
3. Declare your content type
4. Close every tag, enclosing or non-enciosing
5. All tags must be nested correctly
6. Inline tags cant contain block level tags
7. Write tags in lowercase
S. Attributes must have values and must be quoted
9. Use encoded equivalents for left brace and ampersand
Cjrxore about these requirements
Г.
Here are some useful links from the web site of the
Consortium), the guiding body of the web's deve
W3Cs XHTML validator
♦ W3Cs CSS validator
♦ XHTML Resources
W*C EWorld Wide Web
ent.
CSS Resources
© 2004 Charlie Wyke-Smith and New Riders.
v* -
Ein&W*^r'>. -'У.;—..
и
zrr^-^. :-:h ■:iv&?:&2%£&m
Рис. 3.24. Та же страница с добавленными стилями
6. ol {margin-left:бет; font-size:.75em; line-height:1.5; font-
style: italic; } - задаем большое иоле слева для смещения списка. Для
текста списка указываем курсив и увеличиваем междустрочное расстояние.
j

104 ГЛАВА 3, Стили &ш шрифтов и текста
7. a {margin-left:6.5em; font-size: Лет;} - задаем левое поле, чтобы
ссылка под списком располагалась точно под ним.
8. a: hover {text-decoration :overline underline;} -при наведении
указателя мыши на ссылку она выделяется надчеркиванием.
9. ul {margin-left:бет; font-size:.75em; line-height:1.75; font-
style: italic;} - этот список также смещен и выделен курсивом.
10. ul a {font-size: lem; margin: 0;} - пунктами списка являются ссылки,
поэтому для них мы с помощью контекстного селектора задаем стиль,
отличающийся от стиля ссылок, не входящих в список.
11. sup {vertical-align: 35%; font-size:90%;} - доработка тега sup.
12. div#homepagefooter p {font-size:.7em; font-weight:bold;}
-создаем мелкий жирный шрифт для области нижнего колонтитула.
Помните, что при размещении этих стилей в отдельном файле они будут
применяться ко всем страницам^, содержащим ссылку на этот файл, то есть вы
сможете применить единый стиль ко всему сайту, указав стили лишь единожды
во внешнем CSS-файле.

j.si3B --». Расположение .
элементов
С самого зарождения Интернета дизайнеры использовали таблицы для
создания основы разметки Web-страниц. Это влекло за собой такие нежелательные
-юследствия, как применение прозрачных изображений-отступов GIF, тегов
переноса строки и неразрывных пробелов. С помощью CSS можно располагать
XHTML-элементы с большей точностью без необходимости добавления
презентационных элементов в код.
Применяя такие свойства CSS, как поля, отступы и границы, можно достичь
такого же или даже лучшего результата. При этом ваш код останется логичным
v. компактным, а созданные стили можно будет использовать для всех
одинаковых элементов сайта.
Ваш успех в использовании этих приемов зависит от понимания блочной
л одели, свойств position и display. Блочная модель контролирует
расположение всех элементов разметки, свойство position задает взаимоотношения рас-
-ютожения элементов страницы, а свойство display отвечает за то,
отображается ли элемент на одной строке с другими или на новой строке.
Д

106
ГЛАВА 4* Расположение элементов
Научитесь
использовать
поля
Узнайте» как
применять отступы
для выравнивания
содержимого
внутри элементов
Научитесь
работать
с рамками
г
Узнайте, как работает блочная модель и почему это так важно
: I
•v
-#
ж
margin
padding
v
*$б
Hji^v
■J. -^ -ы- - - ■->
This is the conie&ij—osfiterft
fits edge to '.edge^i sft t|e
box unless padding p ,Ы§Ч ■■
which visually pusjfe ш^-r' ":
tent in wards aw'i'*' < ip.
edge of the box* The width of
content is varied by altering thej :
size of the? box or adjusting) ,
the padding. The line around
the epfitent here is for clarity
only?^ *■*
'i1
;>.*
&*&*&
■ i iwuiwii iji
bir _-£
/
.-%.
V T< '_■
.V-
Л
■чг,- v ■■ s*~ ■ -,
Результат на экране
\ .-£ -Л „ J, * ■>_
■■f-.
н я
|»*-Л
>*-"^iv'^^ -\-
-.uu
'oi *'

Елочная м®8&пь 107
Блочная модель
Так как каждый создаваемый вами элемент представляет собой блок на
странице, получается, что XHTML-страница по своей сути является набором блоков.
По умолчанию границы каждого блока невидимы, а фон является
прозрачным. С помощью CSS отображение границ и фона блоков можно легко
включить. После этого вы увидите структуру страницы совсем в другом свете.
Совет Дополнительные сведения о блочной модели можно найти на сайте www.w3.org/TR/
REC-CSS2/box.html.
Ha рис. 4.1. мы видим два абзаца текста, для каждого из которых включено
отображение границ и добавлен серый фон с помощью следующего правила:
р {border: lpx solid #333; background-color:#EEE;}
Here's a paragraph of text. Nirte the border is turned on and the
background is colored, so it's now clear that the content is contained in *
a box.
Here's another paragraph so that you can see that there are default
margins (spacing around the outside of the box) that creates vertical
space between the paragraphs that creates the effect of an empty line
between each paragraph.
Рис, 4.1. Отступы между абзацами созданы с помощью полей
Чтобы научиться не просто использовать XHTML-разметку, отображаемую
браузером, необходимо понять, как можно контролировать внешний вид и рас-
толожение блоков элементов. Первый шаг на пути к этому - понимание прин-
iiiina построения блочной модели (рис. 4.2). На этом рисунке графически
показана структура блока.
С помощью CSS можно настроить три аспекта блочной модели:
• границу - толщину, цвет и тип границы;
• поля - расстояние между блоком и соседними элементами;
• отступы - расстояние между содержимым блока и его границей.
Внимание Обратите внимание, что точный размер thin, medium и thick в спецификации
CSS не определен, поэтому, разные браузеры могут трактовать эти параметры
по-своему. Типы линий, за исключением solid - простой сплошной линии, -
также явно не обозначены в спецификациях стандарта C5S, поэтому,
пунктирная линия может иметь разные промежутки и пунктиры в различных браузерах.

108
ГЛАЗА 4. Расположение элементов
Поле
Г
Рамка
■ Отступ
££
<4рЛи#
Область содержимого
' *: >:
■«*£
■с -■»
■:yf
.->
<"■ ••'><■
Рис. 4.2. На рисунке показана блочная модель, а также направления действия полей и отступов
Попросту говоря, поля рассчитываются от границы наружу, а отступы - внутрь.
Так как у блока четыре стороны, все свойства, связанные с полями,
границей и отступами имеют по четыре значения.
Граница блока
С границей связаны три свойства:
• Width - может иметь значения thin, medium, thick или числовое
значение в любых единицах (em, px, % и т.д.);
• Style - может иметь значения none, hidden, dotted, dashed, solid,
double, groove, ridge, inset, outset;
• Color - позволяет указать цвет в любом формате (RGB, шестнадцатерич-
иый формат или ключевое слово).
Можно за один раз задать свойства границы блока для всех четырех сторон:
р {border-style: solid;}
или только для одной стороны:
р 'border-left-style: solid;}
Либо можно использовать сокращенный формат записи и указать четыре
различных стиля для каждой из сторон за один раз:
р {border-style: solid dashed double inset}
/

Блочная кгэдедь 109
При этом порядок сторон таков: верхняя, правая, нижняя, левая.
Однако маловероятно, что вам потребуется.задать различные стили границ
для каждой стороны, потому что разные границы сторон одного блока
выглядят довольно странно. С другой стороны, довольно часто для всех сторон
указываются границы одного типа и цвета, но с разной толщиной. В таком случае
достичь желаемого результата можно с помощью двух правил. В следующем
примере первое правило отвечает за общие стили для всех четырех сторон,
а второе указывает различия между ними:
"i2 . headbox {border:soiid #AAA; padding:2px;}
г.2.headbox {border-width:3px Ipx lpx 3px;}
Во втором правиле соблюден следующий порядок сторон при задании
ширины границ: верхняя, правая, нижняя, левая. Результат показан на рис. 4.3.
[Graphic heading j
в
Рис 4.3. Два разных стиля границ одной рамки
Обычно же граница рамки задается одинаковой со всех сторон, для чего
достаточно одного правила:
p.warnirg {border: 4px solid #3FF} /'^добавляет толстую красную ранку вокруг
абзаца*/
В ходе разработки страницы довольно полезно включить отображение
границ, чтобы четко видеть структуру документа и применяемые стили (в том
числе поля и отступы). По умолчанию толщина границы задана как medium,
* order-style имеет значение попе, а цвет рамки - black. При этом граница не
идиа, и все что требуется сделать для ее отображения - написать правило
z {border:solid}
После этого границы абзацев станут видны. Обратите внимание, что при
этом разметка может сдвинуться, так как границы увеличивают размер
элементов. Другим способом отображения блока является добавление фонового
цвета, при этом размер блока не изменится.
Сокращения свойств
"овольно скучно задавать отдельные стили для каждой стороны блока, указывая, допустим,
юля, отступы или границы. CSS предлагает более краткий способ сделать это с помощью
одного объявления. В таком объявлении порядок сторон всегда неизменный: верхняя,

110 ГЛАВА 4. Расположение элементов
правая, нижняя, левая. Чтобы запомнить его можно сравнить такой порядок со стрелкой
часов, проделывающей круг. Итак, если мы хотим указать поля для элемента, вместо правила:
{margin-top: 5px; margin-right :10px,- margin-bottom: 12px; margin-left: 8рх;}
мы можем просто написать:
{ margin :5рх Юрх 12рх 8рх}
Обратите внимание, что значения указываются через пробел. Если вы не указали
значение для одной стороны, используется значение, указанное для противоположной:
{margin: 12px Юрх брх}
В этом правиле отсутствует последнее значение для левой стороны, поэтому будет
использовано значение, указанное для правой - 10 пикселов.
В следующем правиле:
{margin:12рх Юрх}
мы указали значения для верхней и правой сторон, соответственно, для нижней и левой
стороны будут использованы они же.
Наконец, если указано только одно1 начение:
{marin:12px}
поля со всех сторон будут одинакового размера.
Если вы хотите задать нулевые значения для одной или нескольких сторон, можно
просто указать 0 без единицы измерения:
{margin: 2рх 0 0 4рх}
Отступы блока
Отступы добавляют пробелы между содержимым блока и его границей. Как
часть блока отступы также закрашиваются фоновым цветом. На рис. 4.4
показаны два абзаца: один без отступов, а второй - с ними.
Without padding, any border that you add to an element
such as this paragraph \s very close to the content; not
always the desired result,
w—и—*миаицциш1111 ■———^ ii —i^^-^. mi mm —— ■■himi I in тиччг
Even a small amount of padding gives the content some
visual breathing space. Note that the padding area
around the content also takes on the background color; it
makes perfect sense that the background color extends
to the border and does not just color the area behind the
content itself.
Рис. 4,4. Отступы создают свободное пространство между содержимым блока и его границей

Бяочйзй модель
111
При создании разметки страницы из элементов, имеющих наполнение, с
помощью отступов можно создать пустое пространство между ними. Раньше для
этого использовались табличные ячейки и прозрачные GIF-изображения,
теперь этого можно достичь с помощью средства CSS.
Поля блоков
С полями дела обстоят несколько сложнее, чем с отступами и границами. Во-
первых, большинство элементов блочного уровня (например, абзацы,
заголовки, списки и т.д.) по умолчанию имеют некие поля. На рис 4.5-4.7 четко виден
эффект применения полей.
3 Makpoi дёщ ^tertwdft Internet Expforfcf
File frk Vie* Favorites Iods Hs?p
.tf
—. ' »
Margin demo
No styles are applied to either of these paragraphs
However, clearly there is space between them.
Done
Interntt
«МММ
Рис. 4.5. Так выглядят поля по умолчанию в браузере
Margin demo with borders
This is the same heading and two paragraphs but now the borders
are visible, end you can see how the default margins creates space
between the elements.
Margins push an element away from elements It would otherwise
touch.
Рис. 4.6. Включив отображение границ абзацев, мы видим область действия полей
Margin demo with borders, without
margins
Here the margins are set to 0 (zero), so the elements1 borders
actually touch.-
Be aware that almost every element has margins by default, and you
will often want to eliminate or adjust the default margin setting to
get the effect you want.
Рис. 4.7. После удаления полей все три элемента сомкнулись друге другом

112 ГЛАВА 4. Расяоложем» шем®т&&
Рекомендуем добавлять следующее объявление в начало всех таблиц сти-
1ей - оно удаляет все поля и отступы по умолчанию (звездочка означает «все
элементы»):
"* {margin:0,■ padding:0}
После применения такого правила все поля и отступы по умолчанию будут
\далены.
Зачастую при указании полей текстовых элементов требуется использовать
различные единицы измерения. В таком случае, правое и левое поле абзаца
можно задать в пикселах, чтобы текст находился на одинаковом удалении от
края страницы и панели навигации, а верхнее и нижнее поле - указать с
помощью em, чтобы пространство между абзацами менялось пропорционально
размеру шрифта. Делается это при помощи следующего кода:
р {font-size: lem; margin: .75em ЗО.рх;} .;
I
i
В данном примере расстояние между абзацами всегда равно трем четвертям
от высоты шрифта, при увеличении базового размера шрифта для тега body
увеличится не только размер абзацев, но и интервалы между ними. Правое и
левое поле абзацев останутся неизменными. Более подробно этот вопрос мы рас-
смотрим в главе 5.
Накладывание полей
Верхние pi нижние поля элементов накладываются друг на друга. Представим,
что у нас есть три абзаца, следующих- один за другим, к каждому из них
относится следующее правило:
р {width:400рх; height: 50рх; border:lpx solid #000; margin:, 50рх 0 ЗОрх 0;
background-color: -fCCC; }
* Возможно, вы предположили, что общее расстояние между абзацами будет
равно сумме нижнего поля предыдущего абзаца и верхнего поля последующе- -
го, то есть 80 пикселям в нашем случае, но это не так. Верхнее и нижнее поле
накладываются друг на друга и общее расстояние между абзацами равно
величине большего из этих двух полей, в нашем случае 50 пикселам. На рис. 4.8 мы
видим результат такой разметки.
Примечание в отличие от верхнего и нижнего поля, боковые поля не накладываются друг на
друга. Вместо этого их значения суммируются. В результате расстояние между
двумя соседними по горизонтали элементами равно сумме их смежных полей.
■ 1 * i

Размер блока 113
-:' <Ь ';( А - A^r^IpRfehttpy/w У**- Сое J
* i.*
Ч!?ГГ*Г&-"> ■- -i, ■■ : „ ч '. .. .S. '■;
нШйШйёйТсй'^ *ha^ftyJplWef^; JobfeS like;
ffie^-fcp martin .of ёайЛ^эягдм Ut
bottom- ^ *~ *~-^л—*-^--= ■■-■——*-"•■- «.r,^-»„^t-.
te^.fe^A*:-^tj^?5i &8? ^^tM:^\-;...:^^^^,
Рис. 4.8. Верхнее и нижнее поле накладываются друг на друга
Накладывание полей обеспечивает отступ первого абзаца, заголовка или
элемента списка от содержащего его элемента для поддержания логической структур
эы документа. Для последующих однотипных элементов такое отделение уже не
требуется, соответственно, надобности в двух полях нет, и они накладываются.
Размер блока
Каков размер блока? Этот вопрос, вероятно, будоражил умы и производителей
браузеров, и даже участников World Wide Web Consortium (W3C). Он очень
^ложен для начинающих, да и для экспертов тоже. Давайте шаг за шагом
разберем блочную модель и обсудим ее ширину и высоту.
Ширину блока можно задать с помощью свойства width:
{width:400px}
Затем можно включить фоновый цвет, чтобы размеры блока были видны:
г (width:400px; background-color:#CCC}
На рис. 4.9 мы видим блок шириной 400 пикселов с фоновым серым цветом.

114
ГЛАВА 4. Расположена элементов
«*".-
* v:-:1, f-Ji.
.Box'orodef xfemcr^'
miiMiaaaii
■f "* ■>'M^' 1 A- -A-! C,'l + I @hnp://www.bbd.cofiO ЫОг Google :
This; element is 400< pikeiswidev If vtfev didn!t set"
the width explicitly^ the ;eieme.nt would extend:^
the; width bf^^page^.a^the/bodY^ta^ls Its ;.,
jcoritaining element; I set the- body's margins
the р^га^арН^лгшг^пз&'О {zero)/s6^theih
,'ef ii/i eatings wo\MK. sbpw nMfcysdehio, -
■c.:- -■"
•■ •■ *STKfc,.: '
З^-- ., ^ ; .-,, ... ,;-^^r- Ц^^ЛЯПМ
Рис. 4.9. Если указана ширина блока, он занимает не весь содержащий его элемент, которым
в данном случае является body
Без добавления отступов содержимое блока занимает его целиком. Пока что
все логично, но ситуация разительно изменится, как только мы захотим
добавить границы и отступы. Итак давайте зададим отступ в 20 пикселов со всех
сторон блока:
р {width:400px; background-color:ЙССС; padding:0 20рх}
По логике, если мы добавили отступы по 20 пикселов с двух сторон, блок
шириной 400 пикселов должен сократиться до 360 пикселов, но это не так.
В странном и чудесном мире CSS наш блок в результате таких действий
увеличивается по ширине на 40 пикселов (рис. 4.10).
*■ -< ->' K& и :a»= -А Л С ПГ+ Г 0 http://www.bbd.con© .* Q- Google
^
; ThtM^iernentis: 4Q0;pjxels -wiid&. If we didn't set:
Ше ^idth exp{idtiy/:the! element would extend to
tne;wi^hr6Jthe;p^ev.as|thebo^ytao^is it$; \I
т?ШШ)д element:^ ©№e>ch side of ;Ше ;ЬЬХ/ the
ih1giis"2№ bixeis.
s^U-PJFif^ :л; .!-.«-." ■■ Д.-^.'- i .j» х^'С'Л. > ■:
_^t
м'^йг;»^
Рис. 4.10. Добавление отступов привело к увеличению размеров блока по ширине
Если теперь мы добавим границы толщиной 6 пикселов справа и слева:
р {width:400px; margin: 0; padding:0 20рх; border:#000 solid; border-width
0 брх 0 брх; #background-color:#CCC; padding:0 20рх}

Размер блодса 115
размер блока по ширине увеличится еще на 12 пикселов (рис. 4.11). Теперь
исходный блок шириной 400 пикселов имеет ширину 452 пиксела: б + 20 + 400 +
20 + 6 = 452.
» -£ч ,'■■ А; ' "■ * v ■ "" " v" -"^^ ■ -ч— !■«»■■■.:■ " "" A-':- "* ¥"■
? Г-t:-т _ , . . -Soximode* demo * X
-■■■ "=-* "; '-.*■** A A:s.A?tt* *-?Z
1. &-.W4...... *■ -
* * ^'ifBl'' A A l^f^":Г+^J©htф://www.bbd.coп©v^ Q- Google
; - Jhis:^0rnfent i£40Q pixelsrwsde^ If w£ didn't set' \
jj :-^e;witltfi фсрКсШу, the elementwould extend to ..''
^. ;tfee width of the; page^as.the body tag is .its; * ;■ v :>
"xdii^nirig element.'Oh «ach:slde of thevbox^the ;
^ddding^.2<3;.pi>ce(5 jnd'the border is j5 pixels. -*
— ,гфЫ*&*Т*Л*
... .W.V , j» л
-."i.xz:--'-v -■> Л
л. " JS " ■*£■ y~"~i ■** -•■ - .-
-■if: .j- , - -. ■ jV:-.,*-"-^?v-'__
Рис 4.11. Добавление границ привело к увеличению ширины блока
Давайте теперь добавим правое и левое поле для создания свободного
пространства вокруг блока (рис. 4.12).
,: {width:400px; margin: 0 ЗОрх; padding:0 20рх; border:#000 solid; border-
"iach: 0 брх 0 брх; background-color:#CCC;}
.I .<*>*' fill A A f! С Ц + ]л8в http://www.bbd.eom/s" n Or Coogfc
"?
;-■:-■>■ -J> -^ ■>> * .:i, , .ft *-■>*■ f- " "
....... . . ^ 1-Ap "^ t
'' sThis elehrient is 400 pixels: ynffe^Jf we didn't set
P the Width explicitly, the eiementiwould :exfend ta
i ;;the>vidth of the paige/^s;tfTfe.;b6dy iag islts^
, rilargins: are set to 30 rixeis.
Рис. 4.12. Поля создают пустое пространство вокруг блока
Добавив поля по 30 пикселов по бокам блока; мы еще более увеличили его
}фину, что естественно, так как поля находятся снаружи элемента. При этом,
.смотря на то, что по логике внутренние отступы и граница блока не должны
1ять на его ширину, именно это и происходит.
Данный момент может оказаться весьма существенным в процессе отладки
тонкой настройки сайта. Вы создали разметку с массой элементов, учтя каждый

116 ГЛАВА 4. Раодоложздше элементов
пиксел, и если вам понадобилось добавить отступы или границ); то придется
вычесть соответствующее значение из общей ширине рамки\.
Кроме того, Internet Explorer Версии 5. и 5.5 для Windows обрабатывает
блочную модель совершенно по-другому. Q# вычитает размер отступов от
общего размера блока, сжимая содержимое. Internet Explorer б ведет себя так же,
как IE5 в режиме Quirks (или без указания DOCTYPE). Однако Internet Explorer
6 поступает «корректно», как описано выше, если DOCTYPE указан как
Transitional или Strict.
Итогом этого обсуждения блочной модели является то, что при указании
ширины блока во всех совместимых со стандартами современных браузеров вы
задаете ширин)' содержимого, а затем значения полей, отступов, границ
просто прибавляются к ней.
Теперь давайте разберем другой ключевой компонент, о котором не следует
забывать при создании CSS-разметок, - свойство position.
Свойство position
Сердцем CSS-разметки является свойство position. Оно определяет исходную
точку для расположения блока каждого элемента. Давайте разберем, что это
означает.
Свойство position можно использовать с четырьмя значениями: static,
absolute, fixed и relative. Значением по умолчанию является static. Да-
йайте с помощью примеров разберем их действие. В каждом примере мы
будем использовать три абзаца: первый, второй и последний из них будут
отображаться со значением static, а значение свойства position для третьего
абзаца мы будем менять. Мы добавили специальный класс specialpara для
третьего абзаца, чтобы менять значение свойства и не затрагивать при этом
остальные абзацы.
position: static
Вначале рассмотрим, как выглядят наши абзацы со значением static по
умолчанию (рис. 4.IS). '
Указав значение static, мы расположили каждый элемент друг под другом,
каждый абзац находится под предыдущим, они разделены полями по
умолчанию. ^ '•■
Чтобы сменить такой порядок расположения, следует указать какое-либо
другое значение свойства position.
/

Свойство position 117
\., s№*.
*.- №£-«-:-■.?■>'* * л^*^"
&
л ^. *■ ■
.... Л1. Л"»-.
4:>q A i; А гА I С П +;pehitp://wyvw-bbd.com/stynn/Qr/>Q>-Google
* ■
^J
This is the first paragraph of the positioning demo. The objective is to demonstrate
the difference between the four position property values: static, relative, absolute and
fixed. The key to understanding the effect of these values is to understand that an
every element is positioned with respect to another clement; which clement that is can
be changed by changing the value of the position property.
This is the second paragraph of the positioning demo. The objective is to demonstrate
[he difference between the four position property values: static, relative, absolute and
fixed.
This is the third paragraph of ibe positioning demo* This paragraph has an id so we
can change its position value without affecting the other paragraphs. The objective is
to demonstrate the difference between the four position property values: static,
relative, absolute and fixed.
This is the fourth paragraph of the positioning demo. The objective is to demonstrate
Ithe difference heny* i i • м "м • »» u ■ i absolute, and I T,
Рис. 4.13. Блочные элементы располагаются один над другим, разделены полями по умолчанию
osition: relative
Теперь укажем для третьего абзаца значение relative. Можно перемещать
третий абзац относительно его расположения по умолчанию с помощью свойств
:ор, left, right, bottom. Обычно желаемого результата можно добиться с по-
ющью одних только top и left. Например, такое правило:
7=specialpara {position:relative; top:30px; left:20px;}
позволяет нам получить результат, показанный на рис. 4.14.
Теперь абзац смещен на 30 пикселов вниз и на 20 пикселов вправо. Однако '
чак вы заметили, положение остальных элементов не изменилось. При этом
зажно помнить, что при смещении элемента вы должны убедиться, что для
этого в разметке достаточно места. В нашем примере для смещения третьего
абзаца необходимо добавить верхнее поле к четвертому абзацу размером
30 пикселов или более,.чтобы сдвинуть его вниз, - это предотвратит наложе-
"ие третьего абзаца на четвертый.
Внимание
Можно также использовать отрицательные значения для перемещения
элемента вверх и влево.

118
ГЛАВА 4. Расположение элементов
■я ^
ft
-:'ГК*^:^ * г * - i Positioning,ttemo ■ ^r... -* ■=:■.." " Л-—Г-^
.{ « ►-. : -6У г А .. А- *["-0 И + :|^0hitp://wvw.bbdcom/stylin/©~r' Q- Google "
This is the first paragraph of the positioning demo. The objective is to demonstrate
the difference between the four position property values: static, relative, absolute and
fixed. The key to understanding the effect of these values is to understand that an
every clement is positioned with respect to another element; which element that is can
be changed by changing the value of the position property.
This is the second paragraph of the positioning demo. The objective is to demonstrate
the difference between the four position property values: static, relative, absolute and
Fixed.
This is the third paragraph of the positioning dcnx>. This paragraph has an id so wt
can change its position value without affecting the other paragraphs. The objectively
[o demonstrate the difference between the four position property values: static,
relative, absolute and fixed.
Thtsrj& uic luufurpdjagidpu-ui liic puMuuumg uemu. inn ulfjcl'uvc is iu uchkhimuic j '-»
_ the difference between the юиг.шзшорлжшеггу уаИ1^£15Ш{1с^^1ш^аЬш1ше and 1 LL
Рис. 4.14. При относительном расположении можно смещать элементы по отношению к их
первоначальному местонахождению
positioiuabsolute
Абсолютное расположение принципиально отличается от предыдущих двух,
так как оно полностью вырывает элемент из общего потока документа.
Давайте обратимся к примеру: »
pttspeciaipara {position:absolute; top:30px; left:20px;}
Результат применения этого правила показан на рис. 4.15.
На рис. 4.15 мы видим, что пространство, ранее занимаемое третьим
абзацем, исчезло. Элемент с абсолютным позиционированием стал независимым
от окружающих его элементов разметки - теперь он располагается
относительно элемента верхнего уровня - body. Пришло время поговорить о контексте
размещения.
Можно сказать, что по умолчанию контекстом размещения элемента с
абсолютным позиционированием является элемент body. Как видно на рис. 4.15,
абзац смещается на указанное нами расстояние относительно элемента body,
а не относительно местонахождения самого абзаца по умолчанию.
ч

Свойство posltiait
119
" i. V. ■
^ :■■> ."ч
^fip$Mon|ng^em^
l^C- ОС W-л"
Ifc*
fci-чГ"
t-;y.A^.^
T *-V'
« ■ ► fc| <&:l-l A : A f fCj f-M#ft hnp://www.bbd-com/siylin/©: ~! Or Google
-::k .-.-■.-. ;. ..
This is the first paragraph of the positioning deroo. The objective is to demonstrate the
~™ This is the third paragraph of the postioning demo. This paragraph now has an id so
. wc can change its position value without affecting the other paragraphs. The
objective is to demonstrate the difference.between the four position property values:
ele
chi
static, relative, absolute and fwtxl
This is the second paragraph of the positioning demo. The objective is to demonstrate
the difference between the four position property values: static, relative, absolute and
fixed.
This is the fourth paragraph of the positioning demo. The objective is to demonstrate the
difference between the four position property values: static, relative, absolure and fixed.
«8™.
:- ■•.<*. : *. . ^ ^ > -"•" 'fit: * :. .-. ■ ^ ,,
=;.. '- _: •"" ■■-;-^;- гл.. ""■■ ■■?■-■-..\:.л..^—&
Рис. 4.15. Абсолютное позиционирование вырывает элемент из общего потока документа
Так как контекстом размещения элемента с абсолютным позиционировани-
"М является элемент body, при прокручивании страницы элемент
перемещается, так как body также перемещается.
Прежде чем мы узнаем, как в качестве контекста позиционирования для
"смещения элементов можно использовать другие элементы кроме body,
давайте познакомимся с последним возможным значением свойства position.
osit ion; fixed
элксированное позиционирование схоже с абсолютным за исключением того,
что контекстом размещения элемента является область просмотра (например,
кно браузера или экран карманного компьютера), поэтому элемент не пере-
.ещается при прокрутке страницы. На рис. 4.16 и 4.17 показан пример фикси-
*■ занного размещения элемента.
Такой эффект позволяет имитировать устаревшие фреймы. Например, мож-
~э создать элемент навигации, остающийся на месте при прокрутке страницы.
Однако имейте в виду, что position: fixed не работает в IE/Win. На сайте
~_gSoup.com' (http://devnull.tagsoup.com/fixed) вы можете найти описание улов-
, как задать фиксированное расположение в Internet Explorer для Windows.

120
ГЛАВА 4. Расположение элементов
"Positioning^demO::
« ~>
"'■"■■■■■" "" ■ ■■<»■■—-■\ ■,-=,*'"'lin Гний ■ ■■—■■•i.faVfcii-^ -ф
Ч Ф"Ь А А.п С:-;■ + :0 http://wsvw.bbd.com/srylm/ch' -^ <V Google
J Л ■-■ ■LJ'J J^ И-
... ,-..Г — ^Й№ - * ■"■ V.
- ■-■ -*4- - lurr" ni.o>
Г
This is the first paragraph of the positioning demo. The objective is to demonstrate the
difi
fix<
eve
be
This is the third paragraph ox the positioning demo. This paragraph has an id so we
can change its position value without affecting the other paragraphs. The objective
is to demonstrate the difference between the four position property values: static,
relative, absolute and fixed.
This is the second paragraph of the positioning demo. The objective is to demonstrate
the difference between the four position property values: static, relative» absolute and
fixed.
*&
This is the fourth paragraph of the positioning demo. The objective is to demonstrate
the difference between the four position property values: static, relative, absolute and
fixed. I've added a lot of extra text into this paragraph so that the layout is longer than
1^Ш^^*м ■■ ■■■ ■■■■■■ I H| ■ MWIIII !■ II ■■ ■!■"■ '■ ^ Qrtllllll I * > ■■ ^ li*J
u
v ■' ii :'■ «
Рис. 4.16. На первый взгляд фиксированное расположение схоже с абсолютным
.:- ..п. ■■:■.к 1. л.<- >
-. "у
PositJohing-demo - к::"''
.«« :> f ] 4fr*jj.A , A {..{ С 11 +■ jf Qhttp://vvvvw.bbdcom/stylin/cb ^;^<V Google ■
De"cnaitgca"D\ L^iutiginjrme^vntne огше position property:
* *
^с This is the third paragraph of the positioning demo. This paragraph has an id so we
fjX(Can change its position value without affecting the other paragraphs. The objective
is to demonstrate the. difference between the four position property values: static»
relative, absolute and fixed.
^
Th
l 4- * ft V-" *•
the difference between the four position property values: static, relative, absolute and
fixed. I've added a lot of extra text into this paragraph so that the layout is longer than
the browser window to better demonstrate the effect of fixed positioning. I've added a
lot of extra text into this paragraph so that the layout is longer than the browser
window to better demonstrate the effect of fixed positioning. I've added a lot of extra
text into this paragraph so that the layout is longer than the browser window to better
demonstrate the effect of fixed positioning.
4L/
A
>, 'Л V'",T' ^-'..i
Z£±
.^ ."^::?.;
ч.;._>4- 0 V?l- ■-«M^AW-f « " ■"'■"
Рис. 4.17. Однако при прокрутке страницы мы видим, что такой элемент продолжает оставаться
на своем месте
Контекст расположения
Давайте еще раз коснемся поподробнее контекста размещения элементов, так
как это понятие довольно важно для желающих отказаться от устаревших
табличных разметок. Говоря простым языком, контекстное расположение означает.
/

*
Плавающие элементы м очистка 121
что при смещении элемента с помощью свойств top, left, right, bottom вы
двигаете его относительно другого элемента; этот второй элемент и
называется контекстом расположения. Контекстом расположения элемента с
абсолютным позиционированием по умолчанию является элемент body.
Элемент body содержит все остальные элементы разметки, но в качестве
контекста расположения можно использовать и другие элементы, изменив
значения их свойства position на relative.
а
Например, для такой разметки:
<body>
<civ id=f!ouLer">BHemHMu div ,
<^iv id="inner">Внутренний div</div>
< div>
< body>
Если мы зададим для свойства position внутреннего div значение absolute,
"н будет расположен относительно body, так как body является по умолчанию
онтекстом расположения. С помощью свойств top и left мы сместим внутреи-
- ш div относительно body, как показано на рис. 4.15.
Если затем для внешнего div задать значение relative свойства position,
нтекстом расположения для внутреннего div станет внешний div. Теперь
помощью свойств сор и left мы будем смещать внутренний div по отноше-
ю к внешнему. Если после этого мы сместим внешний элемент, внутренний
- емент будет смещен вместе с ним.
Эта возможность использовать в качестве контекста расположения любой
элемент позволяет полностью контролировать разметку pi создавать страницы
: лесколькими колонками и областями содержимого.
вет При аккуратном использовании полей и отступов в большинстве случаев достаточно
применять лишь статичное позиционирование. Многие начинающие CSS-дизайнеры
задают расположение для каждого элемента и в результате сталкиваются с
трудностями контролирования вырвавшихся на волю элементов. Не стоит изменять значение
свойства posicion по умолчанию, если в этом нет реальной необходимости.
авающие элементы и очистка
~~ одним мощным приемом является использование свойств float и clear. Пла-
ощие элементы также выбиваются из общего потока документа. Следующие

*
122
ГЛАВА 4* Расположение зяеизеятов
за ними элементы при наличии места будут располагаться рядом. Плавающие
элементы можно сравнить с динамическим относительным позиционированием.
Свойство clear позволяет запретить элементам перемещаться вверх и
располагаться рядом с плавающими элементами. Например, если у нас есть два
абзаца, и мы хотим, чтобы только первый располагался рядом с плавающим
элементом, несмотря на то, что там поместились бы оба, нам следует очистить
второй, чтобы он располагался под плавающим элементом. Давайте более
подробно поговорим об этих свойствах.
Свойство float
Свойство float в основном используется для обтекания текстом изображений,
но также оно применяется и в качестве основы для создания разметок с
несколькими колонками. Начнем с более простого.
Итак, с помощью свойства float можно заставить текст обтекать
изображение. В этом смысле данное свойство можно сравнить с HTML-свойством align.
Вот пример:
img {float:left; margin:0 4px 4px 0;}
Это правило выравнивает изображение по левому краю, а текст обтекает его
(рис. 4.18).
"*''Float arid ctea* iie:nnb.
i-b£52ES3-j?'-"s,": *"-— *■ ""■ ^-^ «№ -*-* -.*■]
J «-■-•*- :<&'■! A. A ; С ■ +f@http://v^Q-Co j
f Here is a paragraph of text. It
wraps around the image because
the image's float property is set
ааавайай,o icft-! ■■? adtd a * iaci
margin to the right and bottom
of the image so the texi doesn't touch the image. Once
the text gets below the image, it returns to its normal
width. The floated element must appear directly before
the non-floated element in the markup for this effect to
work.
3V
m1^..r..;;/im .-... -,-.,, ■■,-.-.. .-.-..•.. .n-.- ■ ^■■■-■'
Рис. 4.18. Здесь с помощью свойства float мы заставили текст обтекать изображение
4to6bi свойство float сработало, йод разметки должен быть примерно
следующим (изображение на первом месте):
<img«./>
<р>...абзап,..</р>

Плавающие элементы п очистка
123
Вкратце, если мы создаем плавающее изображение или другой элемент, то
размещаем его как можно выше и левее (или правее для float .-right) в
родительском элементе. Элемент, следующий за плавающим, обтекает его, пока не
будет выполнена очистка, после чего возобновляется обычный поток разметки.
Примечание Дополнительные сведения о свойстве float вы можете почерпнуть из книги
Эрика Мейера «CSS 2.0: Справочник программиста». Эта книга является
полезным справочником, который должен иметь каждый программист.
С помощью float можно очень легко создавать колонки. Пользуясь
правилами:
г {float:left; width:200px; margin:0;}
_rg {float:left; margin:0 4px 4px 0;}
i создали плавающее изображение и плавающую колонку с текстом.
Результат показан на рис. 4.19.
: Яоаt'and ■ dear demo' .
,: !<>fl-flra-A-A ': 6 : - + :-0hup:O *3,Q- Go
'*u&*. :Ci&>+
«ЧЛ'л/.^О'Л^*
"4,■- ■ л-: ■:'"-" .■. ■ _.._-: '.:- '. -' " -v ..-.~ - ■■ ■: ■<• у: j- * . -л ,_ *._ ., -»■- n
J ■ Ji ' Г- ■"
5iy//w
Cascading Style Sheets
f Here is a paragraph of text.
Because it is floated next to the
floated image, it forms a '
^SJSU^ff'S^ «*«»instead of wrapping
around the text. Using the float
property, you can create
numerous columns side by side
in this way. It's best to wrap all
the columns in a div with an
explicit width, so the coiumns
don't move under one another
if the browser is set to a narrow
width. Fixing the width of the
floated columns is a good idea
too.
,. ..'^■-^^^■- ■- vn, ■ - - -3. -;-t . : „ -im_i -...■-■■■■-.■■ у.:-..::... : :-: ^,-^CU
Рис. 4.19. Добавив float к тексту, мы превращаем его в колонку
Чри добавлении свойства float и к изображению и тексту7 мы вместо обтека-
.иго текста получаем текстовую колонку. Это возможность лежит в основе со-
\ разметок с несколькими колонками. Если мы возьмем три div с фиксиро-
■ ой шириной, то получим три плавающих колонки-контейнера, в которые

124
ГЛАВА 4. Расположение элементов
сможем добавлять обычные не плавающие элементы. Более подробно мы
обсудим это в главе 5.
Свойство clear
Вместе со свойством float часто также используется свойство clear. Мы
видели, что текст может обтекать плавающее изображение. Если говорить об
изображениях, иногда требуется очистить свойство float. На рис. 4.20 мы видим
список, каждый пункт которого состоит из изображения и текста описания.
Если текст описания достаточно большой, следующее изображение
располагается на новой строке. Однако когда текст описания является коротким (как
у второго изображения), третье плавающее изображение располагается рядом
со вторым, так как там есть свободное место.
£П^
■ х-
* *■ *г *■&!-■« fJ-'jCi.- .^ щу
&t and clear #аШ
■>жр*ъ-1
+>A Ф 1 A^ Al: -С/Г. +' :0http://www.!0>VQt Google
:<t-.
This is a paragraph of text about Microsoft Office XP; this
might be a description of the all the wonderful things you
can do with email, tasks, calanders and more. Because this
text is longer than the picture of the box, the next image
— starts as a new paragraph, which is.exactly what we want
to have happen..
~ This is a paragraph of text about Microsoft Windows XP
Home version. Because it's a short piece of text, the next
image and text is up here, too!
~ This behavior is correct. Because the
previous text didn't clear the image, there is
room for this next image and paragraph, too.
i;
Ц.А'
'■".".'-■-'.-" \ Г"-* "c '"■'-' '*' *.'•<■■*••/* ■¥■;*-■ ". ; ---г
Рис. 4.20. В данном примере для достижения нужного результата одного свойства float оказалось
недостаточно
Поэтому, чтобы исправить ситуацию, требуется добавить элемент div для
очистки свойства float и размещения третьего изображения на новой строке.
Вот код примера с добавленным div:
<style type="text/ess">
p {margin :0 0 lOpx 0;} /* создает пробелы между элементами */ ,
img {float:left; margin:0 4px 4px 0;}

Ияавашщгзе элементы и сшстка 125
.clearthefloats {clear:both;} ,
</suyIe>
</head>
<body> .$
<img "src="images/office_xp.gif" />
<p>
"'..is is a paragraph of text about Microsoft Office X?..
i- ■ *
</D> "5
.1 ■« ,f : * )
<img src="images/win_home.gif" /> .,
> • * ~*
Tnis is a paragraph .of text about Microsoft Windows X?„. -e
< P> ■;
<div class=nclearthefloats"><J—это не плавающий div и его свойство clear
задано со значением both—></div>
< img src="images/win_prо -gif" />
<p>
/ w the next image and paragraph ... \
</p>
</body>
Внимание Значение both для свойства clear показывает, что div очищает
{располагается ниже) плавающий элемент. В данном случае мы могли использовать и
значение left, но, задействовав both, мы гарантируем очистку плавающих
элементов, даже если в дальнейшем сменим выравнивание элемента с left на right.
Теперь страница выглядит, как показано на рис. 4.21.
Этот новый «очищенный» элемент, добавленный между вторым и третьим
абзацем, теперь невидимо располагается под вторым изображением. Так как
-оетье изображение и абзац следуют за очищенным элементом, они
располагаются под ним, что нам и требовалось.
Примечание После всех рассуждений о вреде презентационного кода, возможно, вы
удивляетесь, почему мы с такой легкостью добавили новый элемент в код только для
достижения презентационного эффекта. Ответ заключается в том, что это
самый простой способ очистки плавающего элемента для начинающего CSS-дит.
зайнера. Профессионалы разработали способ очистки и без добавления
лишних элементов, который мы рассмотрим в главе 5. Если же вам не терпится
узнать об этом уже сейчас, можете ознакомиться со статьей на сайте Position Is
Everything (http://www.positioniseverything.net/easyclearing).

126
ГЛАВА 4. Расположение элементов
/л ■" -S; i
> ■ > У к ■ ."
■V ^^.й^-ч
_ . _ ■■ ■ ^ ."„
■к : - "" -■■■■* ■" -■ ■"" . " ... . "> ■ :. ...-> ■<*■■■■ %- *чй4й *^га " V;
£:wS. Nr^ ' " '^^A'FTOafe-snd:-ctear;<fenV^ *
rM.IWt.l4»f»*l.^.y -!—>■■■. ^ .... — - I .,- ^удм*■-ЧУ >l ll»Hll^vVI4> W»'H-l'll ' Mir» ■ill/nlV ^ 'д.1*"" " ">*■■ j ■"■AnlKllf^ -^
Ь&*>
; * \ This is a paragraph of lext about Microsoft Office XP; this
might be a description of the all the wonderful things you
. can do with email, tasks, colanders and more. Because this
text is longer than the picture of the box, the next image
— starts as a new paragraph, which is exactly what we want
to have happen.
ч ■ This is a paragraph of text about Microsoft Windows XP
: Home version. Because if s a short piece of text, we add a
у clearing element after the paragraph.
r Now the next image and paragraph start together as the
cleared div we added in the markup is is placed below (i.e
clear of) the floating element.
l: <ы
ifrft*tV;.fr. , £Л - *
'-■ ; -f
'У r- mS . Ji -V ■-" --^V* ■>. >.
—■" '* •■VAft.^^iJ ■!» (*■;,
1,.
Рис. 4.21. Используя свойство clear, мы заставляем элементы располагаться под плавающими
элементами
Очистка свойства float является важным моментом при создании CSS-раз-
меток. Прежде чем мы начнем использовать float на практике, следует
ознакомиться еще с одним свойством - display.
Свойство display
Так же, как каждый элемент обладает свойством position, у каждого элемента
есть и свойство display. Несмотря на довольно большое число допустимых
значений этого свойства, наиболее распространенными являются block или inline,
большинство остальных значений свойства display относятся к таблицам.
Разница между block и inline довольно проста:
• блочные элементы со значением block - абзацы, заголовки и списки -
располагаются каждый на новой строке;
• строчные элементы, со значением inline - a, span, img - располагаются
друг рядом с другом и переносятся на новую строку только в случае
нехватки места на предыдущей.
Возможность превращать блочные элементы в строчные и наоборот
является мощным средством, позволяющим, например, преобразовывать ряд ссылок,

Свойство «d splay 127
обычно располагаемых рядом, в вертикальный список, который можно
использовать для боковой панели навигации, не задействуя элемент <br>.
Кроме того, стоит упомянуть еще одно допустимое значение свойства
display - none. С его помощью мы можем сделать любой элемент, и содержа-
диеся внутри него элементы невидимыми пользователю. Занимаемое такими
элементами пространство освобождается. Обратите внимание, что при
использовании свойства visibility со значениями visible и hidden элемент просто
скрывается от глаз пользователя, но занимаемое им пространство остается.
3 книге мы рассмотрим применение свойства display со значением попе для
добавления функциональности нашим страницам, например, создания
выпадающих меню.
А теперь давайте применим на практике полученную информацию и начнем
создавать CSS-разметки.

■ь£
J&*>-
ты
l:
ш Базовая разметка
страницы
Зададим верхнее поле
Заголовок
выровнен
по центру
Абсолютное
расположение
столбцов
I Л - >ф Л ^ А А"> >"' +*"'; 0http://www.qbdcom/stynn/ch4.positionir>^<V ess hi margin rr
^
{ Three column layout with header
• Rubovla
• Middle Earth
• Fan Far Away
Adding a Header
Step 4 - clean-up complete. With all the
functional Issues resolved, we can turn off the
styles we used to help us see what we were
doing.
The background color Is removed from the
div, and the box around the hi element is
replaced with the same styles we used on the
side columns, with a tiny bit of top padding to
center the type between the two lines.
Adding text-aiiyn:c*ntvr to the header div
centers the hi in older version of IE.
Nulla sceierisque. Sed tincidunt. Quisque eu
nisi. Phasellus mi ante, aliquet vel,
vestibulum sit amet, consectetuer non, ante.
Suspendlsse consequat condimentum enim.
Morbi vestibulum lorem sit amet enim. Nulla
venenatis fermentum purus.
NUnC ]U$tOni5l,
vutputate in, saglttJs
in, prettum sodales,
magna. Nuliam fells
diam, bibendum ut,
dictum in, tlnddunt
vitae, magna. Nunc
mattis congue leo.
a
"
f-> э_ > -v. , ■■ ■■:
\?>: .;■«% i , *. ^*.' У- *. x-frV-x *
J^
'. *: ~" "~У '.Л .^.^^ L\i&'-$"^**J£.-'.¥ ^?^
■£-*
JV.
J
Плавающие элементы и очистка
Итак, мы готовы приступить к созданию реальной разметки для
Web-страницы, используя CSS для размещения элементов. Здесь мы создадим простую
базовую разметку. С ее помощью вы научитесь создавать привлекательную и
логичную разметку без использования таблиц и вспомогательной графики.

Простая разметка с д в^г/ш колонками 129
Примечание В рассматриваемых примерах мы не будем создавать стили, которые могли бы
создать для страницы в действительности. Например, опустим такие шаги, как
установка полей в начале работы и т.п. ради простоты примера.
Не стоит забывать, что предназначением Web-c границы является связь
пользователя с содержимым. Поэтому мы постараемся сделать так. чтобы все,
что мы добавим в структуру страницы, было либо тем самым содержимым, либо
элементами, помогающими пользователю получить доступ к контенту или
понять взаимосвязь между различными его типами. Порядок расположения
элементов и знание нескольких правил - это зачастую все, что нужно для
создания полноценной страницы. Остальные элементы обычно служат просто для
украшения, подчеркивая индивидуальность страницы и повышая ее внешнюю
привлекательность. Чрезмерное использование таких украшений может
перегрузить страницу и снизить ее читабельность.
Простой дизайн не только является более целостным в различных средах,
но и упрощает взаимодействие Пользователя с содержимым страницы. Как
только пользователь начинает размышлять, что сделать далее и какую кнопку
нажать, на первое место выходит интерфейс сайта, а не его содержимое.
Хорошо продуманный интерфейс в этом смысле является невидимым для
пользователя.
Однако покончим с философией и перейдем к делу - создадим базовую
разметку с двумя колонками.
Простая разметка с двумя колонками
первом рассматриваемом нами примере создадим простую и очень
распространенную разметку, состоящую из узкой левой колонки для навигации и пра-
ой колонки для основного контента. В'нашем примере колонка навигации
имеет фиксированную ширин}; а область содержимого является гибкой, то есть
~е ширина изменяется в зависимости от ширины окна браузера.
Вначале начнем с шаблона XHTML Strict, который можно загрузить с сайта
"ww.bbdxom/stylin. Нам нужен следующий код для документа body:
vody>
civ id="nav"> <!—начало div навигации—>
<ul>
<lixa href=,,#n>CcbiJ4Ka l</ax/li>

130 ГЛАВА 5. Базовая разметка страницы
<lixa href="irM>Ccb3nKa 2</ax/li>
<lixa href="#n>CcbmKa 3</ax/li>
</ul>
</civxdiv id="content n> <!—начало div содержимого—>
<hl>A Simple Two-Column Layput</hl>
<pxst:rong>TeKCT</strong>ei5e текст абзаца</р>
<р>Еще текст</р>
<р>Езде текст</р>
<р>Еще текст</р>
</div>
</body>
У нас есть два div: один - для области навигации, организованной в виде
списка ссылок, а второй - для содержимого, состоящего из заголовка и
нескольких абзацев. Результат показан на рис- 5.1.
И «>'%& %А*Л"}'\&^'- + ]":<0http://www.bbdxom/sty8in/ch4,po5lti<b^ Or Coogl
\А
£3
• Link l
• LmL2
• Link3
a Simple Two Column Layout
Step 1 - No styling yet - this the default layout In this example, we are going to use absolute
positioning to create a two cohimn'layoui, which is perhaps the most common page layout you will see
on the web. This format enables you to follow the widely-adopted convention of placing navigation in
a vertical "stack" on the left .side.
The content area - the second column - needs to be much wider than the navigation column, as this is
where the real infomarion of the page goes.
The most important decision in a design like this is: will one, both or none of the columns change size i
то fit the width of the browser? U
■% »г?*Щ~-
-1.
*i: лу
...■ :клк..
- гД;" : . AH! A-.ft..! О -■ -.Ъ.^-*. ,. .
- b*. X
Рис. 5.1. Так выглядит наша страница без добавления стилей

Простая рз&м&гнв с двумя къпотткт 131
Первым шагом в процессе создания разметки с двумя колонками является
изъятие области навигации из общего потока документа с помощью
абсолютного позиционирования:
body {margin:Opx; padding:Opx;}
div#nav {position:absolute;width:150px; top:Opx; left:Opx; border-right:2px
solid red;}
Обратите внимание, что требуется также задать поля и нулевые отступы для
удаления значений по умолчанию. Кроме того, необходимо задать ширину
области навигации 150 пикселов и временно включить правую границу, чтобы мы
точно видели, где заканчивается область навигации (рис. 5.2).
^
iple Two Column Layout
• Link 3
Step 2 - the two divs are now aligned vertically. The navigation div (with its right border in red so you
can see where it is) has been absolutely positioned so it is removed from the flow of the document.
As an absolutely positioned element, its default position is in the top left corner of its containing element,
the bodv element. •
This allows the content div to take its place as the first clement in the document flow.
Рис. 5.2. Область навигации вырывается из общего потока документа
Теперь мы применили абсолютное позиционирование к области навигации
и, обнулив верхнее п левое поля, обеспечили ее расположение в верхнем
левом углу элемента body.
Область содержимого находится прямо поверх навигации, так как она
выравнивается внутри родительского элемента body. Пока страница выглядит
довольно сумбурно. Тем не менее, оба элемента теперь выровнены, требуется
лишь сдвинуть div с содержимым вправо (рис. 5.3). Мы сделаем это с помощью
левого поля:
body {margin:Opx; padding:Opx;}
div#nav {position:absolute;width:150px; top:Opx; left:Opx; border-right:2px
solid red;}
div#content {margin-left:150px}

132 ГЛАВА 5. Базовая разметка страницы
■О^-^, ,-Л - . -Basic two column .., _.>.,А, ;,' «:**,»,„.■;-&,.* .^,;|
( <, V*]ififflr^f.A-: А:|ГсГУ + ■.@http://wvAv.bbd.com/stylm/ch4,posmC *'<V Ccogte "U
* Link 1
♦ Link 2
• Link 3
A Simple Two Column Layout
Step 3 - by adding a left-margin to the content div that's equal to the width
of the navigation, we have our two columns.
The next step is ю do some stylin' and turn the page into a more professional
looking layout.
We need to pad the content away from the edge of the divs. change the typeface
from boring old Times, and make the navigation look a little more inviting.
^-i.Wm.rf-in-ff.TM-fiVr ЛЙ'Г.Ш.Г.щ'чЛ i •■■■T-i'.r i ,■■:■■,■■■, u * - * _: -г г -,- »■■■■::—■> :>■-■:■*;> ^ :■ л v.-f fr< .^
Рис. 5.3. Готово - разметка из двух колонок, созданная всего тремя строками CSS
Теперь нужно сделать страницу немного более привлекательной. Вы
можете добавить что-то от себя, а вот наши предложения (рис. 5.4):
body {margin:Орх; padding:Орх;
font: lem verdana, arial, sans-seri f; <!—задаем базовый шрифт и его размер —>
}
div#nav {position:absolute; <!—убираем красную границу—>
left:Орх; top:Орх; width:15Орх;
padding:. 5 em 0 0 0; <!—отодвигаем список вниз—>
margin: 22рх 0 0 15рх; <!—смещаем div навигации вниз и вправо от края—>
border- top :2px solid #069; <!—добавляем линию сверху—>
border-bottom: Ipx solid #069; <!—и снизу области навигации —>
}
div#nav ul {margin-top: Орх; margin-hoc torn: . 8em;} <!—располагаем список по
вертикали—>
div#nav li {margin-bottom: . 5em; <!—добавляем пробелы под пунктами списка—>
font-weight: bold; font-size: . 75em;} <!—стили ссыток—>
divficontent {margin :20px 0 0 160px;- <!—смещаем div содержимого вниз ив чево—>
padding: 0 lem; <!—отодвигаем содержимое от левой и правой границы—>

Простая разтетка £ двумя кшшмжж
133
}div#content hi {font-size: lem;} <!— стили текстовых элементов—>
divTContent p {f one-size: . 8em;} <!— стили текстовых элементов—>
divr concent li> {font-size: .75em;} <!— стили текстовых элементов—>
,_-,--Л-А,11' . -.
.-. V -.4-. л .
V
*м^Ж
й"-Basic two column..
« ►
Т^У^^У
J*:
-a-i
*д>» «■
-1© http://www.bbd.com/5tYHn/ch4_posiUiQ ^ 0- Google
4J
о
* Rubovla
* Middle Earth
* Far, Far Away
A Simple Two Column Layout
Step 4 - a few styles later. Now the layout looks like someone
actually designed it.
• The navigation div has the top and bottom sides of the box set blue
with two different line weights
• The nav links have been opened up and positioned within the div.
• The content has left and right padding to move it away from the edge
of the browser.
• The type has some simple styles applied.
This simple layout works well across a wide variety of browsers,
including IE 5.
Lorem ipsum dolor sit amet, consectetuer adipisang elit. Aenean
vel sapien congue lacus fringilla viverra. Duis pellentesque sodales
odio. Qulsque pharetra aliquam Ipsum.
Nulla scelerisque. Sed tincidunt. Quisque eu nisi. Phasellus mi ante,
aliquet vel, vestibulum sit amet, consectetuer ncn, ante.
Suspendisse consequat condimentum enim. Morbi vestibulum lorem
sit amet enim. Nulla venenatis fermentum purus.
Nunc justo nisi, vulputate in, sagittis in, pretium sodales, magna.
4f
|2
^xw'um?^^
,.. у f vv "■*■** —-Ч--■%■■■+
i^?**^ v*? '-■- >'?"*;'
-£■*-■ Ki.v">.-!"4*Vi-*5-"K"^vj4 ^ ?:■?
1Ш
Рис. 5.4. Готовая разметка с добавленными стилями
Итак, ниже перечислены изменения для улучшения страницы.
1. Мы хотели выровнять области навигации и контента и слегка сместить
их вниз от верхнего края страницы, поэтому добавил поле в 20 пикселов
к области содержимого. Затем мы поняли, что нужно добавртть и
несколько пикселов к навигации div, чтобы компенсировать толщин)7 верхней
линии.
2. Мы добавили отступы для навигации div со всех сторон, чтобы сместить
элемент влево от. области содержимого и вправо от границы окна.
3. Мы компенсировали дополнительные 10 пикселов ширины области
навигации, добавив 15 пикселов к левому полю содержимого div. Обратите
внимание, что был использован краткий формат указания полей, что
позволило задать поля трех остальных сторон за один раз.

134 ГЛАВА 5. Базовая разметка страницы
Разметка с тремя колонками
Итак, если вы разобрались с созданием разметки с двумя колонками, то
освоить разметку с тремя колонками для вас не составит труда.
В этом случае мы используем ту же структуру, добавив еще один div для
третьей колонки:
<body>
<div id=!,nav">
<ul>
<lixa href="#",,>CcbinKa l</ax/li>
<lixa Ьге?="#">Сснлка 2</ax/li>
<lixa href^ #">Ссылка 3</ax/li>
</ul>
</div>
<div id="content">
<hi>A Simple Three-Column Layout</hl>
<pxstrong>Step 1 - No styling yet - this is the default layout.</strong>
In this example, we are going со use absolute positioning to create a three
column layout, which is also a very common page layout you will see on the
Web. This formac enables you to follow the widely adopced convention of
placing navigation in a vertical "s.cack" on the left side, and using the
right column for things like testimonials, promotions, ads or other
links.</p>
<p>In this design, we'll fix the width of the side columns and, because
we won't specify the content div's widch, the content column will be
"fluid" and fill the rest of the browser's width.</p>
</div>
<div id="rightcolumn">
<p>This is temporary filler for the right column. We'll put something
more interesting in here later.</p>
</div>
</body>
Результат страницы без добавления стилей показан на рис. 5.5.
»

Разадетка с трем» кспттати 135
4-;>^T?v^;- - «.., ^; %-.. -,. - Basic three column . .?...„.,.*.. -.<Л.-..и.,-• . ?
4 ^ ► i &Ч -A- A''1 6-M + ]^0httP7/www.bbd.com/stylin/ch4_pQsitiO;^''CV'Goog]
• Link 1
• Link 2
• Link 3
A Simple Three Column Layout
Step 1 - No styling yet - tins the default layout. In this example, we are going to use absolute
positioning to create a three column layout, which is also a very common page layout you will see on
the web. This format enables you to follow the widely-adopted convention of placing navigation in a
vertic?! "stack" on the left side, and use the right side for things like testimonials, promotions, ads or
other links.
In this design, we'll fix the width of the side columns and let the content column fill the rest of the
browser's width.
This is temporary filler for the right column. We'll put something more interesting in here later. It
Hi ■ ■iiiiiH.i ■ i. i i4i i 1"»ру^щи ■■ ■■■ф**^*«*ЧМ1 *■■■■■* 11 ii ■ i i ■ ■ ■ ■ ы ■ ., ■■■ ■■..'■■wHf^ffM1 n^vr-y**>^| ■ ■■■»
Рис. 5.5. Готовая версия разметки из трех колонок без добавления стилей
Так как содержимое третьей колонки размечено как абзац, при
отображении в браузере оно выглядит просто как еще одна строка текста.
Поэтому теперь следует добавить абсолютное позиционирование для двух
боковых колонок. Единственным отличием от предыдущей разметки здесь
будет то, что для левой колонки мы используем left:0px а для правой-
right:0px.
Внимание В гибких разметках, подобных этой, следует располагать правую колонку со
значением right: Opx так, чтобы она всегда оставалась в правой части окна
браузера.
Вот требуемый код:
body {margin:Opx; padding:Opx;}
div#nav {position:absolute; width:150px; top:0px; left:Opx; border-
right :2px solid red;}
div#rightcolumn {position:absolute; -width:125px; top:Opx; right:Opx;
border-left:2px solid red;}
Результат показан на рис. 5.6.

136 ГЛАВА 5. Вззиэеая раЗмстка страницы
■^0::Г*'- ■ ■ -'" ' ' ' Basic three column c* -' - , ._ .**%■„,;
► И <5 ];: A A IJ С I I + } '■0http://\vww.bbd.com/styiin/ch4_posin©i;?:iQ- Google
# Link 3
A'&imple Three Column Layout
-1
This is the right
column positioned
in the top right of
e browser,
raerin red so
of the document.
Step 2 - the three divs are полу aligned vertically. The navigation div (with its righi
you can see where it is) has been absolutely positioned so it is removed from the flow
The right column (with its left border in red so you can see where it is) has also been absolutely
positioned and its right property is set to zero.
Next, we will set the margins on the content area so it no longer overlays the side columns
■W* j_' ~^.,-... • •_•■*? v-t».."U!L—sTX -. . ■ '■■Ц'У-'ЧДЙв^ л , . ■ ГГ-^—да^1.. ■■
Рис. 5.6. Теперь боковые колонки находятся на своих местах
Мы добавили красные внутренние границы боковых колонок, чтобы было
четко видно их расположение. Далее требуется задать правое и левое поле для
области содержимого, чтобы она не накладывалась на боковые области:
body {mar in:Орх; oadding:Оюх;}
divffnav {position:absolute; width:150px; leit:Орх; сор:Орх; border-
right::2px solid red;}
div#content {margin-left:150px; margin-right:125px;}
div#rightcolumn {positiontabsolute; wicjth:l25px; top:Opx; right:Opx;
border-left:2px solid red;}
Результат мы видим на рис. 5.7.
Теперь займемся наведением красоты - добавим стили. Для этой разметки
использовались те же CSS-правила, что и для разметки с двумя колонками,
отличия выделены жирным. Итак, вот CSS-код для разметки с тремя колонками:
body {margin:Орх; padding:Орх; feme: lem verdana, arial, sans-serif;}
div#nav {position:absolute; left:Opx; cop:Opx; width:150px;
padding:.5em 0 0 0; margin:22px 0 0 15px;
border-top:2px solid #069; border-bottom:Ipx solid ff069;}
Jiv#nav ui {margir.-top:0; margin-bottom: .8ern;}
divSnav li {rnargin-boccom:.5em; font-weight:bold; fone-size:. 75em;}
div#content {margin:20px 150px 0 165px; padding: 0 lem;} <!—поле для создания
пространства для правой кочоики—>

Разиетка из трек кштожж с загеяовквзя
137
*. * у ¥":.■■" - "г. "*
к 1 :-■::--... <__-, » -л^ >
■: rf. ;■: *-*■ ■"З1й'0:-'Л
■£L£2&Z2 v ■■■* >:**af
sT^^fr4*' *'Г 7 v -* Basic ihre^ column ,,:;,..
I * ► [f & tj a • Ат{ С Г [ + i-0hnp://vw,v.bbd.com/stylin/ch4^positiC)<><V Google v
• Link 1
• Link 2
• Link 3
УТта.. А 5Г5 кг
A Simple Three Column
Layout
Step 3 - by adding a left-margin to the content div that's
equal to the width of the navigation, and a right margin
that's equal to the width of (he right column, we have our
two columns.
The next step is to do some stylin' and turn the page into a
more professional looking layout.
We need to pad the content away from the edge of the divs.
change the typeface from boring old Times, and make the
navigation look a little more inviting.
This is the right
column positioned
in the top right of
the browser.
^^' ■ ^j.*-¥.-:-*■■»' -f-*-^ *■" * ' * ■"
к...л-..-и-г,/ - -r-jfcjw—^ij..n.-if..v;....-. .- .- ■-— - - i ... - —
Рис. 5.7. Добавив поля к области контента, мы имеем готовую разметку из трех колонок
J-AW.-..I- *.{« .
.-ЛИ
^^Г^О\^.^ :w ■■ ""'" ■'-■/[.:= ;n = ,;Basii three c§hitnn v *
А ч >0'ЩбНг: A A jf.C M 4vL0h«p://www.bbd.com/5tylin/ch4j3osffloni ГчО- Google
L^4J.i..i—■-■■ "•■■•■ ■ v ■ ■ a - - - l in -- i ■ ■ -.-■ . ii ■ ■ - " v 1Цц«ч1нии
?\
* Rubovia
* Middle Earth
* Far, Far Awav
A Simple Three Column Layout
Step 4 - a few styles later. Now the layout
looks like someone actually designed it.
• The navigation div has the top and bottom
sktes of the box set blue with two different
line weights
• The nav links have been opened up and
positioned within the div.
• The content has left and right padding to
move it away from the edge of the browser.
• The right column div has top and left
margins to match it up with the left column,
and some padding has been added to keep
its content away from the edges of the div.
• The type has some simple styles applied.
This simple layout works well across a wide
variety of browsers. The dynamic
repositioning of the right column is a little
jerky in IE 5, but works smoothly in IE 5.5
and higher.
Nunc justo nisi,
vulputate in, sagittis
in, pretium sodales,
magna. Nullam fells
dlam, bibendum ut,
dictum in, tincidunt
vitae, magna. Nunc
mattis congue leo.
Pwc. 5.8. Готово! Разметка из трех колонок с добавленными стилями
УГ>
L
.▼
■ - II I I I lUJiPIP | -■■■■■■■ ■ ■ ■ "* II l-lfr'-VW-'-. ! ■■ ■ --■ .— -—*- ■ 11 ■! ■! I JlI II. _.-.i ... ii i ■■■■■■ 11111Ц.111М ■■■■■■■■''■ "~ ' ' "' '
■ fffi.v.^f./v ■■-■,"».vft,-:^^F."ft..,T^^yv — - г - ■■ ■■.., ■ -^—x^ - - ■■ - ■■ ■■■■••.: - - i..*-* ** ■ w
i

138 ГЛАВА 5- Вазовая разннатка стрш&цы
div#concent hi{font-size:lem;}
div#concent p {font-size: .Bern;}
div#concent li. {font-size: .75e:n;}
div#rightcolumn {position:absolute; width:125px; top:0px; right:0px;
margin:20px 15px 0 0; padding:lem . 5em; border-top:2px solid #069;
border-bottom: lpx solid #069; } <!—новая правая колонка—>
div#rightcolumn p { font - size:. 7 5em; } <!—стиль для текста правой колонки—>
t m
Результат показан на рис- 5.8.
Разметка из трех колонок с заголовком
Большинство разметок из трех колонок также имеют сверху область
заголовка. Для этого .можно просто добавить еще один div для заголовка и изменить
расположение правой и левой колонки, чтобы предоставить пространство для
заголовка. Так как заголовок и о ласть содержимого не вырываются из общего
потока документа, поместив заголовок вверху, вы автоматически сместите
область содержимого вниз.
Используйте код разметки с тремя колонками, но добавьте эту строк)7 сразу
после открывающегося тега body:
<div id= "header"><hl>Three column layout with header<-/hlx/div>
Затем добавьте эти стили CSS, разместив их сразу после стилей body:
divftheader div#header {height:60px; background-color:#CCC;}div#header hi
{margin-top:Opx;}
Результат мы видим на рис. 5.9.
Необходимо обнулить верхнее поле элемента hi, так как в некоторых
браузерах, например в Safari и Firefox, верхнее иоле hi смещает заголовок вниз,
создавая некрасивый пробел. В Internet Explorer для Windows этого не
происходит.
Внимание В данном примере рассматривается самый простой способ создания разметки
из трех колонок. Для создания гибкой разметки вы можете добавить
контейнеры div для области содержимого и боковых колонок и применить для них
относительное позиционирование. Тогда эти элементы всегда будут
располагаться относительно высоты заголовка, и использовать фиксированное значение
в 60 пикселов не придется.

Разметка из грек зшленегс с заголовков 139
XStJ-tr^,
'' >•% Htm А АМ С Ь{ + |./0http://www.bbd.com/stylin/ch4_positicQ .^<V ess hi margin rr©£
■ ^- --' 4--J-"*
* Rubovla
f. : .J^.-f,-
^ ЙШ1е Earth
• Far» Far Awav
^«■■*
v?^^
■-- * -c £. j--v
*?*.-;-^.>.^ . -,, ^-о-^—,.-^-, Y- :':^"ijnCJU5tonfef/ •-■■■
vulputate in, sagfttts
Adding a header m* pretium sodaies,
magna. Nullam felis
Step 1 • add a header dh/to the markup. dlam, blbendurn ut,
It's the first thing on the page so If it's the dictum in, tincidunt
first thing in the markup, it can be part of the vltae' magna. Nunc
natural flow of the document. mattfs ««Sue!ea
In the markup, add add a div containing a
heading element for the text. In the CSS, set
the height on the div and color it gray so we
can see it. Clearly, those side columns are
going to have to move down...
*">
Lorem ipsum dolor sit amet, consectetuer
adipisclng elit. Aenean vel saplen congue
lacus fringilla iverra. Duis pelientesque
sodales odio. Quisque pharetra allquam
ipsum.
Nulla scelerisque. Sed tincidunt. Quisque eu
nisi. Phasellus mi ante, aliquet vel,
vestibulum sit amet, consectetuer non, ante.
&>
^ЯЯ^Лс-кя^*-** ■■•- -'■'".
у ;■ :■
— 1 — 1 ., L— li— - .».—M*^h*."^i...» f.Vi-inifll
Рис. 5.9. Заголовок смеаил вниз область содержимого, но не боковые гганели с абсолютным
позиционированием
Область содержимого после добавления заголовка автоматически
смещается вниз, но нам требуется вручную переместить две боковые области с
абсолютным позиционированием. Необходимо добавить высоту заголовка к их
текущим значениям top:
3iv#nav {position:absolute; left:Opx; top:60px; width:150px;
padding:.5em 0 0 0; margin:22px 0 0 15px;
border-top:2px solid #069; border-hot torn: Ipx solid r069;}
div#rightcolumn {position:absolute; width:125px; top:60px; right:0px;
margin:20px 15px 0 0; padding:lent .5em;
border-top:2px solid #069; border-bottom:ipx solid #069;}
Теперь страница начинает принимать нужную нам форму (рис. 5.10)

140 ГЛАВА Б. .Базвдшя разметка страницы
■V ■■ * *
<« . ►
ч:;|Д51Сthreecolumn ,^;^/«а; ."..^.., ._^^.?^. -?
=i 1j> . a A =' CM + i:0http:/Aww.bbd.com/stylin/ch4_positic©HkQ- ess hi margin rr£VM
lireiB%ЫштЩ layout with header
■ ■- ,2
• Rubovia
• Middle Earth
• Far. Far Away
~r~-—77 *&'-.■*■ , -*\a—
Adding a Header
Step 2 - move the side columns down.
Either modify the top property or the margin-
top property to push the columns down by an
amount equal to the height of the header.
In this case, I adjusted the top property of the
columns- Now let's style and center the type.
Lorem ipsum dolor sit amet, consectetuer
adipisefng elit. Aenean vel sapien congue
lacus fringilla viverra. Duis pelientesque
sodales odio. Quisque pharetra aiiquam
ipsum.
Nulla scelerisque. Sed tincldunt. Quisque eu
nisi. Phaseltus mi ante, aliquet vel,
vestibulum sit amet, consectetuer non, ante.
Suspendisse consequat condrmentum enim.
Morbi vestibulum lorem sit amet enim. Nulla
venenatis fermentum purus.
Nunc justo nisi,
vulputate in, sagittis
in, pretium sodales,
magna. Nullam felis
diam, bibendum ut,
dictum in, tincidunt
vitae, magna. Nunc
mattis congue leo.
Ы-
T
~- л zh-*~\ c^^^a^fb^^„
Рис 5.10. Теперь боковые колонки расположены правильно
Далее добавим стили для текста заголовка. Мы хотим сдела гь шрифт
помельче и выровнять текст по центру, чтобы он оставался посередине страницы при
изменении размеров окна. Для этого зададим ширину hi, достаточную для
вмещения текста. После этого ширина области заголовка уже не будет по
умолчанию равна ширине заголовка div.
Теперь добавим значение auto левому и правому полю для выравнивания
заголовка внутри заголовка div. Значение auto означает «настолько много,
насколько возможно», таким образом, указав максимальный размер полей с
обеих сторон, мы добьемся выравнивания текста по центру вне зависимости от
размера контейнера.
Вот необходимый для этого код:
div#header {height: 48px; <!—изменяем с 60 для компенсации верхнего отступа—>
background-color:#ССС;
padding-top: 12px; <!—смещаем заголовок вниз—>

Разметка из трек колонок с заголовком
141
div#header hi {width: 18em; <!—контейнер для заголовка—>
margin-1op: Орх; <!—удаляем поле по умолчанию—>
*
margin-right:auto; margin-lef t :auto; <!—центрируем hi в div—>
font: 1.2em bold "comic sans MS", cursive; <!—стиль \чятекста—>
text-align: center; <!—центрируем текст в hi—>
border-.solid; <!—задаем постоянную границу—>
}
Теперь наша разметка выглядит, как показано на рис. 5.11.
■ >* - * И Ф Jl A ATI С J + "0hnp://wvw.bbd.com/stylin/ch4_positicQ^t4Q" css hl margin it©V
- ■ЛЧ^'1" " ■ I *^*У - *■ р ч ■■ ■ **^ ШИРИ !■ ■ ■ | рт ■■Й , ■ ■ * ^ , i р ^i |1Щ| I i ■ —■■ >р ill ■■ ■■'l I !■■■■■ - Щш ш и'^l1 ■ ■> ИЧ'щ ■■ ■
i J-*-'* " i - >.. . : .-:--■
Rl *"
-- . А-." V V
;: .Basic:three" column
* ':-ч-
.Зч:.>: ^ .
1; - Л J. ,. i." * -Г
v ^-яц *»j ^^ /
Three column layoutwith header
r "' "■" '■> - •" „V. ■
.
J-» X ^ j- *
• Rubovia
• Middle Earth
• Far, Far Away
fe^ttAf'
Adding a Header
Step 3 - style and center the heading
element. We set a width for the element so
we can apply auto-margins on each side to
center it.
We also use the text-align property to center
the type within its element, and select a
different font for a little variety. The hi
border is temporarily on so you can see the
element's position and the text centered
within ft.
Unfortunately, IE5 doesnt support auto
margins, so the header is not centered in IE5
- we'll fix that in our clean-up phase.
Nulla scelerisque. Sed tlncidunt. Quisque eu
nisi. Phasellus mi ante, aliquet vel,
vestibulum sit amet, consectetuer non, ante.
Suspendisse consequat condimentum enim.
Nunc justo nisi,
vulputate in# sagittis
in, pretium sodales,
magna. Nuttam felts
diam, bibendurn Lit,
dictum In, tinqdunt
vitae, magna. Nunc
mattis congue leo.
w
<-<■ : "V1
имущ n •
■;, „-.» &4->.*
^■У^;,^-л А
Рис. 5.11. Заголовок выровнен по центру
После этого заголовок всегда будет выровнен по центру вне зависимости от
ширины окна браузера. Все что нам осталось сделать - это изменить стиль
блока заголовка так же? как мы сделали это с боковыми областями:
Вот полный CSS-код:
body {margin:Opx; padding:Opx; font: I .Oenv verdana, a-rial, sans-serif; }

142 ГЛАВА $. Базовая разметка страницы
divSheader {height:48px; text-align:center; margin-top:0; padding-
lap : 12px;} <!—добавляем для центрирования заголовка в старых браузерах—>
civ#header hi {width:18em; margin-top:0; margin-right:auto; margin-left:auto;
font: 1.2em bold йcomic sans KS", arial, sans-serif; text-
ilignreenter;
padding:0 0 .lem; border-top:2px solid #069; border-bottom:lpx solid #069;}
div#nav (position:absolute; lefz:Qpx; nop:60px; width:150px;
padding:.5em 0 0 0; margin:22px 0 0 15px; border-top:2px solid #069;
border-bottom:Ipx solid #069;}
div#nav ul (margin-top:0; margin-bottom:.8em;}
div#nav li {margin-bottom:. 5em; font-weight:bold; font-size:_75em;}
div#content {margin:20px 15Cpx 0 165px; padding: 0 lem;}
div#content hi{font-size:lem;}
.p*iu.-f\ .,-.4 ._ ... ..,..,.... 8a£ic:three.column: ?&; * s& ^{У*Г.г "™
£"*♦■ -<^^;i^;^^ :■■■■ - - »■• ■*< ■ ^^^r^g^^;^--^f ^^^J^y.
" * -fc J i2h ! A -A =( С Ы +/fc-0hitp://wvw±bd.com/stylin/ch4_posklon!ri',,,fc <V ess hi margin rr© .
• Rubovta
• Middle Earth
• Far, Far Away
^-тттшт^
Three column layout with header
Adding a Header
Step 4 - clean-up complete, with all the
functional issues resolved, we can turn off the
styles we used to help us see what we were
doing.
The background color Is removed from the
dlv, and the box around the hi element is
replaced with the same styles we used on the
side columns, with a tiny bit of top padding to
center the type between the two lines.
Adding text-4iign:center to the header dlv
centers the hi in older version of IE.
Nulla scelerisque. Sed tlncidunt. Quisque eu
nisi. Phasellus mi ante, aliquet vel,
vestibulum sit amet, consectetuer non, ante.
Suspendisse consequat condimentum enim.
Morbf vestibulum lorem sit amet enim. Nulla
venenatis fermenturn purus.
Nunc justo nisi,
vulputate in, sagittis
in, pretium sodales,
magna. Nullam felis
diam, bibendum ut,
dictum fn, tlnddunt
vitae, magna. Nunc
mattis congue leo.
->
f -
P, |VA-,t,V .-.,*■,
"&-?'-. f- -'
"***
iV^1
- ::- *. <
Рис. 5.12. Готовая разметка

Разметка из трех колошж с плавающими элементами и очисткой 143
div#content p {font-size:.8em;}
div#contenc li (font-size:.75em;}
div#rightcolumn {position:absolute; width:125px; top:60px; righc:0px;
margin:2Cpx 15px 0 0; padding:lem . 5em; border-cop:2px solid #069;
border-bottom:lpx solid #069;}
div#rightcolumn p {font-size:.75em;}
А на рис. 5.12 мы видим готовый результат
Довольно легко, не так ли? В результате у нас имеется приятная, простая
и надежная разметка, прекрасно отображаемая во всех браузерах, как в новых,
так и в старых. К сожалению, некоторые другие структурные элементы,
популярные среди многих Web-дизайнеров и легкодостижимые с помощью таблиц,
например, автоматически выравниваемые колонки и области нижнего
колонтитула, автоматически располагающиеся внизу, создать с помощью CSS чуть
сложнее. Однако нас это не пут? т.
Разметка из трех колонок с плавающими
элементами и очисткой
В следующем примере мы используем пять визуальных элементов: заголовок,
три колонки и нижний колонтитул. Рассматриваемая в этом примере
структура разметки может быть использована как. основа для создания сложных и
привлекательных Web-страниц. Наша страница будет иметь ширину в 450
пикселов, ширина каждой колонки составит 150 пикселов.
Целью в данном примере является расположение трех колонок друг рядом
с другом под заголовком и добавление внизу области нижнего колонтитула,
имеющего ширину страницы.
Вначале создадим разметку:
<body>
<div id="header">This is the header</div>
<div id="contentarea">
<div id="coiumnl">These civs will float side by side to create columns.
■
This is div 1 with a little text to give it some height.. .</divxdiv
id=,,column2,,>This is div 2 with a little less text so it's a different
height than the other two...</div>

144 ГЛАВА 5» Базовая разметка страш-щы
<div id="column3">The objective is thai: no matcer which of the three divs
is longest, the footer sits below it...</div>
</divx!-end contentarea—>
<div id="footer,,^This- is the fcoter</div>
</body>
Затем мы добавим некоторые стили для выделения фона элементов, чтобы
различать их (рис. 5.13):
div£header {width:450px; background-color:SCAF;}
divrfcontentarea {widch:450px; background-color:#CCC;}
div#coluinnl {width: 150px; background-color: #FCC;}
div#colunm2 {width:150px; background-color:#CFC;}
div#column3 {width: 150px; backg -ound-color: f*AAF;}
div#footer {width:450px; background-color:#FAC;}
ч* .-: i. ■ - '-\ -.- .:-
|OvQlP^ ^. ,r/^,^ . ... £!i*nP9 flaats-oemp > _ ^ ^ ^wvJ^T
II -* ■ ► ilflrl'i A A If Гс^Г+П :©http://www.bbdcorO^:Qr ess had©:*
"■^..V : "■-:-■ :-" ••<-'Ж ;•: -:.. у; ■■"<: -■■_■;-^-— ■- ?---, ■■ V ;-, у.,' г,ц-,'|> ■-■ ri г *- ■-■.•.'-! i- г ..^m^.rwti *'■■■:.".■■■- ? '■ "т - . ?Лу. : У" т *^В^ ■ .vt.4;. ■■-■f ■■*' ■
«... ИЗ;- Ansazon- . eBajr iYabool News ▼"... PBS Kids ,, ^ ..".x," .-=.-., ■" i: ,.- . -.- - ^
*■'■■/ >.i''n ■>»■" ■JH ■■'■■■■ .^ ■ ^ ^\ mij^^^'T^^^'imJ ц ■ii.rtt'HV4fi4Hn|far)rf|'4HrtM1Mfi4liiHiH|it j*"fl«»n»n " ii.jyipi |,i"ni^m_-|i i ■■■■ им ■■ ^,ш ■■ ■"■'■'■■■■ " >ш" А
ТШ^ tJielheader;
These divs will
float'side by side
to create
Columns. This is
div 1 with a Mle
text to give it "
some height.^./
This is div 2 with a
little less text so
it's a different
height than the
other two...
«. -■::. ■■
5.77Я. T"-
*■■* -XT-. ■% •■■ » J:1? i *' -*■ ■: - «■•:■ :■ ■
i.. > "■ ..*; *■ X. Ч y4* v_-4- -V ¥ *. = ^ < "J-""
Ш1;,п6^Ш£ег\
d6Sidphges^v
below-iti^^Z'^ ..
ThVis^bite^ o't- :'.
fr^r ■ » A ^ _
\ -х-.: .Л .
: ::.ч. * -Л -.
i: х-ч/ > ■J-.-f 7/^ ■> ■■c-.-^k*: ^ "и ■
1
Рис. 5.13. Базовая разметка страницы, каждый элемент выделен фоновым цветом

f
Разметка из трех колонок с плавающими элементами и очисткой 145
О нижних колонтитулах
Нижний колонтитул похож на заголовок, но он располагается вдоль нижнего края
страницы и зачастую содержит второй набор элементов навигации по сайту, менее важных,
чем в основной области навигации. Если же страницы длинные и их приходится
прокручивать, в нижнем колонтитуле могут располагаться основные элементы меню, чтобы
пользователям не пришлось возвращаться обратно.
Нижний колонтитул добавляется так же, как и область заголовка. Однако если боковая
колонка с абсолютным позиционированием окажется длиннее области с контентом,
которая в обычном случае смещает колонтитул вниз, то эта боковая панель наползет на
колонтитул, ведь она вырвана из общего потока документа. Поэтому нужно создать
такую разметку, в которой нижняя грань самой длинной колонки является точкой отсчета
для позиционирования нижнего колонтитула.
Мы добавили один дополнительный элемент - div, содержащий все три ко-
- онки, и назвали его contentarea. Его целью является хранение всех трех ко-
онок, а если высота одной из них увеличится, смещаться вниз и сдвигать вниз
-И1ЖНИЙ колонтитул.
Согласно рекомендациям CSS, нам не требуется div для содержания
плавающих элементов, но с помощью clear мы можем добиться этого и расположить
1жний колонтитул именно там, где требуется, - под всеми колонками.
Начнем с расположения трех колонок, разместив их друг рядом с другом
(рис. 5.14):
iiv#header {width:450px; background-color: yrCAF;}
fiv#contencarea {width:450px; background-соlor:#CCC; border:solid;}
2iv#coluinnl {width: 150px; background-color:#FCC; float .-left;}
iiv*column2 {width:150px; background-color:#CFC; floac:left;}
11УтгСо1игапЗ {width: 150px; background-color: #AAF; float :left;}
fiv^footer {width:450px; background-color:#FAC;}
Мы видим, что нижний колонтитул стремится вверх и располагается под
самой короткой средней колонкой.
Мы также включили отображение границы для div#contentarea, чтобы его
ьпо видно. Пока этот элемент пустой, и его границы представляют собой
-тлошную линию. Нам же нужно расширить его границы и поместить туда три
отонки.
Примечание В нарушение спецификации CSS в браузере Internet Explorer для Windows
div уже окружает плавающие элементы, и результаты уже выглядят как на
рис. 5.15, но в других, более совместимых со стандартами браузерах, этого
не происходит.

щ
146 ГЛАВА 5. Вазовая разметка ораимцы
* ■ v
r^-oj^jcs, ■■■■ - - - gteating'fJoatsdemo
У111 ■'■"■ ""Ч ,|-—'" &,,*■
т->4
^^^•^
< ►чА* A A : Ct] + U0hno://www.bb£Lco© ;-* Q,- ess haclt£K
V.JV ■**■ "*,
"£X3 .-Amazon #Bay ЗЙйчм??" Nfcvisr PS* Kids
'"4
x- .-: -ЯК. т.- .." ■■ у -и. >^ '-i •. .*■ > ч > *"i ъ- ■"■
this is the
These'divs'will./ Thlsfs div 2 with a The otnecSve is
float side by side little less text sa tnljf^^iriatter;
to create it's a efferent whicb^r ibk $жщ
columns. This-is/height'than the Bivsjs^(6r^gf^,_
xliv 1 with a little other tvyc.., the--Jfootef sSs
jtext to give it .i...',.'..".. b^fdvrE
some height.. t XhiSJs^ti^jpplEh
V. JC . --■ 4i
jO . . . ,„, ф
4-=< * ■*■ ;*?' ^ ^ ^
Рис. 5.14. Нижний колонтитул стремится ssepx. Контейнер div пока что ничего не содержит
Простым способом слелат" это является добавление неплавающего
элемента сразу после колонок div, и затем применение div контейнера для очистки.
В результате div контейнера развернется по высоте самой длинной колонки:
div id=,,eontentarea">
<div id="columnl">These civs will float side by side со create columns.
This is div 1 with a little cext to give i~ some height...</div>
<div id=,,colmnn2,,>This Ils div 2 with a litele less text so it's a different
height than che other cwo...</div>
<div id="coluniri3,,>The objective is that no matter which of che three divs
is longest, the footer sits below it...</div>
<div class=,lclearfloate"><! ></div>
</div><!—end contentarea->
<div id=,,,footern >This is the rooter</_div>
Примечание Предпочтительнее, чтобы div не были пустыми, поэтому если содержимого для
div нет, просто вставьте комментарий, точку или другой маленький элемент.
Обратите внимание, что этот новый элемент располагается под плавающи-
mpi колонками, но перед закрытием контейнера div и к нему прикреплен класс
clearf loats. Теперь добавим стиль для этого класса.
div#header {width:450px; background-color:tfCAF;]
div#contencarea {width:4b0px; background-color:#CCC; border:solid;}

Разметка т трек колонок с плавающими эмпеяонтами т. очисткой
147
fiv#columnl {width:150px; background-color:#FCC; float:left;}
fiv#column2 {width:150px; background-color:tCFC; floaz.-left;}
5iv#coiumn3 {width:150px; background-color:&AAF; float:left;}
Iiv#footer {width:450px- background-color:#FAC;}
riv.clearfloats {clearrboth;}
овет Мы добавили класс к нашему div чтобы иметь возможность использовать его
повторно вбудущем (не забывайте, что id можно применить лишь раз на странице).
Обратите внимание, что мы использовали clear:botb, вместо clear: left, так как это
очищает как плавающие элементы, выровненные по левому краю, так и по правому.
Элемент contenuarea теперь вмещает все три колонки, а нижний колонти-
"%"i расположен гам, где положено ( же. 5.15).
Л ' ъъ1**ь<:
Г: 1 ** tf f -. i Г ^ I Г - I *~ъ. .
'"у ■■■■■..
А А
■у "А
• "т-т I ' I rinrtdi "
.0 http://www.bbd.coO•'*. Qr ess hac
-V Ч**{Л«4
?.цШ;4;^агоп' eBay Yahoo? ■ News *.'" PBSfKfdffv /" ,.
i-^»'
■' >.
■ -■ ■ - ■- i . ■ • '■
his^is;ttie-h
These'divs will This is div 2:with a?he^^erff^is" 4
float side by side little more textso. Шаёпо^^з&:' \
to create it's a different "" ш1сЬ^ШеЖгее
columns. This is height than the, tf^?sj|*H :'
div 1; with a little other two... Шё^ШЬек sitsi, ;
text to give it " 'Шо^К 'i&*
on? e: height.-..
rummm
£■„.« ' :;■
*? - .-„.-
' . ■>.
* ■ + * ;: i4.^ - .v ^ tf ; — * * .. **■=■ **'м -
I f' - M.fc. - ■■[ .—j i mil ■ ■ i,, »U*)li II
Ts
=WT- ■■*:£/. ;?,;,x-s ,",:=^
ис. 5.15. Благодаря контейнеру с тремя колонками нижний колонтитул располагается так,
как следует
Чтобы проверить расположение нижнего колонтитула, мы добавили текст
__нтральную колонку, сделав ее самой длинной, а также включили отображе-
границ контейнера, чтобы посмотреть на него в действии (рис. 5.16).
^ ы добавили дополнительные элементы только для улучшения вешнего
., и такое решение не является оптимальным с точки зрения чистоты струк-
^ого кода, но зато является простым способом достичь нужного результата.
~^перь рассмотрим более сложный способ создания такой же разметки без
^ тнительных элементов.

148 ГЛАВА 5« Базовая разметка страницы
"ЛТ- * .":* *< '- ^ =--^-Г:"-' ■ ". л s . ■ •■''■•■ "■■ лл " '".г- .*■■ чд. . ..*,: ..... .. i.-.._A >,.:-■,-у, -:■*■*■ ^
- ..1..Л.Ч- хини ,ь . мичь^ -у. -ly.-j^.w.i^ty - ,.— ^-. „ —h-Vmi «>,.- щп iMh ш.-" Jj »■■■ ..... """V* -
| <: ► t, <u 1.А. *A !■■ С i'+ j©hup://www.Q^CV Google *
LX;..\. ,-ц ■ >...„.., -, »> ^. . .^: j.^.-m.-^^^^tJx"^ *■** ■ ■■_ '■ ■_■■ .д..ч ^ ^ " ._ ; ^ ■ . , .1 II . .1 ■■LMB.^I^Ipl . j tmft-ll ■■„'■*.ГУТ'*» "J1 ■■'■■"■ '"' ""'"" ■ *■ ' '■ "" '
У—Х- Л'Л "■-■ ¥*№*■*■* ■"■ ■ v
*-.. ,'s:i^i-v..
T$s; is "fhei header"! .
These divs will This is div 2 v^ith аЩе ^ЬзеШу^ is:
float side by side little more text so H%t»nbj|*(at!t^Cf'* _;
to create it's a different кЫс!г^Йте"Шгё|
columns; This is height than the |1|у^Й1збШШ \
div 1 with a little other two...addingthe-footer^it!* I
text to give it'" a little more text' - Ье|оЩ|Ы' : ч
some height... here makes now *:
this column the
iongest.
This is,.the footer:
-. ■>. ■». .:-Ч ■^У-.-л^.-У'- '^ " к
.■ л»': ■ *Л* .< -. ^.,-л ".i.'j:^. w> ■::..-. ■■■■>■■ ■?
■_ JL. ■■ j —
-;■-■ * к/ ? -■
К ■-.-"'■ V -", - *■ .-v v -■ ' S'
.'- -г- ■ '* ■:
- Л ш -/. Л Хф.
- • t "■-■- *'л
Рис. 5.16. Как видим, нижний колонтитул всегда остается в самом низу
Способ очистки Олсетта
Названный в честь своего создателя. Тони Олсетта (Tony Alseti, www,csscreator.
com), этот способ использует псевдокласс rafter для вставки скрытого
фрагмента исшивающего контента (вместо дополнительного div) в определенное
место в коде. Затем очистка применяется к этому контенту
Примечание Такой способ предпочтительнее предыдущего, так как не требует введения
дополнительных элементов разметки.
Псевдокласс : after позволяет задать строку символов для вставки после
содержимого элемента. Мы задаем пужный#код CSS в качестве класса и затем
добавляем класс к элементу-контейнеру. Ниже приведен полный код для
страницы-примера с использованием метода Олсетга, а результат показан на рис. 5.17:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 StrictZZEN"
,,htcp://vrvw.vj3.orgZTRZxhcnulZDTD/xhtmll-strict.6td,,>
<htrnl xmlns=nhtcp: ZZwww.w3 .orgZ1399Zxhtml,r lang=,,en" xml :lang="en,f>
<head>
<title>Clearing floats demo</title>
<ineca http-equiv= "Consent-type" content=,,cextZhtml; charset=iso-8859-1" />
<meta http-cquiv="Content-Language" content="en-us" />
<style type="textZcss">

Разметка из трак колонок с плавающими ээтете&гтатн si очисткой 149
body {margin:0px; paddingrOpx; font: l.Oem verdana, arial, sans-serif;}
div#header {width:450px; background-color:#CAF;}
div#contentarea {width:450px; background-color:#CCC;}
divftcolumnl {width:150px; background-color:#FCC; float:left;}
div#column2 {width:15Opx; background-color:#CFC; float:left;}
div#column3 {width:15Opx; background-color:#AAF; float:left;}
div#focter (width:450px; background-color:#FAC;}
/* далее идет способ очистки Тони Олсетта *//* просто добавьте класс clearfix к контейнеру,
который содержит плавающие элементы */ • clearfix: after {
content: " . "; /* точка добавляется в конце перед самым закрытием div */
display: block; /* строчные элементы не реагируют на свойство clear */
height: 0; /* делаем точку невидимой */
clear: both; /* контейнер очищает точку */
visibility: hidden; /* гарантия невидимости точки */
}
.clearfix {display: inline-block;} /* трюк для IE Mac */
* трюк для исправчения ошибки IE6 *//* скрывает от" IE-mac \*/ * html . clearfix
{height: 1%;}
.clearfix {display: block;} /* конец скрытия для IE-mac *//* конец очистки Олсетта */
</style>
</head>
<body>
<div id="header">This is the header</div>
<div id="contentarea" class=l1clearfix<l>
<div id=ncolumnlll>These divs now float side by side to create columns. This
Is div 1 with a lictle text to give it some height...</div>
<div id="column2">This is div 2 with a little more text so it's a different
height than the other two...the third column now is the longest so it sets
zhe footer position.</div>
<div id=,,column3,,>This version uses the Aslett clearing method which uses
lie CSS :after psuedo-class to add concent and force the container to
enclose the floats, and only requires a class to be added to the markup,
instead of a "clearing" element.</div>

150 ГЛАВА $. Вазовая разяветзяа страницы
</div><!—end contentarea—>
<div id="footer">This is the footer</'div>
</body>"
</html>
: «« ► f *»Hl A A ; C = | I +-l;@http://№vw.bbd.c^<V Google <j)1
These divs will: This is div:2 with a^t§-ye^sid&uses:
float side by side little more text-so ths -^sleljt ciesridg
to-create Jt!s a different " metbod^whic^ '
columns. This is height than the jtise&feCSS
diy 1 with;a little- pother two...the ^fteWpiuedoH
text to give;it third column now:. cfes^to^&ddi
some height.... is the longest so itcojferfc^nd'force
1 sets the footer the/coetainen $*■
position.
•ftv^n.fi
enclose tne=tioatsj
4i. T x--v
j<kV
a;
B^e;d^to:the;
markup^ instead*
eienlfentj/*'
:this^thb'footeV.
,..>..
■ ^w»y,'
'::■;: v...^;vv£'
Рис. 5.17. Визуально разница не заметна, но здесь применен способ очистки Олсетта
С помощью комментариев мы пояснили данный-код. Если вы хотите более
подробно узнать об этом способе и механизме его действия, посетите сайт
Position Is Everything (\v\vw.posidonisevervihing,com). На нем вы можете найти
массу полезной информации.
На самом деле, для использования этого метода вовсе необязательно знать,
почему он работает. Можно просто вставить его в таблиц)7 стилей и добавить
класс к нужному элементу.
Еще пара замечаний. Во-первых, в браузере Internet Explorer для Windows
div будут включать в себя плавающие элементы без очистки, хотя этого и не
должно быть. В результате при работе с плавающими элементами в IE имейте
в виду - то, что вы видите, не будет таким же в других браузерах. Для
фактического добавления плавающих элементов в контейнер используйте один из двух
описанных в дайной главе способов. Во-вторых, Internet Explorer довольно
странно ведет себя с плавающими элементами, иногда отрезая нижнюю часть

Рззъ№7ка из трек котенок с плавающими элементами и очисткой 151
элементов, содержащих как ссылки, так и float. В примере-кода с хметодом Ол-
сетта мы предусмотрели специальный трюк для обхождения этого дефекта IE,
что является еще одним аргументом в пользу данного способа. Обратите
внимание, что две строки с комментариями также являются частью этого трюка,
так что не удаляйте их из кода.

,f *ш^& о. асиш енная
разметка ст ницы
Научившись создавать простую разметку, перейдем к следующему этапу.
Вначале научимся создавать и размещать фоновые изображения, которые могут
оживить страницу. Также мы узнаем, как делать ложные колонки и гибкие
разметки, что позволит создавать адаптируемые разметки, меняющие пропорции
в зависимости от размера окна пользователя.
Прочитав эту главу, вы будете обладать знаниями, необходимыми для
создания довольно сложных и очень практичных CSS-сайтов. И будете готовые
перейти к следующей главе, в которой мы создадим реальный сайт.
Размышления о фоновых изображениях
■
Прежде чем вы научитесь создавать ложные колонки в полную высот}7
разметки, необходимо поговорить о фоновых изображениях. На самом деле этот
вопрос довольно глубокий, по сейчас мы коснемся лишь ключевых положений,
необходимых для добавления фонов с помощью CSS в div и их замостки в div.
Именно так мы будем создавать иллюзию колонок.
Два способа добавления графики
С точки зрения дизайна, добавление графики в качестве фона для div с помощью CSS и
в виде содержимого в div XHTML имеет свои преимущества в каждом конкретном случае.
Например, при добавлении биографии руководителя фирмы на корпоративный сайт,
его фотография является неотъемлемой частью контента и добавляется в разметку
с помощью.тега img. С другой стороны, если графика является текстурой,
используемой в качестве фона, ее следует добавлять с помощью CSS.

153
Background basics demo ^
Узнайте,
как можно
замостить
фоновое
изображение
\< >-Ц {& ;J A A $ С j=| + |,r0http://www.bbd.com/stylin/Q?\Qr Gcogie
азидам и^щццда^ддьи^штядйй»
Г-0
" - «*-'■!
*■!■
"J"?'
„ "i- - *
def • '„ "тЧ§ -^ ?л* * !"Tndi
teal
- * V * * i „' _ » *
Узнайте,
чем отличается
хорошее
фоновое
изображение
от плохого
^* о ■ ■ »■ -- у=ь^с.-- teal > *м
ntally a ■ У'??*\ ^ * Г о fill its>>
Г .i '^ifefaiitt-ah*a¥^» V nnmaiae tV-M^-r-t^"
■■ *- ^ *"= * ^' О fill IIS(v ?■- - ; '
jti * image >;* - %*4**--:...
^
:Vd6'-. "Si- *'• *t ^ • ii'd: " - ■ - - *4
* rizo
'*:■ U
-Ily
■ "-'I
:i^--
— L ■ v "" '>* "
Узнайте,
•сак использовать
фоновые
изобржения
для создания
иллюзии
полноразмерных
столбцов
E. ^ * H <Й Й A-A [: С Щ + Г 0hnp://w*vw.bbd.com/stvlin/cW_positioning/faiix_coIs_fk:'"Ct- frotiaq* ©.^
"A
* Link 3
*...
*
* *
This layouc uses aosolute/relalive positioning to p-osibon the
side columns wirhm their respective faux columns containers.
You can control the maximum and minimum widths of the fluid
center area. Once the layout reaches Its maximum width, it
centers itself in the browser a£ the wfndow gets wider.
Nulla scelerlsque. Sed tincidunt, Qulsquc eu nsl. Phasellus ml
ante, aliquct vet vesttbulum stz amer, consectetuor поп, ante.
Suspcndjsse consequat condimentum enlm. Morb» vestibulum
lorsm sit amet enim. Nulla venenacls fermentum purus.
Nunc Justo nl£lr vulputate In, sdgfttls In, prebum sodales,
magna. Nullam tglis dtam, blbendum ut, dictum m« tincidunt
i vltae, magna. Nunc matt s congue leo. i
This template,
uses the Aisett,
clearing method.
^
. r .At v.v./,--. ■
"4 +--4f4--i: r->:
■■**;
■»*tj<
^ * Ihis,!s№e:-foater
-*HHi.
Плавающие элементы и очистка
Таким образом, для повышения логичности структуры рекомендуется хранить
графику-содержимое и графику служебную в различную каталогах. Ведь при таком подходе,
если мы решим изменить облик сайта, сохранив содержимое, нам для ятого будет
достаточно заменить старую вспомогательную графику новой.
Иными словами -добавляйте фоновые изображения с помощью CSS.

7
154 ГЛАВА 6. Расширенная разюепса сфаницы
Основы фона
Несмотря на наличие нескольких свойств, связанных с фонами, вам
понадобятся лишь два: background-image и background-repeat.
Совет URL к фоновым изображениям следует указать относительно CSS-файла, а не XHTML-
файла.
Свойство background- image может иметь только одно значение - URL
изображения. Синтаксис записи таков:
background-image:uri (путь_к_изобракенР1ю/изображение. jpg)
Давайте добавим изображение с помощью этого свойства в качестве фона
для div:
body {margin:Opx; padding:Opx; font: 1.Oem verdana, arial, sans-serif;}
div#maindiv {border: 3px solid #F33; padding:25px;
background»image:url(images_pres/lucy-blur_v_sma11.jpg);}
div#maindiv p {color: rFFF; font-weight: bold;}
■ ■■■■": > ал.. л *
УЭ4Ъ€&..;..^ .. , J., J: : -Background-basics -demo, v :;:\... v , , .,.?;■.... ■■■'
I * ■>:||'fl' "I..A-. A fc< C*;.-{.+.. *@http://wwwbbbd.com/sty!in/©-A: Q- Google Q\
http://www.bbd.com/stylin/О-'4" О* Loogle © .
- tfrtswrtiJijjfljyrtT ■ - ■
tS:
. v V
,77-"'# * . "*
4 о >А. -
ъг12» -1 iaiu .- \« -lltf •u* I; «^ *^ 4 tier.1 *-
i
-3 '■
:ч ,■
* *.
, X
V *•.*, ;r» nd:i * **~: e*~
*:-.:V ^- ■ ;-*- **
к-.ч!**». -V V; ■ IT,- ..i^i-- •, . • . ;-.Л-Д. ,1^,ЯЬ v- .tie ^;A
^Ш v ba •! ,-E ; ^. .»:: mage repe ^ * * «
Л ГКО fill its Ctf :й
.-■Oi™
. * ■ ■ s'
■■■^;-
: Vй ^^ ^ ^
.ж
$; :*ntallyan
.t ■ *-
..: f
•^i
ft .;-.-
^ . W-~;; -y •^-■^,'
л к i;^f-::A ::-
* '';"«e6iW r-f-^i? y^«'"dimage1 "- «>:^'^o'h':
**i ^ izontally a « г , »« Ну to fill К *» « . «sr»
л. -
у -к
■1 V
»>-*
5>-"»-.*» '
;оё;- v;t^-..■•--►J •"• .пал ager- \'.->t;\bp
^■■;"%:. .;*■- v;-8^ ■■-:,■■■
У1 J
VA-
■ :s«.i
»^
" ' ^Jl' > >*■*■*. V« т^ - ■ *:V ^y* * '
Рис. 6.1. По умолчанию при использовании свойстза background-image изображение мостится
по горизонтали и вертикали.

Р&зтытштт о ф&швык юебражечиях
155
Результат мы видим на рис. 6.1.
Если фоновое изображение меньше контейнера, по умолчанию оно
мостится и заполняет контейнер по горизонтали и вертикачи. Чтобы контролировать
этот процесс применяется свойство background-repeat.
Чтобы изображение было показано только один раз, нужно отключить за-
мостку, указав свойство background-repeat со значением no-repeat:
5iv#maindiv {border: Зрх solid EF33; padding:25px; background-color:#666;
^ackground-imgerarl(images_pres/lucy_blur_v_small.jpg); background-
repeat: no-repeat; }
Теперь страницы выглядит как на рис. 6.2.
f^rff^r
■*Sav4groufiA"rtfsic5.:di£fno
:3 * . >■ H Ф ;J A A j:| С Г" + -0http://www.bbd.com/siylln/© ■* Q.» Google
*■■< v- ":-::;-' у ■■ v..'" '*•*-.< ■ _. .... . с ■
;
■ г ,-
_? ^ ■ ■ Л: ." .
г
А-Ч'.\:
**'.
Ж
eba
« ' . *
■ ■ £ ■£-;-
jej^aliterope • , j&setfco no-repeat :sq %>
-*■-■■ т,
■^ .. ; "» -г ■■»
'*S. ■■>
■fr.
iJ N i? Г *r6c«ciif' ■
"T
■ZV
' .3? 'Zj -■- ,.-i **jv
hebac
rt»
j11, * ..
tr.ii *>- v-
tOL.tio- epeat* *^йй*
iiiijfl" о^бм«5^
backgroun- ofo ^
**.
-^^I^^.^.K^^r*^- >■ Щ x. *;;;-; ;.;.
.., *.. ■:... .. г...к:
"■" *: Й " v: ■ V-^
^ис. 6.2. Указав no-repeat для свойства background-repeec. мы откпючили замостку изображения
Теперь изображение появляется на странице лишь один раз. По умолчанию
но выводится в верхнем левом углу окна, но его позицию можно изменить
*.м. Приложение AV
Если мы зададим значение repeat-х для свойства background-repeat,
изображение будет моститься только по горизонтали (рис. б.З). Если же указать
значение repeat-у, - по вертикали (рис. 6.4).
Фоновые изображения могут придать вашей страницы глубину и открывают
-еред вами новый мир реализации творческих возможностей. Однако следует

156 ГЛАВА б. Расширенная разметка страницы
4 -►.,£ ф £ A-:r-:A !' 6^4+ l^@hnp://wvvw#bbd.com/siyiIn/.O^QT Google ©
•\
.*■' j-. ■■
..■".■4 V ' л -ч ;;
i *^;'??:: V;W;rt> ь**.: ******* ^ " *" -*1 ■ >'"vv:^-'-^* *£_*■ ■■ .; ? " ■=Ч^- **"* ■
* ■■■ :>-? "
:: -■■*.■ x
e background- -* - -1 pro • erty i
\l; ЬпгсйШГ^Hi.'J; =/:# curs.
.-^-■>
^ V-: *■■
v ■ :.J .
к-
■С v -■".
t -*Г.::
4>
epeat-x so »• .
The backg*5 tin«* - peat pro»ei&yjs', - ; о ере - - -ь *5 о''"Vе"У
hortza * l"tHi»^ * cu ■■^'■/л* ■''•■> ' ^ :■>■&- " ' "^' '
^.itf"
":j.-4 '■ '<■'■*"< :" - "5™-
TJie^»ackground-
■ V *
ho izontal "tiling$£оаяГ*Ъ
propert iss- 6" ;e
*..■ . V л.
^ ..- .,
■^■■■*'-чГ"С --iFV
^ooni"■■■-' ;
The background-repeat property is set to repeat-x so only
horizontal "tiling" occurs.
^*^-"-**fl3
£-*- i^"
Рис. 6.3. С помощью значения repeac-х можно замостить изображение по горизонтали
-.-.- ■' *^"й>1:. J.-.v4-:-,w ■*. 4й.'»-л.% j ^- ^ -;. iw,:v ч
* *.r,.*-. ftu^k A^s АгиС-И + И0http://www.bbd.com/styllr-й-Qr Google Qr\i
J^n. ^^D- J> ■
%■■«* ^ j- .
■-■X- -f^s. ^? »J*' *. <T~
"-*«-^к- ?
■ * х-
^4
he background- epeat property is set to repeat-у so
nly чМШ? иШ£ g" occurs.
The bac vgrpun. epeat property is set to re peat-у so
Oiilytuse^i caiv li * g*' occurs.
- The background-repeat property is set to repeat-y so
■, ojfljy vertical "tiling" occurs.
g . ' e background-repeat property is set to repeat-y so
<L i-:.
duly vertical "рПпд" occurs.^
■ i:. -tf- 4
g^^** ■ ■&%
- jiSE-^sife^. ,^;t;%Vii5ki
Рис. 6.4. Указав значение repeat -у, можно замостить изображение по вертикали
учитывать, что выбирать фоновые изображения нужно очень осторожно, так как
они могут помешать посетителям при чтении содержимого вашей страницы.
Иногда решить эту проблему можно, снизив контрастность фонового
изображения и затем слегка повысив его яркость.

Создание рюнютки с поднораэлиерньши коденкамм 157
оздание разметки с полноразмерными
колонками
Рассмотрев базовые вопросы о фоновых изображениях, мы можем перейти
к созданию страниц с полноразмерными колонками. Несмотря на то, что
нельзя заставить div быть больше, чем их содержимое, мы можем создать
иллюзию того, что они простираются вниз до самого колонтитула. При этом нам
понадобится использовать графику и переработать фон, если колонки должны
изменять цвет пли ширину.
Итак, вооружившись новыми знаниями, войдем в мир ложных колонок.
Ложные колонки
Рассматриваемый ниже прием был изобретен Дугом Бауманом. Для него мы
б\дем использовать созданную в предыдущей главе разметку с тремя
колонками, которую превратим в шаблон с ложными колонками. На базе данного
шаблона вы сможете создать полноценный сайт.
Примечание Вы можете загрузить шаблон плавающей разметки с тремя колонками с сайта
www.bbd.com/sylin.
Вначале изменим ширину страницы на 774 пиксела. Страница такой
ширины неплохо смотрится на мониторах практически с любым разрешением. За-
~ем расположим ее по центру окна, так как по умолчанию страница будет ото-
ражаться с верхнего левого угла окна браузера.
Чтобы задать ширину страницы, укажем ширину в 774 пиксела для области
заголовка и нижнего колонтитула, а затем изменим ширину колонок, чтобы
з сумме она составляла 774 пиксела.
Так как мы создаем такой шаблон в первый раз, будем использовать селек-
ор со звездочкой (*), с помощью которого (как показано ниже в примере)
онулим поля и отступы для всех элементов. При необходимости мы укажем
zivoKHbie поля и отступы вручную, добившись, таким образом, одинакового
отображения страницы во всех браузерах, так как поля и отступы по умолчанию
них могут выглядеть по-разному. Вот как выглядит наш код:
"-dy (margin:Opx; padding:Opx; font: 1.Oem verdana, arial, sans-serif;}
* {margin:0; padding:0;}
".-■"header (width:774px; height :32px; background-color: SCAF; text-
si ign: center; padding-top:6px;}

158 ГЛАВА 6. Раон1фенная разнютка страницы
divTrCclumn2 p {font-size: .5em;}
aivrfcontentarea {width:77^px; background-color: £FFF;}
div#coluinnl {width:15Cpx; background-color:#CCC; float:left;}
divTCoIumn2 {width:454px; background-color:#FFF; float:left;}
div#column3 {width:170px; background-color:SDDD; float:left;}
div#footer {width: 774px; background-соIor:SFAC;}
/* далее следует способ очистки Гони Олсетта, описание которого содержится в главе 5 */
На рис. 6-5 изображена получившаяся страница.
""■ •ЭРг*1 *■" *>*^ '*-■'. "Ч 3> л.»'>:чА- *. '■ V-
■« >. \ Ц&>|: Л : А-Ц<^[ +>j:^http://www:bb^ ©
. • A'^xeei^iel№ toree^colurnrv: template "c ■
"Some key changes have been made to this layout - the background This-template-. Uses "
?of the ccnt#ritftrea container and center column are now both white, floats'With' the Asiett'
^J-vu-v^-.'jJ
Link Z:
-1s# ;ё'
.but most notably, we've used the "wild-card* selector to remove ^|аЛГ;пп mpthnrl "V
'the margins and padding of EVERY element. Note that's collapsed теэППд:гаешоа. Ч ,
the space between the paragrapns, and the list containing the links
Is against the side of the container.
The middle column is now set longest so the side columns no
longer reach the footer.
By adding a graphic element that repeats vertically in the
container that holds the columns, we will create the illusion that
the" do.
■ ■ .- -:—.■:■<■. : -.. ■ ■ ■."■„ jW ^ :\ ■■ ■ ^
, «^ i'it ;. ^•■i^v 4«.±r * ^- :^.? v;;^:^....?,.: -, r
Рис. 6.5. Пока шаблон выглядит так
Теперь нам понадобится создать в Ad ode Photoshop или другом
графическом редакторе изображение, которое можно использовать в качестве фона.
Изображение должно выглядеть как горизонтальный отрезок фона для трех
колонок. Сохраните изображение в формате .gif в каталоге, на который моно
указать ссылку со страницы. В данном случае мы поместили изображение в
каталог images-pres, на том же уровне, что и XHTML-документ. На рис. 6.6
показано это изображение, взятое для наглядности в черную рамку.
'.■V - <■"
Рис. б.б. Фоновое изображение для трех колонок

Созданма разметки с полнв |»змерны!ни колодками 159
Так как браузер повторяет фоновое изображение столько раз, сколько
необходимо, мы можем использовать изображение высотой всего 1 пиксел. В
данном случае мы создали изображение высотой 12 пикселов, чтобы оно
довольно быстро загружалось, но не слишком мелкое, чтобы браузер достаточно
быстро смог просчитать число повторяющихся изображений.
Теперь нужно изменить CSS, добавить этот элемент к div contencarea,
содержащему три колонки, и задать вертикальную замостку.
div#contentarea {width:774px;
background-color:#FFF;
background«image:url(images_pres/faux_colmnns.gif);
background-repeat: repeat-y;} #
Теперь шаблон выглядит, как показано на рис. 6.7.
■-. Оц.-;- :" ■■ -Ctor q floats demo. . - * *> v
^■►i! fljj A A 4~6-]I'l ** j :0httpr//wwwAbd.com/styHn/ch4_posit8ofling/cl6ar,noa'?.':,C^ GoogJe
>■■ *i'j
ч? -'(-е-- ;, .- ■ s , ... _ . . ^.-v - w,i. tlSivtf^ _ .*?... *" ^
*nk %■ Some key changes have been made to'this layout - the backgroundThis template Uses
"лк*2;- of tJie cont*nUr*a container and center column are now both white, floats with the Asiett
"nlr"? :^ut most notably, we've used the "wildcard" selector to remove .„ -■ mofu' л ■■
K ;/ :'the margins and paJding of EVERY element. Note that's collapsed ае«3Пп9 ГПеГПра.
the space between the paragraphs, and the list containing the links ,
\s against the side of the container.
.The middle column is now set longest so the side columns no
;longer reach the footer.
;-:By adding a graphic element that repeats vertically in the
"container that holds the columns, we have created the illusion that
they do. Because the "faux, element" colors exactly match the
г: background colors of the side column divs, it's Impossible to see
v where a div ends and a background color starts; each full-length
column appears to be one solid color.
Tiis-is.:№jpfo# -; ...... . ._ ,.ц _ ............ ..-.,-,.. . ... ._, .... . ,,..,.^ ■-,,;. .,.A
Рис. 6.7. Заместав фон по вертикали, мы получили иллюзию присутствия трех колонок
Сравнив рис. 6.7 и 6.6, мы видим реальную высоту боковых панелей, но, за
* остив фоновые изображения по вертикали, мы создали иллюзию полнораз-
ерных ко тонок. Так как для контейнера колонок задана очистка, они увеличи-
= ются каждый раз, когда возрастает в объеме содержимое одной из колонок.
Теперь пришло время выровнять разметку но центру в окыз браузера.
Понятно, что отцентрированная разметка шириной 774 пиксела отлично отобра-
ется даже на мониторах с разрешением 800г600 пикселов. Для выравнива-

160 ГЛАВА б. Расширенная разметка страницы
ния по центру нам потребуется добавить еще один div, вмещающий в себя все
остальные div:
Примечание По данным сайта http://www.thecounter.com/stats/2005/December/res.php на
декабрь 2005 года 20% Web-пользователей по-прежнему работают с
разрешением вООг'бОО пикселов.
<body>
<div id=nmainwrap">
<div id="header"><p>A fixed-width three column template</px/div>
<div id="contentarea" class="clearfix">
<div id=,fcolumnln>
...содержимое.»
</div>
<div id="colimn2,,>
...содержимое...
</div>
<div id="coluinn3,,>
...содержимое...
</div>
</div><!—end mainwrap—>
</body>
Внимание Важно задать глобальный контейнер div, равный по ширине всей разметке,
чтобы по бокам оставалось пространство для добавления полей* Задав
автоматический размер полей, мы сместим разметку в центр окна.
Затем мы добавим автоматические поля по бокам глобального div. После
этого размер обоих полей будет максимальным во всех окнах, что приведет к
выравниванию страницы- по середине окна. Также мы добавим к тегу body свойство
text-align для выравнивания страницы в более ранних версиях браузеров.
body {margin:Opx; padding:Opx; font: 1,Oera verdana, arial, sans-serif;
text-alignreenter;}

Создание разянетки с иолнорззгяервыти ктгтжтт 161
iivifmainwrap {width :774px; margin-left:auto; margin-right:auto; text-align:left;}
. r
На этом .этапе также можно добавить новые стили полям области контента.
Jiv#coluninl ul {margin: 20px 0 0 26рх;}
aiv#column2 p {font-size: . 8ern; margin:lem ЗОрх;}
'ivFcoliimn3 p {margin: 20рх 1Срх 0 Юрх;}
Теперь наш шаблон выглядит, как показано на рис. 6.8.
Примечание Обратите внимание, что IE5 для Windows не поддерживает функцию
автоматических полей. Выровнять страницу по центру для IE5/Win можно с помощью
добавления ccxt-alignreenter к селектору body, но также потребуется
добавить uext-align: left к divmainwrap, чтобы предотвратить наследование
свойства всей разметкой.
< ►у & A A jv| С I ["*"*|0hup7/wwv.\bbd.com/stylln/ch4.posiironing/cfear_floats„foo@ T&QrCeog!
13Г: ^rf£*or- ^iy'^hcot' N*£' VA ?SS Kids ^ ";* ' ..--\ =' '": :,, ,
A flxedrvyidth tbree coiuttm* template^
~ *~ ~^- : ; *.* - .— , - : '■ : - -, - .- ,.,. ;_: ; *^д-> ■■•> * ■■ • * -^ - > — "
, ; v ■ . USing the auto margins technique, we have centered the > .
■■*' Цп&^- layout in the browser window. We also aMed text- ' ",s template^.
■■« 1-iQki?: centering to the body element so that oider verisions of IE uses floetS.With : :
*.- ]Uffi££ center the layout also. the Aslett clearing
Because zeroing out the default margins collapsed the
space between the paragraphs, and moved the list
containing the links against the side of the contairer, new
styles have been added to replace the margins on these
elements.
We added margins to the elements rather than ad padding
to their containers to avoid box model differences in old
versions of IE Win.
method.
■ ШК;:^"оЬ£ёг ... .. ,,....>..-
-■■ >* > :■ :< ^
iHH&Bbt'fe^' b*~ rrr- '■■ ** ^'^ л
Рис 6.8. Поместив область заголовка, три колонки и область нижнего копонтитула, можно
выровнять страницу по центру окна
Обратите внимание, что мы можем просто добавить отступы к самим div, что
является альтернативным способом выравнивания, но при этом всплывают
различия браузеров в обработке блочной модели (см. главу 4). В совместимых со
стандартами браузерах размер полей и отступов добавляется к ширине или высоте
элемента, а в бра\зере Internet Explorer 5 (и 6.0 в режиме Quirks) для Windows при
добавлении отступов и полей размер области контента будет сужаться.

162 ГЛАВА 6. Расширенная разметка страницы
Совет Несмотря ка наличие простой уловки, позволяющей обходить эти различия, зачастую
гораздо легче использовать поля для вложенного элемента вместо отступов для кон- ■
тейнера, что позволяет полностью избежать возникновения вопроса об обработке
блочной модели.
Вот полный CSS-код для нашей страницы в текущем состоянии;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
nhttp://www.w3.org/TR/xhcmlI/DTD/xhtmll-stricE.dtd">
<html xmlns="http: //www.w3 .org/1999/xhtml" lang="enM xml: lang=,Ien">
<head>
*
<title>Clearing floats demo</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-l" />
<meta http-equiv=,,Contenu-Langu ge" content="en-us,r /> -
<style type="text/essn>
body {margin:Opx; padding:Opx; font: l.Oem verdana, arial, sans-serif;
text-align reenter;}
* {margin:0; padding:0;}
div#mainwrap {width:774px; margin-left:auto; margin-right:auto; text»
align:left;}
div#header {width:774px; height:32px; background-color:#CAF; texc-
alignrcenter; padding-top:6px;}
div#column2 p {font-size:.8em; margin:lem 30px;}
div#contentarea {width: 77<ipx; background-color:#FFF; background-
image :ur1{images_j?res/faux_columns.gi f); background-repeat: repeat-y;}
div#columnl {width:150px; background-color:SCCC; float:2eft;}
div#columnl ul {margir: 20px 0 0 26px;}
div#column2 {width:454px; background-color:#FFF; iloat:left;}
div#column3 {width:170px; background-color: #DDD; float: left;}
div#column3 p {margin: 20px Юрх 0 10px;}
div#footer {width:774px; background-color:#FAC; text-align:cencer; padding-
top :6px; }
/* далее следует код способа очистки Тени Олсетта (см. главу 5 или загрузите шаблон с сайта
wwv.bbd.com/siylin)*/

Создание разметит с вюя&8разм£р&ыг*,ш коленками 163
</head>
<body>
<div id="mainwrap">
<div ia="header"><p>A fixed-width three column template</px/div>
<div id="contentarea" class="clearfix">
<div id="columnI,t><p>
<ul>
<lixa href="#,r>Link l</ax/li>
<lixa href="#H>Link 2</ax/li>
<lixa href="#">Link 3</ax/li>
</ul>
</px/div>
<div id="column2">
<р>...содержимое абзаца».</р>
<p>.„cодержимое абзаца...</р>
<р>„.содержимое абзаца.„</р>
</div>
<div id="column3">
<р>...содержимое абзаца...</рх/сИу>
*
</divxi--end contentarea-->
<div id="footer">This is the footer</div>
</div><!—end mainwrap-->
</body>
</htral>
Колонки для гибкой цмпрированно" разметки
Теперь добавим ложные колонки к гибкой разметке. Если вы задаетесь вопросом,
как центральная колонка контента может менять размер и стать гибкой при
наличии фонового изображения фиксированного размера, отвечаем - никак. Но,
с помощью простых изменений имеющейся разметки мы сможем-создать гибкие
колонки.

164 ГЛАВА 6, Pqciuupea »ная разгяегаа страницы
Вначале создадим два отдельных изображения, каждое из которых будет
использоваться в качестве фона для колонок. Затем добавим второй контейнер di v,
вмещающий все три колонки, с идентификатором container2. Зададим фон
левой колонки в качестве фона одного контейнера с помощью свойства
background-position со значением left, а фон правой колонки добавим к другому
контейнеру со свойством background-position со значением right. Теперь обе
боковые колонки являются независимыми, но идентичными и не зависят от
ширины центральной колонки. Наконец, изменим разметку так, чтобы
центральная колонка меняла размер при изменении окна браузера. В данном случае
проще привести код, чем описывать необходимые действия.
1. Добавим второй контейнер div вокруг колонок. Обратите внимание, как
новый контейнер вложен в имеющийся:
<div id="mainwrap">
<div id="header"><p>A fixed-width three column template</px/div>
<div id=,,contentarea" class="clearfix">
<div id="contentarea2" class="clearfix">
<div id=,,columnl"><p>
...содержимое
</div>
<div id="colurr\n2">
...содержимое
</div>
<div id=ncolumn3">
...содержимое...
</div><!—end contentarea2-->
</div><!—end contentarea—>
<div id=ufoocer">This is the footer</div>
</aivx!--end mainwrap—>
</body>
2. Теперь создадим изображения для использования в качестве фона в
боковых колонках, как показано на рис. 6.9.

Надежная тт&кш разюнетка 165
ч
Рис. 6.9. Два изображения для фона боковых-колонок
3. Добавим CSS для двух контейнеров:
div#contentarea {width:774px; background-color:#FFF;
background:url(images_pres/faux_left.gif) repeat-y top left;}
div#contentarea2 { width:774px; background-color:£FFF;
background:url(images_pres/faux_right.gif) repeat-y top right; /*мы указали
изображение, тип замощения и позицию в одном правиле*/}
С помощью этой концепции можно создавать независимые колонки в
любой разметке.
Надежная гибкая разметка
При преобразовании фиксированной разметки в гибкую необходимо сделать
определенные изменения в разметке. Вот три основных изменения.
1. Потребуется удалить из контейнеров объявление widch: 7 7 4рх, так как
теперь они будут менять размер при увеличении окна браузера. По
умолчанию контейнеры используют width:auto, что идеально нам подходит.
2. Также придется изменить способ расположения колонок с плавающего на
абсолютный/относительный. Элементы с абсолютным расположением,
в данном случае боковые колонки, используют контекст
позиционирования их ближайшего абсолютно расположенного предка.
Выровняв левую колонку по верхнему левому углу, а правую - по верхнему
правому, можно расположить колонки по верхним углам
соответствующих контейнеров. Преимуществом такого метода является то, что мы
можем изменить организацию разметки так, чтобы центральная колонка
с основным содержимым располагалась на первом месте. Поскольку
боковые колонки используют абсолютное позиционирование, их
местонахождение в коде разметки не имеет значения. При этом пользователи
смогут сразу после загрузки страницы обращаться к ее контенту. Кроме
того, поисковые службы считают содержимое, распложенное ближе к
началу разметки, более важным - это поможет лучше проиндексировать
содержимое вашего сайта.
3. Новая гибкая разметка обладает некоторыми ограничениями. Если
пользователь сильно уменьшит размер окна, разметка может развалиться -
содержимое центральной колонки растянется по вертикали, а боковые

166 ГЛАВА 6. Расшкжяшая разметка страницы
колонки начнут накладываться друг на друга. Если же пользователь
сильно увеличит размер окна, содержимое центральной колонки может
превратиться в одну длинную строку. Ограничив максимальную и
минимальную ширину разметки, мы можем уберечь сайт от этих неприятностей.
В CSS2 имеются свойства max-size и min-size, позволяющие нам указать
максимальный и минимальный размер элемента по ширине. Применив эти
свойства к mainwrap, мы сможем контролировать гибкость разметки. В
довершение мы также использовали автоматические-поля, чтобы в случае слишком
сильного увеличения окна, при котором оно станет больше максимальной
ширины разметки, страница выравнивалась бы посередине. Давайте взглянем
на измененный код:
<body>
<div id="mainwrap">
<div id=nheader"><p>A fluid-wid~h faux-columns example</px/div>
<div id=ncontentarea" class=,,clearfix">
<div id="contentarea2" class="clearfix">
<div id="colurm2">
<p>?his layout uses absolute/relative positioning to position the side
columns within their respective faux columns containers.</p>
<p>You can control the maximum and minimum widths of the fluid center area.
Once the layout reaches its maximum width, it centers itself in the browser
as the window gets wider.</p>
<p>Nulla scelerisque. Sed tincidunt. Quisque eu nisi. Phasellus mi ante,
aliquet vel, vestibulum sit amet, consectetuer non, ante. Suspendisse
consequat condimentum enim. Morbi vestibulum lorem sit amet enim. Nulla
venenatis fermentum purus.</p>
<p>Nunc jusco nisi, vulDuuate in, sagittis in, pretium sodales, magna.
Nullam felis diam, bibendum ut, dictum in, tincidunt vitae, magna. Nunc
mattis congue leo.</p>
</divx!--end column2—>
<div id=,,columnl">
<ul>
<lixa href=ll#">Link i</ax/ii>

Надежная гибкая размока 167
<lixa href="*">Lir_k 2</ax/li>
<lixa hrei=,,#">Link 3</ax/li>
</ul>
</div><!--end coIurr.nl-->
<div id="colu3nn3">
<p>This template uses the Asletc clearing method-</p>
</divx!--end column3-->
</divx!--end contentarea2-->
</divx!--end contentarea—>
<cliv ic=" footer,!>This is the footer</div>
</div><! --end mainvjrap-->
</body>
Обратите внимание, что column2, центральная колонка с содержимым,
расположена в коде перед боковыми колонкам columnl и cloluian3.
А вот соответствующий CSS-код: -
<style type-1' text /ess" >
body {font: 1. Oem verdana, arial, sans-serif; /* общий шрифт и размер */
text -align: center; /* центрирует разметку в IE */
}
* {margin: 0; padding: 0;} /* удаляем поля и отсутпы всех элементов */
divitmainwrap {ruin-width: 780px; max-width: 960px; /* максимальная и минимальная
ширина */
margin-lef с: auto; margin-right: auto; /* центрируем разметку в современных браузерах*/
text-align: left; /* удаляем наследование центрирования текста body*/
}
diviiheader {height :32px; background-color :#CAF; text-align reenter;}
/* временный заменитель стиля для заголовка */
Jivrfcontentarea { background-color: irFF?; /* белый фон если фоновая графика
колонок не загрузится */
background:иг1(images_pres/faux_lefc.gif) repeat-y top iefc; /*фонлевой
КОЛОНКИ*/

168 ГЯАВЙ 6. Расвднречнт1! разметка страницы
position: r elat ive; /* указывае контекст позиционирования тля div левой колонки*/
div-conceni:area2 {background-color: #?FF; /* белый фон если графика не загрузится
background:url(images_pres/faux_right.gif) repeat-у top right; /*фон
правой кочонки*/
position: relative; /*кои текст позиционирования для div правой колонки*/
}
div#columnl {width: 150px; /* ширина левой колонки*/
position: absolute; /* контекстное позиционирование контейнера contentarea */
top: Opx; lefс:Орх; /""располагаем колонку внутри контейнераcontentarea*/
background-color: frCCC; /::: фоновый цвет левой колонки - (изменяем размер для
просмотра расположения-div) */
overflow: hidden; /* предотвращает развал колонки из-за сверхкрупных элементов'-/
л
S
div#colinin2 {background-color:#FFF;
margin: 0 170px 0 150px; /* правое и чевое поле для создания пространства для
боковых колонок */
л
div7rCOluran3 {width: 17Орх;
position: absolute; /* контекстное позиционирование в контейнере contentarea */
top: Орх; right: Орх; /^располагаем колонку внутри контейнера contentarea*/
■ background-color: trDDD; /* фоновый цвет левой колонки - (изменяем цвет для
просмотра расположения div) */
over flow: hidden; /:f: предотвращает развал колонки из-за сверхкрупных элемен гов */
}
div#footer {background-color:#FAC; text-align:cencer; padding-top:брх;}
/* временные стили нижнего колонтитула */'
/* простые стили для контента заменителя */
div#columnl ul {margin: 20px 0 0 26рх;}
divfrColumn2 p {font-size: .Bern; margin: 0 ЗОрх lem ;}
div#column3 p {margin: 20рх Юрх 0 Юрх;}
/* способ очистки Тони Олсетта, см. главу 5 или шаблон на сайте www.bbd.com/stylin */

здежная твкш разметка
169
Разметка, показанная на рис: 6Л0. меняет размер в зависимости от размера
окна, но она не может стать слишком широкой и пи узкой. Такая разметка
отлично работает во всех современных совместимых со стандартами браузерах,
и не разваливается при добавлении в колонки слишком крупных-объектов,
например изображений.
ух4 y'^CrS
\-4 ■>'^j &|f A A *C{ С):\ + j.*0 http://ww\v.bbd.com/styiin/ch4.pDSfTfoniflg/fau^cols,fl
Cfc» frottage
© ;
fffl*
> Link 2
" JUn£j
A Yfukl-'vkfth ratac** olttrnris Sample
This layout uses absolute/relative positioning to position the
side columns witnin their respective faux columns containers.
You can control the maximum and minimum widths of the fluid
center area- Once the layoLt reaches its maximum width it
centers itself in the browser as the window gets wider.
Nulla scelerisque. Sed tincidunt. Quisque eu nisi. PhaseUus mi
ante, aliquet vel, vestlbulum sit amet, consectetuer non, ante.
Suspendisse consequat idimencum enim. Morb> vestibulum
lorem sit amet enim. Nulla venenatis fermentum purus.
Nunc justo nisi, vulputate in, sagittis in, pretium sodates,
magna. Nuliam fells diarn, bibendum ut, dictum in, tincidunt
vlrae, magna. Nunc mattis congue Jeo.
Thfe template
uses the Alsect
clearing method/:
■v ^f. i... л-. :
■u «и-^пм
- ~«. ■■* w ■-
Рис. 6Л0. Гибкая разметка с ограничением максимальной и минимальной ширины
Также обратите внимание на использование контекста позиционирования,
на применении которого держится вся разметка. Боковые колонки
используют абсолютное позиционирование, то есть по умолчанию контекстом
позиционирования для них является body. Так как мы хотим, чтобы разметка
оставалась посередине экрана при его увеличении и достижении страницей
максимальной ширины, располагать колонки относительно body (всегда
равного ширине окна браузера) в нашем случае нельзя, поскольку в таком случае
боковые колонки будут располагаться по углам окна. Задав для свойства position
контейнеров колонок значение relative, вы обеспечите движение доковых
колонок вместе со всей остальной разметкой.
Примечание Для каждой боковой колонки мы указали объявление over flow: hidden,
чтобы автоматически обрезать графику или другие элементы, превышающие по
ширине колонку, и не допустить их накладывания на соседние элементы.
Вы можете проверить это, временно удалив свойство position: relative,
а затем сохранив и перезагрузив страницу. Сделайте окно браузера шире

170 ГИАВА 6. Расширенная -развкгка страешцы
максимальной ширины разметки. Вы увидите, что боковые колонки
располагаются по углам окна, так как они вновь стали абсолютно позиционированы
относительно body.
В следующем главе мы рассмотрим, как использовать созданную нами
разметку на практике.
Закончим главу созданием еще одного шаблона под названием «Уапк-Смиг».
Мы долго думали над простым способом создания разметки с тремя
колонками, в которой вторая колонка с основным контентом располагалась бы в коде
на первом месте. Это имеет смысл, так как поисковые системы считают
содержимое, находящееся в начале кода, более существенным. Начинать код
разметки с длинного списка ссылок или прочих вспомогательных материалов, в этой
ситуации не совсем целесообразно.
Кроме того, не стоит забывать о вопросе доступности. Если пользователь
применяет программу для считывания текста с экрана или использует
клавиатуру для навигации, намного более разумно разместить вначале содержимое,
иначе пользователю придется пробираться сквозь левую боковую колонку,
чтобы добраться до содержимого страницы. Гогда как добавление опции Skip
Links (Пропустить ссылки) может помочь избежать этой проблемы
(дополнительные сведения по этому вопросу можно найти на странице Джима Фетчера
wwwjimhatcher.com skipnav.htm). почему бы просто не расположить колонку
с содержимым в самом начале?
Итак, как написать CSS-код для разметки с такой последовательностью:
• центральная колонка с содержимым;
• левая колонка навигации:
• правая колонка,
чтобы в браузере она выглядела с такой последовательностью:
• левая колонка навигации;
• центральная колонка с содержимым;.
• правая колонка.
Вот что придумали мы - нужно использовать отрицательные поля для
обмена позиций центральной и левой колонки. Мы уже видели, как поля с
положительным значением (превышающим 0) позволяют перемещать элементы.
Теперь узнаем, как использовать поля с отрицательными значениями ^меньше 0)
для перемещения элемента в пространство, занимаемое другим элементом.

Шаблон с отрицательными пояями 171
Давайте взглянем на простой пример разметки с тремя колонками. Вот ее
код (шаблон можно загрузить с сайта www.bbd.com /stylin):
<div id="header">This is the header</div>
<div id=" cont encarea" > <!- контейнер для трех колонок->
<div id=,,column2,r>Column 2. This is the first column in the markup. This is
the page's content.</div>
<div id=I,columnl">Cclumn 1. This is the second column in the markup. This
is the left navigation. ..</div>
<div id="column3">Columh 3. This is the third column in the markup. The
"contentarea" wrapper round the three
columns is floated left like the three columns, to force it to enclose the
three columns. Because of this, no matter
which of the three columns is longest, the footer sits below it...</div>
</div><!—end contentarea-->
<div classs="clearthis"> <!-очищагощий элемент->
<div id="footer">This is the footer</div>
Мы видим, что в этом коде колонки следуют в порядке 2, 1,3.
А вот CSS-код для этой разметки:
oody {font: 0.8em verdana, ariai, sans-serif;}
* {margin:Opx; padding:Opx;}
div#header {width:650px; background-color:#CAF;}
iiv#contentarea {float: left; width: 650px; background-color: £CCC;}
div#columnl {float:left; width:150px; background-color:#FCC;}
5iv#column2 {float:left; width:350px; background-color:tCFC;}
5iv#column3 { float:left; width:150px; background-color:#AAF;}
Iiv#footer {width:650px; background-color:#FAC;}
.ciearthis {clear rboth; height :0; line-height :0;} /*очищает колонтитул под
самой длинной колонкой*/
Результат показан на рис. 6.11.
Нам требуется лиипгпоменять местами первую и вторую колонку. Начнем
со смещения колонки 2 в нужное положение, добавив к ней левое иоле со
значением 150 пикселов, чтобы сместить ее в центр и дать место левой колонке
навигации, имеющей размер 150 пикселов.

172
ГЛАВА б. Рзешмвеягяая разметка странгцы
-5НГТ
'■ v * "■ ; х>^.^й.ц а-.....;,»..... к ^.y-t-w .*.,- .„.^,„ ,,. .: ——>~~wn~..,,.. ■ —. . ^.—.—~4J t-.-: ■ ■■ ■■ v ■-,-- ,- ^^■■■^M^.ft.feb^ ;■■
'A/i ■ *^Ц ujjl A- A j^ C.Kj Ч-J^©hup://www.bbd-Com/slyIin/CH6_buildir© ;*^Q- markup skip lii*©j
-"*- ",•".•'• 5.Д " "■; .i"-V. > ♦"„- ■■■ Г1.' ■ i.."—' I,, ,\ -—:.-, '"■ . niiiiw^.' ■■■■ i' )»■■.■?■ V'iVin.' ■'■■■•■■ ■■ "д <", |и,^|»-1:1*пГ''пТ..''У 'i 'v^ '* ъ""*
Ictumn 2. This is the first column in the markup. Column l. This.is.the i^!umm#|^
ThiB.is'the'pa-je's content. , second cblumn in the Sl^^a^^ti^^
" * markup. This is;the r^£rfc^^hei ""'**J
left navigation. ... ^Ш'йп^гё^-^л **
,: wrapper1; jmjr^aie-V^
.trfreeWftirorSJSH* ч
forced fo^rkSoee'tre*
• . ■• "■ ; -,.--■■;■ ■": * Гъ- :." * ■: : ■ . ■ :, у ■ л
КЗ ^^
This is the fQOten
« . .- *v^-
^^i(t J1-
л- *л л ;■
-■ л >■
■■ Because^ tofS^Ho^.
■' j
Д^--Ц£
Рис. 6.11. Пока что разметка повторяет порядок расположения колонок, указанный в коде
div#coIumn2' {float:left; width:ЗЗОрх; margin-left:150px; background-
color: fCFC;}
Теперь в совместимом со стандартами браузере вроде Safari страница
выглядит, как на рис. 6.12-
%■:■ V Со1Лы\ fUfsclrihiarkup-demo:™ ^*Т ^: - «■? .„15.^"** = !'~"-*5
- <■-► ( Л |Ч..А -А ;] С'fj.+..l;.©hup://wftw.bbdxom/stylin^
Column 2, This is tb^' first column in the markup: Column'!, This is the
This, is the page's content. ..<. second column in tne
■ : ' ' * ^ -markup":- This-is=the i
хЫгй'^5еййгпй;М> t^ J:
. M;№ гххЙ1сГпп^^6;
d^s ^ tc^8nc?03e;tHe
matter >'Vl-teh cf^thjs*
* left navigation; ... -
*#..-, A-i< ■*
...... **-w l> * i-
-..-..%-■ Л л-
■ м. ■■!■ *wiXw*i<-
.:■ - м«^.,гА
.■ i ;-:;: .W*.™ ■
Рис. 6.12. С помощью левого поля мы смещаем центральную колонку з нужное расположение
Но помните, ЭНРВМТЕ! Internet Explorer для Windows столкнулся с
проблемой при отображении такой разметки (рис. 6.13).

аблон с отрвддоельнык' и голпнн
173
$Г^х-£1
-.fe*.
IMTP*"
к-"1 -Ч5* •■
.W*.
Ete Edit view Favorites Tools Help
-.•*** де<
*^£5S!^ht^://^WA^bbd.contf5tybrtfCH6^
^...^...WH^
" < it =s isr-i*;.««-
^>/' ;.; v";O" v*-"ь i:
^
Column 2,,This is the first column in the narfcup.
■; * - ... :- */. .; ;.> ^-This isJhe page's content.
Coiurnn'i.;Thi5'is.tri& СеКЦИьЗ^^^-Й^^ "' '"*
second column:in ths ihlrdSpiMr^ii i&Sjj}^
markup. This is--the ■ ;= biar^upx/Tne^: *"\"v
left navrgatipr. .. i. ?ccrft^t3rsal-wfi|50^
^фип^\1(©!ЙГёф^ .. -.,
ThFS^?s-tfi&"foo3ter"r' -; ^"':
:■ ^!tS?bbl0^^ ^ ^-
4 Рис. 6.13. IE/Win удвоил размер поля, не спрашивайте почему
По неизвестной причине браузер Internet Explorer для Windows удваивает
размер левого поля плавающего элемента, выровненного по левому краю, и правого
поля, выровненного по правому краю. Это известный дефект данного браузера.
Тем не менее, Стив Кэслон (Steve Caslon) придумал способ устранения этого
дефекта - изменить тип элемента с блочного па строчный (рис. 6.14):
Iiv#column2 {floatrlefc; width:350px; margin-left:150px; display:inline;
-ackground-color:#CFC;}
ftiT-
У&
•i ftu. pv m »
1CTP*"
>ii: ^v . t ... ■ ■_
"< -, *p-s-
v ч*
. Ejlc Edft View Ffivw^es lools НФ
*> ...
Address :^http://w^.bbdxcrn/sty5rVCH6J:uld^
- "v Column 2," ..i.h's is the first: column in the "markup.
*This is the.page's content..
■Sf>
*Г"
--T W .-.■!.■«?.., \
column? r^fioateeHefk:
" :M^n^-Bbc3U5e^r
zhi^tjc-j#st ttfratfnich
Column"!. This t£ сьё"
sec.ond column .in thsf;c
■''hi'-grtup,. This is:the '
'left navigat.-dn- ,.:
*:■' v-,v -л
: i- * ": t.- I
Рис. 6.14. Применив трюк Кэслона, мы добились нужного результата и в Internet Exlorer

/
174
Примечание Более подробно об этом дефекте браузера можно узнать на сайте www.
positioniseverYthing.net.
Так гораздо лучше. Теперь колонка 3 съехала вниз, так как мы еще не
освободили место для нее, переместив первую колонку влево.
Примечание Так как на отображение страницы в других браузерах это дополнение не
влияет, мы не сочли нужным заключать его в комментарий как трюк только для IE.
Нам требуется сместить колонку 1 влево на ширину центральной колонки
(350 пикселов) плюс ее собственную ширину (150 пикселов) - всего на 500
пикселов. Для этого добавим отрицательное поле к колонке (рис. 6.15).
div#columnl {float:left; width:150px; margin-left:500px; background-
color inFCC;}
-„.х.ДО ,r „r , ,. t- л v:"*: Ik*.
.-,.-.;.-« *■ $t-ifh-"Л-«"-ч£ vv ' "" «■" т.1» -У *^ " -ft
"* i'v.vt ' "■]
#V>M^f А А И С рПИ-*®Ь№//.^ Q* markup skip Hi*©'*
ieft- navigation, ?„.
'.-.■tf
V
*-
7£|<S ig^tStfifi^br ■ *■ ■*"»*;.".. v-. i ■:..> - .- ^
**&'v--y
«Lfc-^ - ■.-■■■ X- vsa>-. Л» ■
'£».■ 4*- ■■ ■.«- ■ ^ «■
V-.Й
■■*Л.^"-'- ... -./Vj,.,;-; --, w. -;?=г;г^£ w, ■, - ; <__L-i ^ '■ "-: ' ' - L. * .-*: ■-■:.:- ■. .1—. -t:^ ^.ч. ■> ■• ^г. »■«.* ^ :ч ч* t.
Рис. 6.15. С помощью левого отрицательного поля мы смещаем колонку 2 клевому краю, где она
и должна находиться
После этого колонка 3 автоматически встает на свое место.
Итак, мы представили вам простой способ создания разметки, внешний вид
которой отличается от порядка расположения элементов в коде.

■ ».-.- ^-.<? .? . ft.л *;. о*
r^
f *
м,
»L
* г
■>■ :-l
Web-страницы, "создаваемые вами, осгоят из контента, а также нескольких
элементов интерфейса, обычно одинаковых для всех сайтов - ссылок, форм,
списков и таблиц. В этой главе мы покажем, как создавать XHTML-код для этих
компонентов и применять к ним CSS-стили. По ходу дела мы создадим
библиотек)7 CSS-компонентов, которую вы сможете использовать как точку отправки
при создании собственных страниц. Достаточно будет просто открыть файлы
примеров, скопировать код в код ваших страниц, а CSS-правила - в файл
таблиц стилей и затем подкорректировать их для конкретных нужд. Это очень
\добио и поможет вам сэкономить время,- используя готовые заготовки, лишь
слегка изменив их.
т
Существует три вида списков: нумерованные, ненумерованные и списки
определений. Для их создания используется похожий код, но применять их следует
исходя из предназначения:
• в ненумерованных списках но умолчанию для каждого пункта
используется маркер, вы можете изменить маркер на пустой кружок, квадрат,
изображение или тильду (~);
• в нумерованном списке пункты по умолчанию нумеруются, для чего
можно выбрать в том числе латинские цифры и буквы;
списки определений (ичи вложенные списки) содержат подпункты; такой
тип списка можно использовать, например, для предметного указателя.

176 ГЛАВ „ создание компонентов интерфейса
создаем
список
с кнопками
Создаем
список с
переключателями
Настройка
выпадающих
меню
Добавляем
работающую
кнопку отправки
Создаем эффект
при наведении
указателя мыши
Учимся создавать
простые вложенные
выпадающие меню
Создаем простые формы
Г
Л
A Basic Form
Please fill this form and.press Submit
Label' text goes
here and it can be
as" long as it needs
to be.
enter first n&rne here
Descriptor
This text area allows
multiple lines of text - Its
height can be set end will
scroll if user-entered text
is not all visible-
Passwor
«
AJfcteAato^^bctotaAA
Picl^O
ne
%) Choice 1
О Choice 2
О Choice 3
Pick One
□ Choice 1
□ Choice
0 Choice
Pick from menu
and then click
submit below
Pick your favorite guitar
Submit this Form
Customers | Me^nlt^rs 1 pp?lprs I'D strihutors
Our Sesrvcps
FACs
Sign Up
Sucporr
с
j Wtei's Kb
jew \J
*• ГиГ " f in"
Go d proqram
Sliver n nnfn
BrDi^£ СГОСГЗГГ.
E>\ Region
Код для создания списка довольно прост. Ниже приведен код для
ненумерованного списка:

177
<ul>
<li>Gibson</li>
<li>Fender</li>
<li>Rickenbacker</li>
<li>Washbum</li>
</ul>
g
.,. ft -l - : . &. >■■ . - „ . ■
■ fWt^ i x* "С!?лппд boars'derfto *
! * ;. * j/ tfrll A A ]:■ C-ii|"+-j;0hKp://www.bbd.com/stylin^-<V Gcoqie .
EXAMPLES OF USTS
Unordered Lists
li •list-3tyle-type:disc;}—
li {lisz-style-type:circle;}
li {list-style-type:square;)
li {iist-style-po5itior=: outside;
width:2C0px;J
li {list-styie-positicn:inside;
width:200px;}
li {list-style-type:decimal;i
li {list-style-type:upper-alpha;}
li {list-style-typerlcwer-romari;}
li {list-style-type:decimal;}
li {list-style-type :upper-rcnian; ■
li (list-style-type :±ower-ro*nan; J
li {list-style-type:upper-alpha;}
li {list-style-type:lower-alpha;}
Disc bullets (default
* Gibson
• Fender
♦ Rlckenbacker
• Washburn
Circle bullets
о Gibson
о Fender
о Ricken backer
о Washburn
Square bullets
■ Gibson
■ Fender
■ Rjckenbacker
■ Washburn
List Style Position outside
• Gibson makes great guitars for
playing the blues
• Fender makes great guitars for
playing country and rock
• Rlckenbacker makes great
guitars for that rythmic jangling
sound
• Washburn makes great guitars
for speed-metal shredcbng and
riffing
List Style Position Inside
♦ Gibson makes great guitars for
playing the blues
• Fender makes great guitars for
pteylng country and rock
• Rlckenbacker makes great
guitars for that rythmic jangling
sound
♦ Washburn make great guitars
for speed-metal shredding and
rtffing
T
Ordered Lists
Numbered (default)
1. Gibson
2. Fender
3. Ricken backer
4. Washburn
Alpha Upper Case
A. Gibson
B. Fender
C. Rickenbacker
D. Washburn
Small Roman numerals
1.
ii.
iii.
IV.
Gibson
Fender
Ricken backer
Washburn
Nested Lists
Numbered (default)
1. Gibson
2. Fender
1. Precision Bass
2. Stratocaster
3. Telecaster
3- Rlckenbacker
4. Washburn
f л
Roman Numerals
L
IL
III.
IV.
Gibson
Fender
i. Precision Bass
ii. Stratocaster
III. Telecaster
Rlckenbacker
Washburn
Alpha
A. Gibson
B. Fender
a. Precision Bass
b. Stratocaster
с Telecaster
C. Ricken backer
D. Washburn
*£?.* V. -"4 J'*- *"%. *-x ". -■■-. 5
Рис. 7.1. Примеры списков и необходимый для их создания код

178 ГЛАВА 7. Создание кэюгшнентов интерфейса
Ненумерованный список открывается с тега ul, который содержит
несколько пунктов списка (li) и закрывается тегом ul.
Нумерованный список очень похож на ненумерованный, но для него
используются теги ol. В таком списке каждый пункт последовательно
пронумерован арабскими или латинскими цифрами либо буквами, в зависимости от
значения свойства list-style-type. Поместить маркер пунктов списка можно как
снаружи, так и внутри списка с помощью свойства list-style-position.
На-рис! 7.1 приведены примеры различных типов списков с поясняющим
кодом.
Добавление стилей к спискам
Списки являются основой при создании меню и областей навигации, ведь
элементы навигации обычно представляют собой списки страниц, которые
можно просмотреть, а меню является списком возможных вариантов. Поэтому в
настоящее время наблюдается стремление дизайнеров создавать элементы
навигации и меню на базе списков. Одним из преимуществ такого подхода
является то, что если пользователь просматривает страницу в агенте, не
поддерживающем CSS, например в мобильном телефоне, XHTML-разметки списка
оказывается достаточно для вывода навигации или меню в приемлемом и
понятном виде. Итак, начнем с добавления стилей к списку навигационных
ссылок, которые красуются в левой панели практически любого сайта.
Ниже приведен код разметки ненумерованного списка, расположенного
внутри div, то есть содержащего навигацию элемента, в данном случае это
левая колонка разметки.
<div id="listconcainer">
<ul>
<li>Gibson</li>
<li>Fender</li>
<li>Rickenbacker</li>
<1i >Washburn</1i >
</ul>
</div>
Вначале отобразим границы div, в котором находится наш список (рис. 7.2).
body {font: l.Oem verdana, arial, sans-serif;}
. div#listcontainer {border:lpx solid #000; v/idth:160px; font-size:.75em;
margin:2Opx;}

CPSftCKH
179
Затем включим границы для элементов ul и li, чтобы понять
расположение отдельных элементов списка (рис. 7.3).
ul {border:lpx solid red;}
li iborderzlpx solid green;}
. л.'К*> Л- ■ ■$. dCv-*" : *->
AbWi-T* . 4? ' 'f ''&■ i-
H ■ ► Д*Й^ -А-£ПШ+1:?вНпр:© "j Or Co.©-
•• g^.ara-^-v-.
•
•
#
*
Gibson
Fender
Rickenbacker
Washburn
~£¥A-<.r-~f<& '<~"V ^V .^ ' -" ' *"- ' " :
Рис. 7.2. Ненумерованный сп "ок внутри dive включенными границами
'.?£.* ■ ■.-3s«a.-Sf.V,..£>.
-■-.*: •. ~ >. '*.-.■*
j'-i.jC.-J-- -^-п; т.
:'.'?fV--^ *4'■**■*"■"-^ ■: ^ ■■**■ ':
1
•
Gibson
Fender
Rickenbacker
Washburn
ж&яр^ьЧ-ъг&^т*' v* -
W. ■ :r-.. ■': ■ r ■■ '■ -, .
3 List? demo г Microsoft Internet ExpL.»
File Ec&" View Favorfces Joels Help
Л1 .
Address £1 http://www.bbd.ee >У! CJ Go Link
»
:""-'ir*.
f ■ . . -A^rrr ■ утч**т*ягуrtr^i-- .mrr«rr:
S*4
uioson
Fender
Rickenbacker
Washburn
Ь
^
Done
j^-i
iv
Ф. Internet
Рис. 7.3. Включив границы для ul и 11, мы видим, что Safari (вверху) и IE (внизу) по умолчанию
применяют разные стили к спискам

180 ГЛАВА 7. С&зцз&ме кздипонентов интерфейса
На рис. 7.3 граница ul выделена красным, а граница li - зеленым цветом.
Как видно, браузер Safari использует отступы для ul, чтобы сместить список
(зеленые элементы отодвигаются от красного контейнера ul), а таюкс добавляет
небольшие верхнее и нижнее поле, чтобы отделить список от окружающих
элементов. Internet Explorer добавляет поля к ul (обратите внимание, что ul
плотно обхватывает элементы li, и оба они смещены от div), а также добавляет
только нижнее поле. Эти различия затрудняют создание одинакового облика
списков в различных браузерах. Единственным способом обойти их является
изначальный сброс значений нолей и отступов по умолчанию pi последующее
явное их указание.
Итак, зададим поля и отступы для ul и li обоих элементов списка равными
нулю (рис. 7.4).
ul {border:lpx solid red; margin:0; padding:0;}
li {border:lpx solid green; margin:0; padding:0;}
^>Ш¥*7 " . "> Elst&deftic^ :> '". .'7-, ^'^VK^
y""" -y——■?.. ■ v y"""""":V чг,^—^ „,,L>. ^ , i'-h"'^
- «-*::£ f&rl .A. A-;: С +: r0http://\»'^<V Се*®*-
"S „ ' - ,i\ -^ \ ..i ■ ' Лj •/ w—/ .. ^ j-.. i<> <■-*. yw ^ . .^ ■ ?
*: * ^ ■- *w ■ ■■■ _-- - ■ - •* ■ ^ "_ ■_.■"' ..... v.-.r-.y ■ ■■ . - ._■ - * 1*ч.4_\"и*_1
iiH
Gibson
Fender
Ritkenbacker
Washburn
r r- и»>. .:
i-'S." -^."^л: x ^-,
-- " ■*-*/ -■■*■.*.
.iqmV Miiii^i^nternet Expu> LJ0
File Edt View Favorites Tools Heip
Address
Gibson
Fender
Rickenbacker
Washburn
'ilJDone
i -i
Ф Internet
5* .. k
http://www.bbd.ee "y*i El Go J.Uhfe:>>.. fe -
>4.:
:V
Рис. 7.4. Теперь и Safari, и Internet Explorer отображают списки идентично. Обратите внимание,
что когда в IE маркеры смещены за пределы ul, они не отображаются

181
Теперь списки выглядят одинаково и в Safari, и в Internet Explorer.
Обратите внимание, что маркеры, принадлежащие элементам li, теперь находятся за
пределами div. Если div расположен прямо возле кромки окна маркеры
полностью не видны. Поэтому необходимо к ul добавить левое поле
минимального размера, чтобы маркеры оставались внутри div и не накладывались на
соседние элементы или, как в случае с Internet Explorer, попросту не исчезали.
Итак, зададим левое поле (рис. 7.5).
divSiistcontainer {border:lpx solid #000; width:160px; font-size: .75em;
margin:2Орх;}
ul" {border:lpx solid red; margin:0 0 0 1.25em; padding:0;}
li {borderrlpx solid green; margin:0;}
. л.""..
^СХ€£0 .;■. ,.Ll5ts^demo v
» Gibson
Fender
Ricken backer
Washburn
<?"|„ . - , - > ~
■ .-:< >:>:'-.■>.--^ "^".ЧЯ . ■■'ТИ
Рис. 7.5. Задав для ul левое поле размером 1,25 em, мы вернули маркеры обратно в div
Обратите внимание, что все поля указаны в одном правиле. Ведь если не
обнулить явно значения всех полей, браузер попытается добавить верхние или
нижние поля, в зависимости от внутреннего стиля, и список снова будет
выглядеть по-разному. Кроме того, теперь мы можем в любой момент при
необходимости указать значения других полей, просто заменив 0 па нужное значение.
Давайте поменяем расстояние между пунктами списка, так как сейчас они
расположены слишком близко друг к другу:
divSlistconcainer {border:lpx solid пООО; widLh:160px; font-size: .75em;
margin:2Орх;}
ul {border:lpx solid red; margin:0 0 0 1.25em;.padding:0;}
li {border:lpx solid green; margin:0; padding:.3em 0;}
Самый простой способ сделать это - использовать свойства margin-иор или
margin-bottom для элементов li, но мы предпочитаем применять идентичные
отступы сверху и снизу.

182 ГЛАВА 7. Создание компонентов интерфейса
Чтобы показать вам преимущества этого подхода над использованием
полей, заменим рамки вокруг элементов на горизонтальные линии между ними
(рис. 7.6).
► Gibson
► Fender
t RIcken backer
► Washburn
'. л^тар?^! л. -j? -л- ■ v .'су ь •: -.-* г •■ : ч, ;..■ ^ * л :■* --,. *ч.л>:--ч*\. ■ " лФт. JctTiTV
^■TT.'.t."'.. Д'^ ^-'->-^--: ~t.-.J$ :!".У "* ^■ ?: "' * v. •- -I--?."?. «*• '* ?М. :>■ ■■;<■■-- .-■■^ТХ/Ф^_3«: - -J-fer^Jgl
Рис. 7.6. Добавление горизонтальных линий является первым шагом на пути к приданию списку
боле дизайнерского облика
Добавив верхние и нижние отступы для увеличения высоты элементов li
вместо применения полей, мы получили расположение элементов li точно
посередине каждой строки. Теперь слегка подчистим этот список.
1. Удалим маркеры.
2. Добавим поля для ul, чтобы выровнять список внутри div.
3. Сместим пункты меню, создав отступы.
Вот какие изменения кода следует для этого выполнить:
body {fontrlem verdana, arial, sans-serif;}
div#listcontainer {borderrlpx solid #000; width:160px; font-size: .75em; margin:20px;}
ul {border:0; margin:Юрх ЗОрх IC-px 1.25em; padding:0; list-style-type:none;}
li {border-bottom:2px solid #069; margin:0; padding:.3em 0; text-indent:.5em}
Наиболее заметные изменения мы внесли с помощью свойства list-style-
type со значением попе, удалив маркеры. С помощью свойства text-indent мы
сместили текст от края списка, и добавив поле к элементу ul расположили
список более привлекательно внутри контейнера.
Очевидно, что список будет выглядеть гораздо лучше, если мы добавим
первому элементу верхнюю горизонтальную линию (рис. 7.8). Идеальным
решением в данном случае будет использование border-top. Сделать это очень просто
с помощью псевдокласса CSS : first-child. К сожалению, ЭНРВМ1Е - Internet
Explorer не распознает псевдоклассы.

183
I <.: > Г фЧ A * A}flT)fT^0hup:/A^^ Go
tf^v.-■■■ Г"1м ь w ^"; ■■ ..-,- i : :,-• * -- •■
Gibson
Fender
Rickenbacker
Washburn
»
Рис. 7.7. Теперь список выглядит лучше, однако с линией над первым элементом было бы более
профессионально
Это значит, что мы либо можем использовать псевдокласс и признать, что
этот способ не сработает в Internet Explorer, либо использовать трюк. Для
начала используем псевдокласс, а затем подумаем о том, как обойти этот дефект
в менее совместимом со стандартами, но популярном браузере Internet
Explorer. Вот код:
body {font:lem verdana, arial, sans-serif;}
div#listcontainer {border:lpx solid #000; width:150px; font-size: .75ern;
^srgin:20px;}
Л {border:0; margin:12px 20px lOpx 1.25em; padding:0; list-style-
rype:none;}
Li {border-bottom:2px solid #069; margin:0; padding:.3em 0; text-
indent: . 5em}
.i:first-child {border-top:2px solid #069;}
■;^ cj".'-'« 4V *".^fcistsdaw?!. j * &j. :,
£'■ _, >>' 'i n>im»4ii(. /ш^*'^*V iii'""V, ■** "■<" ■."■■■^>*■■'■'>•
« к.:; <& ; A , A ji C:b + *J @http://\? ' Or Co
Gibson
Fender
Rickenbacker
Washburn
W
с 7.8. Мы добавили верхнюю линию для первого элемента с помощью псевдокласса : first-child

184 ГЛАВА 1. Создание компонентов интерфейса
А теперь давайте познакомимся с простой уловкой для Internet Explorer.
Когда мы удалили маркеры, элемент ul сузился до ширины элементов списка.
Мы можем создать линию, применив стиль к элемент)7 ul, содержащему все
пункты списка. Вместо приведенного выше кода допустимо использовать
следующий, отображающий верхнюю линию и в Internet Explorer:
body {font :lern verdana, arial, sans-serif;}
divirlistconcainer {border:lpx solid #000; width:150px; font-size:.75em;
margin:2Opx;}
ul {border:0; margin:12px 20px lOpx 1.25em; padding:0; list-style-
type: none; border-top:2px solid #069}
li {border-bottom:2px solid #069; margin:0; padding:.3em 0; text-
indent :.5em}
Иногда можно найти простые ходы для решения проблем Internet Explorer,
но бывает, приходится признгНъ, что не все пользователи увидят страницу
в одинаковом облике.
Теперь наш список начинает приобретать черты панели навигации.
Осталось лишь превратить простой текст в ссылки - и перед нами
привлекательный и функциональный элемент навигации (рис. 7.9). Сделать это просто с
помощью следующего кода:
<div id="listconcainerI!>
<ui>
*
<lixa href=n#">Gibson</a></li>
<lixa href="#">Fender</a></li>
*-. ' л-^зЛ/
и-Л
^:ОВД . У»' £г.; £fsts:demo
-V* ini.r.».. ^ .,—-, p.—..,. — ,„» -y„■■■■■■ ,., ■ i —-. *■" ■■■■»■■ _< .^i -■ ■*-■-■ jr. ■
^?;.<:дД!
*П
Gibson
Fender
Rickenbacker
Washburn
4
Рис. 7.9. Мы добавили ссылки. Теперь текст отображается с подчеркиванием

Списки 185
<lixa href=n#">Rickenbacker</a></li>
<lixa href="#n>Washburn</a></li>
</ul>
</div>
Добавление стилей к ссылкам
Теперь добавим ссылкам определенный стиль. Вначале удалим подчеркивание
для обычного пассивного состояния, а затем сделаем так, чтобы при наведении
указателя мыуш на ссылку она меняла цвет.
Внимание Рекомендуется подчеркивать состояние элементов не только цветом. В данном
случае помимо цвета при наведении указателя на ссылку мы будем менять его
форму со стрелки на символ руки, чтобы сообщить пользователю, что перед
ним ссылка и по ней можно щелкнуть.
Так как это последний этап настройки навигации, следует подчистить код:
настроить нижнее поле ul, добавить контекст к селекторам, чтобы эти стили
применялись только к элементам внутри div с именем listcontainer, и
добавить трюк (а точнее, два трюка) чтобы линия над первым элементом
отображалась в Internet Explorer для Windows.
Вот окончательный код для компонента навигации на базе списка:
body {font:lem verdana, arial, sans-serif;}
div#listcontainer {border:lpx solid #000; width:150px; font-size:.75em;
margin:2Opx;}
div#listcontainer ul {border:0; margin:12px 20px 12px 1.25em; padding:Q;
list-style-type:none;]
div^listcontainer li {border-bottom:2px solid #069; margin:0; padding:.3em
0; text-indent:.5em}
div#listcontainer li:first-child {border-top:2px solid #069;}
div#listcontainer a {text-decoration:none; color:#069;}
div#listcontainer a:hover {color: #F33 ;}
/* трюк для IE Win V/
* html div#listcontainer ul {border-top:2px solid #069;}
/*консц трюка */

186 ГЛАВА 7„ €оз&а*дое компонентов интерфейса
Gibson
Fender
Ricken backer
Washburn
Рис. 7.10. Готовое меню с выделением элемента при наведении на него указателя
Трюк со звездочкой и обратной косой чертой
Трюком мы называем использование CSS не так, как это описывается в
спецификациях. Трюки используются для включения или скрытия CSS от определенных браузеров.
Зачастую трюки применяются для обхождения дефектов Internet Explorer.
Трюк со звездочкой
Как мы знаем, прапрадедушкой всех элементов разметки является html; все другие
элементы - его наследники- Однако Internet Explorer уникален тем, что содержит
безымянный элемент, являющийся родительским для html. Ссылаясь на этот элемент, в
селекторе мы создаем правило, понимаемое только Internet Explorer. Так как имя у этого
элемента отсутствует, сошлемся на него с помощью звездочки *. Например, так:
div * ul {«.правила CSS...}
В этом правиле ul не будет выбран, если он является дочерним элементом для div,
и будет, если является внучатым. Мы используем звездочку, чтобы указать, что нам не
важно, какие промежуточные элементы находятся между div и ul.
То есть, чтобы создать правило, понимаемое только Internet Explorer, мы пишем:
* html ...более точные селекторы... {...правила CSS...}
- Например:
div#box {border:lpx solid blue;}
* html divjlbox {border:lpx solid red;}
В этом примере синюю рамку покажут все браузеры, кроме Internet Explorer, который
отобразит красную рамку.
Тем не менее, браузер Internet Explorer для Mac более совместим со стандартами и
может обработать как правила с *, так и некоторые CSS-правила, недоступные IE/Win.
Поэтому следует убедиться, что используемый вами трюк со звездочкой будет
воспринят только IE для Windows.

Создает €$£~гушшо 187
Трюк с обратной косой чертой
Если мы напишем комментарий с обратной косой чертой перед закрывающей звездочкой:
/* комментарий \*/
Internet Explorer для Mac посчитает, что комментарий не закрыт, и воспримет весь
последующий код как комментарий, до тех пор пока не встретит обычное закрытие
комментария, состоящее из звездочки и косой черты.
Например:
/*трюк для IE Win \*/
* html div#listcontainer ul {border-top:2px solid #069;}
/* конец трюка*/
Здесь IE/Mac игнорирует строку с селектором * html. Таким образом, мы можем
комбинировать трюки со звездочкой и обратной косой чертой, чтобы создать правило только
для Internet Explorer для Windows.
Создаем CSS-меню
При работе над созданием раскрывающихся меню на базе списка мы хотим
просто взять список с вложенными списками для раскрытия и заставить это
работать без добавления дополнительного кода - лишь простой XHTML-спи-
сок и стили CSS. Но как же создать раскрывающееся меню из свободных от
лишних идентификаторов и классов списков? Все, что для этого требуется, -
контекст, контейнер div с идентификатором, чтобы нужные CSS стили
применялись к нужному списку. Фактически, создать такие меню с помощью CSS
очень легко.
Первым шагом на пути к созданию раскрывающихся меню станет создание
горизонтального меню с основными пунктами.
Горизонтальные компоненты навигации
Раскрывающиеся меню содержат подкатегории, каждая из которых
раскрывается из содержащего его пункта. Они более эффективны и занимают меньше
места, чем обычные вертикальные меню. По традиции такие меню создаются
с помощью JavaScript, что ведет к раздутию кода. Каждое подобное меню
требует отдельного кода, который при необходимости изменить сложно. С
помощью CSS можно значительно упростить создание меню, так как для этого нам
потребуется лишь код списка и компактный CSS-код, управляющий
поведением множественных раскрывающихся меню.

188 ГЛАВА 1. Создание компонентов интерфейса
■
Давайте взглянем на эти преимущества в действии, создав для начала
горизонтальную навигацию и затем добавив раскрывающиеся подкатегории (рис. 7.11).
■■ "'— ■ ■ ■ " им.!. - in Г.. "—г ■.■■ •-, —■■■■'■"" '. ' " ' "1'
■ з Customers * Members "Dealers ' Distributors- - '""":
■ —ft ~~ """^ ^~
Рис. 7.11. Простой горизонтальный элемент навигации
Д?ш создания этого компонента нам потребовался простой список внутри
div:
<div iG="listmenu">
<ul>
<lixa href="n">Cusi:omer3</a></li>
<lixa href="#n>Meinbers</a></li>
<lixa href="#">Dealers<-/a> li>
<lixa href=" 1г">018Ьг1Ьисог5</а></11>
</ul> i
</div>
Но для получения горизонтального меню (рис. 7.11), мы использовали
простой вертикальный список (рис. 7.12).
■ i ■ ■Д^ТМ—М■■ ■ ■' Т—^1 ■' i ■' ■ ■■ . —.■ \ 1 ш. i
[Members.
jpeaters
^Distributers-"<, ~ &* , "■* *.< . l
Рис. 7.12. Вот скромное начало горизонтального меню
Начнем с добавления простых стилей для div - линий но верхней и нижней
границе, зададим размер шрифта и цвет фона, применим top-margin чтобы
сместить его от верхней границы окна браузера. Вот код:
<style tyoe="text/ess">
body {fone-family: verdana, arial, sans-serif; font-size:100%}
* {margin:0; padding:0;}
div#listmenu {
width: 10 0 %; /* задаем ширину для div */
border - top :lpx solid #069; /* рисуем линию поверх div*/

Создаем CSS-теиш 189
boraer-bottont:lpx solid #069; /* рисуем линию снизу div*/
font-size: . 8em; /* задаем размер шрифта */
background-color: tfCCF; /* фоновый цвет div */
margin-top:2Орх; /* ВРЕМЕННО - отодвигаем div от границы окна для наглядности
примера*/
}
</style>
По умолчанию элементы списка без стилей располагаются один над другим,
поэтому нам нужно изменить их порядок на горизонтальный (рис. 7.13).
Заодно мы сместим список от левого края div и зададим фоновый цвет для его
элементов.
div#listrnenu ul {margin: 0 0 0 ЗОрх; /* отступ ul от края контейнера*/
}
div#listmenu li {
float: left; /* располагаем список по горизонтали */
background-color: #FFA; /^задаем фоновый цвет элементов меню */
л
I
• CustomersMembersDeaieysDistributors
Рис. 7.13. Теперь список расположен горизонтально
Обратите внимание, что границы div немедленно смыкаются (хотя это и не
заметно в Internet Explorer), так как по рекомендациям W3C плавающие
элементы должны иметь возможность свешиваться из содержащих их элементов.
Так как в этом div есть только плавающие элементы, получается, чго он не
имеет высоты из-за отсутствия контента как такового.
Чтобы устранить это, удалим маркеры из списка и начнем добавлять стили
для ссылок.
Простой способ сделать так, чтобы div все же содержал плавающие пункты
меню, - эго сделать контейнер также плавающим.
div" lis tmenu {
width: 100%; ./* задаем ширину div */
float: left; /^добавляем список в div */
border-top: Ipx solid #069; /* проводим линию поверху div */
ч

190 ГЛАВА 7. Создание ксмяпонентов интерфейса
border-bottom: ipx solid #069; /* проводим линию понизу div */
font-size: . 8 em; /* задаем размер шрифта */
background-color: #CCF; /* фоновый цвет div */
margin- top: 2 Орх; /* ВРЕМЕННО-отодвигаем div от границы окна чдя наглядности примера*/
}
div#listmenu ul {margin: 0 0 0 ЗОрх; /* отступ ul от края контейнера */
}
div#listmenu li {
float: left; /* горизонтально размещаем список */
list-style-type:none; /* удаляем маркеры */
background-color: #FFA; /^задаем фон для пунктов меню */
,i^reCustomersMembersDealersDistrtou^rs*.-;V^ * '\\\'^\\У
div#li**^~~ — dbj ■ " ^ ' * * -■"'•
text-decoration: none; /* удаляем подчеркивание ссылок */
color: #069; /^задаем цвет шрифта*/
}
div#listmenu a:hover {
color:#F33;
}
Теперь div раскроется и вместит плавающие элементы списка. Шрифт
ссылок стал синим, при наведении на них указателя мыши он меняется на красный
(рис. 7.14).
:J- v^CustomGrsMembersDeafersDf5tribu?;ors^ ' \Л.'"' . ..*;■•;.<':':
—"*'"*"' —Я^ ^ ~ ' " ' 1
Рис. 7.14. Мы указали цвет ссылок для пассивного состояния и при наведении указателя мыши
Но при этом у нас отсутствует визуальное разделение элементов меню.
Несколько новых правил изменит ситуацию.
div#listmenu li {
floatrlefc; /* горизонтально размещаем список */
list-scyle-typemone; /*удаляем маркеры */
background-color: #FFA; /*задаем фон для пунктов меню */

Создаем €$$»юеню 191
padding: 0 брх; /^создаем пространство с обеих сторон текста пункта меню */
border-right:lpx solid #069; /* создаем разделительные линии между элементами И*/
}
div#listmemi li:first-child {
border-left :lpx solid #069; /^первая вертикальная линия в меню V
}
div#listmenu a {
text-decorat ion: none; /* удаляем подчеркивание ссылок */
color: #069; /*задаем цвет шрифта*/
background: #DDD; /* ВРЕМЕННО - показать активную область ссылки */
}
divftlistmenu a:hover {
color:#F33;
} ■
Результат мы видим на рис. 7.15.
"\/.!~^ Customers Members Dealers Distributors лТ^:* .*>
Рис. 7.15. Теперь элементы списка четко разделены
Для создания разделительных линий мы вначале добавили правую границу
для каждой ссылки, получив четыре разделителя, а для создания последней
черты использовали псевдокласс : first-child и добавили левую границу
к первому пункту меню.
Для наглядности мы выделили фон ссылок серым цветом, чтобы показать
вам, что они не заполняют все пространство, выделенное для каждого пункта.
Это довольно неприятная проблема, так как если пользователь будет щелкать
по желтой области ссылки, она не сработает, что и показано на рис. 7.15. Нам
нужно, чтобы ссылка заполнила все отведенное для нее пространство.
Однако проблема заключается в том, что ссылки являются строчными
элементами и к ним неприменимы свойства ширины, высоты или отступы. Чтобы
ссылка заполнила все пространство, нужно преобразовать ее в блочный
элемент. Затем можно добавить отступы:
div#listmenu li {
float:left;

192 ГЛАВА 7с С^зцание коятонентов интерфейса
lisc-style-type:none;
background-color:tFFA;
border-right:lpx solid #069;
}
div#listmenu li:firsc-chilc {
border-lefcrlpx solid #069;
;
div#list:tienu a {
padding: 0 брх; /^создает пространство по сторонам текста пунктов меню */
cext-decoration:none;
color: ^f069;
background:#DDD;
}
div#listmenu a:hover {
color:#F33;
}
Теперь ссылки заполняют все пространство ячеек, и мы можем щелкать
мышью в любой се точке (рис. 7.16).
Customers
Members Dealers Distributors J; ' .,, «
1 „ 1 n^Try^ - —
Рис. 7.16. Теперь элементы меню заполняют всю область ячеек
Итак, все, что осталось сделать, - это удалить временный серый фон и
заставить фактический фон пунктов меню изменять цвет при наведении на него
указателя мыши, добавив псевдокласс : hover ддя пунктов списка:
div#listmenu li:hover {
background-color: #FFF; /*задает фон пунктов списка */
}
div#listmenu a {
padding:0 брх;
texc-decorat ion:none;
color:#069;

Создаем CSS-теню 193
}
6iv#listmenu a:hover {
color:#F33;
}
Результат виден на рис. 7.17.
■"V
Customers
Members Dealers
Distributors,-];'11 ,• 'f; -,
Рис. 7.17. Теперь фон пунктов меню меняет цвет при наведении на него указателя мыши
Сейчас при наведении указателя мыши на пункт меню его фон меняет цвет
во всех браузерах, кроме Internet Explorer для Windows.
IE/Win реагирует на псевдокласс : hover только при его добавлении к
ссылке, тогда как более совместимые со стандартами браузеры распознают его для
любого элемента. Поэтом); несмотря на то, что мы закончили работу над CSS-
кодом для этого компонента, нам придется выполнить еще пару действий,
чтобы «бедняга» Internet Explorer для Windows отображал первую вертикальную
черту и откликался на наведение указателя мыши на пункт меню.
Вначале разберемся с вертикальной чертой. Мы можем решить эту проблему
с помощью трюка со звездочкой и дописать CSS, распознаваемый только IE/Win.
До этого момента мы использовали элемент ul только для задания левого
поля при создании отступа от края div. Так как ul содержит только плавающие
элементы (пункты списка) он так же сомкнут, как pi div в начале этого
упражнения. Добавим временные границы
div^listmenu ul {margin: 0 0 0 ЗОрх; /* смещает ul от края контейнера*/
border: Ipx solid #000;}
чтобы просмотреть границы ul (рис. 7.18).
| Customers Members
Dealers
Distributors
, ■ . .-^—... . ' -. ,- i ■■ . ' — .wd
Рис. 7.18, Нижняя и верхняя границы ul смыкаются
Нам нужно сделать ul плавающим, чтобы он вместил элементы списка:
>
* html divrlistmenu ul {
float:left; /* заставляет ul вмесскть все li */
}

194 ГЛАВА 7. Создание комгонентов интерфейса
В результате наше меню будет выглядеть, как показано на рис. 7.19.
Customers Members Dealers Distributors \-i{ >
Рис. 7Л9. Теперь uA вмещает в себя все элементы списка
Теперь добавим левую границу для первого пункта меню - удалим
временную рамку и добавим синюю черту слева (Обратите внимание, что побочным
явлением при этом стало удвоением отступа от края div, придется исправить
и это). Вот код:
* html divslistmenu ul {
float: left; /* заставляет ul вместить все Н */
border-left: lpx solid #000; /* добавляет левую вертикальную черту к ul */
margin-left: 15px; /* IE удваивает заданное значение */
}
* html a {display: block; /* IE 5 и 5.5 принимает заданный отступ */
}
На рис. 7,20 мы видим меню в Internet Explorer, осталось только создать
эффект изменения фона при наведении указателя мыши.
ustomsrs Members Dealers DistributorsJTj4'.■.-":;.ij-'ft.':' -S' 1
Рис. 7.20. Левая вертикальная черта появилась, но фон все еще не меняется при наведении указателя
11 II
кт наведения указателя мыши
в Internet Explorer
До появления CSS2, добавлять изменение облика при наведении указателя
мыши можно было только к ссылкам. Использование псевдокласса : hover в
селекторе позволяет задавать шаблон поведения при наведении указателя мыши для
разных объектов. Например, вот фрагмент CSS-кода для смены синего фона на
красный.
div#respond {background-color:blue;}
div&respond:hover {background-color:red;}
Это очень просто, но браузер Internet Explorer не поддерживает эффекты
наведения указателя для элементов ссылки, отличающихся от а. К счастью,

Создает С$$»меию 195
Питер Недерлоф (Peter Nederlof) создал файл поведения для Internet Explorer,
который устраняет этот дефект. Файл называется csshover.htc и загрузить его
можно по адресу http://www,xs4aU-nl/-peterned/hovercraft,himl, Вот как
можно добавить его к CSS:
body {foncrlem verdana, arial, sans-serif; behavior:url(css/csshover.htc);}
В данном случае мы создали новый каталог ess в том же каталоге, где
располагаются файлы для этого примера, и поместили в него файл csshover.htc. Если
вы расположите файл в другом каталоге, придется-исправить URL.
С помощью файла csshover.htc, добавленного таким образом, браузер
Internet Explorer сможет реагировать на наведение указателя мыши не только на
ссылки. Теперь фон пунктов меню будет меняться во всех браузерах, кроме
Internet Explorer 5 для Mac.
Наше горизонтальное меню готово. Вот полный код.
body {font-family: verdana, arial, sans-serif; font-size:100%;
behaviorrurl(css/csshover.htc);}
* {margin: 0; padding: 0;} /* начало горизонтального меню */
div#listmenu {
width: 100%; /* задаем ширит- div*/
f loat: lei t; /*вмещаем список в div */
border-cop :lpx solid #069; /* создаем линию поверх div */
border-bottom :tlpx solid #069; /* создаем линию понизу div */
font-size:. 8em; /* задаем размер шрифта */
background-color: #CCF; /* задаем фон div ?/
margin-top: 20px; /* смещает div от верхней грани окна браузера */
}
div#listmenu ul {margin :0 0 0 ЗОрх; /* отступ ul от края контейнера */
}
div#listmenu li {
float: left; /* горизонтальное расположение списка */
list-style-type:none; /* удаляем маркеры */
background-color: #FFA; /*задаем фон пунктов меню*/
border-right: lpx sol id #069; /* создаем разграничители между элементами li */
}

196 ГЛАВА 7. Создание компонентов интерфейса
div#listmenu li:first-child {
border-left: Ipx solid #069; /*первая вертикальная черта в меню */
>
divplistztienu li:hover {
background-color: #FFF; /*задасм фон пунктов меню */
}
div#listmenu a {
padding: 0 брх; /^пространство по сторонам текста пунктов меню */
text-decorat ion: none; /* удаляем подчеркивание ссылок */
color: n069; /* задаем цвет шрифта */
}
div#listmenu a:hover {
color:#F33;
} /* начало горизонтального меню */
/* ТРЮКИ */
* html div#liscmenu ul { /* трюк для IE для создания вертикальной черты слева */
float: left; /* вмещаем в ul все эчементы Н */
border-lef с: lpx solid #000; /* добавляем правую вертикальную черт)г к ul */
margin-left: 15px; /* IE удваивает заданное значение*/
}
Создание раскрывающихся меню
Теперь возведем наше горизонтальное меню на следующий уровень - добавим
раскрывающиеся меню. Раскрывающиеся меню на базе CSS не будут работать
в браузере Internet Explorer для Mac. Тем не менее, мы покажем, как
использовать CSS и создать работающее меню и для этого браузера.
В следующем упражнении предположим, что каждому пункту нашего
горизонтального меню соответствует определенная страница. Нам просто
потребуется указать URL вместо символов # в теге href каждой ссылки.

Создание раскрывающихся меню 197
Разметка раскрывающихся меню
Для разметки раскрывающихся меню нам потребуется вложить список
раскрывающихся вариантов в пункт списка горизонтального меню. На рис. 7.21
показано готовое меню, чтобы было понятно, что мы пытаемся создать.
V
Customers Members Dealers Distributors -
Our Services
FAQs
Sign Up
Support л
What's New. XJ
-: , : . . li" ... .- ..- * * - *
Рис. 7.21. Вот наше готовое выпадающее меню
Ниже приведен полный код для меню с четырьмя пунктами, каждый из
которых содержит раскрывающиеся варианты.
<body>
<div id="listmenun class=,,clearfix">
<ul>
<lixa href=,r#">Customers</a>
<ulx! — drop down menu items ->
<lixa href="Tf">Our Services</ax/li>
<lixa href="{r">FAQs</ax/li>
<lixa href="t?">Sign Up</ax/li>
<lixa href="#">Support</ax/li>
</ul>
</li>
<lixa href="#">Members</a>
<ul>
<■- drop down menu icerr.s->
<lixa href="#n>Benef its</ax/li>
<lixa href="#">PrograiT(S</a></li>

198 ГЛАВА 7. Создайте компонентов интерфейса
<lixa href="#">Renewals</ax/li>
<lixa href="n">Questions?</ax/li>
</ul>
</li>
<lixa href=ri#">Dealers</a>
<ul>
<!— drop down menu items—>
<lixa bref=,r#">Join us</ax/li>
<lixa href=,,#">Prograins</a></Ii>
<lixa href="#II>National Network Map</ax/li>
<lixa href="#">Support</ax/li>
</ul>
</li>
<lixa href="#n>Distributors</a>
<ul>
<!— drop down menu items—>
<lixa href="tT'^Products-c/ax/]i>
<lixa href="tr">Dealer Finder</ax/li>
<lixa href="#">CorTirni£sions</ax/li>
<lixa href="#,,>Customers</ax/li>
</ul>
</li>
</ul>
</div>
</body>
Следует отметить несколько моментов, связанных с этим кодом.
1. Ни один элемент ul или 11 не использует идентификаторы или классы.
Единственным отличием этого списка от обычного вложенного является
содержащий div с идентификатором lisccontainer, позволяющий
применять нужные CSS-правила к целевому списку.
2. Этот код схож с разметкой горизонтального меню из предыдущего
упражнения, но здесь добавлен список второго уровня, вложенный в каждый

Создание раофьшашяшяхя теню 199
пункт меню. Очень важно правильно вложить список - необходимо
поместить весь вложенный список omul до /ul внутрь пункта родительского списка,
непосредственно перед закрывающим тегом /li пункта списка. Вот пример:
<ul>
i
<lixa href=" г*">Пункт 1 верхнего уровня без выпадающих пукктоЕ</а></11>
<lixa Ьге£="#">Пункт 2 верхнего уровня без выпадающих пунктоз</а>
<ul>
<lixa href="#">IIyHKT 1 раскрывающегося меню</ах/П>
<lixa Ьге£="#">Пункт 2 раскрывающегося меню</а>
</ul>
</lix!—закрывающий тег пункта 2 верхнего уровкя->
<lixa href=Ir#">nyHKT 3 верхнего уровня без выпадаюшкх пунктоз</ах/Н>
</ul>
3, Значения href просто заменены на #, в реальном мире необходимо
заменить # фактической ссылкой на имеющуюся страницу.
Давайте начнем с простых вещей. Вместо того чтобы сразу работать с
полным кодом разметки, приведенным ранее, начнем с горизонтального меню,
в котором список второго уровня добавлен только к первому пункт): Затем вы
по аналогии сможете добавить все вложенные меню для остальных пунктов.
Вот код:
<body>
<div id^'Iist-fierm'' class=,,clearfix,,>
<ul>
<lixa href=u#">Customers</a>
<ulx!- drop down menu items ->
<lixa href=,,#">Our Services</ax/li>
<lixa href="#">?AQs</ax/li> у
<lixa href="#">Sign Up</ax/li>
<lixa href="#!,>Support</ax/li>
</ul>
</li>
<lixa href=,,#l,>Members</a></li>

200 ГЛАВА 1. Создание компонентов Интерфакса
<lixa href="#">DeaLers</a></li>
<lixa href=,,#">Discributors</ax/li>
<ul>
</div>
</body>
Давайте теперь взглянем на рис. 7.22.
Members | Dealers | Distrfcutors
I Customers
1 Our Service? [ FAQs I Sign up ] Support;, | What's New
Рис. 7.22. Подменю пока не раскрывается, а наследует стиль родительского списка
Необходимо добавить стили к раскрывающемуся меню, чтобы привести его
в форму.
Вместо добавления класса 1ли идентификатора к подменю, мы можем
использовать селектор специально для этого списка. Например, селектор ul li
ul {...CSS правила...} предназначается только для элемента ul, содержащегося
внутри элемента li родительского списка - как раз то, что нам нужно. Как
видно в следующем фрагменте кода, всего три простых объявления CSS помогут
достичь нужного результата.
divitlistnenu ul li ul {
margin: 0; /* запрещает наследование временного поля ul из горизонтального меню */
width: Idem; /*задает ширину меню - в сочетании с шириной И в 100% дает нам
вертикальное меню*/
}
div# list-menu ul li ul li "{
widzh: 100%; /* заполняет контейнер списка (ul) элементами списка*/
}
Результат показан на рис. 7.23.
■и
Customers
Our ServicBS
FAQs
Sign Up
Support
What's New
*
Members | Dealers ] Distributors |-
■^ J- •'- - '■ *jV а к * _ -.■ ■ -;
■
>
'
л".
Рис. 7.23. Меню начинает обретать форму

Создаете раскрывающихся нюню 201
Если мы зададим ширину ul вложенного списка и затем заставим элементы
li внутри него занимать 100% ширины, они образуют вертикальное меню. Без
этогр короткие счова будут располагаться на одной строке, и ширина каждого
пункта будет разной.
Теперь необходимо правильно расположить раскрывающееся меню
относительно родительского. Для этого зададим дочернему меню абсолютное
позиционирование, а родительскому - относительное. В то же время мы применим
стили для создания границ раскрывающегося меню. Вот необходимый код:
divrrlistmenu li {
float: lef с; /* горизонтальное выравнивание списка */
position: relative; /* контекст позиционирования для раскрывающегося меню
с абсолютным позиционированием */
list-style-type:none;
background-color:#FFA;
border-right:lpx solid #069;
}
divTlistrnenu ul li ul {
margin:0;
position:absolute; /* размещает выпадающий ul относительно родительского К*/
width:10em;
* }
aiv#listmenu ul li ul li {
width: 100%; /* элементы списка заполняют контейнер (ul) */
border-left: lpx solid #069; /* три стороны каждого пункта раскрывающегося меню */
border-bottom;lpx solid #069;
border-right:lpx solid #069;
}
iiv#listmenu ul li ul li:first-child {
border-top: lpx solid #069; /^верхний край раскрывающегося меню */
}
Теперь давайте взглянем на рис. 7.24.
Обратите внимание, что раскрывающееся меню на 1 пиксел смещено
вправо, так как оно выравнивается по элемеигу списка, а не по его границе, но так

202 ГЛАВА 7. Создание компонентов интерфейса
ustorners
Members I Dealers 1 Distributors ]?
ur Services
FAQs
Sign Up
Support
What's New
к
ii 'л ^ \-f-
Рис. 7.24. Наше раскрывающееся меню почти готово
как контекстом позиционирования теперь является родительский элемент,
достаточно задать небольшой сдвиг, чтобы поставить меню на место:
div#listmenu ul li ul {
margin:0;
position:absolute;
width:10 em;
left: -lpx; /* выравнивает раскрывающееся меню*/
}
Посмотрите на рис. 7.25.
:■■■*. :-:
Customers
Members | Dealers I Distributors'|&^V\7л
Our Services
FAQs
Sign Up
Support
What's New
*
K-J-l
Рис. 7.25. Раскрывающееся меню размещено точно под родительским пунктом
За исключением таких проблем с отображением меню в Internet Explorer,
как отсутствующая верхняя граница и наследуемая от предыдущего трюка
левая граница ul, раскрывающееся меню готово и мы можем обратить внимание
на то, как сделать его видимым только при наведении указателя мыши на
родительский пункт меню.
В горизонтальном меню при наведении указателя мыши на пункт его
внешний вид изменяется. Для раскрывающегося меню нужно, чтобы в этом случае
открывалось вложенное меню. Достичь этой цели нам поможет
исключительно простой селектор.
Вначале, спрячем раскрывающееся меню, когда указатель мыши на него не
наведен:
body div#listmenu ul li ul {display:none;}

Создание раскрывающихся меню 203
*
Это свойство наследуемо, поэтом)" все элементы списка вложенного меню
также будут невидны. Затем мы заставим меню появляться при наведении
указателя мыши:
div#listmenu ul li:hover ul {display:block;}
Этот селектор указывает, что раскрывающийся список ul должен
отображаться только тогда, когда на родительский пункт списка li наведен указатель
мыши. Однако мы хотим, чтобы меню оставалось видимым и когда мы
смещаем указатель с пункта родительского меню и двигаем им по раскрывшемуся
меню. Для этого сгруппируем второй селектор с объявлением display:block
следующим образом:
div#iistmenu ul li:hover ul, div#listmenu ul li ul:hover {display:block;}
Теперь меню отображается при наведении на родительский пункт и на само
вложенное меню (рис. 7.26).
Customers Members Dealers Distributors * , V '—, *
Our Services
FAQs
Sign Up к
Support ^
What's Mew.
: ^::'-::...^".e
Рис. 7.26. При наведении на родительский пункт появляется дочернее меню,
позволяющее сделать выбор
Теперь добавим трюк для Internet Explorer:
* html div^rlistmenu ul li ul { /*доба&тшет верхнюю границураскрывающегося меню для IE*/
border-top:lpx solid #069;
border-left: Орх; /^устраняет наследование границ ul раскрывающимся меню */
}
Теперь Internet Explorer отображает раскрывающееся меню так же, как
и другие браузеры- Возможно, вы обратили внимание, что текст этого меню
выделяется только при наведении указателя на сам текст. Для устранения этого
недостатка нам потребуется сделать блочными элементами все родительские
ссылки:
iiv#listmenu a {
display:block; /*п)нкты вложенного меню выделяются при наведении указателя*/
padding: 0 брх; /^создает пространство вокруг текста пунктов меню*/

204 ГЛАВА 7. Создание компонентов интерфейса
text-decoration: none; /*удаляет подчеркивание есьпок*/
color: #069; /*задаеттекст шрифта*/
}
Наше меню приняло вид, представленный на рис. 7.27.
Customers Members | Dealers Distributors
Our Services
FAQs
Sign Up .
Support -
What's-New \J
Рис. 7.27. Теперь ссылки выделяются при наведении указателя мыши на пункт меню
Сделав это, мы можем удалить трюк для Internet Explorer из упражнения с
горизонтальным меню, делающий ссылки меню блочными. Оказывается, этот
код нам нужен для всех браузеров. Нужно удалить из кода строку
* html a {display:block;}
Итак, в нашем распоряжении есть раскрывающееся меню, созданное «с
нуля» и без использования JavaScript.
Примечание Если текст в пункте меню переносится на вторую строку, он отображается
также с отступом и не касается границы ячейки.
Создание многоуровневых
раскрывающихся меню
Пока что мы создали одноуровневое раскрывающееся меню. Приложив чуть
больше усилий, мы с легкостью создадим многоуровневое вложенное меню,
похожее на приведенное на рис. 7.28.
На рис. 7.28 мы имеем родительское горизонтальное меню,
раскрывающееся меню и вложенные в него меню третьего и четвертого уровня. Для их
добавления нам необходимо выполнить два простых действия. Изменить код
разметки для добавления раскрывающихся элементов с помощью вложенных списков.
При этом следует соблюдать осторожность и не заггутаться во вложенных
элементах. Но если при создании списков вы используете структуру, схожую с
устройством баз данных, у вас все получится - требуется просто создать новый
список для каждого последующего пункта меню.

Сшдагше многоуровневых раскрывающих»» теню 205
Customers Members Dealers Distributors
i Our Services
FAQs
ign Up
.-
Support
What's Nev^
Gold program
Si'ver program
Bronze proaram
By Region
West Coast
Mountain Reaion
Central Region [Ц
East Coast ^
Рис. 7.28. Многоуровневое вложенное меню позволяет пользователю напрямую обратиться
к нижним уровням иерархии сайта
Вначале мы добавим только одно дополнительное меню:
<div id="listmenun>
<ul>
<lixa href=" ur,>Customers</a>
<ulx!—первое меню —>
<lixa href=n#">0ur Services</ax/li>
<lixa href="#">FAQs</ax/li>
<lixa href=,,#">Sign Up</ax/li>
<Iixa href=,,T,,>Support</a>
<ul><!- второе меню —>
<lixa href="#">Gold programme/ax/li>
<lixa href="7r">Silver program</ax/li>
<lixa href=,lTi:,,>Bron2;e program</ax/li>
<lixa href="#f,>By Region</ax/li>
</ul>
</li>
<lixa href="#n>What's New</ax/li>
</ul>
</li>
<iixa href="#',>Members</a>...H так далее до конца без изменений
Во-вторых добавим две строки в CSS:
^эсу div^liscmenu ul li ul li ul {
visibility:hidden; /* идентично displayinone */

206 ГЛАВА 7* Создание компонентов интерфейса
left:10en;
}
div*listmenu ui li ul li: hover ul. {visibility rvisible;} /* идентично display-block*/
С помощью таких длинных селекторов мы выбираем списки, вложенные
в другие списки, которые, в свою очередь, являются вложениями в третьи.
Добавив body к первому списку, мы повышаем конкретность этого селектора по
сравнению с селектором верхнего уровня. Благодаря такому коду наше меню
выглядит так, как показано на рис. 7.29.
Customers Members Dealers Distributors
Our Services
FAQs
Sign Up
Support ..
What's New \J
Gold program
Silver program
""4tfr
Bronze program
By Region
Рис. 7.29. Второе раскрывающееся меню функционирует, но также смещено на один пиксел вверх
Несмотря на то, что левый отступ задан правильно, мы видим, что второе
выпадающее меню смещено вниз от?юсительно пункта, к которому оно
относится. Дело в том, что оно унаследовало сдвиг родительского меню,
необходимый для его расположения под горизонтальным меню. Чтобы исправить
ситуацию, потребуется всего одна строка CSS-кода.
body div#listmenu ul li ul li ul {
visibility:hidden; /* идентично display:none */
top:-lpx;
left:10em;
}
div#listmenu ul li ul lirhover ul {visibility:visible;} /*идентичноdisplay:block*/
Теперь второе раскрывающееся меню находится на своем месте (рис. 7.30).
Если задать для свойства top значение Орх, меню будет выровнено по верху
пункта списка, а не по его верхней границе.
Вложив в список второго раскрывающегося меню еще один список и
добавив пару строк CSS-кода:

Создана мнюгоу {мгеневых раскрывающихся weseio
207
Our Services
FAQs
Sign Up
Support
Wrist's New
Ь
Customers I Members I Dealers I Distributors f>>^ X■♦ ■ "= "'ЧГл^Г: ~*\ /*>
-- ' . ' ' T ■ V I "mi h . —■ . '• ■■"".и I I " ' "I r'.i'llli
Gold program
Silver program
Bronze program
By Region
Рис. 7.30. С помощью свойства сор мы выравниваем второе раскрывающееся меню
*
div#listmenu ul li ul li:hover ul li ul {visibilityrhidden}
div#listmenu ul li ul ii ul li:hover ul {visibility:visible}
мы добавляем еще один уровень меню.
Внимание Полный код готовой таблицы стилей занимает более двухсот строк, вы можете
ознакомиться с ним на сайте www.bbd.com/stylin.
(ПИ
наведения указателя зиыши
с графическими фонами
В рассмотренном примере создания раскрывающихся меню при наведении
"казателя мыши на пункт меню цвет его фона изменялся. Для этого мы
изменяли значения свойства color с помощью : hover. Тем не менее, иногда вместо
< мены цвета фона требуется использовать фоновое изображение.
Раньше нам пришлось бы изготовить изображения для каждого состояния
кнопки и затем применить JavaScript. Если вы сталкивались с этим, то знаете,
сколько труда необходимо для достижения этого довольно простого эффекта.
Если не сталкивались, вам будет приятно узнать, что больше делать это не
придется, так как есть гораздо более легкий способ получения такого же эффекта
помощью CSS.
Обычно код разметки для кнопки меню выглядит примерно так:
<~iv class="button">
a class="roli" href="#">Graphics</a>
< div>
Чтобы вся область div или другого используемого контейнера была актив-
ой и откликалась на наведение указателя мыши, требуется заставить ссылку
>лолнить контейнер, что можно сделать с помощью следующего CSS-кода:

208' ГЛАВА 1Я Создание компонентов интерфейса
div.buLcon {
width:12Орх;
height:24рх;
top:Орх;
left: Орх;
border: Ipx #000 solid;
}
a.roll {width:120px;
. height:24px;
display:block;
padding-top:2px;
font: bold lOpt;
text-align:center;
border: Ipx solid red; /^временно для проверки заполнения ссылкой div*/
\
Обратите внимание, что мы изменили ссылку на элемент блочного уровня,
чтобы она откликалась на заданные размеры, и временно добавили вокруг нее
красную рамку, чтобы проверить, работает ли этот прием (рис. 7.32).
Graphics
i—'^—^
Рис, 7.32. Изменив значение свойства display ссылки на block, мы можем заставить ее заполнить
весь div, чтобы активной была не только ссылка, но и весь содержащий ее div
После того, как div будет заполнен ссылкой, ссылка переходит в состояние
: hover, как только мы наводим указатель мыши на div.
Теперь необходимо указать свойства состояний ссычки:
div.button a.roll:link {color: black; texc-decoratiomnone;}
div.button a.roll:visited { color: green;}
div.button a.roll:hover {color:#069;}
div.button a.roll:active {colorrwhite;}
Мы удалили подчеркивание по умолчанию, вместо этого ссылка становится
подчеркнутой, когда на нее наведен указатель мыши .

Стцшт® тнвгоуровневых {дашрьюающихся мепш 209
Далее мы создадим изображения для всех четырех состояний кнопки. Как
минимум, нам понадобятся изображения для обычного состояния ссылки
(:link) и состояния при наведенном указателе мыши (;hover). Можно
добавить и изображения для состояний :active (во время щелчка по кнопке)
и .-visited (для просмотренных ссылок). На рис. 7.33 мы видим все четыре
состояния.
link ;
* .*
ISlt
г
:-.л Л* —
tive
Рис. 7.33. Фоновое изображе .ие для всех четырех состояний ссылки
Используемые нами изображения имеют размер 120г100 пикселов, размер
каждой кнопки составляет 120г24 пиксела. Теперь добавим эту графику в виде
фона для кнопки:
divSbutton a.roll {width: 120px; height:20px; padding-сор:4рх;
display:block; fonc: bold 10pt verdana, sans-serif; text-align reenter;
background: url("images_pres/four_state_roll_bg.gif") Opx Opx no-repeat #000;}
Теперь наша кнопка выглядит так, как показано на рис. 7.34.
* Graphics L
Г^ —■ ft
—^^3
Рис. 7.34. Для каждого состояния показывается только нужная часть фонового изображения
В данном случае свойство background является сокращением для всех свойств
фона. С помощью этого свойства мы в одной строке указали фоновое
изображение, его расположение относительно контейнера, повторяемость и черный
фоновый цвет.
Фоновый цвет всегда располагается под фоновым изображением, поэтому,
если вдруг графика не загрузится, фон кнопки будет черным.
Теперь мы готовы к последнем}' шаху - изменению графики. Контейнер
играет роль окна, через которое мы видим только часть более крупного
фонового изображения. Все что от нас требуется - это смещать графику вверх и вниз

210 ГЛАВА 7. Создание компонентов интерфейса
в зависимости от состояния ссылки, чтобы создать иллюзию смены фоновых
изображений. Вот необходимый код:
div.button a.roll:link {background-position: Opx Opx; color: black; text-
decoration -.none; }
div.button a.roll:visited {background-position: Opx -25px; color: green;}
div.button a.roll:hover {background-position: Opx -50px; color:#069;}
div.button a.rollractive гbackground-position: Opx -75px; color:white;}
■
С помощью свойства background-position мы заставляем фоновое
изображение располагаться в зависимости от состояния ссылки. В результате
получаем одно изображение, ненадобность использования JavaScript и отсутствие
предварительной загрузки изображений - вот так создается смена фона при
наведении указателя с помощью CSS.
Разработка форм
Формы являются одним из наиболее интерактивных элементов Web-сайта.
Web-сайт предоставляет информацию посетителям. Если же вы хотите, чтобы
посетители также предоставляли какие-то сведения вам, чаще всего это
делается с помощью форм. Целью данного раздела является показать вам простой
способ создания форм с помощью минимума CSS кода.
Знакомство с элементом form
При создании формы обычно вначале мы создаем контейнер div, внутри
которого будет расположен элемент form, примерно так:
<div id="formcontainer">
<form method="post" action="../forms_tests/page.htm">
<!-код разметки формы->
</form>
</div>
Контейнер div позволяет добавлять связанные с формой элементы
заголовка формы или текста, расположенного над или под ней, а также поля.
Важно понять предназначение элемента form. Когда пользователь щелкает
по кнопке Submit (Отправить), данные полей формы отправляются в URL,
указанную атрибутом action формы. Способ отправки данных в целевую URL
1

Разработка ферт 211
определяется значением post (не отображается в URL целевой страницы) или
get (отображается в URL целевой страницы) атрибута method. Каждый элемент
формы состоит из элемента ввода (например, текстового поля или меню) и
текстовой метки, указывающей пользователю тип вводимой информации
(например, «Имя» или «Выберите тип автомобиля»).
Обычно при создании форм описание мы располагаем слева, а поле ввода -
справа, чтобы пользователь смог прочитать, что от него требуется, и сделать
это. В XHTML мы размещаем эти элементы точно так же, вначале указывая
элемент label, а затем - элемент input:
<div class="clearfix">
<label<Enter your First name</label>
<input onfocus="clearText(this)" name="firscMame" type="text" size="35r
value="enter first name here,: />
</div>
Поместим оба элемента внутрь div с классом clearf ix чтобы вне
зависимости от высоты двух элементов следующий элемент формы располагался под
ними. Затем в CSS сделаем метку плавающей с выравниванием по левому краю,
чтобы пара «метка-ввод» располагалась на одной строке, затем добавим
верхнюю границу к контейнеру div. разделяющую расположенные один над другим
элементы формы.
На рис. 7.35 мы видим пример формы с примененными правилами CSS.
j1* ——и—wwn ill. ■ ■ ^ —.. ..,■■■■■ .w^ft-...*.... , 1 riiTf mrfi i — - v
Label text goes jenter first name here i
here and it can be : ™ ~ ~~^ j
|as long as it needs j
toJDe ^ __. i
Description iThis text area allows j !
jrnult ip le 1 ines of text - Its \
jheight can be set and will I
•scroll if user-entered text
i
is not all visible- \
' j i s
————— •'•tSSst: hi i,4i| ШИЕДИЖага!;!1- ATI- i Г \ Я1.* II I HI I " ■ II Л . , tUh.j"— •"• ■
Submit this Form] j
Рис. 7.35. Простая форма со стилями и границами вокруг контейнеров div
Ниже приводится CSS-код, использованный для этой формы.
body {font-family: verdana, sans-serif; color: «003366; font-size:lem;}
* {margin: 0; padding: 0;} /* начало CSS для формы */

212 ГЛАВА У* Созданию коипо'ьвнтвв интерфейса
divnfornicontainer {width:390px; margin-left:4Gpx; margin-top:2Орх)
div#formccntainer form {border:Ipx solid iCCC;}
div#formcontainer div.clearfix {border-top: Ipx solid #CCC;} /* добавляет
1ШШЮ над каждой секцией и обеспечивает вертикальный отступ */
div#formccncainer form label {width: 120px;- float:left; font-size:.75em;}
/*метка слева от каждого ввода */
А вот XHTML-код для формы, приведенной на рис. 7.35:
<Ьоау>
<div id=,,fonncontainerI,><!--общий контейнер div-->
<form method="post" action="../forms_cests/page.htm">
<!--текстовое поле с одной строкой—>
<div class="clearfix">
<label>Label texc goes ' iere and it can be as long as it needs to be.</
label>
<input name = "firscName" type="text" size="35" value = "enter first
name here" />
<"/div>
<!—текстовое поле для нескотькях строк—>
<div class="clearfix">
<label>Description</label>
<textarea name="firstName" rows="6" cols="26H>This text area allows
multiple lines of text. Its height can be set and will scroll- if user-
entered texL is not all visible.
</textarea>
</div>
<!—по~е ззода пароля—>
<civ class=,'clearfix">
<label>Password</iabel>
<input narae=nf irstName" type-" pas sword" 5ize=,,35M value = "encer it here" />
</civ>
<I--кнопка отправки сведений-->
<div class="clearfix">
<inpuc type="submit" value="Submit this Form" />

азраюотка цщш
213
</div>
< / f orni>
</div><!--конец общего контейнера div-->
</body>
Конечно, нам еще предстоит проделать немало работы, прежде чем
получить окончательный вариант формы, но уже сейчас эффект двух колонок
довольно видимый. В первом разделе метка длиннее содержимого, а во втором -
содержимое длиннее метки, но они разделены горизонтальной линией и
выровнены по высоте.
Отметим, как мы добились одинаковой высоты двух колонок. Мы задали
общую высот)'для div с именем f ormcontainor равной 390 пикселам, а ширину
плавающего элемента метки - 120 пикселам, оставив 270 пикселов элемента
ввода информации. Если вы хотите увеличить ширину области текста метки,
просто увеличьте значение width, &Q не забудьте добавить такое же значение
и к свойству width элемента f ormcontainer.
Следующим этапом, позволяющим увидеть механизм работ разметки, является
отключение границ элемента form, добавление вертикального пространства и
создание пространства между меткой и соответствующим полем ввода текста (рис. 7.36).
Laoel text goes
here and it can be
as long as it needs
to be.
■ ■ t —■. . -■ ■ ■■ -
Description
enter first name here
ТЫз text area allocs
multiple lines of text. Its
height can be set and will
scroll if user-entered text
is not «11 visible.
Password
*cte<**McJ**№Jt
Submit this Form
;1\м>ш*щи*^меет»»№1^™А'Цтаст>*-^^ r.ww^wwmi»-iefrifefenwflfti*rt я
Рис 736. С помощью нескольких стилей мы задаем базовый облик формы
Вот необходимый код:
body {font-family: verdana, sans-serif; color: #003366; fonc-size:I em;}
* {margin: 0; padding: 0;} /* Начало CSS-формы */

214 ГЛАВА 7» Создание компонентов интерфейса
div#formconcainer {width:390px; margin-left:40px; margin-top:20px;}
div#formcontainer form {border-top: 2px solid #CCC; border-bottom: 3px
solid nCCC;} /* верхняя граница визуально на 1 пиксел шире, так как она соприкасается
с границей div.clearfix */
div#formconcainer div.clearfix {border-top: Ipx solid #CCC; padding:10px
Opx; vertical-align: cop;} /* добавляет линию над каждой секцией и обеспечивает
вертикальные отступы */
div#formcontainer form label {width:120px; float:left;font-size:.75em;
color: #003366; margin :0 10px; } /* метка слева от каждого поля ввода*/
Как и планировалось, мы удалили границу элемента form, добавили отступы
для div с именем clearf ix и вертикальное пространство между элементами
form и разделяющими их линиями, а также поля справа и слева шириной
10 пикселов для элемента label.
Теперь пора перейти к созданию более сложной формы с несколькими
элементами select, а не только с простыми текстовыми полями.
Добавляем кнопки с зависимой
и независимой фиксацией
К другим элементам форм относятся кнопки с зависимой и независимой
фиксацией. Давайте добавим в нашу разметку код для трех кнопок с зависимой
и трех - с независимой фиксацией: «
<!--кнопки с зависимой фиксацией—>
<div class=riclearfix">
<label>Pick One</labei>
<div class="buttongroup clearfix"><!--блок для группы кнопок -->
<divxinpuc name="radioset" type="radio" size="35" value = "Choice_l"
checked="checked" />Choice l</div>
<div><input name="radioset" type="radio" з1ге=,,35" value = "Choice__2"
/>Choice 2</div>
<divxinput name="radioset" type="radio" size="35" value = "Choice_3"
/>Choice 3</div>
</div><!--конец блока для ггэуппы ккопок-->
</div> <!--конец кнопок с зависимой фиксацией-->
<!--кнопки с независимой фиксацией—>
<div class="clearfix">

215
<label>Pick One</label>
<div class="buttongroup clearfix,r><!--блок для группы кнопок -->
<divxinput name=,,boxsec" type="checkbox" size=M35" value = "Choice_l,f
/>Choice l</div>
<divxinput narne=,,boxset" type="checkbox" size="35" value = "Choice__2"
/>Choice </div>
<divxinpuc name="boxset" cype="checkbox" size=l,35n value = uChoice_3"
checked="checked" />Choice 3</div>
</div><!--конец блока для группы кнопок-->
, </div> < I-конец кнопок с независимой фиксацией—>
Этот код похож на код текстовых полей за исключением того, что вместо
одного текстового поля, расположенного в правой части формы, мы
используем контейнеры div для групп переключателей, внутри которых имеется по три
div для каждой кнопки. Взгляните на рис. 7.37, на котором глобальный
контейнер выделен жирной границей, а три внутренних контейнера - более тонкими
границами.
Pick Оле
^ Choice 1
r Choice 2
*~ Choice 3
Pick One
Г- Choice 1
Г~ Choice
Р7 Choices
Рис. 7.37. С помощью границ контейнеров можно понять структуру организации элементов
Прежде чем вы познакомитесь с CSS-кодом, использованным для создания
этой разметки, я хочу сделать два важных замечания. '
Во-первых, сделать из нескольких кнопок группу и заставить их вести себя как
группу, можно, задав для них одинаковый атрибут паше. Затем, например, если
пользователь щелкнет по одной кнопке с зависимой фиксацр1ей, другая кнопка
в группе будет выключена автоматически. Несмотря на то, что все кнопки в
группе имеют одинаковое имя, каждой из них необходимо присвоить уникальное
значение value, чтобы пара «имя-значение» передавала сведения о том, какой
выбор (значение) был сделан в каждой группе (имя). Обратите внимание, что

216 ГЛАВА 7. (издание контоненгав интерфейса
в предыдущем примере разметки все кнопки обоих типов относятся к одному
определенному имени.
Во-вторых, можно сделать так, чтобы одна кнопка с зависимой фиксацией
в группе или любое число кнопок с независимой фиксацией по умолчанию
выбрались при загрузке страницы. Для этого следует добавить атрибут selected
со значением selected. Обратите внимание, что в предыдущем примере по
умолчанию выбрана первая кнопка с зависимой и последняя кнопка с
независимой фиксацией.
Ниже приведен CSS-код, необходимый для организации элементов в
группы и их расположения друг над другом в контейнере buttongroup, как
показано на рис. 7.37.
div#formcontainer■div.buttongfoup {float:left; border:0; padding:Opx;
border; 2px solid;} /* контейнер для группы кнопок - переопределяет верхнюю границу
div с именем clearfix для div вокруг кнопок */
div#formcontainer div.buttongroup div {margin-bottom:5px; font-size:.75em;
border: Ipx solid;} /* содержит INPUT и текст - margin-bottom задает вертикальный
OTCiyn меж чу кнопками */
div#f ormcontainer div.buttongroup input {margin-right :5px;} /* задает расстояние
между кнопкой и ее меткой*/
И снова, ключом к успеху в этом довольно простом упражнении является
плавающий контейнер div п его класс clearfix. Остальная разметка
выравнивается с помощью отступов.
Примечание Сразу после float: left в приведенном выше коде следует border: 0. Это
необходимо, так как большой контейнер div, окружающий каждый раздел
формы, использует линию border-top для создания горизонтальных
разделителей, и мы используем тот же класс clearfix для данных внутренних
контейнеров. Поэтому необходимо обнулить border-top для нового
контейнера, иначе появится еще одна нежелательная линия по верху каждого
контейнера для групп кнопок. Попробуйте удалить border: 0 и вы поймете, о чем
мы предупреждаем.
Последним рассмотренным нами компонентом форм является
раскрывающееся меню.
С&з^тнте раскрывающегося тет® дшя форшяы
Меню, созданные с помощью тега select, зачастую используются в формах для
выбора страны и'ш в других ситуациях, когда пользователь должен выбрать

Разработка ферм 217
один из многих вариантов. В отличие от кнопки меню select является очень
компактным, так как занимает в свернутом виде всего одну строку.
Код разметки для select похож на код списка, он содержит элемент select
с определенным числом элементов option:
<!--выпадающее меню-->
<div class="clearfix">
<label>Pick from menu and then click submit" belpw</labei>
<select name=ninenuChoice,,>
<opnion value=,,no_selection_made">Pick your favorite guitar</ootion>
<option value="fender">Gibson</option>
<option vfilue="fender">FenGer</option>
<option value="taylor,!>Taylor</option>
</select>
</div>-
Ha рис. 7.38 мы видим результат.
Pick from menu
- and then dick
submit below
| -.: Submit this Form
Рис, 7.38. С помощью элемента selecu можно создать раскрывающееся менюдля формы
Этот элемент не требуется дополнительно CSS-кода, достаточно одной
разметки. Для раскрывающегося меню подходит CSS, использованный для
текстовых полей.
XHTML позволяет добавить подменю элементам select с помощью тега
optgroup, но эта опция довольно слабо поддерживается браузерами, поэтому
говорить о ней пока не стоит.
Окончательные штр км
Вначале необходимо переместить кнопку отправки вправо, так как
пользователи ожидают увидеть ее именно там. Также, если вам требуется кнопка сброса,
пометите ее возле левого края формы напротив кнопки отправки, чтобы
исключить возможность случайного щелчка по ней. Сделать это очень легко, добавив
Pick your favorite guitar j^
Pick your favorite guiter
Gibson
Та or *
>

218 ГЛАВА 7. Создагше коятонентов интерфейса
специальный класс и применив margin-left или float: lefс. Также можно
выбрать ее с помощью селектора атрибутов - но в Internet Explorer это не работает.
Примечание Полный CSS-код и код разметки можно посмотреть на сайте www.bbd.com/
styfin.
Второй заключительный штрих заключается в добавлении небольшой
функции JavaSCript в заголовок документа, очищающей текст по умолчанию в
текстовом поле при щелчке по нему. Такой подход позволяет разместить в полях
ввода инструкции для пользователей с помощью атрибута value для input,
которые исчезают, как только пользователь щелкнет поле. Как видите, мы добавили
A Basic Form
Please fill this form and press Submit
Label text goes
here and it can e
as long as it needs
to be.
enter first name here
Description
Password
Pick One
Pick One
Pick from menu
and then click
submit below
JThis text
jmulcip.
iheight
'scroll
is noc
Le 1
can
if
all
area
ines
be
user
vis
allows
ot text.
Its
set and will
-entered
ible.
text
'
i*cMttcMMak*&*/*M*
0 Choice 1
С Choice 2
С Choice 3
□ Choice 1
□ Choice
0 Choice 3
Pick your favorite guita
Submit this Forml
Рис. 7.39. Готовая форма

Реализаций поиска 219
функцию clearText, а для каждого поля с инструкцией - атрибут onfocus,
вызывающий эту функцию и очищающий поле при щелчке.
После того как вы проделаете эти изменения, форма будет выглядеть, как
на рис. 7.39.
Для подготовки подобной формы можно написать сотни строк кода.
Представьте, что форма электронного магазина может содержать раскрывающийся
список с 50 штатами и другое меню с 300 странами. Однако в любом случае все
подобные формы будут схожи с нашей, и несмотря на объемный код, их
создание, поддержка и изменение не является сверхсложной задачей.
Реализация поиска
Компонент поиска, подобный показанном)' на рис. 7,40, можно найти
практически на любом сайте.
SEARCH
I ■':/;- ': : |go
Рис. 7.40. Простой компонент поиска
Код разметки для создания такого компонента выглядит следующим образом:
<div id=nsearcharea">
<h3>SEARCH</h3>
<form name="search" act ion=M search. hcni">
<input name="search11 size=n20" />
<a href="javascript:document.search.submit() ">G0</a>
</form>
</divxl—end searcharea-->
А вот необходимый CSS-код:
#searcharea {
height:44px; /*высота контейнера*/
width:220px; /*ширина контейнера */
margin :30px 0 0 ЗОрх; /^ВРЕМЕННО смещает div от края окна браузера */
}
div>#searcharea {padding-top: брх;} /^переопределяет значение для совместимых
со стандартами браузеров*/
*searcharea h3 {
•

220 ГЛАВА 7. Создание компонентов интерфейса
font - size: . 8 em; /* размер шрифта SEARCH*/
color: *f546DA?;
}
Ssearcharea form input {
border-top: 2px solid n546DAF; /* стиль границы по та ввода* /
border-right: lpx solid #546PAF;
border-bottom: 1-px solid #546DAF;
border-left: 2px solid S546DAF;
font-size:. 9em; /* размер шрифта вводимого текста */
background-color: #Е0Е0Е0; /*фои поля ввода*/
}
Ssearcharea a {
font - si ze: . 7 5em; /* стиль ссылки GO */
font-weight:bold;
color:#546DAF;
}
К элемент}- поиска применяется тот же принцип, что и к предыдущем)7
примеру. Поле input и кнопка отправки находятся внутри элемента form. Когда
данные отправляются, они пересылаются в URL, заданную в атрибуте action
формы. В предыдущем примере мы использовали кнопку для отправки формы.
Здесь мы применим текстовую ссылку; задействовав следующую функцию
JavaScript в href ссылки Go:
<а href="javascript:document.search.submit()">G0</a>
Функция submit встроена в JavaScript, поэтому для ее работы требуется
лить такой небольшой фрагмент кода. Для использования этой конструкции
в. другой форме просто измените слово search на имя формы. Если же форма
имеет имя shoppingList, вам необходим следующий код:
<а href="javascript:document.shoppingList.submit{)">G0</a>
Мы также добавили некоторые стили к элементу input. Большинство
дизайнеров не добавляют к ним стили, но если не перебарщивать, так можно легко
придать формам уникальный облик. Мы также указали font-size для поля
ввода, возможность чего многим дизайнерам неизвестна. Так как это позволяег
уменьшить размер текстового поля, данный прием является полезным в случае
размещения формы в ограниченном пространстве, например в боковой панели.

к*
^
Изменяем размер столбцов для корректного отображения графики
Учимся создавать гибкий заголовок
г^ г*-.
pv
■:?T*Mar>fr'i<u*lir<c .-
Дополнительная
информация
о создании
списков
fIH§ h^^W/ELLOW LXND OF JN£KC$1
"■J -У> . - , ■ .
Tfe>5t*ry
R±l atari Link*
Contact СЫ
;?Дка^уд.*"—H'ridy p ^ '
В*хс*£ The Новчх, r^st* was 6с<*эо т>£ 5Ne»;_
1"Г>в ИАг/tlbii und of Sno.rgi* weC t%€ lair erf «IjPt CKK4E ViO~*1
S* £A Wttt-£fr> th ДОТО-ДОЯ. С w*| prtTiftc^ n IMS, 9re-£ZCI»C
J ^tA. T^fciC',4 *I?lt МССЫ* C¥ 1ЕП >C4 J. "ft» 6O0U *4 tr« lA'C TCiJS
Г« я:&гу оГ ttto srraii tNidr<;i\ J$c *r. syiwe. "*■■« bert t«=n
'rescued lr«n :r.*u- avrfiJ t-r** b j W« нльуч, «лр r en» ir*e Soc-:*
f«" ttM RCfT«VJl ОГ SL^fr iueut Ok<! «*П, 3rd frirt^icr'aM; tw lac
j -tfffSvc safety of ОЧ1 Lb'S of SrvirjS.
iTheSMfgis area гос*1Я a"cTtuipfaI r>£e «/thM р*^Л» *^ciy рИдпЧу
i Mif«r iten tte average tab;*-*, «rwi pfCr/6*. ш пыпь*г tf »i»-> к то
Г=с «r W»eV* «f»SK- T>e*e, »•* t^j trui!r«J, nhc »i »i«-jy= vp 1»
\-Tusctiid, mcsrGcrjo, гп 5>рли1г:со : j jtif «cftf<**t S^crg, md
roscc*f they *mw h Of * wrei s/ *cv*tci«'t5.
Corbe fcai;s4y tikti th*
G^a^n •«¥«-•
M здшюсопх
. £***rfleM*ws
,114
CTnidrtfl ti Г* It* I)*
fores* cf TwstwJ Tictzt.
w^-trc U*f Lco>t,c
. r-<DCluSWV ICiL. TtVSy *1M
!he"r wny ttd э\-. u»viar3»,au'>d ci^ifi one ccflin ь Iwifl
«•>- tc<-»eiw-. к rrt^ht*nJi>3 f& лву.
Along &fi ws . tr«y orcurttr a tortst irJ»at*t«d by
friendly С nn: Ttcn »t*ri. a 3*Jh L<ttXy сетвгЛч k^ifbt c*1e4 Sk- fcrxryal
С^1СПо*^ w»: Is tTf :i>g ю msrj Wt наух (he «id-^- cut» fl^ «n and Как
шг& % wbcKed «iltih niTicd Mo:*or Hctdrum.
""" > N .-.^ VW-l
a-Mrm* \з*4 trt- a. M)<n-tjv.iF)*-t><«
«Чг^'^г»..» им У S^er^r, at »-y n«e id
J4-
4 cs-.
'.' .. v^Tv-Ff-ta-v ■' -hi: :r r
*■ i>-S;" "" Л *:^
•мете ^ v«pcla^an>
-r_ _ ^ ;л»- -l i yi.nnyqg.Hv4i-■>.»■*■ 4,- V-t1
Дополнительные советы по оформлению содержимого
Учимся организовывать несколько div с содержимым
;* atj, •■■>£
В последней главе мы объединим все полученные знания-ti создадим
страницы, которые затем опубликуем на реальном сайте. Таким образом, вы не
только поймете суть процесса создания сайта, но и познакомитесь с двумя
полезными приемами.
Во-первых, вы узнаете, как многоразовые компоненты, вроде созданных в пре-
ыдущих главах шаблонов страниц и компонентов интерфейса, могут ускорить

222 ГЛАВА 8. Создание УУ^Ь-саит
процесс разработки и избавить вас от рутинной повторяющейся работы. Так вы
сможете сосредоточиться на облике, а не на технологии.
Примечание Описываемый здесь процесс упрощен. В реальной ситуации над разработкой
структуры сайта трудится целая команда специалистов, руководитель которой
определяет необходимые основные функциональные спецификации и структуру
содержимого, прорабатывает диаграммы архитектуры сайта, схему разметки
страниц и т.д. Весь этот подготовительный процесс может занять несколько недель.
Во-вторых, вы научитесь разрабатывать страницы в «карусельном режиме». За
первый подход просто располагайте все элементы страницы - заголовок, область
навигации, область содержимого и т.д. - в нужных местах и добавлять основные
стили, особо не заботясь о деталях. Затем, взглянув на сайт свежим взглядом, вы
заходите на второй подход, настраивая детали и добиваясь единого облика.
Вы также поймете, что единообразие легче всего достигается за счет
простоты. Например, на рассматриваемом ниже сайте используется всего 2
шрифта и шесть цветов.
Так о чем же пойдет речь? В этой главе мы будем работать над сайтом для
книги «The Marvellous Land of Snergs» (Волшебная страна гномов), детской
фантастической истории, написанной моим дедушкой в 1925 году. Сам Дж. P.P.
Толкин признавался, что эта книга вдохновила его па написание книги «Хоб-
бит», кроме того, он любил читать ее своим детям. В связи с повторным
изданием книги я решил создать сайт в ее поддержку с ссылкой на Amazon, где
можно ее приобрести.
Готовы? Тогда за дело.
Начинаем создавать сайт о гномах
В этом упражнении мы воспользуемся созданным в главе 5 шаблоном с трема
колонками и заголовком с абсолютно позиционированными боковыми
колонками и не буцем применять прием с отрицательными полями, рассмотренный в
главе 6, в силу простоты выбранного способа. Если вы чувствуете готовность к
использованию шаблона с отрицательными полями, можете загрузить его с сайта
www.bbd.com/stylin. Дополнительные сведения приведены во врезке «Сайт
о гномах, созданный с помощью отрицательных полей», в конце этой главы.
Внимание Шаблон абсолютной разметки с заголовком можно загрузить с сайта www.
bbd.com/srylin.
N

Нанимает создавать сайт о ытта.х к 223
Обратите внимание, что в реальности CSS и XHTML для одной страницы
хранятся в разных файлах. Когда вы учились создавать страницу в главе 5, для
удобства мы добавляли CSS-стили прямо в раздел заголовка XHTML-документа.
Тем не менее, такие стили доступны только странице, в которой они
расположены, что не очень хорошо, так как в действительности зачастую многие
страницы сайта используют одинаковые стили.
Поэтому мы переместили стили для каждого шаблона в отдельные CSS-фай-
лы и отправили их в каталог ess на сайте www.bbd.com /stvlin. Этот каталог
располагается на одном уровне с XHTML-документом pi привязан к нем}' с
помощью тега link.
Таким образом, для указания стилей вместо непосредственно указания
стилей просто используйте тег link в заголовке XHTML-документа:
•clink дге£="сз5/кмя_таблицы_стилей.с55" type="text/ess" rel="stylesheet" />
Если открыть любой файл .ess, вы увидите, что теги style во внешних таб- 1
лицах стилей не используются, - тег link указывает браузеру, что таблица
стилей содержит только CSS-код, который начинается просто с первого
объявления. Обратите внимание, что у каждой таблицы стилей шаблонов нашей книги
есть свое имя, в тексте мы для примера просто использовали заменитель
имя_таблицы_стилей.с55.
Внимание Обратите внимание, что если вы оставите теги style вокруг стилей в таблице
стилей, она не загрузится.
Создание структуры каталогов
Когда вы приступаете к созданию Web-сайта, вначале следует разработать
локальный каталог, содержащий точную копию готового Web-сайта,
расположенного в корневом каталоге на Web-сервере. Когда вы закончите создание сайта
или просто захотите проверить имеющийся результат на данном этапе,
необходимо скопировать содержимое локальной папки в корневой каталог
сервера. Но не копируйте сам)' папку - лишь ее содержимое.
Обычно для копирования страниц сайта на Web-сервер используется FTP-
клиент. Для входа на сервер необходимо знать имя хоста, пользователя и
пароль. После этого можно загрузить файлы и папки в корневой каталог сайта.
Сведения для настройки FTP-клиента вы можете получить у компании,
предоставляющей хостинг для вашего сайта, либо у сетевого администратора, если
создаете корпоративный сайт.

224 ГЛАВА Ш» €©зла*зщ> ШеЬ-сайта
Корневой каталог
Корневой каталог - это каталог, на который указывает URL вашего сайта. URL
предоставляет уникальный адрес для каждого документа в Интернете.
Каждый домен, например snergs.com, с помощью DNS (служба имен доменов) связан
с IP-адресом (уникальным числовым именем каждого сервера в сети). Когда вы
указываете URL ресурса в браузере, DNS находит имя домена, вычисляет IP-адрес
связанного сервера и переправляет запрос этому серверу.
Когда сервер получает запрос на отображение страницы, он видит имя домена,
связанное с запросом, и может переправить запрос в определенный каталог сервера,
относящийся к этому домену. Если URL содержит путь к конкретной странице, она
отображается в окне браузера пользователя. Если же URL является простым именем сайта,
например www.snergs.com, производится поиск по корневому каталогу и если найдена
страница с именем index, home или default и расширением .htm или .html, она
автоматически отображается.
Иными словами, корневой каталог - это каталог верхнего уровня в иерархии
Web-сайта, и она связана с адресом вашего сайта. Дополнительные сведения о DNS можно
узнать на сайте InterNIC (www.internic.net/faas/authoritative-dns,html) или на сайте http://
www.hostinfo.ru/tree/domain/dns/dns-server/.
Как упоминалось ранее, в этой главе мы будем использовать шаблон с тремя
колонками (боковыми с абсолютным позиционированием) и заголовком. Для
этого выполните следующие действия.
1. Загрузите этот шаблон с именем iliree_columns_absolute_hcader с сайта
www» bbd.com/stylin.
2. Создайте локальный каталог для сайта на вашем компьютере и назовите
его snergs_site.
3. Скопируйте содержимое каталога three_columns_absolute_header в
каталог snergsjske. При просмотре в программе Macromedia Dreamweaver
структура организации файлов выгладит, как показано на рис. 8.1.
4. Очевидно, что нам нужно изменить имена файлов, поэтому переименуйте
three_col_abs.htm в index.htm, а файл с таблицей стилей three__colsiabs.css -
в snergs.css.
jjj^ snergs_site
.1 ess
S} three_cois_absolute.htm
Рис. 8.1. Локальный каталог нашего сайта содержит XHTML-шаблон и каталог CSS с таблицей стилей

Начинаем* создавать сайт © гноглаи
225
5. Так как мы изменили имя файла .ess, необходимо изменить URL в теге
link документа .htm, чтобы переименованная таблица стилей оставалась
связанной с XHTML-файлом. Новая ссылка выглядит так:
<link href="css/snergs.ess" rel="stylesheet" type="text/css"/>
6. Теперь откроем файл index.him в браузере и проверим, удачно ли мы
прикрепили файл с таблицей стилей. Если XHTML не видит таблицу, вы
получите результат, показанный па рис. 8.2.
j i* ~+~$f{St\.\ A i А |С^1';ПП^ ®htrp://wwwbbd.com/stYHn/THE_5rTE/te©H*От Googie © -
Three column layout with header
• Ruhovia
• Middle Earth
• Far. Far Awav
Adding a Header
Step 4 • clean-up complete. With all the functional issues resolved, we can turn off the styles we used ;
to help us see what we were doing.
;
The background color is removed from the di\\ and the box around the hi clement is replaced with the
same style* we used on the side columns, with a tiny bit of top padding to center the type between the ^
two lines.
t
i.
k.
>"^.^ -Г* ь- = -^ *
Рис. 8.2. Ссылка на таблицу стилей не работает
*5*
^^г?.:1~^ ■> о■*ъ'ч *-■- StГ^ЬУеё срЫгпп wjtK;h«ader.and"aBsoIure side cclurons * . < ):5^ ; ^1;^>И
G*_Z" *<fr& А-А1^^ГМ^ О" ?. Or Google © v*
« Rubovla
• Middle Earth
• For, Far Awav
Three column layout with header
Adding a Header
Step 4 - clean-up complete, with ail me
functional Issues resolved, we can turn off the
styles we used to help us see what we were
doing.
The background color is removed from the dlv,
and the box around the hi element is replaced
with the same styles we used on the side
columns, with a tiny bit of top padding to
center the type between the two lines.
Adding t**t-«iign:cent«- to the header div
centers the hi In older version of IE.
Nulla scefcrlsque. Sed tincldunt. Quisque eu
Nunc justo ntsl,
vulputate in, sagittts
in, pretium sodales,
magna. Nullam felts
dfam, bibendum ut,
dictum In, tinodiint
vitae, magna. Nunc
mattfc congue leo.
i
1^^-Ъ^:4.^ТГТт :jj^' - :-■
" * -. * -v
Рис. 8.З. Ссылка на таблицу стилей указана верно
^

226
■сайта
Если вы указали ссылку верно, таблица стилей загрузится, и документ будет
выглядеть, как показано на рис. 8.3.
Задав ссылку на таблицу стилей в XHTML-документе, пора переходить к
разработке сайта на базе шаблона. Начнем с самых азов.
Создаем архитектуру сайта
■ч
Даже для такого простого сайта имеет смысл нарисовать диаграмму архитектуры,
позволяющую продумать структуру проекта перед тем, как приступать к
написанию кода и созданию графики. Такая диаграмма позволяет контролировать
процесс создания'сайта. На рис. 8.4 показана диаграмма для сайта о гномах.
Для создания подобных диаграмм мы используем приложение Microsoft
Visio, но также подойдут и такие приложения, как Adobe Illustrator, Macromedia
«Чудесная страна гномов»
Архитектура Web-сайта,
версия 1 3 /05, www.bd.com/styles
-
История
Заголовок
х
«2
го s
X Ш
сэ сб
О X
с;
to
о
Домашняя страница
содержимое
•
Авторские права +
дополнительные ссылки
Указатель
иллюстраций
•
Обзор глав
i
1,
Купить .
на
Amazon
Последние
3 НОВОСТИ
Ссылка на
указатель
новостей -
^
Автор
Иллюстрация
t
'
Связанные
ссыпки
Новости
i
■
4
Указатель
новостей
о гномах
Контакты
■
Другие книги
i
Страницы
нижнего
колонтитула
i
Рис. 8.4. На этой диаграмме каждая страница сайта представлена блоком а связывающие их линии
символизируют ссылки

Шзтетттл разметку 227
Freehand, Macromedia Fireworks. Преимущества Microsoft Visio - возможность
перемещения блоков после создания ссылок, которые при этом сохраняются,
и автоматическое создание соединяющих линий в обход других блоков и
линий. Кроме того, здесь для создания метки блока достаточно просто щелкнуть
по нему.
Примечание Дополнительные сведения о разработке подобных диаграмм, а также
доступные для загрузки наборы символов Visio или .ер$ можно найти на сайте
Джесси Джеймса Гаррета (www.iig.net/ia/visvocab). Также рекомендуем прочитать
его книгу The Elements of User Experience (издательство New Riders, 2002),
являющуюся исчерпывающим руководством по планированию и разработке
Web-сайтов и приложений.
На рис. 8.4 мы также видим и некоторые аспекты презентации. Например,
ясно, что главная страница сайта будет состоять из заголовка, области
навигации в левой колонке, новостей'и рекламы в правой колонке и нижнего
колонтитула с правовой информацией.
Изменяем разметку
Сейчас мы должны изменить код разметки шаблона, чтобы он отражал
придуманную нами структуру главной страницы.
Вначале изменим div для ссылок в левой колонке следующим образом:
<div id="riav">
<ul>
<lixa href="#">The Story</ax/li>
<lixa href="r,l>Illustrations</a></li>
<lixa href="#">The Author</ax/li>
<iixa href="#">Related Links</ax/Ii>
<lixa href="#">Contact Us</ax/li>
</ul>
</div>
Затем изменим код правой колонки:
<div id="rightcolumn">
<irng src="images/snergs_book_promo. jpg" /> /^небольшое изображение, к которою
впоследствии мы добавим ссылку на Amazon*/

228 ГЛАВА В* €оздаияе Web-дейха
<div id="newslinks">
<ul>
<li>Snergs" to be re-published by Cold Spring Press</li>
<li>Douglas Anderson, Tolkien scholar, discusses the Snergs</li>
</ul>
</div>
Теперь перепишем заменитель содержимого в div и добавим div нижнего
колонтитула (в коде выделено жирным) - после содержимого, но внутри div
с содержимым:
<div id= "contents
<hi>Before The Hobbit, there was Gorbo the Snerc.</hl>
<img alt="Gorbo the Snerg, from the book 'The Marvellous Land of Snergs'"
src="images/gorbo_180w."jpg11 wid-h="180" height="248" />
Примечание Текст для страницы взят из статьи, опубликованной в журнале Instant в апреле
2005 года.
<p>"?he Marvellous Land of Snergs" was the last of eighc books written by
E.A. Wyke-Smith (1873-1935). It was published in 1925, pre-dating J.R.R.
Tolkien's "The Robbie" by ten years. The book tells che tale tells the
story of two small children, Joe and Sylvia, who have been rescued from
their awful lives by Miss Watkyns, who runs the Society for the Removal of
Superfluous Children, and transported to che relative safety of the Land of
Snergs/</p>
<blockquote>I should like to record my own love and my children's love of
E. A. Wyke-Smith's "The Marvellous Land of Snergs4, at any race to the
Snerg element in that tale, and of Gorbo, the gem of dunderheads, jewel of
a companion in an gscapade&ir8230; (The scory) was probably an unconscious
source-book for the Hobbits&#8230;<p>J.R.R. Tolkien</px/blockquote> /*тег
blockquote позволяет создать врезку в тексте*/
<p>Along the way, chey encounter a forest inhabited by friendly cinnamon-
bears, a pathetically cowardly knighu called Sir Percival, a reformed ogre,
Golithos, who is trying to mend his ways (he longer eats children and has
become a vegetarian) and a wicked witch named Mother Meldrum. <a
href=nstory.htm">Read more abouc "The Marvellous Land of Snergs"</ax/p>

Изменяем разметку 229
<div id="footer">
<ul>
<lixa href="#l,>The Story</ax/li>
<lixa href=n#fl>Illustrations</a></li>
Ш
<lixa href="#H>The Author</ax/li>
<lixa href="#">Related Links</ax/li>
<lixa href="#">Contact Us</ax/li>
</ul>
<ul class^'fineprint'^
<li>&copy; 2005 Wyke-Smith Family Trust - all rights reserved</li>
<lixa href="#">fine print</ax/li>
<lixa href ="#">terms of use</ax/li>
</ul>
</div>
</divx!--end of content div-->
Мы добавили нижний колонтитул непосредственно перед закрытием div
с именем contentarea так как, несмотря на то, что абсолютное
позиционирование является быстрым.и надежным способом создания разметки с
несколькими колонками, на практике почти невозможно очистить элементы с
абсолютным позиционированием, поскольку они выбиваются из общего потока
документа. Это означает, что мы не можем поместить нижний колонтитул под
боковыми колонками и заставить его смещаться вниз по мере увеличения их
высоты, как сделали в главе б.
Если вы попробуете, то увидите, что когда боковые колонки выше области
содержимого, колонтитул не смещается вниз и боковые колонки наезжают на
него. Поэтому мы просто добавили колонтитул в конец области содержимого
и в случае, если объем боковых колонок значительно возрастет, они просто
продолжатся ниже колонтитула, при этом перекрывать его не будут.
Примечание Если вы хотите, чтобы колонтитул занимал всю ширину окна, используйте
шаблон с отрицательными полями. Данная же разметка является более простой.
Написав весь этот код, вы получите страницу, которая показана на рис, 8.5.

230 ГЛАВА 8. Создание Web-сайта
- . .-j—. : * . * Xj- №if .л : *.* :..y '■ v: < .*, .r ... -; ;- .--:.-- .^ ч ■ у.- ■ =; ■ " •* "■■ ч - - .- -^ -- - * -■ >. .-- ■ jr. - -»-" 114 .
■* ^i' ?-' -■ V-""" \;У"""Ч — .■—■■.—- — ..,—. ■■ (. h..i».4.4Immw»...j:v-
■ < ***; Л И A> A- ^ C^M + fe0http://www.bbd.com/styHn/CH6_building.web.O^^ &>og\e
^v
• XtOJtQtx
• Rgtsfd Link*
Three column layout with header
Before The Hobbft, there was the Marvellous Land of
Snergs...
"The Marvellous Land of Snergs* was the last of eight books written
by E.A. Wyke-Srnith (1873-1935). The book was published in 1925,
pre-dating J.R.R. Tolkien's "The Hobbii" by ten years. The book
tells the tele tells the story of two small children, Joe find SySvia,
who ...(text removed here)... meet Gorbo, an opininated and self-
confident Snerg, an^l together tney embark on a aeries of
adventures.
"1 should like to record my own love and my
children's love of E. A. Wyke-Smlth's The
Marvellous Land of Snergs, at any rate to the
Snerg element in that tale, and of Gorbo, the
gem of dunderheads, jewel of a companion In
an escapade...(The story} was probably an
unconscious source-book for the Hobbits..."
J.R.R. Tofkten
Along the way, they ercountcr a forest inhabited by friendly
cinnamon bears, a pathetically cowardly knight called Sir Percival,
a reformed ogre, Golithos, who is trying to mend his ways (he
longer eats children and has become a vegetarian) and a wicked
witch named Mother Me'drum. Read more aooutThe Marvellous
Lando*Sne~gs-
• "isaw?ft?
• © 2О05 wyke-smw Family Trust - ail rignts reserved
* fiw Print
Obtain a copy of
t t - f 5, :
<; __-. ' *" :
at ama2oacora
• "Snergs" to
be
republished by
Cold Spring
Press -
Summer
2005
• Douglas
Anderson,
Tolkien
scholar,
discusses
the Snergs
• more news
4:
Рис. 8.5. Так выглядит наша страница без добавления стилей
Создание заголовка
Обработка кода начнется с добавления графического заголовка для страницы.
Сейчас вместо него виден выровненный по центру текст. Мы хотим добавить
вместо него графику; но так как разметка страницы гибкая, то есть ширина
элементов меняется в зависимости от размера окна браузера, необходимо
выполнить дополнительные действия, чтобы графический заголовок занимал по
ширине все окно.

разметку 231
Давайте взглянем еще раз на блочную модель, показанную в главе 4. На ней
видно, что фоновое изображение элемента накладывается на фоновый цвет, -
это и есть ключ к успех)'. Сугь в том, чтобы создать изображенР1е, выровненное
по центру области заголовка и сделать так, чтобы боковые края изображения
плавно сливались с заданным фоновым цветом. В таком случае, если окно
браузера окажется шире изображения, по бокам от него будет виден фоновый цвет.
На рис. 8.6 мы видим изображение заголовка в Macromedia Fireworks. На
рисунке видно, как мы добавляем небольшой прямоугольник к краю
изображения. Этот прямоугольник имеет градиентную заливку: от прозрачного к
фоновому цвету области заголовка (#FFFFFCC). Благодаря его добавлению мы
сможем получить плавный переход от изображения к фоновому цвету.
О. ф * 4
: -j, -i"i irr" i. -1 .. . р
у*—1 ***-*» J " у У -Л5
^Opacity: .0
С
q
у Ггкве:
Fre*ew:
&.
# К [ Г"-:
" -«■'-—— — ■■ V*^.., , ■ ,;v... - * ; . ::Л-::-^ "I* ■■■* J «Л" ■ ..... ■ ■ -,-..Л ->.^.^-*^. М?... ■ \ * -
-- ■■ ' ***,• ■■ f
* г ' - " W
"* "^ .. . ^;- -■• "
..__ _ _ .. . ...- . ....-г .-.- *
ТЬ^ J^XrVveaouy-txNixop. уя£Щ
/< ** ^. ■ ." 1. 4 • :v- ч- . , -<•- ... - >'
Рис. 8.6. Делаем так, чтобы цвет на концах изображения постепенно становился прозрачным
Теперь, когда мы добавим изображение в div заголовка:
<div id="header">
<img src="irnages/snergs_header.gif" alt="The Marvellous Land of Snergs"
width="776" height" 60 "/>
</div>
..•4 ' ►'^ <J " .a" A . С ' + ^ @hHp://vvkvw.bbdcom/stylln/CH6_buMdmg„web_pages/snergs_siie/e ?^ Q* Coooie
ТЙ£ X^XKyeLLOUJ LXND OF.'jNGPsGif
_. _ Before The Hobbtt, there was the Marvellous Land of Snergs...
#2^£ . Ofcwcocyof
• IBmtfjittona * J
^L
^^л,
Рис. 87. Создается впечатление, что изображения заполняет окно иа всю ширину

232 ГЛАВА 8. Создание Web-сайта
и в таблице стилей укажем фоновый цвет для этого div:
divtfheader {height:60px; background-color:??FC; text-alignccencer; border-
bottom: lpx tt960 solid;} /*стичи области заголовка-с помощью text-align мы цснтрир)ем
изображение*/
создастся иллюзия плавного перехода изображения в фоновый цвет (рис. 8.7).
Теперь давайте займемся левой колонкой с областью навигации.
Создаем область навигации слева
Для левой колонки области навигации в качестве основы используйте файл
fig5.12.htm из примеров главы"5.
Скопируйте стили из файла list-unorclered__12.htm в таблицу стилей и
разместите их после стилей div#f ooter. После этого ваша таблица будет выглядеть
примерно так:
...стили
div#rightcolumn p {font-size:.75em;}div#listcontainer {bordenlpx solid
#000; V7idth:150px; font-size:,75em; margin:2Орх;}/*контейнер,
использованный в исходном примере*/
div#listcontainer ul {border:0; margin:12px 20px 12px 1.25em; paddingrO;
list-style-type:none; }/*иоля списка и удаление маркеров*/
div#listcontainer li {border-bottom:2px dotted #069; margin:0; padding:.Зет
0; text -indent:. 5em} /^'пунктирная линия между элементами списка*/
div#listcontainer li:first-child {border-top:2px dotted #069;} /^пунктирная
линия над первым элементом, не работает в IE*/
div#listcontainer a {text-decoration:none; color:#069;} /*цве г ссылки*/
div#listcontainer arhover {color: #F33; }. /*цвет при наведении указателя мыши*/
/* трюк для IE Win W * html div#listcontainer ul {border-top :2px dotted
#069;} /* конец трюка*/
Первый divtflistcontainer нам не нужен, div левой колонки с классом паууже
является контейнером списка, поэтому первое правило можно удалить. Так как
новый контейнер div имеет другое имя, необходимо изменить divtflistcontainer
па divtfnav для каждого селектора. Теперь код выглядит так:
div#nav ul {border:0; margin:12px 20px 12px i.25em; paddingrO; list-style-
type :none;}
div#nav li {border-bottorr.:2px dotted #069; margin:0; padding:.3em 0; texc-
indent:: . 5em}

233
div#nav li:first-child {border-top:2px dotted w069;}
div#nav a {text-decoration:none; color:#069;}
div#nav a;hover {color: fF33;}
/* трюк для IE Win W * html div-F nav ul {border-top:2px dotted #069;}
/*конец трюка */
После этого левая область навигации выглядит, как показано на ppic. 8.8.
The Mar"
*, « > \Г&Ц А аТ!Гс!г' +|"*в http://wwv
Jk^ ^А^т—ДЛ- -■ 4-W..!^:
Тие K^fxp
Before The НоЫ
The Story
Illustrations
The Author
Related Links
Contact Us
4*
JL
•4 "
Рис. 8.8. Мы задали стили для ссылок, но еще требуется поработать над их размещением
Выполним несколько дополнительных действий для доработки области
навигации. Нам более не требуются сплошные горизонтальные линии над и под
списком, которые мы удалим, так как разметили его с помощью пунктирных
линий:
div#nav {positionabsolute; left:0px; top:60px; width:150px; padding:0;
margin:22px 0 15px 0;}
Также мы можем поменять цвет пунктирных линий на более приемлемый:
div#riav ul {border:0; margin:12px 20px 12px 1.25em; padding:0; list-style-
type: none; }
div#nav li {border-bottom:2px dotted #960; margin:0; padding:.3em 0; text-
indent: . 5ern}
divtfnav li:first-child {border-cop:2px dotted #960;}
div#nav a {text-decoration:none; color: ff960;}
divrfnav a:hover {color: nF33;}

234 ГЛАВА 8. Создание ШеЬ-сайта
/* трюк для IE Win \V * html qIvt nav ul {border-rcp:2px dotted #960;}
/*конец трюка */
И, наконец, изменим цвет ссылок pi цвет при наведении указателя:
div#nav a {text-deccration:none; color: #C60;}
div#nav a:hover {color-: #960;}
Результат показан на рис. 8.9.
№e)so4^^veLLouf I xnd of faefcq*
с " . . - -Ч0-" " I*"
.-..-а ■ -, ."-. : -\ Л * . i --с * j.. . . . - -
This 'ayCJt uses absolute/relative position ng to position the side col-imra .. "~;...
within the r respective faux columns ccttainars. - ~[h\s t^mblst0
-~reSt3i7 You can control the maximum ard nunintum widths of the fluid c=r.terarea, Upe5_tn€: A5U..IE
,..„,.«..,...,„;..„. ..„. once the layout reaches its maximum v/id'h, it centers itself in the browser Ciefifsng rnetnOu.
^.^f.r;?3S„:::.. as the window geis wider.
TraALKbo?-.
Nulla scelensque. Sad t -idunt. Quisque en nisi. Phase lus mi ante, aliquet
■}£l?H? Чп*.~ . ye'» vestibulum si: arnet, consectatuer ncn, ante. Suspendisse consequat
V'nr-|[*^"tyL\ candimgntum en m. Morbi vestlbiAra lorem sit amet enim. Nul a verenatis
■•"'• • fementum purrs.
Nurc justo rt'sl, vulputate in, sagittis in, pretium «oda'es, magna. Nullam
felts djam, bibentfutn ut, G-Ctum in, tnodunt vitae, тасчэ. Nurc mattiS
concje Jeo.
:: у i: ■■' *- ■ ■-■ ■
-* * " .-... .w .*.-.:-. л ■ . _______ . л, .. *.. . и, л .:-■ л-j.. л .- ... ,■ .г.*^--,ав^ rv*,i * . >Р™У ' *. ' .... ^.
.*. ЛГ?. .".">*.. ^ ' "? >?' -^ ;^_ .'^^i. -f;-W >v: f-^-x f4_f ^^f- _ J {<__£>| V d: « '■&?• :■ t л #. к ^-ms^^vjjj ?.«■,.-■:_. .-*л _ ^ _■ - _,_ _ , .,.,..v,..-,v л.х.г.<.'
Рис. 8.9. Левая колонка готова
Теперь приступим к правой колонке.
Добавляем стили к правой колонке
Очевидно, над этой колонкой нужно поработать. Начнем с того, что пока код
ее разметки неполный.
Рекламное изображение книги должно выглядеть как на сайте Amazon.com.
Выполнив поиск, обнаруживаем, что ссылка на книгу на этом сайте имеет вид
ww^amazon.com/exec /obidos /ASIN/1882968042/qid=ll 10169295 /sr-2-1 /
re£=pd bbs b 2 1/103-3869840-5485440. Добавляем ее к рекламному изображению.
<div id="rightcolumn">
<a href=nhttp://www.amazon.com/exec/obidos/ASIN/1882968042/qid=1110169295/
sr=2-l/ref=pd_bbs_b_2_l/103»3869840-5485440">
<img src="images/sr.ergs_bookjpromo.jpg" width="156" height="211" alt="Buy
'The Marvellous Land of Snergs' at Amazon.com" /></a>
<div ic="newslinksr,>
<ul>
<li>Snergs" to be re-published by Cold Spring Press</li>

Избегшем разметку
235
Если вы используете Internet Explorer для Windows, то увидите, что,
добавив ссылку к изображению, мы также получили ненужный побочный эффект -
синюю рамку вокруг изображения (рис. 8.10).
)f Snergs.u
k
Obtain a copy of
at ama70n.com.
Рис. 8.10. Internet Explorer для Windows добавляет синюю рамку вокруг изображения,
заключенного в тег link
Предположительно разработчики в Microsoft посчитали, что пользователю
нужно явно указать, что по изображению можно щелкать, переходя таким
образом на другую страницу. Но нам кажется, что такое изображение говорит
само за себя. Кроме того, если бы мы хотели добавить границу вокруг
изображения, вряд ли бы выбрали синий цвет. В общем, давайте от нее избавимся:
div#righccolumn img {border:none;}
Вот мы и удалили рамку. Однако более серьезной проблемой (это видно на
рис. 8.10) является то, что ширины правой колонки недостаточно для
изображения. Мы видим, что область содержимого накладывается на правую колонку.
Изображение имеет ширину 156 пикселов, а в высот)- - 211 пикселов.
Рекомендуем всегда указывать размеры изображения в коде разметки, так как это
помогает браузеру быстрее выводить страницу. Поскольку в исходном коде мы
этого не сделали, исправим данное упущение сейчас. Кроме того, нам нужно
поменять некоторые размеры шаблона, чтобы вместить изображение.
Взглянув на код, мы видим, что ширина правой козонки составляет 125
пикселов:
div#righccolumn {position:absolute; widen:125px; ~ор:60рх; right:0рх;
margin:20px 15px 0 0; padding:lem .5em; border-top:2рх solid #069; border-
bottom:lpx solid #069;}
Этого мало и для заголовков новостей, которые мы также разместим в этой
колонке, - длина строки окажется слишком малой, поэтом)' нужно сделать
правую колонку шире.

236 ГЛАВА 8. Создание Web-сайта
Изменим ширину колонки с 125 на 156 пикселов, что равно ширине
изображения. Несмотря на то, что теперь наша колонка стала шире, область
содержимого все равно накладывается на нее (рис. 8.11).
Obtain a copy of
at amazonccm.
Рис. 8.11. Расширив правую колонку, мы увеличили пространство для изображения, но правое поле
центральной области содержимого недостаточно велико, в результате чего происходит накладывание
Структура разметки требует, чтобы левое и правое поля центральной
области содержимого превосходили по размеру правую и левую колонку
соответственно, чтобы предотвратить наползание содержимого колонок друг на
друга. Именно эту проблему мы видим на рис. 8.11. Необходимо увеличить правое
поле центральной колонки и очистить некоторые с гили правой колонки.
Удалив, например, правое поле правой колонки мы прижмем ее к правому краю
окна, а удалив отступы слева и справа, заставим изображение заполнить
колонку на всю ширину. Нашей конечной целью является безукоризненное
размещение изображения шириной 156 пикселов в правой колонке. Итак, вначале
позаботимся о центральной колонке:
discontent {rnsrgin:20px 15брх 0 165рх; padding: 0 lem;}
Затем - о правой:
div#rightcolumn {position:absolute; width:15брх; top:60px; right:0px;
margin:20px 15px 0 0; padding:lem 0; border-top:2px solid #069; border-
bottom: lpx solid #069;}
И не забудьте указать размеры изображения и отсутствующий атрибут alt:
<img src=,'images/snergs_book_promo.jpg" width=n15'6" height ="211" alt="3uy
'The Marvellous Land of Snergs1 at Amazon.com" /></a>
Взгляните на разметку с включенной для наглядности границей центральной
колонки (рис. 8.12а и 8.126). Верхняя граница правой колонки видна уже сейчас.
ergs,

Изнюняюя разметку
237
№KQS
\
Ostein a copy of
AIK4 Ay i*>y ^bfc/^*
' -л -
. ■;"■ %. у | v'i. л-
at amazoocom.
Рис 8.12а. Разметка в браузере
Internet Explorer
ъ 3F -• л.
r\
шш
Snergs,,.
Ostein з copy of
*2r >**'и-ч*>**- -*>o*f ■■»■■<,
>4*m>im »—<j 4, I 11С j?t
■
■#>
а к?
2t amazoncom.
t i
Рис. 8.126. Разметка в браузере Safari.
Результат практически одинаков
Итак, страница выглядит хорбшо, поэтому давайте перейдем к добавлению
стилей для ссылок на новости в правой колонке.
Задаем стили ссылок на новости
Первым шагом на этом этапе станет удаление маркеров из списка и
уменьшение размера шрифта:
div#rightcolumn div#newslinks ul {list-scyle-typemone; font-size:.7em;)
Список без стилей отображается в различных браузерах (некоторые из них
добавляют поля, другие - отступы), поэтому для элемента ul важно задать оба
параметра, чтобы переопределить настройки по умолчанию:
div#righfccolumn divtrnewslinks ul {list-style-typemone; font-size: Лет;
padding-left: Юрх; margin-left:0;}
Теперь ссылки на новости выглядят, как показано на рис. 8.13.
Теперь давайте доработаем код разметки ссылок:
<ul>
<lixa href="#">"Snerg3M to be re-published by Cold Spring Press - Summer -
2005</ax/li>
<3ixa href="#">Douglas Anderson, Tolkien scholar, discusses che Snergs
</ax/li>
<li class= "morelink"xa href="#">more news</ax/li>
<7ul>

238 ГЛАВА В. Создание Web-сайта
<v ■ + ■; %
—Тя>" "ft -А ' -^ * ' ' '
. .- ^ ..и ■"■ ■ > -w ■ ■■' ■ .
at атагомюга
"Snergs" to be
republished by Cold Spring
Press - Summer 2005
Douglas Anderson,
Tolkien scholar,
discusses the Snergs
more news
4
Рис. 8.13. К пунктам списка необходимо добавить теги link, чтобы сделать их доступными для щелчка
И добавим стили для них:
div#rightcolumn a {text-decoration:underline; color:#С60; }
div#-rightcolumn a:hover {color: #960; text-decoration: none;}
divSrightcolumn li.morelink {font-style:italic;}
Далее необходимо добавить код для заголовка этой области ссылок:
<div id="newslinksи>
<h3>Snergs News</h3>
<ul>
<lixa href="#">"Snergs" to be re-published...
После этого мы применим стили к этом)" заголовку и уменьшим верхнее поле
по умолчанию для элемента ul под ним, чтобы создать промежуток между
заголовком и списком:
div# right column divifnewslinks ul {list-style-type:none; font-size: Лет;
padding-left: lOpx; margin-Left:0; margin-top:0;}
div#rightcolumn h3 {text-align:center; font-size:.8em; color:#960; margin-
bottoni:0px; padding-top:3px; border-top: 2px dotted #960;}
Обратите внимание, что мы добавили пунктирную линию над заголовком
с помощью border-top и отступ сверху, чтобы создать небольшой промежуток
между заголовком и первой строкой списка (рис. 8.14). ,

Изменяем раш&т$
239
Snergs News
"Snerqs" to be
republished by Cold Spring
Pre:":" - Summer 2005
Douglas Anderson,
Tolkien scholar,
discusses the Snergs
more news
Рис. 8.14. Теперь ссылки на новости выглядят гораздо лучше
Наконец, обратите внимание, что справа текст ссылок непосредственно
касается границы окна браузера, и выглядит это не особенно привлекательно.
Поэтому зададим правое поле для элемента ul. Так как это будет уже третье
упоминание о полях, объединим их в < дно:
:s
Obtain a copy of
EancfoF^ncfgs
:'"Й
<&■
at amazon.com.
Snergs News
"Snares" ?q re
republished by Cold
Sprinj Press - Sumrrie?
2005
Douglas Anderson,
Tolkien scholar.
dif-cir>ses the Sf.^rqs
rnco news
Рис. 8.15. Готовая поавая колонка
*

240 ГЛАВА 8* Создана 1\%Ь-сайта
divSrightcolion div#newslinks ul {list-style-type:none; font-size: . 7em,-
padding-left: lOpx; margin:0 6px 0 0;}
Теперь отключим временную границ)' центральной области содержимого
и взглянем на готовую правую колонку (рис. 8-15).
Создание области содержимого
Теперь перейдем к области содержимого. Начнем с того, что поместим текст
вокруг изображения Мамы Мелдрам, самой старой ведьмы, притворяющейся
бродячим торговцем (рис.-8.16). (Мы таюке вернули обратно текст, удаленный
ранее для наглядности).
div#content img {float:left; border:lpx solid #096; margin:0 4px 4px 0;*
з
He^Xf^VCLLOW-LXND ор$К£Ш
TJic Story
illustrations
The Author
Related Links
Contact Us
Before The Hobbit, there was the Marvellous Land of Snergs...
■The Marvellous Land of SrercV was the Jast of eight
books written by E A. Wyfce-Smith (1873-1935). The
book was punched in 1925, pre-dat ng J.R.R. To »."en*s
"The HobM" by t«n years. The book tells the tale tells
the story of tv*o small children. Joe and Syivia, who
have been rescued from their aw'tjl lives by Miss
Watfcyns, who runs tho Society for the Removal of
Superfluous Chttfrcn, ard transported to the relative
safety of the Land оГ Snergs.
*J^JLk*r
71 i8 Snergs a~e a rebus: and helpful race of short
people \эгйу slightiy ta'ler than t|To average table',
who provide a number of services to the children's
provide a numoer or services to x.r,e cnuoren s
refuge. There, the two children, who are always up to
mischief, meet Goroo, *n opininated and self-confident Snerg, and together they
embark on a series of adventures.
"I should like to record my own love end my children's
love of E. A. Wyke-Smith's The Marvellous Land of
Snergs, st eny rate to the Snerg element In that tale,
and of Gorbo, the gem of dunderheads. Jewel of a
companion in an escapade.» (The story) was probably zn
unconscious sotrce-book for the Hobbits,..".7.R.R.
Tolkien
AJona the wav. thev encounter a forest inhabited bv friendlv cinnamon b»ars. a
Рис. 8.16. Текст обтекает плавающее изображение
Ола-n а серу о*
Vtw* -vr^nX
TfitM£&eii56u*'-
*■ * . •■ **'■
a amazoriccm.
Siiurgs .\bvvs
ZUS&
^f.^ivrAi.-i.aiwp.
Так как изображение сливается с белой страницей, мы добавили вокруг него
рамку и небольшие поля справа и снизу, чтобы текст не наползал на пего.
Создаем подпись под рисунком
Теперь добавим подрисуночную подпись для изображения ведьмы.
Простейшим способом сделать это - в абзаце непосредственно под изображением
добавить в код текст подписи и civ, содержащий изображение pi абзац:

Шзм&ш&т разж&шу
241
cdiv id=l,mainimage,,>
<img alt="Mother Meldrura in disguise, from the book !The Marvellous Land of
Snergs'" src^'^mages/meldruin^in^disuise^lSOw.jpg" width="180" height="212" />
<p с1ass="caption"? Mother Meldrurn disguised as a peddler.</p>
*
</div>
Затем мы сделаем этот div плавающим; абзац является элементом блочного
уровня, поэтому он автоматически появляется под изображением. Изменим
стили, переместив объявление полей и float от изображения к новому div,
а также добавим стили для абзаца:
div#content div#mainimage {width:18Орх; float:left; margin:0 4px 4px 0;}
div#concent div#mainimage img {border: lpx solid #960;}
div#content div#mainimage p {font-size:".65em; margin:Opx 5px;}
Теперь добавим стили для blockquote. Тег blockquote создан специально
1Я применения с цитатами, поэтому именно его мы используем для оформле-
- 1я высказывания Толкиена.
римечание Здесь мы не будем описывать все вопросы, касающиеся применения тега
blockquote . Вместо этого лучше прочтите статью о нем, расположенную по адресу
У
.1не J^xKveLiouy Lxnd-of ^еш.;
The Story
Iltastrotions
T?t** Author
Related link*
Contact us
Before The Hobbitr there was the Marvellous Land of Sncrgs...
Л
?
f
*1ГЧ№9Эв.
V
"The Marvel uus Lard of Snergs" wa^ :he Issi o< ir ght
boots written ЗУ E.A. '/Mra-S.Tiith (l£73-1925'>. 7h* book
was pubi'shed in 1925, p'e-catinci J.R.R. Tobion's 'The
Hcboil" ty ten >*ars. Ths fcicok tslls.the to'e tsHs trie stcy
of r*o srroll chiidran, jne and Sylvia, wha hawo been
rescued from \heir sivful JK^os Dy M-»s 'ЛэПупг. v-ho runs
the Society for the Kemoval of Su^errTjous Chiltf эг» aid
transported to the relative safety of r*ie Le^d of Sncrgs.
•v *■*-** [ T*"e S^'cs are a robust ard h&'pAji race rf ^лог: petiole
ь *\iy }f I "only shghby taller t^an (he average title", who prov-de «
'Зл Ь tX Я !nu.nnhnr of services to the Chilean's refjge There, in- tag
childrer. who are always tp to rrischwf. rreet Carta, an ■
opinioated and salf-conficent Eierg, aid together they
wnbanc en a series of adventures.
Moti»r Meldum d'±yui«ed os
* pgddlftf
Gurbo foolishly tafces the cnildren to the see
the forest of Twisted Tress. <here Iney
сопсго hopelessly lost. They fnd their way
into an uncc-igrc jnd »cve*n and ougjn a long
and sometimes frghtering jcuTey.
Alcng rhe way, they Fr-ourter a forest
irhabited oy friendly cinnamon bears, a
pathefccelly cowardly kmtjht celled Sir
Percival, a reformed ogre, Gc'itbos, w»ho is try
children and has bacorre a vecetaria.-rt and a
I should I -c to c-ecart nv/ own lov and
nif u*iiiirntV; lo.-a cf r. A- 'AfUo-
Sr- tK'j ~"h* riaj-.-cIfwji Сэ*>с of 5rc зл.
л: a.-y r*tc to tr.t S^er? ?!*rr«r: n -J-.e:
la », s-»J of Gaib^j tF.c Qem cf
an etcczadc ("*h? s'jorf) **j prcbabjy
гп vpegnideus уя-тсс-жач *cr*£
rtcfcrt'.,.
JKA Т-ш! *o
"ng to mend hi* ways (he* longer eats
wclftd wit^h na.Tied Mother r/fflC^m.
Octaifl 3 copy e?
LaEofof..^tvei^f
/™v -jp* .jf^p4-
siamazonrom.
3nergs News
JfCjr«g-.-ft^grc;
Рис. 8.17. Мы выделили цитату, сместив ее вправо и добавив небольшие поля и отступы
I

242 ГЛАВА 8. Создание Web-сайта
http://www.edu.design-gu.ru/tags/blockquote.html или http://www.htmlbook.ru/
html/blockquote.hhnl.
Добавлять кавычки вокруг текста, заключенного внутри тега blockquote не
нужно. Для выделения автора цитаты (Толкина) следует добавить его в тег р.
Мы хотим сместить цитату к правому краю области содержимого и сделать
так, чтобы основной текст обтекал ее. На рис. 8.17 мы видим готовый
результат, а ниже приведен необходимый код:
*
div#content blockquote {width: 250px; float:right; font-size:.7em; border-
top: 3px dotted #960; border-bottom:2px dotted #960; margin:0 lOpx;
padding: 6px lOpx;}
div#contenr; blockquote p {margin:0; font-style:italic;}
Наиболее важным при этом является выбор ширины цитаты и добавление
свойства float. Также мы добавили пунктирные линии над и под цитатой, поля
и отступы.
После этого единственное, то нам осталось сделать в области содержимого,
помимо добавления нижнего колонтитула, - это задать стиль для ссылки в конце
текста (добавим еще кавычки для названия книги в этой ссылке) (см. рис. 8.18).
divftcontent a {text-decoration:underline; color:#С60;}div#content a:hover
{color: #960; texn-decoration:none;}
knight called Sir Percival, a reformed ogre, Golithos, who
eats children and has become a vegetarian) and a wicke
Read more about "The Marvellous Land of Snerqs" к
Рис. 8.18. В обычном состоянии ссылка выделена подчеркиванием
knight called Sir Percival, a reformed ogre, Golithos, who is trying to
eats children and has become a vegetarian) and a wicked witch nam
Read more about "The Marvellous Land raf Snergs"
Рис. 8.19. При наведении на нее указателя мыши она меняет цвет, а подчеркивание исчезает
Задаем стили нижнего колонтитула
Мы можем быстро разметить нижний колонтитул (рис. 8.20), используя стили,
созданные в главе 5. Для этого нам потребуется следующий код, который
можно просто скопировать:

Изменяем разметку 243
div#f ooter {width: 100%; /^заставляет div заполнить контейнер, обычно это body*/
padding: 4px 0; /^отодвигает ссылки от верхней и нижней грани div*/
font-size;. 65em; font-size: . 9em; /* задает размер шрифта ссылок*/
text-align: center; /Сцентрирует элементы ul в div */
background-color: #0б9; /*задает фоновый цвет div*/
}
div#footer ul {margin :2px 0;} /*вертика;1ьные отст\'Пы межд)гсписками'*/
div#footer li {display: inline; /^задаетгоризонтальноеотображениесписков*/
color: whi t e; /*задает цвет вертикальных линий */
border-1 eft: lpx sol id; /^создает вертикальную линию слева от каждого элемента */
color: #AFF; /*задает цвет вертикальных линий */
padding: 0 5рх 0 9рх; /^"горизонтальное пространство между ссылками и вертикальныеми
линиями */
}
div#footer li : first-child {border-left: 0;} /^удаляет левую границу цля первого
элемента списка - не работает в Internet Explorer */
div#footer ul li a {text-decoracion:none; /^удаляет подчеркивание ссылок */
div#footer ul li a:hover {text-decoraticn:underline;} /^подчеркиваниессылок
при наведении указателя */
div#footer ul.-fineprint ii {color:#CCC;} /*цвет значка авторских прав и
вертикальных разделителей в последней строке */
div#f ooter ul. f ineprint li a - {color: #CCC;} /*явно задаем цвет, иначе будет
унаследован белый от div#footer li */
div#footer ul.f ineprint li a: hover {color: #FFF;} /* меняет цвет элементов нижней
строки на белый при наведении указателя */
., fc. .. л £ . . . fc . , was probabJy an uncenscsous source-book
Along Che way, they encounter a foresc inhabited by for the Hobbits
friendly cinnamon bears, a pathetically cowardly knight jjui wkел
called Sir Percivalj a reformed ogre, Goitthos, who is
trying to mend his ways (he longer eats children and has become э vegetarian) and a wicked witch
named Mother Meldrum.
P,&ad_mars' abou: "The Marvellous Land ci ^nergs*
.The;£tery:.J- k , |. TTie'AuM^^ftetitedUnfesL I CGntectU*
&Щ^№$!*Ф$№?Р^ T*V?t- ^ft^^-rtfWrvedr-JHSfte print j terms of use ,
Рис. 8.20. Нижний колонтитул требует доработки, но разметка в целом получилась удачной.
Обратите внимание, что цвет ссылки при наведении указателя мыши явно не указан и пока
наследуется от родительского элемента div

244 ГЛАВА 8. Создание Web-сайта
(
Внеся отмеченные изменения в стиль (необходимые, так как основной
размер шрифта мы уменьшили, после чего использование значения 0,65 eiii
сделало текст нечитаемым), мы получили очень неплохой нижний колонтитул.
Обратите внимание, что это пример использования заготовок,
позволяющего сэкономить время. Чтобы создать и отладить колонтитул, в первый раз нам
понадобился час, по теперь, за счет повторного использования стилей и
благодаря том)7, что разметка, по сути, представляет такой же список, мы создаем
подобный колонтитул за несколько минут.
Теперь необходимо поработать над цветами фона и шрифта. Во-первых,
выберем цвет фона, более подходящий к общей гамме страницы. Для ссылок
и разделителей между ними мы используем те лее стили, что и для прочих
ссылок (рис. 8.21).
.. ., ,. , г . . . ... , , was prooaoiy -an unconscious source-Doox
Along the way, they encounter a forest inhabited by for the Hobbits
friendly cinnamon bears, a pathetically cowardly knight ja.r. roftfen
called Sir Percival, a reformed ogre, Golithos- who is
trying to mend his ways (he longer 3its children and has become a vegetarian) and-a wicked witch
named Mother Meldrum.
Pead more about "Tho N'ap-eHous Land of Snarcis"
jpv ■
The Storj, {■■fUuJtrationi'l TheLAut^jj^ | RefertedUnks::J;;ContectVs
хр*£$05-Щиё-$т{х.Ь r^rrtiy.Trjst т aiKrighfer*eKrVe«J"i j nne-print* I tBrmff j?fгйе
Рис. 8.21. Готовый нижний колонтитул с добавленным фоновым цветом и цветами ссылок
The Slury
Thv Author
Rp lot fir]; ~nk?
Cunl^iL US
Before The Hobbit, there was the Marvellous Land of Snerys...
"The Marvelous Laid of Sisrqs' was the as- 3'eight soaks
wri;cenby E.4. Ayke-Smi:h (1873-;C35). The book was -
published m 1925, ste-datr*? J.R.P- Token's The Hofcsit" by
:en veorj. The bock t*-l« :he tate tg'Sj the story of tws small
children. Jo* and 5yV5, vho ha**p begn rescued from their
awrul lives by Miss Watk/ns, who run; the Society *cr The
Penoval of Supfifluous Children, a*wJ Uompurlerj to Hit
rslaiivu surety of the Land of Snerg;.
The siefgs are a robust and helpful гзее of ъЬоп peopl» 'only
sightly taker tr.an th« average tatfe". who provide э rtm-ber
ft \h /r V> of services to the сЫНтепЧ refuse. There, tne> two children;
■a^g^Sjgy*=5sr^"who ere =K*ayS из to mischii f, rr.««l Gurto, a*»pplrioetod and
чал".. Mei'c-j^c igjif«d si sc'f-conficent SAS'g, and ;ogefwr thoy embark on a series of
aoeddU* adventures.
СсгЪэ foclishlv takes :лэ children to she see
tho fores: of Tested Tro*s. where they
сс-еэтэ hopeless'y test, "hey find thoir way
"ito ar undergrojnd cawi end begin a long
дли чсггвЬтс; fnghtenrvg joumfly. ■
I sSsud like to re«vd cr.f own 'uv* »nd m*
children's kve сг€- a. Wy«c-5mth'i The
Marvellous -and o* Snergs. 4? en/ r»t* ;c
the Sf» g *Um*nt in tnat Tale, and of
Gorto, tii* J« 1 cJ durrde/tie»Ci, jewel of -a
conpnm&T m si 6*C4D>de (Ttie story)
was probeblf err unveil здь-е courct-bcolf
fcr «h- Hobb<-.s
Along the way, tney encounter а rarest
inhabited by friendly с nranon bears, в
pathetically CT*acdy knight called 51 -— —■—••• — ■ ■
Fercival. э refemed эдгв. GoIiUijs, who is try—9 to твпв r*s ways (re fc-rjer eats
children and has fcecjm-» л ve9»tanun) and a ^'ic^ed >*it;h named Mcther Me- rum.
rtid rnc:e е!?г-' '"г-?: M*-*ve3c4S_L2«o of'-5iefo=*
& * s ■
т> в-ол 1 ihisy&m 1 n^^t-Чг i?;i^J.tr-i_ CV.V-lUs
Ocu.n 3 copy с
Ijn-iorjbcijs
*■»!.» •»***■ *l^—
"
st amazoncom.
Sutrys ^evf^
Рис. 8.22. Основная работа со аилями завершена. Теперь займемся подчисткой

\
<?*самч&т*ея[&**&н здасгягрфетаа
divwfooter li {display:inline; color:white; border-left:lpx solid;
color:#c60; padding:0 5px 0 9px;}
div#footer li:first-child {border-left:0;}
div#footer ul li a {text-decoration:none; color:C60; }
div#footer ul li a:hover {texc-decoration:underline; color:#960}
div#footer ul.fineprint li {color:#C60;}
div#footer ul.fineprint li a {color:#C60;}
div#foote"r ul.fineprint li a:hover {color:#960;}
На рис. 8,22 мы видим текущий результат.
Окончательная настройка
Задав стили основных элементов, пора внести окончательные штрихи. Цвет
заголовка и страницы почти одина ч>в, в результате имеет смысл либо добавить
разделительную линию, либо изменить цвет фона страницы. То же самое
можно сказать и о нижнем колонтитуле. Вокруг элементов навигации в левой
колонке слишком много пустого пространства, в правой же еще остались синие
линии сверху и снизу - нужно изменить их или удалить, новости находятся
слишком близко друг к другу, Кроме того, требуется внести еще пару мелких
добавлений в код: поместить кавычки вокруг названия книги в цитате и
добавить точку в конце подрисуночпой подписи.
Начнем с левой колонки (рис. 8.23).
Хне ^xPsVeL
Before The Hobbit, there wai
The Story
Illustrations
The AuthW
Related Links
Cuntdd Us
Mother M«!dum disguised as
a p«ddler.
"ГП6 Msrvi
written by
published i
icn years
children, Jc
awful kves
Removal oi
safety of t
The 5nerg<
slightly tall
sen/ices tc
are always
self* conoid
adventures
Gorbo foolishly takes the children to rt
forest of Twisted Trees, where tney b
hopelessly lost. They find their way ini
Рис. 8.23. Мы настроили поля и выровняли элементы навигации в левой колонке а поле
центральной колонки приблизили клевой

246 ГЛАВА 8. Создание Web-сайта
div#nav {positiomabsolute; lefmOpx; сор:60рх; width:150px; padding:.5em 0
0 0; margin:22px 0 0 0;}
div#nav ul {border:0; margin:12px 1.25em 12px 1.25em; padding:0; list-
style-type:none; font-weight :bold; font-size: .75ern;}
div#content {margin:20px 156px 0 150px; padding: 0 lent;}
Теперь необходимо изменить цвет верхней и нижней линии в области
содержимого:
div#rightcolumn {position:absolute; width:156px; top:60px; right:0px;
margin:2Opx 0 0 0; padding:lern 0; border-top:2px solid #069; border-
bottom: Ipx solid #069000;}
Также добавим разделительные линии для заголовка и нижнего
колонтитула, чтобы более четко выделить их:
div#header {height:60px; bacl^round-color:#FFC; text-align:center; border-
bottom: lpx #960 solid;}
div#footer {width:100%; padding:4px 0; font-size:.9em; text-align:center;
background-color:#DEE7B6; border-top:lpx solid #960; border-bottom:2px
solid #960;}
Что касается изображения заголовка - оно может показаться излишним,
ведь в верхней части страницы название книги упоминается три раза.
Применим творческий подход и для начала поменяем изображение в тексте так,
чтобы оно олицетворяло главного героя рассказа:
<div id="content">
<hl>Before The Hobbit, there was Gorbo the Snerg.</hl>
<div id=,,mainimage,l>
<img alt="Gorbo the Snerg# from the book 'The Marvellous Land of Snergs1"
src="images/gorbo_180w.jpg" widths"180" height=n248" />
<p class=r,caption">Gorbo returns from hunting in the forest.</px/div>
<p>"The Marvellous Land of Snergs" was the last of eight books written by
E.A. Wyke-Smith (1873-1935)...
Далее зададим стили для заголовка:
' div#content hi {font-size:1.4em; font-variant:small-caps; margin-top:2em;
font-family:'comic sans MS', verdana, sans-serif;}
Обратите внимание на применение font-variant для использования
больших и маленьких прописных букв в тексте (помните главу 3?), но, естественно,

Окончательная настройка
247
это не работает в Internet Explorer. В данном случае IE отображает простой
шрифт. Давайте также увеличим правое поле изображения и сместим текст
чуть дальше от правой кромки изображения.
div#content div#mainirnage {width:180px; float:left; margin:0 8px 4px 0;}
Хорошо, теперь наша странрща выглядит, как на рис. 8.24.
•* ^ \ * j-.'А. ■>,-" — ■ ■"■" Л _ - ■ ■ ■■ Пь ... ''■:^- ■ " ■* - .--м -__^---v> - >, йУ,!*, миг— ..---"■ Ъ- - --U-- 4. ^ v.-. .»
„^-♦■" ф% А--А* С . + |f)nnp://rfrt«v».bbd.com/ttyiiniCHD.buidir.9_*vtfc_pjge5/4ntfgjjiH; © Г-Q-Сж-.,.«
л ■- . _ - ' Л- . .■ "■ ..-■.'•-.■- ...... jf"> . . - -
?^е J^*AV€LL0U* LXND OF $N€WJS^""
ТггеЗЙО^у
Illuirtration*
BEFOftE ТМБ НОВВГТ, THERE W<*S 6oftBO THE SNEU6.
Th# Author
R*l*t*d Llnicx
Contact Us
The Marvellous Land of $п*г$$* *vas the Use of «i?M books written
by E.A. Wyke-Smith (1673-1935). Ic was published in 1925, pra-daenfl
J.R.R, Tolkien'; "The Hobbif by Un years. The booh to Hi the tale tails
the ttcry of two small children, Jo* and Sylvia, who hav« been
rescued from tteir awful lives ay Hiss Watlcyra. who runs the Society
for trie Remove of Superfluous Qtfldren, and transported to the
relative safety of tn« Land &1 Snprgs.
The Sncr* are a robust and helpful ra^ of short people 'only slightly
taller than №* avertqt 1лЫч\ who provide a number of services to
the children's rcfuga. There the cwo children, who are alwavi up to
j cnftscMvf, meet Goebo, an cpmlnated and «Jf-con-ldem S-чгс. arvfl
' togetrter tr*ey embark an a series of adventure?.
Corbc foe i«*Jy taken the
СЫляасоруо?
■ Vj^': ;: * ''
at amazoocom.
chl'dren to rite see the
forest of Twif ted Trees,
-'where they oecome
hopelessly test. They find
tft*ir wey Into an undercyour.d cavern and be^tn a ion;
. end sorn«times frightening lourrey. ,
I should -« to .*£d'3 я-/- cm brvt »mJ f.y
c*iiWrer »icv« af E- A. ift>b.c-S'rrh,i "P*
MarveHoti Land ef Sfterj*', atari- ra^a to
d** 5re g е^пчй in ouc t***, and o.'
Ccroo. the o*m e? <r n^r^f a<9, }«■»** of a
companion in ал гхсазкм fXM ЛО/у)
was j>r*tabV *л tf*csn*c*c* **j*t*-t»c4t -
for ihe Hot***.
Aionj the way, they encounter a forest [r&abited by
friendly с5пглтол boars,, a pathetically cowardly kric,?4 called Sir Pcrcival, a reformed ogre,
Goitthes, who is trying so mend hie v.-ayj (he 'юпоег e»ts children and Ьа» become a vegetarian)
a-^3 a wkked witch named Mother-Kaldrum.
Snergs N«w<
^ы<я;..л itf i j.".
T^-: -
*' - V-: .v*v *■ -is :"■■":?" у*5т*:<
tvt'b.-.s.-rsv
Рис. 8.24. Так выглядит наша страница после второго захода исправлений
Как видно, остались некоторые недочеты. Например, подрисуночная
подпись теряется среди основного текста, заголовки новостей сбились в кучу (за
исключением отображения страницы в Internet Explorer для Windows).
Оранжевое заглавие статьи, на наш взгляд, также слишком грубо. Ведь заглавие
должно привлекать пользователя, a Fie отталкивать его. Кроме того, отступы
между абзацами великоваты. Исправим эти мелочи.
Вначале изменим цвет подрисуночнои надписи, чтобы выделить ее:
div#content div#mainimage p {font-size:.65em; margin:0px 5px; color:#C60;}
Оранжевый заголовок слишком броский, поэтому сделаем его темнее:
divfrcontent hl{font-size:1.4em; font-variant: small-caps; margin-top:2em;
font-family:'comic sans MS', verdana, sans-serif; color:#960;}

248
Далее исправим проблему с отступами между заголовками новостей в
правой колонке. Здесь все очень просто. Так как эти промежу гки явно мы не
указали, селектор И отсутствует. Поэтому добавим его и зададим верхнее иоле
равное нулю, а нижнее поле равное половине высоты строки. Помните, что
вертикальные поля накладываются друг на друга, поэтому нам достаточно
указать лишь одно из них:
div#rightcolumn div#newslinks li (margin-top:0; margin-bottom:.5em;}
Последнее, но не менее важное, - настройка пробелов между абзацами. Как
и с вертикальными полями, зададим одно поле равное нулю, а для второго
укажем нужное значение:
div#content p {font-size:.8em; margin-top:0; margin-bottom:.5em;}
Этот прием дает вам полный контроль над пространством между абзацами.
Мелочи, подобные этой, позволяют придать сайту профессиональный облик
с минимальными усилиями. П рушильное расстояние между символами, словами,
Thi; Story
llliMrstiuas
The Au*hor
Rdtted Links
Contact Us
Before The Hobbit, there was Gorbo the Sners.
"The K'arvellcus Lend of Snergg" wvas the la«t of eight baobs
written by =,A. Wyfce-Smith (1873-193S). II was published n
1925, pre-datirg J.R.H. Toifc en's "The Kobbit" by ten years. Tho
too* teilb (lift :ale tells the story of tvo srr.al children, Joe and
Sylvia, who hav* been rescued from their awful lives by Wfas
wartyns, who runs the Society for the Removal cf Sb^e-f uouc
Chilean, and transported to tha relative safety cf th* Land of
Snergs. .
The Energs are a rubjsx and helpful race of shori pirbp'e "on*y
sl.gh-ly toller lhar the average table", who provide с number of
services to the children's refuge. Trier*, the twe cnildren, who
arc always up to mischief, mept Gorbo. 5.1 opir lated and
se.f-coniririant Snerg, er.d together thsy embark en a series of
adventures.
Gorbo foolishly takes
1*19 children to the
see the forest of
1 t*>3tjld like to record m» own love 4nd mj
children's love cf E. A. 'Ar'^e-Sm tn's TT.c
Marvellous Lend cf Sr.e.gs", «г *г.у глее *э
the Snsrc ferment m ih-a? и1еЛ -and c:
Ccrbo. tbt gem of dundertiesds, jowcl oi a
cempoma-n in an 53 cocoit iTJia 5*.orf >
wa» до^эЫу an u.i^iscio'jf iource-book
for** Hobtfts...
Twisted Trees, where they becenrn hapetessly
lost They find their way into an unde-crcund
cavern and oegi з long and sometimes
frightening ;эитеу.
Along the *ay. thev encounter «i fores: nhebited
by friendly cinnamon bears, a psttoticaJy cowardly knight Called Sr Percivtil, d reformed
cere, Golitncs. *ba is trying to merd his ways (he longor eats children and has become a
vegetarian) ard a w.cied w ten narked Mother r.'eldrunr..
^ead \rJ?e £|=.'0'.;у T^-e М,1**сйаьа U.-:J ^"^"^ros"
#
^ - -
•&r
Sv'.hw'i \ iM^:.i..H i ъ-У|*сй*е.. '^чЪипий.-Г* C5Swo<j*
О 2Э?." Ayks-ST^-f^T.lylKjeT* M n$U **<€'»&. j *"»prr* f ter. .к r| «иг
Gottfn a copy Crf
" TitsMattSfeiu
«ГГ»-
a: amaioacom.
Sneriji News
t-?
Рис. 8.25. Доработанная араница в браузере Firefox

249
абзацами и элементами в сумме создает общую гармонию pi повышает
привлекательность даже простого дизайна.
Теперь выровняем верх правой колонки с верхом левой колонки:
divftnav {position:absolute; left:Орх; top:60px; width:150px; padding:0;
margin:22рх 0 15px 0;}
div#rightcolumn {position:absolute; width:156px; top:60px; right:0px;
margin:32px 0 0 0; padding:lem 0; border»top:2px solid £960; border-
botcom:lpx solid #960;}
Теперь, как видно на рис. 8.25, мы добились цельного облика страницы
в Internet Explorer и других браузерах.
Ihe Story
IHuslroticns
BEFORE THE HOBBIT, THERE WAS GObBO THE 5NER<S.
OsUjt» a copy of
7h? Author
He I ate t Li.iki
ConUirt Us
L^t.
■C ilL г 1-» t.rn» fijrr- Ii:jt l.-ty k>
The Mar veils js Land of 3ne-c=* *as me las- if stgr.c bCwks
wMtsn ov £ A. Wyice-Smith \,1875-1935). It vss -uhl <igd in
1*СЕ. sre-datirrg J.R.R Tolkien's "Trie Hobb Г by ten ye=rs.
тго book tell; :*-e та" e tells th? stor/ of ti>c <mar cfri-ren, joo
.and Sylvia, v«no have beer rescued fron Ihe a*^ Irves cv
M -s V/stfcyns, v^"D runs :he Scciety fc the Semcwsl of
Supcrfli;3w5 Ch.kf.'E*i, snd transpc ted to i*ie rel=tb= ==fet/ of
№* Lard of Snergs.
The 5п?гдз а-* э robust and helpful race -f shct pecpls "orly
slightly teller than the average table". *hc preside а гшгтЫ г of
services to the ch dren's renjrje. Then», th» t>o ch tfren woo
arfc alw.i/s up to rrbchief, moet Ccrbo, an op---'naied and seh~-
coif dent Snerg, ard together they embark en я s^'^S of
advent-ires.
j GOOO АоэНИу tales
the children t3 the
see tfca fornsr dt
^ Л0Г4ЙЧЧГ ^rfi^. V 'e*^.
fc £.*£
■■r.
К чОА«Ь<Л« .. 1.J-.
at атагопсолг
Tv/isted Tries, where th~y become hopelsssly
lest. Thsv find th&r way intc an uiderg-cund
cavern aic begin a lc-ig and Svm5tin*es
frighterang jou r.gy.
Alona tha way, tiey епсол-.ter a fbrest irhat-ted
by friendly cinnamci be=rs a pa*he;ieaHy
ccvardly bright ca'-ed 5irP*rc»val, a re/onred эд=^, Gc1i:r-os, whs к try-ад tr m=*»d his
vo>i (ho longer eats children ana has becone a tegetar an) ard а л cVtd «itch na-red
Mother Me drum.
р^Л5 fl^r .i|f:'.r **~Kiy \Vif^<?iVdit t.i"fcn" -"убп-ТГ*!*"*
} *liould like to recrrcf my c^ Jjse wirf
глу c'ttldren'i love з* £. *. W»te-
STrtn'j *Th« fijr#c Ict.sl.4r3 sf
Snares", at viyrst* to *■ S^src
€l«n9ntio»H4t ta*.4ftdcf Go b-,*e
^€0 or ^j KfcrneaJ*. 1*41^ о* д
«ompanon )n en ;s;jfsJt,. С""» лс^г)
beak fnrtnoi-cbt r-
«MAn>Vfe«
Snprrj*: Mews
diccjf t4f t-< Sr*—:
Рис. 8.26. Эта же страница в браузере Internet Explorer
Нам осталось выполнить еще одно техническое действие. Проблемой
гибких разметок является то, что пользователь может разрушить их, чрезмерно
сузив или растянув окно браузера (рис. 8.27).

250
ние
-castta
^eT^^f^eLLouy-Lx^
The Author
Related Links
Contact Us
BEFORE THE
HOBBIT,
THERE WAS
60R60 THE
SNERS.
Gqtarn s copy of
-I r -■:
Forest.
* -
*The Marvel ous
Lord of Sri9rg=" wss
the last of eight
bcok> written by
E.A. VMe-S n:th.
;:' ::-f
^
Рис. 8.27. Когда пользователь чрезвычайно сужает окно браузера, разметка рушится и элементы
накладываются друг на друга. Нехорошо, но исправимо
Ограничение минимальной и максимальной
ширины
Для предотвращения подобных неприятностей мы должны ограничить
минимальную и максимальную ширин)7 разметки. Для этого в CSS есть два свойства:
min-width и max-width, но в браузере Internet Explorer они не
поддерживаются. Поэтому нам потребуется использовать функцию JavaScript minmax. js.
Примечание По статистическим данным до 10% пользователей отключают поддержку
JavaScript в браузерах, поэтому, при разработке сайтов учитывайте, что не
все пользователи смогут использовать заданные функции JavaScript В нашем
случае они все равно смогут пользоваться сайтом, просто его облик
окажется чуть хуже.

I
Окончательная нас?£шйка 251
Добавим каталог JavaScript в локальный каталог и поместим в него сценарий
minmax.j s. Затем зададим на него ссылку в области head XHTML-документа:
<script type="text/javascript" src="javascript/minmax.jsnx/script>
Поместим div вокруг всей разметки - для него мы зададим максимальную
и минимальную ширин): Этот div будет служить контейнером всей разметки
и ограничивать ее ширину:
<body>
<div id="container">
...прочий код...
</div>
</body>
Теперь прибавьте стиль для этого контейнера:
div#container {position: relative; tnin-width: 800px; max-width:I00'0px;
margin-left:auto; margin-right:auto; background»color:#SCf2C9}
i
Что важно - необходимо задать для него относительное позиционирование.
Теперь этот контейнер div играет роль контекста позиционирования для
боковых колонок, если вы не укажете для него значение relative в свойстве
position, боковые колонки по-прежнему будут выравниваться относительно
тега body, то есть по границе окна браузера. Можете временно убрать свойство
position и увидите результат.
Разместив контейнер, автор не удержался и задал цвет фона для него. Как
видно на рис. 8.28, этот последний штрих действительно унифицирует всю
разметку.
Свойства max-width и min-width задают ограничения ширины разметки.
Автоматические поля центрируют разметку в окне браузера. В качестве
дополнения у нас теперь есть div, ширина которого точно совпадает с шириной
страницы, что позволяет нам задать фоновый цвет.
Также добавим небольшой промежуток между нижним колонтитулом и
основным текстом, чтобы разделить эти области:
div#footer {width:100%; ... margin-top: 1.5em;}
Теперь страница выглядит, как на рис. 8.28.
1

252
ГЛАВА Е- Создание 1&е!Ь~сайга
2 *• V : й*.А А". С'"ч + [^^)Ьпо'г1У1^-.ЬМсош'1Гу1|П|и1Ь_Ьи1У1пз_#«ь_с*де4/*л«й5_51*г Of^Q* О»*'"
:*. .. ._чл
The Story"
The Autitor
Relit«d Unit*
^/X"^]^^^^110^'^^0-'0^^^1^^
Вегс*е The Ноевгт. the&e was &оьъо the Snerc.
1 "The Marwer»cvs L3r3 0>* 5пфгдз" was tfc* iaxc of etgtt books written
| by Е.Л. WyKe-Smith (lfi73-t93S). It was published in 1925, cre-daUntf
I J.R.R. Tolkicn^s ""The hobbil* by ten уел**, ^е book cells №c te-e icils
j the story of two small cM firen, Joe erd Sytvfa, who have been
! rescued from tf-r#ir jwfsil Hvts by Miss Waflcyns. rtho rLns the Society
j for the ft^rrreval оГ Supe fluoi» СЬййгед, ard transported to the
| relative safety or tlw Land of Snergs.
: ТЬ* Sncrgs ore л robust nnd helpful глее of short people: 'only sil$Mty
| tailnr then the average :able*, who provide a гч^пЪсг of .service* to
■ the child-en's refuge. There, Ch4 two children, wbo pro always up tD
m&£hu>r, rneot Go/bo, on opinlrolcd othS sctf-CCTfjtfcnt Sncrg, e^tl
j together they* еглэзгк сп ш «rics of adtfenswe*.
Goгэо rcoHshlv Lakes the _ . ._ „ - . * ,
. ,w » i I anoii4 ir*e ts record my awn •sve яп-i my
cWdren to.lTtt; see the thWnrra cvt of L A. wyke-SmitVs The
forest ОТ T«i4tW" Tr*>M, KarveHai.f Lsno of Sncsb\ *i eny rate tu
лпеге ttvjy become " глв Блегд dement in trwttsi*, »r«icf
hopelessly Ids». They find Gon», ?h* д*»п cf Jur^Urr^d,, j**«» of •
tht.r v,,y M on ^„ground а», .* ta,ln a .on, S?S*5 Я SSJ'US&ok
»гщ sometimes frigS-erdn^ journey. fortfx rtohOU».
AJonp the way, tney enccurtcr э fo'est Inhibited by L
friendly cinnamon bears., a p<athcrJcolIy covmrdJy krfabt culled Sir fherciva*, e reformed ogre",
G%)h:hox, who Is crying tt> meftd his wey« (he lor.gvr oart children and has become з vegetarian)
and a wicked witch named Mother KcWrum."
- i*
OotS(na«pyot
. '*j+--W****1*>*+M(:
. J~ *r& :I
л! amaioocora
Srvertjs News "'
SittaajEaa: г Siire^ag
Qiy::|y- |*,mqy.r<r -.
-1Г-'Л. ТГТУ
.:^:::
Y*»t &_ fr1; I_ ij: -"t-flcr. _, I "l>i:: Avi'^cr-J-e^-ч^ j-L<rN*:-:! '£i*liii-l*i <"
x#*? «n. .:W№'.'
v.^4::^"-
^L->-
v * ...
". £*£.&'. 4. ""--«л"
■С ^ ;" 4y L
Рис. 8.28. Теперь, когда разметка доаигает максимальной ширины, они автоматически центрируется
Итак, страница готова.
Заключение
Как уже отмечалось в начале книги, технические навыки лежат в основе
творческого выражения, и это справедливо и для музыкантов, и для танцоров, и для
Web-дизайнеров. Надеемся, что эта книга оказалась для вас полезной, помогла
укрепить ваши технические навыки и вдохновила на реализацию творческих
задумок. Мы постарались заполнить страницы книги самыми полезными
приемами работы с CSS. Все эти сведения являются результатом многочасовых
попыток заставить все работать так, как хочется-, - квинтэссенцией идей,
примеров и советов, предложенных многими умными и щедрыми людьми в Web-
сообществе всем нам. Итак, теперь пришел ваш черед создавать стили!
Создание сайта о гномах с помощью отрицательных полей
И напоследок предлагаем вашему вниманию ту же страницу, созданную с
использованием отрицательных полей (рис. 8.29).

За&шдоче&ше
253
Н£ ^(XRyeLLOUS LXND OFjNffcGf
The story.
Illustration*
The Author
Related Link*
Contact Us
Before The Hobbit, there was Gorbo the
' *Tnc Marvellous Land of Srwtrgs" was
i the last of eight books written by E.A.
j Wyke-Smith (1873-1935)- ft was
* published in 1925, pre-dabng J.R.R.
\ Tolkien's The Hobblt** by ten years.
The book tells the tale tells the story of
two small children, Зое and Sylvia, who
have been rescued from their awful
Irves by Miss Watkyns, who runs the
■ Society for the Removal of Superfluous
Children, and transported to the
relative safety of the Land of Sncrgs.
The Snergs ere a robust and helpful
race of short people ""only slightly taller
th n the average table*, who provide a
number of services to the children's
refuge. There, the two children, who
ere always up to mischief, meet Gorbo,
an cpinlnated and self-confident Snerg, and together they embark
on a series of adventures.
Gsrao доите t*oni.btir£T$ iri
П4 ?_г;я/
Gorbo foolishly takes the
children to the see the forest of
Twisted Trees, where they
become hopelessly lost. They
find their way Into an
underground cavern and begin
a long an<J sometimes
frightening journey.
Along the way, they encounter
I should like to record my own
&ve fi:>d my cMdrcn's love of E.
A, Wykc-Sin th's The Ma'vcllau-
Lanti of S.i«r$*"( j: any rate to the
Sterc *iem«r.t.ui that tale, and of
Gcrbo, the $е.т» of dtrcerhcadj,
jewel cf a согорлгЛоп In d*i
esc3pade.<.JThe saory) '*as
probbbly an 'Jncortsooui source*
took for lh< Hcbbiis...
a forest inhabited by friendly *: ••*■«' ; «—«-.- -
cinnamon bears, a pathetically cowardly knight called Sir Perdval,
a reformed ogre, Gollthos, who Is trying to mead his ways (he
longer eats children and has become a vegetarian) and a wicked
witch named Mother Meldrum,
tt^»j nor*» tout *T»-g Mayvjiluus tjna of Sn.rj "
Dbtaii а соду of
J- • .■. ■>. ■::
st ama?on.com.
Snergs News
Cs^nsPrft5S"3c=mr"g^
jogs;
mcry pews
«: ^ *:..-.-■ ^. : -, : :. : .-. ..■
-: .'■v..- 4..
^Tbe^Srtsryii^l'lus^atiors ] The- Author';fc '^S3tedXi*&& г Contact Us
jjg^SflOS^V/ykfr-Srfi.ti Family Trus*1 * *\1-щт&$гЫъълук<й-\-_Кг\ъ prirr | terms of uss
^5й* ^^^$^*И^л*,.-^Л!. :" V ,-'
^" ■■:- >■-"■- ■■ ^ у-:. f s £■ ^ :■ "^ -_jw
. ■. . . .—я-са.—■■■ ту; ' г.1
>■ . ■■■- : -■" ■■■*■ -x ■'■■- .;-.. у . * M
Рис 8.29, Та же страница, созданная с помощью стилей, рассмотренных в описании создания
шаблона с отрицательными полями
Эта страница визуально ничем не отличается от созданной выше, но если взглянуть на
ее код, доступный на сайте www.bbd.com/stvlin, вы увидите, что он совершенно другой.
Так как мы используем разметку с плавающими колонками, то вместо абсолютного
позиционирования можем .расширить нижний колонтитул во всю ширину разметки.
Поскольку опасность увеличения боковой колонки и ее накладывания на колонтитул
отсутствует, в данном шаблоне положение колонтитула определяет самая длинная
колонка.

Приложение. Свойства CSS
и их значения
В этом приложении содержится перечень свойств CSS и их допустимых
значений. Таблицы приведены с разрешения сайта W3 Schools, обучающего ресурса
для Web-дизайнеров (www.w3schooLs.com). Все эти таблицы можно найти на
сайте с примерами и подробными объяснениями. (IE - Internet Explorer, N -
Netscape, W3C - Web-стандарт).
Таблица 1. Фон
Свойство Описание
Значения
N
IE W3C
background
background-
attachment
background-
color
background-
image
background-
position
background-
repeat
Позволяет задать все свойства
фона в одном объявлении
Задает, является ли фоновое
изображение фиксированным или
прокручивается вместе со страницей
Указывает фоновый цвет элемента
•
Задает фоновое изображение
Задает точку отсчета для
размещения фонового изображения
Указывает, как следует замостить
фоновое изображение
background-color
background-image
background-repeat
background-attachnen
background-роз i t i on
scroll
fixed
cclor-rgb
color-hex
color-имя
itransparent
url
none
top left
nop cenuer
top right
center left
center center
cencer right
bottom left
bottom center
bottom .right
x-% y-%
x-pos y-pos
repeat
repeat-x
repeat-y
no-reoeat
CSS1
CSS1
\
CSS1
CSS1
CSS1
CSS1

Приложение
255
Таблица 2. Граница
Свойство
Описание
Значения
IE
N W3C
border
border-
bottom
border-
bottom-color
border-
bottom- style
border-
bottom-width
border-color
border-left
border-
left-color"
borcer-
left-style
border-
left-wicth
Позволяет задать все четыре границы
и их параметры в одном объявлении
Позволяет задать все параметры
нижней границы в одном объявлении
Задает цвет нижней границы
Задает стиль нижней границы
Задает ширину нижней границы
Задает цвета четырех границ, можно
указать от одного до четырех цветов
Позволяет задать все параметры
левой границы в одном объявлении
Задает цвет левой границы
Задает стиль левой границы
Задает ширину левой границы
border-right Позволяет задать все параметры
правой границы в одном объявлении
border-
right-color
border-
right-style
border-
right-width
Задает цвет правой границы
Задает стиль правой границы
Задает ширину правой границы
border-style Задает стили четырех границ, можно
указать от одного до четырех стилей
border-width
border-style
border-color
border-bottom-width
border-style
border-color
border-color
border-style
thin
medium
thick
lenath
4
4
4
6
6
4
CSS1
CSS1
CSS2
CSS2
CSS1
цвет
border-left-width
border-style
border-color
border-color
border-style
thin
medium
thick
значение
border-right-width
border-style
border-color
border-color
border-style
thin
medium
thick
значение
none
bidder.
dotted
dashed
solid
double
groove
ridge
inset
outset
4
4
4
4
4
4
4
4
4
4
6
6
6
6
4
6
6
6
4
6
CSS1
CSS1
CSS2
CSS2
CSS1
CSS1
GSS2
CSS2
CSS1
CSS1

256 Стильный сайт с помощью CSS
-I
Таблица 2. Граница (окончание)
Свойство Описание
Значения
ii
*п IE
*
N
W3C
border-too -
border-
top-color
border-
top-style
border-
toD-'widch
border-v;idth
Позволяет задать все параметры
верхней границы в одном объявлении
Задает цвет верхней границы
Задает стиль верхней границы
Задает ширину верхней границы
Задает толщину четырех границ,
можно указать от одного
до четырех значений
border-top-width
border-style
border-color
CSS1
borcer-color
border-style
thin
medium
thick
значение
thin
medium *
chick
значение ■
4
4
4
4
6
6
4
4
CSS2
CSS2
CSS1
CSS1
Таблица З. Классификация
Свойство Описание
Значения
IE
N
W3C
clear
cursor
Устанавливает, с какой стороны элемента
запрещено его обтекание другими
элементами. Если установлено обтекание
элемента с помощью параметра float,
свойство clear отменяет его действие
для указанных сторон
Задает тип отображаемого курсора
•.. • ■
left
right
both
попе
url
auto
■crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resi2e
sw-resize
s-resize
w-resize
text
wait
r.elo
4,
Гг
CSS1
CSS2
i;
i.

Приложение
257
Таблица 3. Классификация (окончание)
Свойство Описание
Значения
IE
N W3C
display Задает тип отображения элемента
float
position
Задает расположение текста ил
изображения в другом элементе
Задает статичное, относительное,
абсолютное или фиксированное
позиционирование
visibility Задает видимость или невидимость
элемента
попе
inline
block
list-item
run-in
compact
marker
table
inline-table
rable-row-group
table-header-group
table-footer-group
table-row
table-coiumn-group
table-column
table-cell
table-caption
left
right
none
static
relative
absolute
fixed
visible
hidden
collapse
CSS1
CSS1 '
CSS2
CSS2
Таблица 4. Размеры
Свойство
Описание
Значения
IE
N W3C
height
line-height
aax-height
-ax-width
Задает высоту элемента
auto
значение
%
Задает расстояние между строками normal
number
значение
%
Задает максимальную высоту элемента попе
значение
%
Задает максимальную ширину элемента попе
значение
%
CSS1
CSS1
CSS2
CSS2

258 Стильный сайт с помощью CSS
Таблица 4. Размеры (окончание)
Свойство
Описание
Значения
IE
N
W3C
min-height
min-width
width
Задает минимальную высоту элемента
Задает минимальную ширину элемента
Задает ширину элемента
значение
%
значение
%
auto
%
значение
6
6
4
CSS2
CSS2
CSS1
Таблица 5. Шрифт
Свойство Описание
Значения
IE
N
W3C
font
Задает все параметры шрифта
в одном объявлении
font-
family
font-size
Приоритетный список шрифтов
и семейств шрифтов для элемента
Задает размер шрифта
font-size-
adjust
font-
stretch
Задает значение соотношения для элемента,
сохраняющего х-высоту первого выбранного
шрифта
Сжимает или расширяет текущее
семейство шрифтов
font-style
font-variant
font-weight
font-size/line-height
font-family
caption
icon
menu
message-box
small-caption
status-bar
имя шрифта
имя семейства
xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
значение
%
none
число
normal
wider
narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded
3
3
CSS1
4 CSS1
4 CSS1
CSS2
CSS2

Приложение
2S9
Таблица 5. Шрифт (окончание)
Свойство Описание
Значения
IE
N W3C
rcnt-
srvle
ront-
varient
font -
we iant
Задает стиль шрифта
Отображает текст маленькими заглавными
буквами или обычными буквами
Задает вес шрифта
погшах
italic
oblique
normal
small-caps
normal
bold
bolder
lighter
100
20C
300
400
500
600
700
800
900
CSS1
CSS1
CSS1
Таблица 6. Генерируемое содержимое
Свойство Описание
Значения
IE
N W3C
content Генерирует содержимое
в документе. Используется
с псевдоклассами
:before и :after
string
url
counter(name)
counter(name, list-stylc-type)
counters(name, string)
counters(name, string, list-style-type)
attr-(X)
open-quote
close-q^cte
no-open-cuote
no-close-ouote
counter-
increment
counter-
reset
quotes
Задает изменение
значения счетчика
при каждом появлении
селектора
Задает начальное
значение счетчика
Задает тип кавычек
попе
значение
попе
значение
попе
scrina string
CSS2
CSS2
CSS2
CSS2

260
Стильный сайт с помощью CSS
п.1
Таблица 7. Список и маркеры
Свойство
Описание
Значения
IE
N W3C
list-style
list-style
image
lisc-style'
position
list-sryle-
type
Задает все параметры
списка в одном объявлении
Задает изображения
для использования в качестве
маркера списка
Задает расположение маркера
в списке
Задает тип маркера списка
maricer-of £set Задает смещение маркера
по горизонтали
lisc-style-Lype
list-style-position
list-style-image
none
url
inside
outside
none
disc
circle
square
decimal
decimal-leading-zero
lower-reman
upper-reman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
a men i an
georgiar.
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha
auto
length
CSS1
CSS1
CSS1
CSS1
CSS2
Таблица 8. Поле
Свойство
Описание
Значения
IE
N
W3C
margin
l
margin-
botnoro
margin-left
margin-right
Задает все параметры поля
в одном объявлении
Задает нижнее поле элемента
Задает левое поле элемента
Задает правое поле элемента
margin-top
margin-right
margin-bottom
margin-left
auto
значение
.%
auto
значение
%
auro
значение
%
CSS1
CSS1
CSS1
CSS1

Таблица 8. Поле (Ькончание)
Приложение 261
Свойство
Описание
Значения
IE
N W3C
margin-top
Задает верхнее поле элемента
auto
значение
%
CSS1
Таблица 9. Контур
Свойство
Описание
Значения
!Е
N W3C
outline
outline-color
outline-style
Задает все параметры контура
в одном объявлении
Задает цвет контура
вокруг элемента
Задает стиль контура
вокруг элемента
outline-width Задает ширину контура
вокруг элемента
outline-color
outline-style
outline-width
цвет
invert
none
dotсее
dashed
solid
double
groove
ridge
inset
outset
thin
medium
thick
значение
CSS2
CSS2
CSS2
CSS2
Таблица 10. Отступы
Свойство
Описание
Значения
IE
N W3C
paccing
Задает все параметры отступов
в одном объявлении
padding-bottom Задает отступ снизу для элемента
padding-left Задает отступ слева для элемента
padding-right Задает отступ справа для элемента
padding-top
Задает отступ сверху для элемента
padding-top
padding-right
padding-bottom
padding-left
значение
значение
%
значение
%
значение
%
CSS1
CSS1
CSS1
CSS1
CSS1

262
Стильный сайт с помощью CSS
Таблица 11 Расположение
Свойство
Описание
Задает расположение нижнего края
элемента относительно нижнего края
родительского элемента
Задает форму элемента
Задает расположение левого края
элемента относительно левого края
родительского элемента
Задает порядок действий
при переполнении элемента
содержимым
Задает позиционирование элемента
■
Задает расположение правого края
элемента относительно левого края
родительского элемента
Задает расположение верхнего края
элемента относительно левого края
родительского элемента
Задает вертикальное
выравнивание элемента
Задает порядок расположения
элементов
Значения
auto
%
значение
shape
auto
auto
%
значение
visible
hidden
scroll
au~o
static
relative
absolute
fixed
auto
%
значение
euto
%
значение
baseline
sub
super
top
text-top
middle
bottom
text-bottom
значение
%
auto
значение
IE
N
W3C
bottom
clip
left
overflow
position
right
top
vertical-align
z-index
4
4
6
4
CSS2
CSS2
CSS2
CSS2
CSS2
CSS2
CSS2
CSS1
CSS2
Таблица 12. Таблица
Свойство
Описание
Значения
IE
N
W3C
border-collapse Задает границу таблицы
border-spacing
caDtion-side
Задает расстояние между границами
смежных ячеек
Задает расположение заглавия
относительно таблицы
collapse
separate
значение
top
bottom
left
riaht
CSS2
CSS2
CSS2

Пршшжедше
263
Таблица 12. Таблица (окончание)
Свойство
Описание
Значения
IE
N W3C
епргу-cells
table-layout
Задает рамки для ячеек
с невидимым содержимым
Задает алгоритм разметки таблицы
snow
hide
auro
fixed
CSS2
CSS2
Таблица 13. Текст
Свойство
Описание
Значения
user
lcr
norinal
значение
left
rich;
center
justify
none
underline
o"erline
lir.e-rhrouch
blink
значение
%
попе
eclor
значение
racira^ire
uppercase
lowercase
nonraL
errbed
bici-override
norrd
no\-;ra.c
normal
значение
IE
N W3C
color
direction
letcer-spacir.c
cexc-align
Задает цвет шрифта
Задает направление текста
Увеличивает или уменьшает
расстояние между буквами
Выравнивает текст внут и элемента
cext-decoracion Добавляет оформление текста
в виде его подчеркивания,
перечеркивания, линии
над текстом и мигания
text-indent
text-shadow
Задает отступ для первой строки
текста в элементе
Задает тень для текста
ext-transf orni Задает тип букв в элементе
unicode-bidi
white-soace
wora-spacing
Направление вывода текста
Задает параметры отображения
пробелов между словами
Уменьшает или увеличивает
пробелы между словами
3
6
4 CSS1
6 CSS2
6 CSS1
4 CSS1
CSS1
CSS.1
CSS1
5 CSS2
5 4 CSS1
CSS1

Предметный
А
Авторская таблица стилей 65
Атрибут 27
Б
Блочная модель 107
граница блока 108
отступы блока 110
поля блока 111
в
Валидатор 23
Вложенные стили 41
Вложенный тег 26
Внешний файл стилей 42
Выпадающее меню
многоуровневое 204
разметка 197
Выпадающие меню 187
Г
Гарнитура шрифтов 73
Глобальные стили 42
д
Диаграмма архитекгуры сайта 226
Дочерний селектор 50
указатель
3
Заголовки страниц 31
И
Идентификаторы 55
Иерархия документа 36
Источники стилей 65
К
Каскад 64
Правила каскада 66
Простой обзор каскадов 67
Кернинг 95
Класс
. контекстный селектор 52
применение 51
Класситс 56
Кодовые эквиваленты 28
Комментарии 32
Контекст размещения 120
Контекстные селекторы 46
Корневой каталог 224
Л
Линейные стили 40
Ложные колонки 157
Локальные стили 40

н
■
Наследуемость 63
Нижний колонтитул 145
п
Плавающие элементы 121
Пользовательские таблицы
стилей 65
Правило CSS
значения объявлений 69
объявление 44
селектор 44
Пространство имен XML 25
Псевдо-классы
first 63
focus 62
lang 63
left 63
right 63
Псевдоклассы 60
after 63
before 63
first-child 61
first-letter 62
first-line 62
Псевдоэлементы 62
P
Размер шрифта 82
абсолютные значения 82
ключевые слова 82
относительные значения 82
Разметка из трех колонок
с заголовком 138
Разметка из трех колонок
с плавающими элементами
и очисткой 143
Разметка с двумя колонками 129
Предметный указатель 265
С
Свойства текста 73
letter-spacing 94
line-height 98
text-align 97
text-decoration 96
text-indent 92
text-transform 99
vertical-alignment 99
word-spacing 96
Свойства шрифта 73
font 90
font-style 88
font-variant 90
font-weight 89
Сгруппировать селекторы 45
Селекторы атрибутов 58
Содержимое 17
Списки 175
добавление стилей 178
ненумерованный 175
нумерованный 175
определений 175
Способ очистки Олсетта 148
Ссылка
active 60
hover 60
link 60
visited 60
добавление стилей 185
т
Таблица стилей браузера 65
Тег
блочный 26
вложенный 26
вмещающий 25
певмещающий 26

266
Стильный сайт с помшцью C5S
Тег линейный 26
Традиционный режим 24
Трекинг 95
Трюк с обратной косой чертой 187
Трюк со звездочкой 186
ф
Формы 210
Шрифт 73
без засечек 75
декоративный 76
курсив 76
моноширинный 76
общие для Windows и Мае 78
пропорциональный размер 82
с засечками 75
свойства 88
семейства 73
CSST7, 43
cursive 76
display 126
div 32
DNS 224
DTD 22
em 71
eStar.com 12
fantasy 76
Float 122
form 210
submit 210
FTP-клиент 223
ЭНРВМ1Е 16
Gecko 15
abbr 35
alt 33
background-image 154 .
background-position 210
background-repeat 154
CDATA 42
class 33
clear 124
head 30
html 30
I
id 33
img 32
IP-адрес 224
К
Konquerer 15
link 31

Предметный указатель 267
max-width 250
media 43
all 43
aural 43
handheld 43
print 43
projection 43
screen 43
method 211
get 211
post 211
Microsoft Visio 226
min-width 250
minmax.js 250
monospace 76
P
Position 116
absolute 118
fixed 119
relative 117
static 116
Q
Quirks 24
s
sans-serif 75
select 216
serif 75
Skip Links 170
span 47
T
"title 30
TonyAlsett 148
w
W3 Schools 254
W3C 15
World Wide Web Consortium 15
XHTML 17
Frameset 24
Strict 24
Transitional 24
i

т
Чарльз Уайк-Смит
Стильный сайт с помощью CSS
Главный редактор Захаров И. М.
. • zim@ntpress.ru
Научный редактор Ковалев Г. П.
Ответственный редактор Бекназарова Е. А.
Верстка Белова Д. А.
Графика Шахина А. Г.
Дизайн обложки Харевская И. А.
Издательство «НТ Пресс», 129085, Москва,
Звездный б-р, д. 21, стр. 1.
Издание осуществлено при техническом участии
ООО «Издательство ACT»
Отпечатано с готовых диапозитивов
в ООО «Типография ИПО профсоюзов Профиздап>
109044, Москва, Крутицкий вал, 18

rrjJ^JLJ'J И'И
e
о
U JJU^iJUliilijU BLi
£
сГ
ЧАРЛЬЗ УАИК-СМИТ
CSS, или Cascading Style Sheets, позволяет разделить содержимое и презентацию Web-
страниц. CSS предлагает дизайнерам чрезвычайно эффективный и гибкий способ создания
Web-сайтов. В этой книге вы познакомитесь с теорией, лежащей в основе CSS, и правилами
синтаксиса, а затем, шаг за шагом, научитесь создавать различные варианты разметки,
которые можно использовать в качестве основы для сайтов. А если вы уже знакомы с CSS, то,
без сомнения, из книги вы узнаете о многих новых приемах и трюках.
Вот лишь некоторые описанные в книге вопросы:
• применение CSS-правил к разметке;
• создание раскрывающихся меню;
• формирование текста с помощью CSS;
• создание простых разметок с дв ая или тремя колонками без применения таблиц;
• создание гибких разметок, автоматически изменяющих размер при увеличении или
уменьшении окна браузера;
• советы и уловки по созданию сайтов, выглядящих одинаково в разных браузерах и
карманных устройствах;
• размещение элементов с помощью отрицательных полей, отступов, абсолютного
позиционирования или обтекания;
• все допустимые значения для различных свойств CSS;
• добавление фоновых изображений к тексту и ссылкам.
ЧАРЛЬЗ УАИК-СМИТ занимается разработкой Web-сайтов с 1994 года и в настоящее время
возглавляет производственный отдел в компании Nacio, предоставляющей хостинг и услуги
по созданию сайтов (Новато, штат Калифорния, США). Приоритетной деятельностью
компании является обеспечение удобства использования сайтов, разработка оптимальной
архитектуры информации и дизайн интерфейсов. Автор книги работал консультантом по
Web-дизайну с компаниями Wells Fargo, ESPN Videogames и университетом Сан-Франциско Чарльз
Уайк-Смит также является автором обучающих курсов по разработке мультимедиа и
пользовательских интерфейсов и участником множества тематических конференций.
С Web-сайта книги (www.bbd.com/stylin) вы можете загрузить все CSS-шаблоны,
использованные в ней, изменить их и использовать для своих целей.
О
О
о
о
NT
PRESS
Riders \
Издательство приглашает
к сотрудничеству
как начинающих,
так и пишущих авторов,
специализирующихся на
бизнес-, компьютерной
и радиоэлектронной
тематиках.
Пишите: zim@ntpress.ru
Звоните: (495) 737-32-52
По вопросам оптовой
покупки книг
издательства «НТ Пресс»
обращаться
по адресу:
Москва, Звездный бульвар,
дом 21, 7-й этаж
Тел.615-43-38, 615-01-01,
615-55-13
ISBN 5-477-00322-7
9 »785477»003228|