sAмs
Освой
самостоятельно
css

SAMS
Tes1ch
Yourself
Russ Weakl ey
SAмs 800East 96th Street, lndianapolis, lndiana, 46240 USA

SAМS
Освой
самостоятельно
Расе Уи кли
Издательский дом "Вильяме"
Москва • Санкт-Петербург • Киев
2006

ББК 32.973.26 -018.2 .75
У35
УДК 681.3 .07
Издательский дом "Вильяме"
Зав . редакцией С.Н. Тригу6
Перевод с английского и редакция А.В. Назаренко
По сбщим вопросам обращайтесь в Издательский дом "Вильяме" по ад­
ресу: info@williamspuЬ!ishing . com,http : //www . williamspuЬ!ishing .com
115419, Москва, а/я 783; 03150, Киев, а/я 152
Уикли, Расе.
У35 Освой самостоятельно CSS. 10 минут на урок. : Пер. с англ. -
М . : Издательский дом "Вильяме", 2006. -
256 с. : ил. - Парал.
тит . англ.
ISBN 5-84.59-1019-6 (рус.)
Эта книга предназначена для тех пользователей, которым нужно
быстро овладеть основами CSS - простого и мощного языка, приме­
няемого для разработки стилей WеЬ - страниц. Изучив предоставлен­
ную информацию, вы сможете сделать свои документы более надеж­
ными , компактными и доступными . Материал, представленный в виде
простых задач и пошаговых инструкций , разбит на 22 урока, изучение
каждого из которых отнимет не более 10 минут. Книга рассчитана как
на начинающих , так и на опытных пользователей, которым необходи­
мо быстро и эффективно освоить основные приемы работы с CSS. Если
вы не собираетесь часами просиживать за объемными руководствами в
поисках простейшей информации - эта книга для вас.
ББК 32.973.26-018.2.75
Все названия программных продуктов являются зарегистрированными торго­
выми марками соответствующих фирм.
Никакая часть настоящего издания ни в каких целях не может быть воспроиз ­
ведена в какой бы то ни было форме и какими бы то ни было средствами, будь то
электронные или механические, включая фотокопирование и запись на магнитный
носитель, если на это нет письменного разрешения издательства Sams PuЫishing.
Authorized translation from the English language edition puЬ!ished Ьу Sams
PuЬ!ishing, Copyright © 2006.
, All rights resery~d. )'fo part of this book may Ье reproduced or transmitted in any
form or Ьу any means, electronic or mechanical , including photocopying, recording or
Ьу any information storage retriev~l system, without permission from the puЬ!isher .
Russian language edition is puЬ!ished Ьу Williams PuЬ!ishing House according to
the Agreement with R&I Enterprises International, Copyright © 2006.
ISBN 5-8459·1019·6 (рус.)
ISBN 0· 672·32745·7 (англ.)
© Издательский дом 11 Вильямс 11 , 2006
© Sams PuЬlishing, 2006

Оглавление
Введение
15
Урок 1. Что такое CSS
17
Урок 2. Использование правил CSS
21
Урок 3. Селекторы в действии
35
rрок 4. Применение стилей
43
Урок 5. Блочная модель CSS
51
Урок 6. Добавление фоновых изображений
59
Урок 7. Форматирование текста
67
Урок 8. Стилевое оформление гибкого заголовка 75
Урок 9. Заголовки в закругленной рамке
81
Урок 1О. Стилевое оформление ссылок
87
Урок11.Расположениеизображения
и его подписи
97
Урок 12. Создание фотогалереи
107
Урок 13. Стилевое оформление блока цитаты
117
Урок 14. Стилевое оформление таблицы
127
Урок 15. Создание вертикальной панели
навигации
Урок16.Созданиегоризонтальной
панели навигации
Урок 17. Стилевое оформление рамки
с закругленными углами
Урок 18. Создание заголовка сайта
Урок 19. Расположение двух колонок
с заголовком и примечанием
Урок 20. Подготовка страницы для печати ·
Урок 21. Размещение трех колонок с заголовком
и примечанием
Урок 22. Устранение ошибок CSS
Предметный указатель
139
149
159
173
185
·205
217
241
252

Содержание
Введение
15
Для кого предназначена эта книга
15
Структура книги
15
Интерактивная поддержка
16
Д'Jговоренности, принятые в данной книге
16
Урок 1 . Что такое CSS
17
Что такое CSS
17
Что означает "каскадные"
17
Зачем нужно использовать CSS
19
Резюме
20
Урок 2. Использование правил CSS
21
Подготовка НТМL-кода
21
Создание набора правил
21
Использование нескольких объявлений
24
Объединение селекторов
26
Использование сокращенной формы записи свойств .27
Запись свойств границ в сокращенной форме
29
Задание полей и заполнения в сокращенной
форме записи
31
Другие свойства в сокращенной форме записи
33
Резюме
34
Урок 3. Селекторы в действии
35
Подготовка НТМL-кода
35
Селекторы типа
36
Селекторы класса
36
Селекторы идентификаторов
37
Селекторы-потомки
38

Универсальные селекторы
Расширенные селекторы
Резюме
Урок 4. Применение стилей
Подготовка НТМL-кода
Содержание
Применение внутритекстовых стилей
Использование стилей заголовков
Использование внешних таблиц стилей
Стили @import
Сокрытие стилей от старых браузеров
Резюме
Урок 5. Блочная модель CSS
Внутритекстовые и блочные элементы
Задание ширины блока
Поля
Цвет фона и фоновое изображение
Заполнение
Граница
Область содержимого
Резюме
Урок 6. Добавление фоновых изображений
Подготовка НТМL-кода
Создание селекторов для определения
7
39
40
42
43
43
44
45
46
47
47
49
51
51
52
54
55
55
56
57
58
59
59
стиля заголовка
60
Добавление фонового изображения
60
Настройка свойства background-repeat
61
Добавление свойства background-position
62
Использование сокращенной формы записи свойства
background
64
Добавление заполнения
65
Резюме
66

8
Содержание
Урок 7. Форматирование текста
67
Подготовка НТМL-кода
67
Удаление элементов <font>
68
Создание селекторов
69
Формирование стиля элемента <р>
69
Стилевое оформление первого абзаца
71
Преобразование в сокращенную форму записи
72
Резюме
73
Урок 8. Стилевое оформление
гибкого заголовка
75
Стилевое оформление заголовка
75
Добавление цвета, размера шрифта и ширины
76
Задание опций текста
78
Добавление заполнения и границ
78
Добавление фонового изображения
80
Резюме
80
Урок 9. Заголовки в закругленной рамке
81
Определение стиля заголовка
81
Стилевое оформление элемента <h2>
82
Добавление. фонового изображения
83
Стилевое оформление элемента <em>
84
Резюме
85
Урок 1 О. Стилевое оформление ссылок
87
Ссылки и псевдоклассы
87
Установка порядка следования псевдоклассов
89
Использование классов с псевдоклассами
89
Стилевое оформление ссылок с фоновыми
изображениями
90
Удаление подчеркивания и применение границ
92
Увеличение активной ·области ссылок
94
Резюме
95

Содержание
9
Урок 11 . Расположение изображения
и его подписи
97
Оболочка для изображения и подписи
97
"Плавающий" контейнер
98
Применение заполнения, цвета фона
и фонового изображения
100
Стилевое оформление подписи
102
Стилевое оформление изображения
103
Расположение подписи рядом с рисунком
104
Создание фотоснимка
105
Резюме
106
Урок 12. Создание фотогалереи
107
Создание галереи с эскизами
107
Расположение элементов <div>
108
Стилевое оформление изображения
11О
Стилевое оформление элемента абзаца
111
Принудительный перевод строки
113
Размещение подписей рядом
115
Резюме
116
Урок 13. Стилевое оформление
блока цитаты
117
Применение элемента <Ыockquote>
117
Стилевое оформление элемента <Ыockquote> ,
119
Стилевое оформление абзаца
121
Стилевое оформление класса source
122
Создание другого варианта
124
Резюме
126
Урок 14. Стилевое оформление таблицы
127
Стартовая таблица
127
Добавление к таблице элементов,
повышающих ее доступность
Создание селекторов для формирования
Сll'илевого оформления таблицы
128
131

10 Содержание
Стилевое оформление подписи
132
Стилевое оформление элемента <tаЫе>
133
Стилевое оформление элементов <th> и <td>
134
Стилевое оформление элемента <tr>
134
Выбор экземпляров элемента <th>
135
Чередование цветов в строках
137
Резюме
138
Урок 15. Создание вертикальной
панели навигации
Зачем нужен список
Определение стиля списка
Стилевое оформление элемента <ul>
Стилевое оформление элемента <а>
Добавление эффекта визуального выделения
Стилевое оформление элемента <li>
Резюме
Урок16.Созданиегоризонтальной
панели навигации
Стилевое оформление списка
Стилевое оформление элемента <ul>
Стилевое оформление элемента <li>
Стилевое оформление элемента <а>
Определение стиля псевдокласса :hover
Резюме
Урок 17. Стилевое оформление рамки
с закругленными углами
Подготовка НТМL-кода
Создание иллюзии закругленных углов
Создание селекторов для определения стиля
рамки с закругленными углами
Подготовка изображений
Стилевое оформление элемента <div>
Стилевое оформление элемента <h2>
Стилевое оформление элемента <р>
139
139
140
140
141
146
147
148
149
149
150
152
152
156
157
159
159
160
161
161
162
163
164

Содержание 11
Стилевое оформление класса .furtherinfo
165
Стилевое оформление элемента <а>
166
Создание варианта с фиксированной длиной
168
Создание гибкого варианта только
с верхним изображением
170
Резюме
172
Урок 18._Создание заголовка сайта
173
Подготовка НТМL-кода
173
Создание селекторов для определения
стиля заголовка
Стилевое оформление элемента <body>
Стилевое оформление контейнера
Стилевое оформление элемента <hl>
Стилевое оформление элемента <image>
Стилевое оформление элемента <ul>
Стилевое оформление элемента <li>
Стилевое оформление элемента <а>
Резюме
Урок 19. Расположение двух колонок
с заголовком и примечанием
Подготовка НТМL-кода
Создание селекторов для стилевого оформления
двух колонок
Стилевое оформление элемента <body>
Стилевое оформление контейнера
Стилевое оформление элемента <hl>
Стилевое оформление контейнера #nav
Стилевое оформление элемента <ul>
Стилевое оформление элемента <li>
Стилевое оформление контейнера #content
Стилевое оформление контейнера #footer
Стилевое оформление элемента <h2>
Стилевое оформление элемента <а>
Резюме
174
175
176
177
178
179
181
183
184
185
185
186
186
187
189
191
192
194
196
197
200
202
204

12 Содержание
Урок 20. Подготовка страницы для печати
205
Настройки CSS для печати
205
Начальные коды HTML и CSS
207
Создание селекторов для стиля для печати
208
Стилевое оформление эле.мента <body>
209
Стилевое оформление элемента <hl>
211
Стилевое оформление контейнера #nav
212
Стилевое оформление контейнера #footer
214
Стилевое оформление элемента <а>
215
Резюме
216
Урок 21. Размещение трех колонок
с заголовком и примечанием
Подготовка НТМL-кода
Создание селекторов для определения стиля
217
217
страницы с тремя колонками
218
Создание сетки "жидкой" структуры
220
Создание фоновых изображений
220
Стилевое оформление элемента <body>
221
Стилевое оформление элемента <hl>
223
Стилевое оформление элементов <h2> и <h3>
225
Стилевое оформление первого контейнера
226
Стилевое оформление второго контейнера
228
Стилевое оформление колонки #content
229
Стилевое оформление колонки #news
231
Стилевое оформление колонки #nav
232
Стилевое qформление элемента <ul>
234
Стилевое оформление элемента #footer
236
Резюме
239
Урок 22. Устранение ошибок CSS
241
Подготовка кода CSS
241
Решение проблем
242
Советы по устранению проблем CSS
250
Резюме
252
Предметный указатель
253

Об авторе
Расе Уикли (Russ Weakley) работает в сфере дизайна более
18 лет . Последние девять лет он специализируется на WеЬ­
дизайне и имеет собственную фирму Мах Design. Кроме того,
он работает WеЬ-диза·йнером Австралийского музея.
Вместе с Питером Фермингером (Peter Firminger) Расе яв­
ляется сопредседателем Web Standards Group. Задача данной
группы - помочь WеЬ-дизайнерам в освоении новых техно­
логий и вопросов, связанных с доступностью. Кроме того,
Расе является соучредителем W еЬ Essentials, организовы­
вающей конференции и семинарь1 WеЬ-разработчиков, на ко­
торые привлекаются докладчики и делегаты со всего мира.
Расе известен благодаря своим презентациям и семинарам по
WеЬ-дизайну, стандартам и доступности. Кроме того, Уикли яв­
ляется автором популярных и востребованных руководств по
CSS, включая Listamatic, Listamatic2, Listutorial, Floatutorial
и Selectutorial, которые можно найти на его WеЬ-сайте http: / /
www.maxdesign.com.au.
Благодарности
Автор благодарит команду издательства Sams, в частности
Линду Гаррисон (Linda Harrison), за предоставленную воз­
можность написать книгу. Благодарю всех, кто комментиро­
вал мою работу, критиковал ее и давал полезные советы, ка­
сающиеся моих руководств. Эта обратная связь позволила
мне глубже понять проблемы других дизайнеров и разработ­
чиков, сталкивающихся с CSS. Спасибо Лизе Миллер (Lisa
Miller), вычитавшей текст и протестировавшей весь приве­
денный в книге код. Наконец, бла:('одарю моего партнера Ан­
ну (Anna) за терпение, поддержку и ободрение в процессе на­
писания книги.

От издательства
Вы, читатель этой книги, и есть главный ее критик. Мы
ценим ваше мнение и хотим знать, что было сделано нами
правильно, что можно было сделать лучше и что еще вы хоте­
ли бы увидеть изданным нами. Нам интересны любые ваши
замечания в наш адрес .
Мы ждем ваших комментариев и надеемся на них. Вы мо­
жете прислать нам бумажное или электронное письмо либо
просто посетить наш WеЬ-сервер и оставить свои замечания
там. Одним словом, любым удобным для вас способом дайте
нам знать, нравится ли вам эта книга, а также выскажите
свое мнение о том, как сделать наши книги более интересны­
ми для вас.
Отправляя письмо или сообщение, не забудьте указать на­
звание книги и ее авторов, а также свой обратный адрес. Мы
внимательно ознакомимся с вашим мнением и обязательно
учтем его при отборе и подготовке к изданию новых книг.
Наши электронные адреса:
E-mail:
WWW:
info@williamspuЫishing . com
http://www.williamspuЬlishing . com
Наши почтовые адреса:
в России:
в Украине:
115419, Москва, а/я 783
03150, Киев, а/я 152

Введение
Каскадные таблицы стилей (Cascading Style Sheets - CSS) -
это простой и мощный язык определения стилей WеЬ-страниц.
Независимо от того, кем вы являетесь - WеЬ-дизайнером, раз­
работчиком или другим человеком, использующим Web, -
CSS
должны стать важной составляющей вашего набора инструмен­
тов для разработки WеЬ-сайтов.
Многие разработчики W еЬ-сайтов используют таблицы для
формирования структуры и не понимают преимуществ CSS.
Хотя существует множество хороших ресурсов и книг по CSS,
люди часто теряются в огромном потоке информации. Часто
бывает просто_трудно понять, с чего же лучше начать обучение.
Книга "Освой самостоятельно CSS. 10 минут на урок" предна­
значена для того, чтобы помочь вам быстро разобраться в CSS
с помощью ряда простых и последовательных уроков.
Для кого предназначена
эта книга
Эта книга - для вас, если вы
•
новичок в использовании CSS;
•
нуждаетесь в простом руководстве по использованию CSS;
•
желаете быстро узнать, как задействовать все возмож­
ности CSS;
•
хотите узнать о новых способах применения CSS .
Структура книги
Книга "Освой самостоятельно CSS . 10 минут на урок" со­
стоит из 22 уроков, в которых последовательно объясняются
особенности CSS. Прочитав ее, вы будете хорошо понимать
язык CSS и сможете использовать его в реальных ситуациях.
Каждый урок состоит из простых этапов, благодаря которым

16 Введение
вы быстро освоите новую концепцию и сможете применять ее
на практике. Кроме того, уроки .являются самодостаточны­
ми, поэтому при необходимости вы можете сразу переходить
к интересующей вас теме.
Интерактивная поддержка
Для каждого урока книги "Освой самостоятельно CSS.
10 минут на урок" существуют файлы-примеры, которые
можно загрузить с WеЬ-сайта издательства (http://www.
williamspuЫishing. com/).
Договоренности, принятые
в данной книге
Чтобы отличать код HTML/CSS от другого содержимого,
мы представили его моноширинным шрифтом. Полужирнь~м
шрифтом отмечены фрагменты, которыми данный код отли­
чаете.я от предшествующего.
1

•=
..hl,LL!I.Иai Z&L
.~--
Урок 1
Что такое CSS
Из этого урока вы узnаете о каскадnых таблицах стилей
(Cascading Style Sheets - CSS) и о том, почему их nеобходи­
мо испол!>зовать.
Что такое CSS
Каскадные таблицы стилей (Cascading Style Sheets -
CSS) - это язык, используемый в документах HTML для оп­
ределения способа представления содержимого. Представле­
ние задается с помощью стилей, помещаемых непосредствен­
но в элементы HTML, заголовок HTML-документа или от­
дельные таблицы стилей.
Таблицы стилей содержат несколько правил CSS. Каждое
правило выбирает элементы в НТМL-документе. Затем дан­
ные правила определяют, каким стилем будут представлены
элементы.
С одним файлом CSS может связывать любое число файлов
HTML.
Что означает "каскадные"
Существует три типа таблиц стилей, которые могут по­
влиять на представление НТМL-документа в браузере. Пере­
числим их.
•
Таблицы стилей браузера. Браузеры применяют табли­
цы стилей ко всем WеЬ-документам. Хотя эти таблицы
стилей зависят от браузера, все они обладают общими
характеристиками - черный текст, синие ссылки, ко-

18 Урок 1
ричневые посещенные ссылки. Данные таблицы стилей
браузера являются таблицами по умолчанию.
•
Пользовательские таблицы стилей. Пользователем
является любой посетитель вашего W еЬ-сайта. Боль­
шинство современных браузеров позволяет пользова­
телям устанавливать свои таблицы стилей в браузерах.
Данные стили имеют более высокий приоритет по
сравнению с таблицами стилей браузера по умолча­
нию, но только для этого пользователя.
•
Авторские таблицы стилей. Автором является тот, кто
разработал WеЬ-сайт, т.е. вы! Применив таблицу ос­
новного стиля к странице, вы добавили авторскую таб­
лицу стилей. Обычно авторские таблицы стилей имеют
более высокий приоритет, чем пользовательские (кото­
рые, в свою очередь, подавляют стили браузера). Дан­
ный каскад показан на рис. 1.1.
Таблица
стилей
браузера
Пользовательская
таблица
стилей
Авторская
таблица
стилей
WеЬ-страница
Рис . 1.1 . Три типа таблиц стилей, влияющих на представле ­
ние W еЬ-страницы
Каскад означает, что стили могут ниспадать друг в друга
(или образовывать каскад). Посредством каскада определяют­
ся приоритеты правил, которые позже применяются к доку­
менту. Например, правила авторских таблиц стилей обычно
имеют более высокий приоритет , чем таолицы стилей браузера
по умолчанию .

Что такое CSS 19
Зачем нужно использовать CSS
Перечислим некоторые преимущества использования CSS
для разработчиков WеЬ - страниц.
•
Простата эксплуатации. Истинная мощь CSS заключа­
ется в том, что один файл CSS может контролировать
внешний вид множества документов HTML. Чтобы из­
менить вид всего сайта, достаточно отредактировать
единственный файл CSS (а не огромный набор НТМL­
документов).
'•
Меньшие размеры файлов . CSS позволяет авторам уда­
лять из НТМL-документов все элементы, связанные
с представлением, - таблицы стилей, разделительные
изображения, декоративные изображения , шрифты,
цвета, показатели ширины, высоты и фоновые изобра­
жения. Представления можно контролировать с помо­
щью файлов CSS, что позволяет существенно уменьшить
размеры файлов, представляющих НТМL-документы.
•
Повышенная доступность. Если объединить CSS с НТМL­
документами с правильной структурой, можно сущест­
венно облегчить работу таких средств, как программы
чтения с экрана. Если удалить разметку, связанную с ви­
зуальным представлением, останется только структурное
содержимое, что и требуется подобным программам.
Кроме того, с помощью CSS можно увеличивать площадь
ссылок, на которой можно щелкать, контролировать вы0
соту и длину строки для пользователей с нарушенными
моторными или когнитивными функциями.
•
Различные среды. Стили CSS можно разрабатывать для
различных сред - браузеров, принтеров, портативных

20 Урок 1
устройств и проекторов, не меняя при этом содержимое
или структуру документа.
•
Повышенный контроль над типографией. CSS позво­
ляет авторам контролировать представлен:ие сод ержи­
мого с помощью таких свойств, как capita li ze,
uppercase, lowercase, text - decoration, letter-
spacing, word-spacing, text-indent и line-height.
CSS также позволяет добавлять поля, границы, заполне­
ние, фоновый цвет и фоновые изображения к любому
элементу HTML .
Резюме
Из этого урока вы узнали о каскадных таблицах стилей
(Cascading Style Sheets - CSS) и о том, зачем они нужны.
Также вы узнали, откуда взялись таблицы стилей и какие
три типа таблиц стилей могут влиять на внешний вид W еЬ­
страницы.

Урок2
Исполъзование ' правил
css
В этом уроке вы освоите синтаксис и правила .языка каскад­
ных таблиц стилей (Cascading Style Sheet - CSS ), выучите
компоненты правил CSS, включая селекторы, обоJ/,вления,
свойства и значения, и научитесь сопоставлять стили с ря­
дом простых элементов HTML. Кроме того, вы узнаете, как
использовать сокращенную форму записи свойств.
Подготовка НТМL-кода
НТМL-код этого урока будет состоять из трех элементов -
.
<hl>, <h2> и <р>, как показано в листинге 2.1.
Листинг 2. 1 . Код HTML, содержащий разметку для урока 2
<hl>
Заголовок первого уровня
</hl>
<h2>
Заголовок второго уровня
</h2>
<р>
Текст абзаца . ..
</р>
Создание набора правил
Правило (или набор правил)- это утверждение, сообщаю­
щее браузеру, как визуализировать определенные элементы
НТМL-страницы. Набор правил состоит из селектора, за кото­
рым следуе1· блок объявления. Внутри блока объявления мо-

22 Урок2
жет быть одно или несколько объявлений, каждое из которых
содержит свойство и значение, как показано на рис. 2.1 .
Рис. 2.1 . Структура набора правил
При создании набора правил первым этапом является вы­
бор селектора, отбирающего элементы НТМL-страницы, на
которые будет распространяться правило. Селектор состоит
из всех символов до первой левой фигурной скобки (не вклю­
чая ее). Селекторы, использованные в данном уроке, показа­
ны в листинге 2.2. Более подробно селекторы обсуждаются
в уроке 3, "Селекторы в действии".
Листинг 2.2 . Код CSS, иллюстрирующий селекторы
h1
h2
р
Далее необходимо создать блок объявления - контейнер,
содержащий все данные между фигурными скобками
(включая сами скобки). Блоки объявлений, использованные
в этом уроке, представлены в листинге 2.3.
Листинг 2.3. Код CSS, иллюстрирующий блоки объявлений
h1 {...}
h2 {...}
р {...}
Внутри данного блока находится одно или несколько объ­
явлений. Объявления сообщают браузеру, как нарисовать
любой элемент на выбранной странице. Объявление состоит
из свойства и одного или нескольких значений, разделенных
двоеточиями. Конец каждого объявления обозначается точ­
кой с запятой. Объявления, использованные в этом уроке,
приведены в листинге 2.4.
:-ме

~~-:nnc:
Использование правил CSS 23
Листинг 2.4. Код CSS, иллюстрирующий объявления
hl { text-align: center; }
h2 { font-style: italic; }
р { color: :maroon; }
~ i'fioкaз . ., !,IИС-
ЙХ .более
читаемыми; '·
"- ,..>,,.,_ .,,,____
•'-";_,;,,. _;
·.':.
·_. .'·
._· :..: ·-
"
..
Листинг 2.5 . Код CSS, иллюстрирующий представление
набора правил в одной строке
h2 { font-style: italic; text-align: center; color: navy;
Листинг 2.6 . Код CSS, иллюстрирующий представление
набора правил в нескольких строках
h2
{
• font-style: italic;
text-align: center;
color: navy
Свойство - это один из аспектов элемента, который отно­
сится к стилю представления. В каждом объявлении может
быть только одно свойство, если не используется сокращенная
форма записи (см. раздел "Использование сокращенной формы
записи свойств" далее в этом уроке). Свойства, используемые
в этом уроке, выделены в листинге 2. 7 полужирным шрифтом.
Листинг 2.7. Код CSS с примерами свойств
hl { text-align: center; }
h2 { font-style: italic; }
р { color: maroon; }

24 Урок2
Значение - это точный стиль, который вы желаете устано­
вить для свойства. Значениями могут быть l ength, p e rcent age,
color, url, keyword и shape. Значения, используемые в этом
уроке, выделены в листинге 2.8 полужирным шрифтом.
Листинг 2.8 . Код CSS, иллюстрирующий значения
hl { text-align : center;
h2 { font-style: italic; }
р { color : maroon; }
Первый набор правил касается элемента <hl> и вырав­
нивает его по центру окна браузе.ра.
Второе правило касается элемента <h2> и представляет его
курсивом.
';I'ретье правило касается элемента <р> и окрашивает весь
текст внутри этого элемента коричневым цветом.
Результаты применения стилей к НТМL-коду, представ­
ленному в листинге 2.1, пока,!аны на рис. 2.2 .
Заголовок 1уровня
ЗаrолQвок 2уровня ,
Тексr абзаца текст абзаца текст абзаца текст абзаца
текст абзаца текст абзаца текст абзаца тексr абзаца
текст абзаца текст абзаца текст абзаца.
Рис . 2.2 . Элементы с переопределенными
стилями
Использование неско~ьких
объявлений.
В блоке объявлений можно использовать более одного
объявления. В таком случае объявления должны разделяться
точкой с запятой.

Использование правил CSS 25
В данном примере элементы <hl>· и <h2> будут представле­
ны согласно новому объявлению- color: navy; . Элемент
<h2> также будет представлен согласно определению стиля
text-align: center; (выравнивает текст по центру окна
браузера). Новые объявления приведены в листинге 2.9 . Ре­
зультаты выполнения данного кода показаны на рис. 2.3.
Листинг 2.9. Код CSS, иллюстрирующий применение
нескольких объявлений
hl
{
}
h2
{
р
{
text-align: center;
color: navy;
font-style : italic;
text-align : center;
color : navy;
color: maroon;
Заголовок 1 уровня
3аzоло8ок 2уровня
Т ексr абзаца тексr абзаца текст абзаца текст абзаца
текст абзаца текст абзаца текст абзаца текст абзаца
текст абзаца текст абзаца текст абзаца.
Рис . 2.3. Переопределение стилей с не­
сколькими 06-z,явлениями

26 Урок2
Объединение селекторов
Если одинаковые объявления относятся к нескольким се­
лекторам, их можно сгруппировать, чтобы не писать одно и то ·
же правило несколько раз. Селекторы следует разделять запя­
тыми. В нашем примере элементы <hl> и <h2> имеют два об­
щих объявления, поэтому соответствующие части двух наборов
правил можно объединить, как показано в листинге 2 .1 О.
Листинг 2. 1 О. Код CSS, иллюстрирующий объединение
селекторов
hl, h2
{
}
h2
{
р
{
text-align: center;
color: navy;
font-style: italic;
color: maroon;
:nr::....... -:,,._ Z7% Z: ::: rь м: t:" "' ;_

Использование правил CSS 27
Использование сокращенной
формы записи свойств
Сокращенная форма записи позволяет задавать в одном
свойстве значения нескольких свойств, благодаря чему свойст­
ва становится легче записывать и использовать. Кроме того,
с их помощью файлы CSS можно сделать более лаконичными.
Например, стиль элемента <h2> можно определить с по­
мощью свойств font-style, font-variant, font-weight,
font-size , line-height и font-family, как показано
в листинге 2.11, или с помощью одного свойства font, как
показано в листинге 2.12 и на рис. 2.4 .
Большинство сокращенных свойств не требует располо­
жения значения в строгом порядке. Тем не менее при исполь­
зовании свойства font безопаснее задавать значения в поряд­
ке, определенном WЗС: font-style, font-variant , font-
we:i:ght, font-size, line-height и font-family .
При использовании в свойстве font значений font-size
и line-height вначале следует задать font-size, затем ука­
зать левую косую черту(/) и задать line-height, как пока­
зано в листинге 2 .12.
Листинг 2. 11. Код CSS с выделенными свойствами шрифта
hl, h2
{
}
h2
{
}
р
{
text-align: center;
color : navy;
font-style: italic;
font-variant: small-caps;
font-weight: Ьold;
font-size: 100%;
line-height: 120%;
font-family : arial, helvetica, sans-serif;
color : maroon;

28 Урок2
Листинг 2. 12. Код CSS с выделенными свойствами шрифта •
в сокращенной форме записи
hl, h2
{
}
h2
text-align: center;
color: navy;
font: italic sw,,_11 -caps Ьold 100%/120% arial, helvetica,
sans-serif;
}
р
{
color: maroon;
Заголовок 1 уровня
ЗАГОЛОВОК 2 УРОВНЯ
Текст абзаца текст абзаца текст абзаца текст абзаца
текст абзаца текст абзаца текст абзаца текст абзаца
текст абзаца текст абзаца текст абзаца.
Рис. 2.4 . Элемент <h2> с переопределенным
стилем
Значениями свойств шрифта в сокращенной форме записи
могут быть font-style, fontvariant, font-weight, font -
size, line-height и foвt-family. Тем не менее в сокращен·
ное объявление не обязательно включать их все. Например,
для элемента <р> вы, возможно, желаете задать только значе­
ния font-size и font-:family, как показ~но в лис~инге 2.13.
Листинг 2.1 З. Код CSS.c выделенными свойствами шрифта
hl, h2
{
text-align: center;
color: navy;
- .·-

}
h2
{
Использование правил CSS 29
font : italic small - caps bold 100%/120% arial, helvetica,
sans -serif ;
}
р
{
color: maroon;
font: 80% arial, helvetica, sans-serif;
В этом случае font-sty le , font-variant, font-weight
и line-height не включаются в сокращенное свойство и по­
лучают значения по умолчанию. Результат такого решения
представлен на рис. 2.5 .
Заголовок 1 уровня
ЗАГОЛОВОК 2 УРОВНЯ
Тею:т ~б,аца текст абэаца текст аб,аца текст аб,аца теsтт абааца
текст аб,аца текст. абэаца текст аб,аца текст аб,аца текст абзаца
текст аб~ца .
Рис, 2.5 . Элемепт <р> с переопределеппым
стилем
Запись свойств границ
в сокращенной форме
Свойства границ также можно представить с использова­
нием сокращенной формы записи свойства border. Стиль
элемента <hl> можно переопределить с помощью свойств
border-width, border-style и border - color, как показа­
но в листинге 2:14, или с помощью одного свойства border,
как показано в листинге 2.15. Результаты такого решения
представлены на рис. 2.6 .

30 Урок2
Листинг 2. 14. Код CSS с выделенными свойствами границ
hl, h2
{
}
hl
{
}
h2
{
text-align: center;
color: navy;
Ьorder-width: lpx;
Ьorder-style: solid;
Ьorder-color: gray;
font: italic small-caps bold 100%/120% arial, helvetica,
sans-serif;
}
р
{
color: maroon;
font: 80% arial, helvetica, sans-serif;
Листинг 2. 15. Код CSS с выделенными свойствами границ
(сокращенная форма записи)
hl, h2
{
}
hl
{
}
h2
{
text-align: center;
color: navy;
Ьorder: lpx solid gray;
font: italic small-caps bold 100%/120% arial, helvetica,
sans-serif;
}
р
{
color: maroon;
font: 80% arial, he l vetica, sans-serif;
iFFЛIJ-Aii
-,...?'7Жi:С5.._...-е+"Т<А
••· ) :,са

Использование правил CSS 31
Заголовок 1 уровня
ЗАГОЛОВОК 2 УРОВНЯ
Тею:r абзаца тею:т абзаца тею:т абзаца тею:т абзаца тею:т абзаца
тею:т абзаца тею:т абзаца тею:т абзаца тею:т аб,аца rею:т абзаца
тею:т абзаца.
Рис. 2.6 . Переопределенный стиль эле ­
мента <hl>
Задание полей и заполнения
в сокращенной форме записи.
Поля определяют расстояние между границами данного
и соседних элементов. Заполнение создает пространство меж­
ду границами элемента и его содержимым (подробнее об этом
речь идет в уроке 5, "Блочная модель CSS") . Кроме того,
свойства margin и padding, заданные в сокращенной форме,
делают код CSS более компактным.
Свойство margin может объединять в себе margin-top,
margin - right, margin-bottom и margin-left , а свойство
padding - padding-top, padding-right, padding-bottom
и padding-left.
Свойства margin и padding также можно использовать
для определения различных стилей для всех сторон элемента.
Значения прцменяются в следующем порядке: вверху (top),
справа (right), внизу (bottom) и слева (left) - по часовой
стрелке, начиная с верхнего положения.
Стиль элемента <р> можно изменить с помощью свойст
в padding-top, padding-right, padding-bottom и padding-
left, как показано в листинге 2.16, или с помощью одного
свойства padding, как показано в листинге 2.1 7.

32 Урок2
Л и стинг 2. 16. Код CSS с выделенными свойствами
заполнен и я
hl, h2
{
)
hl
{
)
h2
{
text - align : center;
color: navy;
Ьorder: lpx solid gray;
f ont : italic small-caps Ьold 100% / 12 0% arial, helv etica ,
sans-ser if;
)
р
{
color: mar o on ;
f ont : 80% a rial, helv etica, sans-serif;
p a ddi ng-top: lem;
padding-right: 2em;
padding-Ьo tt om : Зеm;
padding-left: 4em;
Листинг 2 . 17. Код CSS с выделенным и свойствами
заполнения (сокращенная форма запис и )
hl, h2
{
)
hl
{
)
h2
{
text-align : center;
color: navy;
Ьorder: •1рх solid gray;
font: italic small-caps Ьold 100%/120% arial, helvetica,
sans-serif;
)
р
{
color: maroon;
font: 80% arial, helvetica, sans-serif;
padding: lem 2em Зеm 4em;
=

Использование правил CSS 33
В сокращенном объявлении вы можете использовать от од­
ного до трех значений.
Объявление р { paddi ng: l em; } равнозначно приме­
нению заполнения l em ко всем сторонам элемента.
Объявление р { paddi n g: lem 2em; } равнозначно
применению заполнения l em к верхней и нижней сторонам
элемента и 2em :- к левой и правой сторонам.
Объявлениер { padding: lem 2em Зеm; } равнозначно
применению заполнения lem к верхней стороне, заполнения
2 em - к левой и правой сторонам и заполнения 3em - к ниж­
ней стороне элемента.
Объявление р { padding: lem 2em Зеm 4em; } равно­
значно применению заполнения lem к верхней стороне, 2еm­
к правой стороне, Зеm - к нижней стороне и 4em - к левой
стороне элемента.
Другие свойства в сокращенной
форме записи
Свойство background объединяет в себе background-
color,background-image, background-repeat,background-
attachment и background-position , как показано в лис­
тинге 2.18.
Листинг 2. 18. Код CSS с выделенным свойством фона
(сокращенная форма записи)
hl, h2
{
}
hl
{
text-align : center;
color: navy;
Ьorder: lpx solid gray;
Ьackground: yellow url(tint.jpg) repeat-y 100% О;
}
h2
{
font: italic small - caps bo~d 100%/120% arial, helvetica,
sans-serif;
}

34 Урок2
р
{
color: maroon;
font: 80% arial, helvetica, sans-serif;
padding: lem 2em Зеm 4em;
Свойство list-styl e объединяет l i st - style-type ,
list-styleposition и list-style-image, как показано
в листинге 2.19.
Листинг 2. 19. Код CSS с выделенными свойствами списка
(сокращенная форма записи)
hl, h2
{
}
hl
{
text-align: center;
color: navy;
Ьorder: lpx solid gray;
background: yellow url {tint.jpg) repeat-y 100% О;
}
h2
{
font: italic small-caps Ьold 100%/120% arial, helvetica,
sans - serif;
}
р
{
}
ul
{
/
color: maroon;
font: 80% arial , helvetica , sans - seri f;
paddi ng: lem 2em Зеm 4em; ,
list-style: square inside;
Резюме
Из этого урока вы узнали, как использовать селекторы,
объявления, свойства, сокращенную форму записи свойс':!'в
и значения для определения стилей ряда простых элементов
HTML. Из следующего урока вы узнаете о типах селекторов
и научитесь их использовать.
=
.,_.._W:5E..... it&&z:SCi:.::
~

УрокЗ
'~<
Селекторы в действии
Из этого урока вы узнаете о различных типах селекторов
и на учитесь их исп ользовать.
Подготовка НТМL-кода
Селекторы представляют собой один из важнейших аспек­
тов CSS, поскольку используются для выбора элементов
НТМL-страницы и определения для них различных стилей.
НТМL-код этого урока показан в листинге 3 .1.
Листинг 3. 1 . Код HTML, содержащий разметку для урока 3
<body>
<div id= "content">
<hl>
Heading her e
</hl>
<р c l ass= "intro">
Lorem ipsum dolor sit amet.
</р>
<р>
Lorem ipsum dolor <а href="# ">sit</a> amet.
</р>
</div>
<di v id= "nav">
<ul>
<li><a href= "#" class =" intro ">item l</a></li>
<li><a href=" #"> i tem 2</a></li>
<li><a href= " # ">item 3</a></li>
</ul>
</di v>
<div id= " footer " >
Lorem ipsum dolor <а href = "#">sit</a> amet .
</div>
</body>

36 УрокЗ
I
,
'i. ;;...
·..
.
·..·
,'
·"
НИЦ СОД0!)ЖИМОrО; ИСГ10ЛЬ3
расqмотренные НИ?1(0 В ю;ому
Селекторы типа
Селекторы типа выбирают любой элемент HTML на стра­
нице, согласующийся с селектором.
В примере НТМL-кода, приведенном в листинге 3.1, со­
держится семь элементов HTML, которые можно использо­
вать, как селекторы типа: <body>, <div>, <hl>, <р>, <ul>,
<li> и <а>.
Например, чтобы выбрать все элементы <li> на странице,
используется селектор <li>, как показано в листинге 3.2 .
Листинг 3.2. Код CSS, содержащий стилевое оформление
элемента <li>
li
{
color: Ыuе;
Селекторы класса
Селекторы класса можно использовать для выбора любого
элемента, которому был присвоен атрибут класса.
В примере НТМL-кода, приведенном в листинге 3.1, имеется
два элемента HTML с атрибутами класса - <р class=" intro" >

Селекторы в действии 37
и <а hr ef= "#" class= "intro" >. Чтобы, например, выбрать
все экземпляры класса intro, применяется селектор . intro,
как показано в листинге 3.3.
Листинг 3.3. Код CSS, содержащий стилевое оформление
класса . intro
.intro
font - weight: Ьold;
Кроме того, объединяя селекторы типа и класса, можно
выбирать конкретный экземпляр класса. Например, вы мо­
жете пожелать по отдельности выбрать <р class=" intro" >
и <а href=" #" class=" intro" >. Для этого, как показано
в листинге 3.4, можно использовать р. intro и а. intro.
Листинг 3.4 . Код CSS, содержащий два различных стилевых
оформления класса . intro
p.intro
{
color: red;
a.intro
color: green;
Селекторы идентификаторов
Селекторы идентификаторов похожи на селекторы клас­
сов. Их можно· использовать для выбора любого элемента
HTML, имеющего идентифицирующий атрибут. Тем не менее
каждый идентификатор можно использовать в документе
единственны,й раз, тогда как классы можно применять сколь
угодно часто.
В этом уроке идентификаторы используются цля , опреде­
ления уникальных частей структуры документа - оглавле­
ния, панели навигации и примечания.
В примере НТМL-кода, приведенном в листинге 3.1, имеется
три идентификатора: <div id= "content" >, <div id= "nav" >

-
38 УрокЗ
и <div id="footer"> . Чтобы выбрать <div id="nav">, ис­
пользуется селектор #nav, как показано в листинге 3.5 .
Листинг 3.5 . Код CSS, содержащий селектор #nav
#nav
(
color: Ыuе;
Селекторы-потомки
Селекторы-потомки используются для выбора элементов,
являющихся потомками другого элемента. Например, в при­
мере НТМL-кода, показанного в листинге 3.1, три элемента
<а> являются потомками элементов <li>. Чтобы выбрать
только эти три элемента <а>, не затронув все остальные,
можно использовать селектор-потомок, как показано в- лис­
тинге 3.6 . Даннь~й селектор нацелен только на элемент <а>,
вложенный в элемент <li>.
Листинг 3.6 . Код CSS, содержащий селектор-потомок
liа
{
color: green;
%?::-W -
:-::nr:s

Селекторы в действии 39
Селекторы-потомки не обязаны использовать элементы,
_являющиеся прямыми потомками. Например, элемент <а>
является потомком <di v i d = "nav_">, а также потомком эле­
мента <l i>. Это означает, что в качестве селектора можно ис­
пользовать и #nav (листинг 3.7).
Листинг 3.7. Код CSS, содержащий селектор-потомок
#nav а
{
col or : •red;
Селекторы -потомки также могут включать несколько
уровней потомков, что, как показано в листинге 3.8, позволя­
ет создавать более избирательные селекторы.
Листинг 3.8 . Код CSS, содержащий селектор-потомок
#navulliа
{
co l or: green;
Универсальные селекторы
-Универсальные селекторы используются для выбора лю­
бого элемента. Например, чтобы установить поля и заполне­
ние всех элементов равными О, можно, как показано в лис­
тинге 3.9, использовать селектор* .
ЛистингЗ.9. Код CSS, содержащий универсальный селектор
*
margi n: О;
paddi ng: О;
Кроме того, универсальные селекторы можно использовать
для выбора всех компонентов внутри другого элемента, как
показано в листинге 3.10. В результате выполнения этого кода
будут выбраны элементы, находящиеся внутри элемента <р>.

40 УрокЗ
Листинг З. 1О. Код CSS, содержащий универсальный
селектор выбора всех элементов внутри <р>
р*
(
color: red;
Расширенные селекторы
Порожденные селекторы (child selector) используются для
выбора элемента, являющегося прямым потомком другого
элемента (родителя). Порожденные селекторы выбирают не
все элементы-потомки, а только прямые порождения. На­
пример, вам требуется отобрать элемент <em>, являющийся
прямым потомком элемента <div>, но не другие элементы
<em>, являющиеся потомками <div>. Соответствующий се­
лектор показан в листинге 3.11.
Порожденные селекторы не поддерживаются Windows
Internet Explorer 5, 5.5 и 6, но поддерживаются большинст­
вом других стандартных браузеров.
Листинг З. 11. Код CSS, содержащий селектор прямого
потомка
div>em
(
color: Ыuе;
Селекторы соседних братьев выбирают элементы-братья,
следующие непосредственно за элементом. Например, требу­
ется отобрать элементы <hЗ>, непосредственно следующие за
элементами <h2>. Данная задача возникает довольно часто
в реальном мире, поскольку между размещенными рядом
элементами <h2> и <hЗ> (заголовками второго и третьего
уровней) получается довольно большой отступ. Соответст­
вующий селектор показан в листинге 3.12 .
Селекторы соседних братьев не поддерживаются в Windows
Internet Explorer 5, 5.5 и 6, но поддерживаются большинством
.других стандартных браузеров.

•Селекторы в действии
41
Листинг 3.12 . Код CSS, содержащий селектор соседнего
брата
•
h2+hЗ
{
margin: -lem;
Селекторы атрибутов используются для выбора элементов на
основе их атрибутов _или значений атрибутов. Например, может
потребоваться выбрать все изображения НТМL-страницы, име­
нуемые" small. gif", как показано в листинге 3.13.
Селекторы атрибутов не поддерживаются Windows
Internet Explorer 5, 5.5 и 6, а также Macintosh Internet
Explorer 5 . Кроме того, они не поддерживаются ранними вер­
сиями Opera.
Листинг З. 1З. Код CSS, содержащий селектор атрибутов
img[src="small.gif"]
{
border: lpx solid #ООО;
Псевдоэлементы позволяют определять стиль информа­
ции, недоступной ·в дереве документа. Например, используя
стандартные селекторы, никак нельзя определить стиль пер­
вой буквы или первой строки содержимого элемента. Тем не
менее, как показано в листинге 3.14, это можно сделать с по­
мощью псевдоэлементов.
Псевдоэлементы : before и : after не поддерживаются
Windows Internet Explorer 5, 5.5 и 6 и Macintosh Internet
Explorer 5. Кроме того; они не поддерживаются ранними вер­
сиями Opera.
Листинг З. 14. Код CSS, содержащий селектор
псевдоэлементов
p:first- line
{
font-weight: Ьold; •
p:first-letter
{
font-size : 200%; font-weight : bo~d;}

42 УрокЗ
Псевдо классы : first-child, : link, : visited, :hover,
: active, : focus и : lang (n) также позволяют форматиро ­
ват ь элементы, отсутствующие в дереве документа . Подроб­
нее псевдоклассы рассмотрены в уроке 10, "Стилевое оформ­
ление ссылок" .
Резюме
Из этого урока вы узнали, как использовать множество
селекторов, в том числе селекторы типа, класса, идентифика­
тора , потомка и универсальный селектор. Из следующе го
урока вы узнаете, как форматировать внутритекстовые эле ­
менты, определять стили заголовков и стили внутри внешних
таблиц стилей .

Урок4
Из этого урока вы узнаете, куда можно поместить код CSS,
включая текст, заголовок и внешние таблицы стилей. Вы
также узнаете, как с помощью типа · среды подготовить
таблицу сщилей для конкретного устройства ( мобильного
телефона, телевизора или КПК ). Кроме того, вы узнаете
о методах, позволяющих с помощью типа среды "спрятать"
от старь~х браузеров новые методы задания стилей.
Подготовка НТМL-кода
НТМL-код этого урока, содержащий один абзац текста,
показан в листинге 4.1 .
Листинг 4.1 . Код HTML, содержащий разметку для урока 4
<!DОСТУРЕ НТМL PUВLIC " - //WЗС//ГfГD НТМL 4.01//EN"
"http://www.w3.org/TR/html4/s trict.dtd">
<html lang="en" >
<head>
<meta http-equiv="content-type" content ="text/html;
charset=utf-8 ">
<titl e> Lesson 4</title></head>
<body>
<р>
</р>
Lorem ipsшn dolor sit amet, consectetuer adipiscing
elit ...
</Ьоdу>
</html>
В этом уроке мы определим стиль элемента <р>, используя
свойства font - family, width, background-color, margin
иpadding.

44 Урок4
Данные стили можно применять к элементам <р>, исполь­
зуя три метода: внутритекстовые стили, стили заголовков
и внешние таблицы стилей. Хотя описаны будут все методы,
предпочтительным является использование внешних таблиц
стилей, поскольку они не добавляют каскадные таблицы сти­
лей к разметке HTML.
Применение внутритекстовых
u
стилен
Внутритекстовые стили можно применять непосредствен­
но к элементам НТМL-кода, используя атрибут style. Тем не
менее, если это возможно, внутритекстовых стилей следует
избегать, поскольку в этом случае стили добавляются к раз­
метке HTML. Это противоречит основной цели CSS: приме­
нять одинаковые стили к как можно большему числу страниц
W еЬ-сайта с помощью внешних таблиц стилей. Наличие сти­
лей, которые применяются внутри текста, может стать ис­
точником дополнительной работы при модификации W еЬ­
сайта, поскольку придется изменять не один файл CSS,
а множество страниц. Пример внутритекстового стиля пока­
зан в листинге 4.2 .
Листинг4.2. Код HTML, содержащий внутритекстовый стиль
для элемента <р>
<!DOCTYPE НТМL PUВLIC "-//WЗС//Г/ГD НТМL 4.01//EN"
" http://www.w3 .org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8">
<tit le>Lesson 4</title>
</head>
<body>
<р style="font-family: arial, helvetica, sans-serif;
argin:
lem;padding: lem; Ьackground-color: gray; width: lOem; ">
Lorem ipsum do lor sit amet, consectetuer adipiscing
elit ...
</р>
</body>
</html>
•

Применение стилей 45
Использование 'стилей
заголовков
Для определения стиля элемента <р> могут также исполь­
зоваться стили заголовков. С помощью элемента style в заго­
ловок документа можно помещать правила CSS. Как и внутри­
текстовых стилей, стилей заголовка следует избегать, по­
скольку в этом случае стили добавляются в разметку HTML,
а не во внешний файл CSS.
Иногда стили заголовка использовать выгодно, например
когда правило CSS ограничивается одной страницей большо­
го W еЬ-сайта . Вместо того чтобы добавлять это правило ко
_ всему файлу CSS, можно использовать стиль заголовка.
Пример стиля заголовка показан в листинге 4.3 . Чтобы
браузеры распознавали тип файла, в элементе style необхо­
димо задать type= "text/css" .
Листинг 4.3. Код HTML, содержащий стили заголовка
<!DOCTYPE НТМL PUBLIC "-//WЗС//ГfГD НТМL 4.01//EN "
"http://www.w3.org/TR/htm14/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8">
<title>Lesson 4 - listing 2</title>
<style type="text/css" media="screen">
р
{
font-family: arial, helvetica, sans-serif;
margin: lem;
}
</style>
</head>
<body>
<р>
padding: lem;
Ьackground-color: gray;
width: 10em;
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit ...
</р>
</Ьоdу>
</html>

46 Урок4
Использование внешних таблиц
u
стилен
Третий метод определения стилей для документа включа­
ет связывание с внешними таблицами стилей. Данный метод
формирования стилевого оформления является наиболее
подходящим. Если стили потребуется изменить, модифика­
ции подвергается один файл CSS, а не все НТМL -страницы.
Чтобы заменить стиль заголовка внешним стилем, набор
правил необходимо переместить в новый файл CSS, как пока­
зано в листинге 4.4.
После этого из вашего НТМL-файла необходимо с помо­
щью элемента l ink связаться с требуемой таблицей стилей,
как показано в листинге 4.5 .
Листин г 4.4. Код CSS, содержащий внешнюю таблицу
стилей со стилями для эл е м е нта <р>
р
{
font-family: arial, helvetica, sans-serif;
margin : lem;
padding : lem;
background-color : gray;
width : lOem;
Листин г 4.5. Код HTML, содержащий элемент link
<!DOCTYPE НТМL PUBLIC " - //WЗC// DТD НТМL 4.01 //EN "
"http : //www . w3 . org/TR/html 4/stri c t . dtd ">
<html l a ng="en ">
<head>
<meta h ttp- equi v =" cont e nt-type" cont ent= "t ext/html;
charset=utf - 8">
<ti tle>Lesson 4</ t itl e>
<li nk rel="stylesheet" href="style . css" type= "text/css"
media= 11 screen11 >
</head>
<Ьоdу>
<р>
</р>
Lorem ipsum dolor s it amet, consectetuer adipi scing
elit. . .
</Ьоdу>
</html>

Применение стилей 47
Стили @import
Стили заголовков и внешние таблицы стилей также могут
импортировать другие таблицы стилей, используя правило
@i mport, как показано в листинге 4.6 . Правило @import
должно размещаться перед всеми остальными правилами за­
головка или внешней таблицы стилей.
Листинг 4.6 . Код CSS, содержащий импортированную
таблицу стилей
@iщport "advanced.css";
р
{
font- family: ari al , hel vetica, sans- serif;
margi n: l em;
paddi ng: lem;
bac kgr ound- co l or: gray;
wi dth: lOem;
С помощью импортированных стилей можно использовать
несколько файлов CSS, а также скрывать стили из старых брау­
зеров.
Сокрытие стилей от старых
браузеров
Некоторые старые браузеры, например Netscape Navigator 4
и Internet Explorer 4, обладают плохой поддержкой CSS. С по­
мощью специальных типов среды и правил @import можно
скрыть стили от этих браузеров.
Чтобы спрятать все стили от Netscape Navigator 4, необходи­
мо заменить тип среды screen типом screen, proj ection, как
показано в листинге 4. 7. Поскольку Netscape Navigator 4 не под­
держивает несколько типов среды, проблема будет решена.
Листинг4.7. Код HTML, содержащий элемент link с типом
cpeдыscreen,projection
<!DOCTYPE НТМL PUBLIC " -//WЗС//ГfГD НТМL 4.01//EN"
" http://www . w3.org/TR/html4/strict . dtd">
<html lang="en">
<head>

48 Урок4
<meta http-equiv="content-type" content="text/html;
charset=utf-8">
<title>Lesson 4</title>
<link rel="stylesheet" href="style.css " type="text/css"
media="screen, projection">
</head>
<Ьоdу>
<р>
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. . .
</р>
</Ьоdу>
</html>
Чтобы скрыть остальные стили от Internet Explorer 4 и не­
скольких других старых браузеров, набор правил для элемен ­
та <р> необходимо вынести из исходной таблицы стилей
в импортированную , как показано в листингах 4.8 и 4.9 . По­
скольку Internet Explorer 4 не умеет читать импортирован­
ные файлы , проблема будет решена.
Листин г 4 .8. Код CSS внутри исходной таблицы стилей
вызывает style. css
@import "advanced.css";
Листинг 4. 9 . Код CSS внутри импортированной таблицы
стилей вызывает advanced. css
р
{
font-family : arial, helvetica, sans -serif ;
margin : lem;
padding : lem;
Ьackground-color: gray;
width: lOem;
Все современные браузеры могут читать несколько типов
среды (screen, proj ection), а также знают, как поступать
с импортированными стилями, поэтому они отображают эле­
мент <р> с полным стилевым оформлением.
Чтобы скрыть стили заголовков от старых браузеров,
можно заключить содержимое элемента style в коммента­
рий, как показано в листинге 4.10.
==
«:::
C&.W- .1
-----
~

..
Применени,е стилей 49
Листинг 4.1 О. Код HTML, содержащий стили заголовка
внутри комментария
<style type="text/css" media="screen ">
<!--
р
{
-->
</style>
font-family: arial, helvetica, sans-serif;
margin: lem;
padding: lem;
background-color : gray;
width: lOem;
Резюме
в этом уроке вы научились применять к документу внут­
ритекстовые стили, стили ' заголовка и внешние таблицы сти­
лей. Кроме того, вы узнали, что такое тип среды и как скрыть
сложные стили от старых браузеров с помощью нескольких
типов среды и правила @import. В следующем уроке вы уз­
наете о блочной модели CSS, включающей поля, цвет фона,
фоновое изображение, заполнение и границу.

Урок5
~
~
-
liliil!illJIII
х~:_йiь.с:~/
~'
Блочная модель CSS
k,
Из этого урока ' вы узнаете о блочной модели CSS, характе­
ризуемой прямоугольниками, которые генерируются для
всех элементов HTML, об аспектах, которые составляют
модель рамки, включая поля, цвет фона, фоновое изображе­
ние, заполнение и границу, а также чем отличаются внут­
ритекстовые элементы и элементы блочного уровня.
Внутритекстовые и блочные
элементы
Элементы блочного уровня обычно отображаются в виде
блоков с разрывом строки до и после элемента . В качестве
примеров элементов блочного уровня можно привести абза­
цы, заголовки, элементы div и блочные цитаты.
Внутритекстовые элементы не отобра~аются, как блоки.
Содержимое такого типа представляется в строках без разрыва
строки до и после элемента. В качестве внутритекстовых эле ­
ментов можно привести текст, выделенный курсивом или по­
лужирным начертанием, и ссылки. Примеры блочных и внут­
ритекст<:>_!ЗЫХ элементов показаны на рис. 5.1 .
Рис. 5.1 . Примеры блочных и внутритекстовых
элементов

52 Урок5
Все блочные и внутритекстовые элементы являются блока­
ми, использующими блочную модель . Стили элементов обоих
типов можно определять с помощью таких свойств блочной
модели , как margin, background-color, background-image,
padding и border, как показано на рис. 5.2 .
Рис . 5.2. Трехмерная схема блочной модели CSS
'
Некоторые свойства блочной модели, например height
и width, не применяются к внутритекстовым элементам.
Кроме того , применение свойств margin и padding к внутри­
текстовым элементам влияет на содержимое, расположенное
слева и справа от элемента, но не влияет на содержимое свер­
ху и снизу.
Задание ширины блока
Ширина элемента определяет область, доступную для со­
держимого . Другие элементы (заполнение, граница и поля)
добавляются к этой ширине.
'
Например, если элемент задан со свойством width:
200рх;, ширина области содержимого равна 200 пикселям.

Блочная модель CSS 53
Если к тому же элементу применяется заполнение, • граница
или поля, они добавляются к общей ширине.
Однако Internet Explorer 5 для Windows (а в некоторых
случаях и Internet Explorer 6 для Windows) использует иной
метод задания ширины рамок. Если к элементу применяются
заполнение и граница, их размеры вычитаются из общей ши­
рины. Данная ситуация иллюстрируется на рис. 5.3.
Правильная модель рамки: общая ширина= 280
Модель рамки Internet Explorer:
общая ширина= 200
Рис. 5.3. Блочная модель CSS и проблема ширины
Internet Explorer

=
54 Урок5
Поля
Пол.я можно применять к внешней части любого блочного
или внутритекстового элемента. Они создают пустое про­
странство между краями данного и соседнего элементов.
Как показано в листинге 5.1, пол.я можно применять к от­
дельным сторонам блока.
Листинг 5. 1 . Код CSS, содержащий различные свойства
margin
р { margin-top: О; }
р { margin-right: 2em;
h2 { margin-Ьottom: Зеm;
hЗ { margin- left: lem; }
Кроме того, пол.я можно применять, используя сокращен­
ную форму записи. Если задано только значение margin, оно
применяете.я ко всем сторонам элемента, как показано в лис­
тинге 5.2 .
Листинг 5.2. Код CSS, содержащий свойство margin
с одним заданным значением (сокращенная форма записи)
р { margin: lem; }
Если заданы два значения, нижнее и верхнее пол.я уста­
навливаются равными первому, а левое и правое - второму
значению, как показано в листинге 5.3 .
Листинг 5.3. Код CSS, содержащий свойство margin с
двумя заданными значен111ями (сокращенная форма записи)
р{margin:lemО;}
Если заданы три значения, верхнее поле устанавливаете.я
равным первому значению, левое и правое - второму, а ниж­
нее - третьему, как показано в листинге 5.4 .
Листинг 5.4 . Код CSS, содержащий свойство margin с тремя
заданными значениями (сокращенная форма записи)
р {margin: lemО 2em; }•
Если заданы четыре значения, они применяются к верхнему,
правому, нижнему и левому пол.ям, как показано в листинге 5.5 .

Блочная модель CSS 55
Листинг 5.5. Код CSS, содержащий свойство margin
с четырьмя заданными значениями (сокращенная форма
записи)
р { margin: lem 2em 2em lem; }
Цвет фона и фоновое
изображение
Свойство background-color устанавливает цвет фона эле­
-
мента.
Свойство background- image применяет к элементу фоно­
вое изображение, которое размещается поверх фона, заданно­
го с помощью background-color. Подробнее фоновые изо­
бражения рассмотрены в уроке 6, "Добавление фоновых изо­
бражений".
Заполнение
Заполнение можно применять к внешним границам облас­
ти содержимого любого блочного или внутритекстового эле­
мента. Заполнение создает пустое пространство между гра­
ницей элемента и его содержимым.
Подобно полям, заполнение можно применять к отдель­
ным сторонам блока, как показано в листинге 5.6 .
Листинг 5.6. Код CSS, содержащий различные свойства
заполнения
р { padding: lem; }
h1 { padding-top: О;
h2 { padding-right: 2em; }
h2 { padding-Ьottom: Зеm; }
hЗ { padding-left: lem; }
Кроме того, заполнение можно применять с использовани­
ем сокращенной формы записи. Если задано одно значение
свойства padding, оно применяется ко всем сторонам элемен­
та, как показано в листинге 5. 7 .

56 Урок5
Листинг 5. 7 . Код CSS, содержащий свойство padding
с одним заданным значением (сокращенная форма записи)
р { padding: lem; }
Если заданы два значения, величина нижнего и верхнего
заполнения устанавливается равной первому, а величина ле­
вого и правого - равной второму значению, как показано
в листинге 5.8 .
Листинг 5.8. Код CSS, содержащий свойство padding
с двумя заданными значениями (сокращенная форма записи)
р { padding: lem О; }
Если заданы три значения, величина верхнего заполнения
устанавливается равной первому значению, левого и право­
го - второму, а величина нижнего заполнения
-
третьему,
как показано в листинге 5.9 .
Листинг 5. 9 . Код CSS, содержащий свойство paddi ng
с тремя заданными значениями (сокращенная форма записи)
р { padding: lem О 2em; }
Если заданы четыре значения, они определяют величину
верхнего, правого, нижнего и левого заполнения, как показа­
но в листинге 5.10.
Листинг 5.1 О . Код CSS, содержащий свойство paddi ng
с четырьмя заданными значениями (сокращенная форма
записи)
р { padding: lem 2em 2em lem; }
Граница
Свойство border задает ширинУ. цвет и стиль границы
вокруг элемента. В сокращенной фиμме за.писи используются
такие свойства границьi, как Ъorder - top, border - bottom,
border - right, border:-l e f t иЪorder, как показано в· лис­
тинге 5.11 .

Блочная модель CSS 57
Листинг 5. 11 . Код CSS, содержащий различные свойства
border (сокращенная форма записи)
р [ border- top: lpx solid red; }
р [ border-right lpx solid red; }
р [ border - Ьottom: lpx solid red;
р [ Ьorder - left: lpx solid red; }
р [ border: lpx solid red; }
.Область содержимого
Для области содержимого блока можно задать ширину,
высоту и цвет. Ширину и высоту можно указывать в пунктах
(1/72 дюйма), пиках (12 пунктов), пикселях, единицах em
и ех, миллиметрах, сантиметрах, дюймах и процентах, как
показано в листинге 5.12.
Листинг 5.12. Код CSS, содержащий различные значения
width и height
1 р width: lOOpt;
р height: 20рс;
р width: ЗООрх;
р height: 40em; }
р width: 50ех; }
р height: 600mm;
р width: 70cm; }
р height: 8in; }
р width: 50%; }
Для определения в стиле цвета текста используется свой­
ство co l or. Цвет можно задавать по-разному: с помощью
ключевых слов, шестнадцатеричных RGВ-кодов и функцио­
нальной формы записи RGB.
В качестве ключевых слов свойство color воспринимает
aqua (зеленовато-голубой), Ы~сk (черный), Ыuе (синий),
fuchsia (светло-фиолетовый), gray (серый), green (зеленый),
lime (светло-зеленый), maroon (коричневый), navy (темно­
синий), o:).ive (оливковый), purple (фиолетов.ый), red (крас­
ный), silver (светло-серый), teal (сине-зеленый), white
(белый) и yellow (желтый). Хотя в некоторых браузерах могут
использоваться и другие цвета, они не представлены в обяза­
тельной спецификации, поэтому их следует избегать.

58 Урок5
Для шестнадцатеричного представления цветов !'Южно ис­
пользовать только три или шесть шестнадцатеричных символов,
как показано в листинге 5.13. Если цвет представлен тремя па­
рами шестнадцатеричных цифр (например, #ff0000), его можно
представить в сокращенном виде, удалив по одной цифре из ка­
ждой пары (#fОО).~q_бы задавать RGВ-цвета, можно использо­
вать три разделенных запятыми целых числа или значения ком­
понентов в процентах. Например, красный цвет задается с по­
мощью rgЬ (255, О, О) либоrgЬ(100%, 0%, 0% ) ,какпоказа­
но в листинге 5.13.
Листинг 5. 13. Код CSS, содержащий различные значения
свойства color
р
color : red }
р
color: #fOO }
р
color: #ffOOOO }
р
color: rgb(255,0,0) }
р
color: rgb(l00% , 0%, 0%)
Резюме
В этом уроке вы ознакомились с блочной моделью CSS и ее
компонентами - полями, цветом фона, ·фоновым изображени­
ем, заполнением и границей. Кроме того, вы узнали о разнице
между внутритекстовыми и блочными элементами и о том, как
некоторые версии Internet Explorer неверно интерпретируют
блочную модель. В следующем уроке вы научитесь приме­
нять фоновое изображение к элементу <body>. Кроме того,
вы узнаете, как использ~вать свойства background-repeat
и background- position.
- +-Z'>11i"'"':~<?CSC1⁄2
::r-

Урокб
:!!. ~
~"
Добавление фоновых
изображений
~:
В этом уроке вы паучитесь добавлять фоповое изображепие
к элемепту <body>, узпаете, как примепять свойства
background-repeat и background-position. В качестве обучаю­
щей задачи мы будем создавать градиептпое изображепие ,
повторяющееся до правого пижпего угла страпицы.
Подготовка НТМL-кода
НТМL-код этого урока будет состоять из трех абзацев тек­
ста, как показано в листинге 6 .1 .
Листинг 6.1. Код HTML, содержащий разметку для урока 6
<р>
Lorem I
psum dolor sit amet ...
</р>
<р>
Ut wisi enim ad minim veniam . ..
<;/р>
<р>
Duis autem vel eum iriure dolor . ..
</р>

60 Урокб
Создание селекторов
для определения стиля
заголовка
Чтобы определить стиль элемента <body> и его содержи­
мого, требуется единственный селектор типа, как показано
в листинге 6.2.
Листинг 6.2. Код CSS, иллюстрирующий селектор, который
используется для стилевого оформления абзаца
Ьоdу {...}
Добавление фонового
изображения
Для добавления фонового изображения к элементу <body>
используется свойство background- irnage.
Значением свойства background - irnage может быть либо
url (задается изображение), либо none (изображение не ис­
пользуется).
В данном примере мы будем использовать свойство
url (chapterб. jpg). Путь к изображению можно указывать
как в кавычках, так и без них. Код свойства background-
irnage показан в листинге 6.3 . Результаты обработки этого
кода представлены на рис. 6.1.
Листинг 6.3. Код CSS со стилевым оформлением элемента
<body> (добавление фонового изображения)
Ьоdу
{
Ьackground-image: url(chapterб.jpg);

Добавление фоновых изображений 61
Рис. 6.1 . Стилевое оформление эле.мента <body>
Настройка свойства ,
background-repeat
Сейчас фоновое изображение повторяется по всему эк­
рану. Для управления этим повтором применя·ется свойст­
во background- repeat.
В число допустимых значений свойства background -
repeat (рис. 6.2) входят repeat (изображение повторяется
по горизонтали и вертикали), repeat-x (изображение повто­
ряется только по горизонтали), repeat-y (изображение по­
вторяется только по вертикали) и no-repeat (изображение
не повторяется).

62 Урок6
текст абзаца текст абзаца текст
абзаца текст абзаца текст абзаца '
текст абзаца текст абзаца текст
абзаца текст абзаца текст абзаца
текст абзаца текст абзаца текст
абзаца текст абзаца текст абзаца
текст абзаца текст абзаца текст
Рис. 6.2 . Стилевое оформление элемента <body>
с заданным свойством background-repea t
Как показано в листинге 6.4, в этом уроке будет использо­
ваться значение repeat-y, чтобы изображ~ние повторялось
по вертикали к нижнему краю стра,ницы.
Листинг 6.4. Код CSS, содержащий настройки
background-repeat
Ьоdу
{
background-image: url(chapterб.jpg);
Ьackground-repeat: repeat-y;
Добавление свойства
background-position
Теперь фоновое изображение повторяется, как нам требу­
ется, и его нужно растянуть до правого нижнего края элемен­
та <body>. Для этого применяется свойство background-
position.
В качестве значений свойства background-position мож­
но использовать значения в процентах (например, О 100%),
длину (например, 2рх 2 Орх) и ключевые слова (например, left
top) . В любом случае ~начале задается горизонтальное поло­
жение, а затем вертикальное. Выбор значений 0% 0% соответст­
вует расположению левого верхнего угла изображения в левом

Добавление фоновых изображений 63
верхнем углу блока. Выбор значений .О 100% приведет к тому,
что левый нижний угол изображения будет расположен в ле­
вщvr нижнем углу блока абзаца. Значения 2рх 2 Орх зададут
размещение левого верхнего угла изображения на расстоянии
2рх к центру и 2 Орх вниз от верха блока.
Если указано только одно значение в процентах или одна
длина, устанавливается только горизонтальное расстояние;
вертикальное в таком случае принимается равным 50% . Если
указаны два значения, первое из них соответствует расстоянию
по горизонтали. Допускается смешанное использование значе­
ний в процентах и длин (например, 50% 2cm). Кроме того, раз­
. решены отрицательные значения (например, -2 Орх 1 Орх).
В данном уроке будут использованы значения в процентах
100% О, которые задают размещение изображения справа ввер­
ху элемента. Соответствующий код показан в листинге 6.5.
Теперь изображение будет повторяться вниз от правого
края элемента <body> (рис. 6.3).
Листинг 6.5. Код CSS со стилевым оформлением элемента
<body> (добавлено свойство background-position)
body
{
background-image: url(chapterб.jpg);
background- repeat: repeat - y;
background-position: 100% О;

64 Урокб
Текст абзаца текст абзаца текст абзаца те~(
абзаца текст абзаца текст абзаца текст а6з :
текст абзаца текст абзаца текст абзаца тек
абзаца текст абзаца текст абзаца текст абз
текст абзаца текст абзаца текст абзаца те
абзаца текст абзаца текст абзаца текст аб
текст абзаца.
Текст абзаца текст абзаца текст абзаца теi<:
Рис. 6.3 . Стилевое оформление элемента <body>
с заданным свойством background- posi tion
Использование сокращенной
формы записи свойства
background
Как обсуждалось в уроке 2, "Использование правил CSS",
сокращенная форма записи свойств позволяет указывать
значения нескольких свойств в одном. Благодаря этому в
свойстве background можно объединить background-co l or,
background-image, background - repeat, backgrou nd-
attachment и background - position.
При сортировке свойств в сокращенной форме записи
браузеры вначале устанавливают все отдельные свойства со·
гласно их исходным значениям, а затем переопределяют те из
них, которые указал автор.
По умолчанию правило фона записывается как
background: transparent none repeat scroll О О;.
Если объединить использованные в этом уроке объявления
в одно сокращенное правило, они переопределят значения,
принятые по умолчанию для свойств background- image,
background-repeat и background- position. В результате
получим background: transpar,ent url (chapterб . jpg)
repeat-y scroll 100% О;.
Тем не менее правило можно сократить еще больше,
включив в него только необходимые объявления, так что оно

I
Добавление фоновых изображений 65
примет вид background: url (chapterб. jpg) repeat-y
1 00% О; (листинг 6.6).
Листинг 6.6. Код CSS со стилевым оформлением элемента
<body> (сокращенная запись свойства background)
Ьоdу
{
background: url(chapterб.jpg) repeat-y 100% О;
Добавление заполнения
Последний этап - добавление заполнения к элементу
<body>, чтобы отделить текст от фонового изображения. Для
этого можно использовать сокращенную форму записи
padding : 1em 8Орх 1em 1em; , как показано в /(истинге 6.7.
В результате вверху, внизу и слева от края элемента <body>
будет размещено заполнение шириной lem, а справа ширина
заполнения. будет равна 8 Орх. Результаты выполнения соот­
ветствующего кода представлены на рис. 6.4 .
Листинг 6.7. Код CSS с добавл~нием к элементу <body>
заполн е ния
Ьоdу
{
Ьackground: ur l (chap t erб. j pg) r epeat-y 100% О;
margin: О;
padding: lem 80рх lem lem;
Текст абзаца текст абзаца текст абзаца
текст абзаца текст абзаца текст абзаца
текст абзац; текст абз.аца текст абзаца
текст абзаца текст абзаца текст абзаца
текст абзаца текст абзаца текст абзаца
текст абзаца текст абзаца текст абзаца
текст абзаца текст абзаца текст абзаца
.текст абзаца.
Рис. 6.4. Элемент <body> с добавленным запол­
нением

66 Урок6
Резюме
В этом уроке вы научились -применять фоновое изображение
к элементу <body>. Кроме того, вы узнали, как использовать
свойства background-repeat, backgroшi.d-position и сокра­
щенную форму записи свойства background. В следующем уро­
ке вы научитесь определять стилевое оформление текста
с использованием свойств font, size, color и aligrunent.

Урок7
Форматирование текста
В этом уроке вы научитесь задавать стиль текста, исполь·
зуя вместо элемента <font> свойства font, size, alignment
и color.
Подготовка НТМL-кода
НТМL-код этого урока содержит три абзаца текста, как
показано в листинге 7.1. Содержимое этих абзацев помещено
в элемент <font>. С первым абзацем сопоставлен шрифт
большего размера. Кроме того, сам текст цветной, курсивный
и полужирный. Внешний вид данного абзаца текста в браузе­
ре показан на рис. 7.1.
Листинг 7. 1 . Код HTML, содержащий разметку для урока 7
<р align="center">
</р>
<р>
<font size="4" color="#990000" face="times, times new
roman 11 >
<b><i>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit ... </i></b></font>
<font size="2" face="arial, helvetica">
Ut wisi enim ad minim
- veniam, quis nostrud exerci ... </font>
</р>
<р>
</р>
<р>
</р>
<font size="2" face="arial, helvetica">
Duis autem vel eum iriure dolor in hendrerit vulputate ...
</font>
<font size= " 2 " face="arial, helvetica"><p> nostrud
exerci ...
</font>

68 Урок7
Текст абзаца текст абзаr~а текст абз аца
текст абзт~а текст абзаца шекст абзаца
meкcm абзаца текст абз аца текст абза·ца
текст абзаца ,иекст абзаца.
Тею:т абзаца тею:т абзаца тею:т абзаца тею:т абзаца тею:т абзаца
тею:т абзаца тею:т абзаца тею:т абзаца тею:т абзаца тею:т абзаца
Тею:т абзаца тею:т абзаца тею:т абзаца тею:т абзаца тею:т абзаца
Рис. 7. 1. Абзацы, стиль которых задан с по.мощью
эле.ме!{,mа <font>
Удаление элементов <font>
Вместо использования в документе элементов <font> для
задания стилевого оформления содержимого следует приме­
нять CSS. Это уменьшает общий размер файлов и облегчает
управление ими в будущем . Всю информацию, относящуюся
к стилю шрифтов, можно записать в одном внешнем файле,
а не рассеивать по всем документам WеЬ-сайта.
Элементы <font> можно удалить из разметки HTML, как
показано в листинге 7.2 . Поскольку стиль первого абзаца
требует особого стилевого оформления, он будет определяться
классом introduction (рис. 7.2).
Листинг7.2. Код HTML, содержащий разметку вне
элементов <font>
<р class="introduction">
·Lorem ipsum dolor sit amet, consectetuer adipiscing
elit ...
</р>
<р>
Ut wisi enim ad minim veniam, quis nostrud exerci ...
</,р>
<р>
Duis autem vel eum ~riure dolor in hendrerit vulputate .. .
</р>
Ut wisi enim ad minim veniam, quis nostrud exerci ...
</р>
rте=

Форматирование текста 69
Текст абзаца текст абзаца текст абзаца текст абзац~
текст абзаца текст абзаца текст абзаца текст абзаца
текст абзаца текст абзаца текст абзаца.
Текст абзаца текст абзаца текст абзаца текст абзац~
текст абзаца текст абзаца текст абзаца текст абзаца
текст. абзаца текст абзаца.
текст абзаца. Текст абзаца текст абзаца текст абзац
r
с.
С.
с.
Рис. 7.2 . Абзацы текста при удаленных элемен·
тах <font>
Создание селекторов
Для определения стиля абзацев будут использованы два
селектора; как показано в листинге 7. 3.
Листинг7.З. Код CSS, иллюстрирующий селекторы, которые
используются для определения стилей абзацев
р {...}
р. introduction { ... }
Формирование стиля
элемента <р>
Для задания семейства шрифтов используется свойство
font-farnily. В этом свойстве всегда нужно указывать ряд
шрифтов, разделенных запятыми. В конце списка следует
указать общее семейство шрифтов. Если в системе пользова­
теля нет семейства ШI?ифтов, указанного первым, его браузер
попытается использовать второе указанное семейство. Если
подобным образом подходящее семейство не будет найдено,
браузер использует общее семейство шрифтов.

70 Урок7
В нашем примере свойство font-size будет установлено
равным 80%, т.е. размер шрифта будет составлять 80 % от раз­
мера текущего стиля по умолчанию, определенного в браузере
пользователя. С помощью величин в процентах пользователь
может контролировать общий размер шрифтов (рис. 7.3).
Наконец, в код мы включаем значение line-height , рав­
ное 140%, чтобы увеличить расстояние между строками и сде­
лать текст более читабельным. В большинстве браузеров зна­
чение line-height no умолчанию равно 120%. Задавая вели­
чину 140% , мы добавляем 20 % дополнительного пустого места
~ежду строками. Соответствующий набор правил показан в
листинге 7.4.
Листинг7.4. Код CSS, содержащий стили для элемента <р>
р
{
font-family: arial, helvetica, sans-serif;
-
--eт:z?!Gl...-c;.,.~

font-size: 80%;
line-height: 140%;
Форматирование текста 71
Текст абзача 111екст ,абзm{а текст абзаца
шексш абзт~а текст абзаца текст абзаца
шекст абзаца текст абзаца текст абзаца
тек.ст абзаца текст абзаца.
Тею:т абзаца тею:т абзаца тею:т абзаца тею:т абзаца тею:т абзаца
тею:т абзаца тею:т абзаца тею:т абзаца тею:т абзаца тею:т абзаца.
Тею:т абзаца тею:т абзаца тею:т абзаца тею:т абзаца тею:т абзаца
Рис. 7.3 . Абзацы с определенными стилями
Стилевое оформление первого
абзаца
Первый абзац в нашем примере представлен стилем, от­
личным от стиля всех остальных абзацев. В таком случае его
оформление будет задано как times, "times new roman",
serif. Шрифты, подобно Times New Roman имеющие в на­
звании пробелы, должны всегда заключаться в кавычки.
Следующий шаг - определить стиль как курсивный по­
лужирный. Для этого применяются свойства font-style:
i talic; и font-weight: bold;.
Чтобы выровнять текст по центру экрана, используется
text-align : center.
Увеличить размер шрифта можно с помощью font-size :
110%;, а установить цвет- с помощью color : #900;, как
показано в листинге 7.5 (рис. 7.4).
Листинг 7.5. Код CSS, содержащий стили для первого абзаца
р
{
font-family: arial, helvetica, sans-serif;
font-size: 80%;
line-height : 1 ,4;

72 Урок7
p.introduction
{
font - family: times, "times new roman", ser if;
font-style: italic;
f o nt-weig ht: Ьold;
text-align : c enter;
font- s ize : 110%;
c_olor: #900;
Текст абз а1{а текст абзаца текст абзаца
текст абз аца текст абз аt{а тексш абзаца
текст абзаца текст абз аца текст абзаца
mекст абз ача текст абз аца .
Текст абзаца текст абзаца текст абзаца текст абзаца текст абзаца
текст абзаца текст абзаца текст абзаца текст абза ца текст абзаца .
Текст абзаца текст абзаца текст абзаца текст абзаца тею:т абзаца
Рис . 7.4 . Первый абзац представлен требуемым
стилем
Преобразование в сокращенную
форму записи
Как обсуждалось в уроке 2, "Использование правил CSS",
сокращенная форма записи свойств облегчает написание и экс ­
плуатацию кода. Кроме того, благодаря ей файлы CSS стано­
вятся более лаконичными.
Стиль элемента <р> можно определить так , чтобы font-
size, l i ne - height и font-fami l y объявлялись, как одно
свойство шрифта.
Стиль класса introduc tio n можно определить так, чтобы
font- style, f ont-weight, f ont-s ize, line -height и font-
family объявлялись, как одно свойство шрифта, как показано
в листинге 7.6 .

Форматирование текста 73
Листинг7.б. Код CSS, содеЪжащий стили в сокращенной
форме записи
р
{
font: 80%/1.4 arial, helvetica, sans-serif;
p.introduction
{
font: Ьold italic 110%/1.4 times, "times new raman",
serif;
text-align: center;
color: #900;
Резюме
В этом уроке вы научились определять стили текста, ис­
пользуя свойства font - farnily, fontsize, line-height,
font-style, font-weight, text-align и color. Кроме то­
го, вы узнали, как использовать сокращенную запись свойст
в шрифта. В следующем уроке вы научитесь определять сти­
левое оформление заголовков, используя свойства border ,
background-images и text-transform.

-"

~...,,а.,,-п""-"""'"""'-""...::""""'_..,.""".,,._,_
_... ..,_ .,.._ 1!::11:__
,_ ~ ~:,_- . -...,.-,•
Урок8
~
\\1~
'Sr;'
'f":"
~
,μ; "·
..._,
:
.._
'
~
.:;:':>.,.,,·,\~':#
·, f~;J
Стилевое оформление
гибкого заголовка
В этом уроке вы научитесь создавать границу над и под за­
головком, добавлять непрерывное градиентное фоновое изо ­
бражение и определять стиль текста с помощью text-
trans form и разрядки.
Стилевое оформление
заголовка
Чтобы определить стиль заголовка, потребуется селектор,
выделяющий элемент <hl>. Чтобы гарантировать, что вы не
затронете все элементы <hl> страницы, необходимо также
включить в селектор уникальный идентификатор , например
header (листинг 8.1).
Листинг 8. 1. Код CSS, иллюстрирующий селектор, который
используется для определения стиля заголовка
hl#header { ... }
Код HTML, используемый для иллюстрации этого заго­
ловка, показан в листинге 8.2 .
Листинг8. 2 . Код HTML, содержащий разметку для заголовка
<hl id= "header">
Page Heading
</hl>

76 Урока
1
Добавление цвета, размера
шрифта и ширины
Чтобы добавить к заголовку текст, используйте свойство
color. В любой момент вы можете заменить цвет более удоб­
ным для вас.
В данном примере свойство font-size задается равным
120%, а font-weight - равным normal, как показано в лис­
тинге 8.3 .
Листинг 8.3 . Код CSS, задающий свойства font-size
и font-weight
hl#header
{
color: #036;
font-size: 120%;
font-weight: nonnal;

Стилевое оформление гибкого заголовка 77
,'.
'
•
цвета rvюжн
рь1м непосредственн
i,· ·
.
..,-
.
.•<
цатеричных симвщю

78 Урока
'---~- "''''~~•c,~--=""f'm--
jc
Трехзначны е ш
зую,тся
цифр.·­
#ff РQ
Задание опций текста
Следующий этап - отцентрировать заголовок, предста­
вить его прописными буквами и добавить разрядку. Все это
можно сделать с помощью свойств text-transform, text-
align и letter-spacing, как показано в листинге 8.4 и про­
иллюстрировано на рис. 8.1 (данные опции вы также можете
изменить по своему усмотрению) .
Л истинг 8 .4 . Код CSS с преобразованием текста
hl#header
{
color: #036;
font-size : 120%;
font-weight : normal;
text-transform: uppercase;
text-align: center;
letter-spacing: .Sem;
ЗАГОПОВОК
СТРАНИЦЫ
Рис. 8.1 . Заголовок: отцентрирован, и представлен
прописными буквами
Добавление заполнения
и границ
Позже в этом' уроке вы будете добавлять границы сверху
и снизу от заголовка. Чтобы текст не был расположен слишком
близко к границам, необходимо небольшое заполнение сверху
и снизу. Для его реализации можно использовать сокращен­
ную форму записи свойства padding, задавая размер заполне­
ния сверху и снизу равным . 4em, а слева и справа - равным О.

Стилевое оформление гибкого заголовка 79
Чтобы создать границы сверху и . снизу от заголовка , ис ­
пользуйте свойства border-top и border-bottom, как пока­
зано в листинге 8.5. Результаты выполнения данного кода
представлены на рис . 8.2 (по желанию вы можете удалить
или изменить данные границы).
Листинг 8.5. Код CSS, добавляющий границы
·hl#header
{
color: #036;
font-size: 120%;
font-weight: normal;
text-transform: uppercase;
text-align: center;
letter- spacing: . Sem;
padding: . 4em О;
Ьorder-top: lpx solid #069;
Ьorder-Ьottom: lpx solid #069;
ЗАГОПОВОК
СТРАНИЦЫ
Рис. 8.2 . Заголовок с грапицами
..
ры,е стили границ; . .
_
. держив аются lnternet Explorer 5 и 5.5.
..
-,·
••
•
'
:-
--

80 Урока
Добавление фонового
изображения
Чтобы добавить к заголовку фоновое изображение, исполь­
зуйте свойство backgr oun d . После этого задайте указатель u r l
и значение repeat , как показано в листинге 8 .6. В данном слу­
чае изображение задается с параметром rep eat-x, поэтому оно
повторяется только по оси х. Результаты выполнения данного
кода представлены на рис. 8.3. По желанию данное фоновое
изображение вы можете убрать или изменить .
Листин г 8 . 6. Код CSS, добавляющи й фон овое изображе ни е
hl#header
{
col or: #036;
f ont - size: 120%;
font - weight: normal;
text-transform : uppercas e;
text- align: c ent er;
letter- spacing : . Sem;
padding : . 4em О;
border-top: lpx solid #069;
bor der-Ьottom : lpx solid #069;
Ьac kgrowid : url(chapter8.jpg) repea t-x;
Рис. 8.3 . Завершеппый заголовок
Резюме
В это м уроке вы научились определять стиль гибкого заго­
л ов ка, и сп о льзуя font-size, ·font-weight , границы, запол­
нение и фоновые изображения . В следующем уроке вы научи­
тес ь определ я ть стиль заголовка с закруглен н ыми углами .

Урок9
Заголовки
u
в закругл-еннои рамке
В этом уроке вы научитесь обрамлять заголовок закруглен­
ной рамкой. Рамка создаете.я из двух фоновых изображений,
раст.ягивающихс.я до требуемого размера.
Определение стиля заголовка
Чтобы определить стиль заголовка, необходим селектор,
выделяющий элемент <h2>. Чтобы гарантировать, что вы не
затронете все элементы <h2> на странице, в селектор также
необходимо включ~ть класс. В данном случае мы используем
именно класс, а не идентификатор, поскольку м9жет потре­
боваться отметить на одной странице несколько заголовков
(листинг 9.1).
Листинг 9. 1 . Код CSS, иллюстрирующий селекторы, которые
используются для определения стиля заголовка
h2.decorative { ... }
h2. decorative em { ... }
Код HTML, используемый для иллюстрации, показан в лис­
тинге 9.2 . Обратите внимание на то, что заголовок помещен
в элемент <em> ("emphasis" -
"выделение") . Этот дополни­
тельный элемент мы объясним немного ниже .
Листинг 9.2 . Код HTML, содержащий разметку для заголовка
<h2 class="decorative">
<em>Section Heading</em>
</h2>

82 Урок9
Стилевое оформление
элемента <h2 >
Чтобы добавить цвет к элементу <h2>, необходимо ис­
пользовать свойство color (если вам не нравится наш выбор,
. можете изменить цвет) ,
Ширина, размер и семейство шрифта задаются с использо­
ванием свойства font, заголовок центрируется с помощью
свойства text-align, как показано в листинге 9.3 и иллюст­
рируется на рис. 9.1 .
Листинг 9.3. Код CSS, устанавливающий выравнивание текста
hl#header
{
color: #036;

Заголовки в закру гленной рамке 83
font : Ьold 100% arial, helvetica, . sans - serif;
text-align: center;
Заго,wВок раздела
Рис . 9 .1 . Заголовок с переопределенным стилем
Добавление фонового
изображения
Чтобы добавить к элементу <h2> фоновое изображение,
используйте свойство background. Изображ ен и е следует за­
давать с параметром no-repeat , чтобы оно не продублиро в а­
лось в середине длинного заголовка . Изображе ние , исполь­
зуемое нами в к ачестве фонового , показано на рис. 9.2.
Рис. 9.2 . Пер вое и зо бражение, применяемое
к элементу <h2>
Кроме того, необходrrмо задать ширину (w i dth) этого элемен­
та, поскольку фоновое изображение имеет размер 220 пикселей.
Если ширина не определена слева, заголовок будет выходить за
пределы рамки.
Кроме того, к верхней стороне элемента необходимо приме­
нить заполнение величиной 5 цикселей, как показано в лис ­
тинге 9.4 и иллюстрируется на рис. 9.3. Данное заполнение не­
много опустит текст, так что он не будет вплотную примыкать
к фоновому изображению.

84 Урок9
Листинг 9.4. Код CSS, устанавлив аю щий ф о н ов о е
изображение , ширину и зап ол н е ни е
hl#heade r
(
color: #03 6 ;
font: Ьold 100% arial , helvetica, sans-serif;
text-align: center;
backgro und: url{chapter9.gif ) n o-repeat;
widt h: 220рх;
padding: Spx О О О;
( Заго11.ОВок разде:ш 1
Рис . 9.3. Заголовок: с фоновым изображением
Стилевое оформление
элемента <em>
Элемен т < em> будет ис пользовать ся для р азм е щения вто­
рого фонового изображения - "Нижней части рамки с закруг­
ленными углами . Это означает, что данное изображение
должно иметь точно такую · же ширину, как и элемент <h 2>,
чтобы два изображения правильно выравнивались.
Тем не менее, поскольку <em> - это внутритекстовый
элемент, он будет игнорировать любую заданную ширину.
Решение заключаетс:Я в присвоении ему значения display:
Ыосk; перед применением параметра wi dth.
Далее используется свойство padding-bottom, чтобы не­
много поднять текст относительно фонового изображения.
Кроме того, можно переопределить принятый по умолча­
нию курсивный стиль элемента <em>, использовав font-
style: normal;.
Наконец необходимо применить фоновое изображение,
используя свойство background. Изображение должно зада­
ваться с параметром no - repeat, чтобы оно не повторялось
под изображением. Положение фона нужно задать равным О
100%, чтобы левый нижний угол изображения совпадал с ле­
вым нижним углом элемента.

Заголовки в закругленной рамке 85
Получающееся в результате изображение показано на
рис. 9.4, а соответствующий код CSS представлен в листин­
ге 9.5 . Полностью заголовок показан на рис . 9.5 .
Рис. 9.4. Второе изображение, применяемое
к элементу <em>
Листинг 9.5. Код CSS со стилевым оформлением элемента <em>
hl#header
{
color : #036;
font: Ьold 100% arial, helvetica, sans-serif;
text-align: center;
Ьackground : url(chapter9.gif) no-repeat;
width: 220рх;
padding: 5рх О О О;
h2 .decorative em
{
display: Ыосk;
width: 220рх;
padding: О О Spx О;
font-style: normal;
Ьackground: url(chapter9a.gif) no-repeat О 100%;
( Заrоловок раздела )
Рис. 9.5. Окончательный вид заголовка
Резюме
В этом уроке вы научились применять к заголовку цвет,
шрифт и выравнивание текста . Кроме того, вы узнали , как
задать фоновые изображения для двух элементов , чтобы по­
лучить рамку с закругленными углами . Из следующего урока
вы узнаете о стилевом оформлении ссылок .

Урок 10
~·
~;;Ь;;V
.... ....
...,_
&@1.. -·
Сти.левое оформление
ссылок
Из этого урок:а вы узнаете о стилевом оформлении ссылок:.
Кроме того, вы научитесь добавлять к: ссылк:ам фоновые
изображения, отк:лючать подчерк:ивание ссылок:, использо­
вать границы для подчерк:ивания и увеличивать ак:тивную
область ссылк:и.
Ссылки и псевдоклассы
Вы уже знаете, как описывать стиль элемента <а> (элемент
ссылки), - об этом рассказывалось в уроке 3, "Селекторы
в действии". Теперь вы узнаете о стилевом оформлении пяти
различных состояний ссылки.
Итак, ссылки могут находиться в следующих состояниях.
•
Обычное. Стандартное состояние непосещенной ссылки.
•
Посещенное. Ссылка указывает на идентификатор
URI, который уже посещался.
•
Наведенное. Курсор находится над активной областью
ссылки.
•
Активное. Момент выбора ссылки или щелчка на ней.
•
В фокусе. Ссылка находится в фокусе и готова принимать
вводимую информацию (например, щелчок мышью) .
Некоторые состояния ссылки не могут существовать одно­
временно. Например, ссылка может быть или посещенной,
или непосещенной. Тем не менее посещенные и непосещен-

88 Урок 10
ные ссылки могут быть в наведенном, активном состоянии
в фокусе.
Стили для всех описанных состояний можно определять
независимо, используя псевдокласс link (класс, который не
существует в структуре документа). Возможны следующие
пять псевдоклассов:
•
а: link- стили элементов непосещенных ссылок;
•
а : visi ted - стили элементов посещенных ссылок;
•
а: focus - стили состояния в фокусе;
•
а : hover - стили состояния при установке курсора на
ссылку;
•
а: active - стили состояния при активизации ссылки.
Описанные пять псевдоклассов показаны в листинге 10.1;
Листинг 1О. 1. Код CSS, содержащий пять псевдоклассов
ссылок
a :link {...}
a:visited { ... }
a:focus { ... }
a:hover {. ..}
a:active { ... }
... ,
J

Стилевое оформление ссылок 89
Установка порядка следования
псевдоклассов
Пять псевдоклассов имеют одинаковый вес, поэтому поря­
док, в котором они размещаются в файле CSS , имеет большое
значение. Объявления псевдоклассов, которые появляются
в файле CSS позже, заменяют собой предыдущие . Правиль ­
ный порядок показан в листинге 10.2 .
Листинг 10 .2 . Код CSS, содержащий правильный порядок
следования псевдоклассов <а>
а {...}
a:link {...}
a:visited {. ..}
a:focus { ... }
a:hover { ... }
a:active { ... }
Использование классов
с псевдоклассами
С псевдоклассами можно объединять селекторы класса,
создавая ссылки для различных целей. Например, можно ор ­
ганизовать стилевое оформление ссылок в зависимости от то ­
го, являются они внутренними или внешними .
Как показано в листинге 10.3, ко всем внешним ссылкам
можно добавить класс; затем для этих ссылок можно создать
стиль, используя объединенный селектор класса и псевдо­
класса. Результаты выполнения данного кода представлены
нарис. 10.1 .
Листи н г 10 .3 . Код CSS, демонстрирующий объединенный
селектор класса и псевдо класса
a:link
{
color: Ыuе;
a:visited
{

90 Урок 10
color: purple;
a.external:link
{
color: red;
font- we i ght: bold;
a.external:visited
{
color : Ыасk;
font- we ight : bold;
Текст абзаца текст абзаца ~абзаца.
Рис.10.1. Разница между а : linku а. external: link
Стилевое оформление ссылок
с фоновыми изображениями
Развивая идеи , использованные в предыдущем примере,
можно создать небольшую пиктограмму за каждой внешней
ссылкой .
Первый этап реализации этой идеи состоит в создании стан­
дартных правил для требуемых состояний ссылки. В данном
случае можно использовать а: link, а :visitedи а : hover .
Затем добавляются три новых состояния (для ссылок, стиль
которых задан с помощью "внешнего" класса) : а . external:
link, а. external :visitedи а. external :hover.
В каждом случае к ссылке добавляется фоновое изображе­
ние. Изображение устанавливается с параметром no -repeat ,
поэтому оно не повторяется по фону всей ссылки . Положение
устанавливается равным 100%, т.е . правый край изображения
сопоставляется с правым краем ссылки.
Для всех трех состояний используется одно фоновое изо­
бражение. Для каждого из этих состояний необходимо изме­
нить вертикальный параметр background-position. Это оз­
начает, что загружается и заносится в кэш одно изображение,

Стилевое оформление ссылок 91
поэтому, если требуется изображение для реализации визу­
ального выделения, никакой задержки не наблюдается.
Состояние а: link устанавливается равным О; состояние
a:visited - равным -100рх; состояние а :hover - равным
-200рх. Фоновое изображение показано на рис. 10.2 .
Рис.10.2. Фоновое изображе­
ние, используемое в стилевом
оформлении ссылки . external
Наконец, чтобы отодвинуть содержимое ссылки от фоно­
вого изображения, используете.я заполнение, как показано
в листинге 10.4 (рис. 10.3).
Листинг 10.4 . Код CSS, содержащий разметку для
стилевого оформления ссылки . external
а: link
{
color: Ыuе;
a :visited
{
color: purple;
a:hover
{
color: red;
a.external:link
{
background: url(chapterlO.gif) no-repeat 100% О;
padding-right: 20рх;
a.external:visited

92 Урок 10
background: url(chapterlO.gif) no-repeat 100 % -lOOpx;
padding-ri ght: 20рх;
а· . external: hover
{
background: url(chapterlO.gif) no -repeat 100 % - 200рх;
padding-right: 20рх;
Текст абзаца текст абзаца текст ~абзаца.
Рис. 10.3 . Ссылка
. external с фоповым изо ­
бражепием
Удаление подчеркивания
и применение границ
Для некоторых пользователей (ос обенно имеющих плохое
зрение) стандартное подчеркивание ссылки может оказаться
трудночитаемым. Особенно это справедливо для ссылок, со­
держащих курсивный текст.
Одним из решений данной проблемы является отключение
подчеркивания текста и использование границ.
Первый шаг заключается в установке значения text-
decoration равным none. Это отключает подчеркивание
ссылок.
Далее необходимо раскрасить состояния. В данном случае
цвет . а: link устанавливается синим , а : visited- фиолето­
вым, а а: hover - красным .
Наконец к каждому состоянию с помощью border-bottom
добавляются границы, как показано в листинге 10.5 . Чтобы
контролировать расстояние между подчеркиванием и содержи­
мым (если это требуется), можно добавить свойство padding-
bottom(pиc. 10.4).

Стилевое оформл ение ссылок 93
Листинг 10.5 . Код CSS, устанавливающий стилевое
оформление ссылок с границами
а
{
text-decoration : none ;
a:link
{
color: Ыuе;
Ьorder-Ьottom : lpx solid Ыuе;
a:visited
{
color: purple;
border-Ьottom : lpx solid purple;
a:hover
{
color: red ;
Ьorder- Ьo ttom : lpx solid red;
Стандартное
подчеркивание ссьшок
Текст абзаца текст абзаца текст
абзаца .
Ссьпжи с подчеркиванием
ПО НИЗУ IрdНJЩЫ
Текст абзаца текст абзаца текст абзаца.
Рис.10.4. Разница между ссылками с под ­
ч,еркиванием и ссылками с заданным свой­
ством border - bottom

94 Урок 10
Увеличение активной области
ссылок
Некоторым пользователям (особенно с нарушенными мо­
торными навыками) может быть трудно щелкать на ссылке .
С помощью CSS активную площадь ссылок можно увеличить.
Для начала необходимо добавить . Sern заполнения над
и под элементом <а>, чтобы увеличить активную область
ссылки. Для этого используется команда padding: . Sern О;.
Далее элемент <а> необходимо установить со_ свойством
position: relative, что не позволит заполнению "перепо­
лзти" на окружающий текст, как показано в листинге 10.6
(рис. 10.5).
Листинг 10.6 . Код CSS, содержащий стили, увеличивающие
активную область ссылок
а
{
padding: .4em О;
position:relative;
z - index: 1;
background: yellow;
Обычные ссьпжи
Текст абзаца текст абзаца текст абзаца текст,абзаца.
Ссьпжи с увеличенной акrивной
областью
Текст абзаца текст абзаца текст абзаца текст абзаца.
--
--
Рис.10.5. Разни_ца между стандартной обла­
стью ссылки и увеличенной активной областью
~=-=-nттnп m:::es
sжп:~

Стилевое оформление ссылок 95
Чтобы визуализировать увеличенную область ссылки, для
элемента <а> можно задать цвет фона. Перед использованием
в реальной ситуации этот цвет удаляется .
Более подробное объяснение данной техники можно найти
на WеЬ-сайте Дэвида Бентона (David Benton) по адресу
http : / /www-. dЬenton. corn/go/ chronicles/2 004 / 08 /22 /
fitts - law- and- text - links/ .
Резюме
Из этого урока вы узнали, как создавать стили для ссылок
и псевдоклассов. Вы научились применять фоновые изображе­
ния и границы к элементу <а>. Кроме того, вы узнали, как уве­
личить активную область ссылок, чтобы сделать их более дос ­
тупными. В следующем уроке вы научитесь размещать и приме­
нять стилевое оформление к изображению и его подписи .

Урок 11
,,
~
-
--
--
ш, ~2'
Расположение ·· ·
изображения и его
подписи
Из этого урока вы узнаете, как размещliть изображение
и его подпись и задавать для них стил и.
Оболочка для изображения
И ПОДПИСИ
Первое, что нам необходимо сделать, - создать вокруг
изобр ажения и подписи контейнер-оболочку, чтобы эту пару
элементов · можно было переносить вместе. Для решения за­
дачи можно и с поль з овать множес т во элементов, например
абзацы, списки и даже списки определений. Тем не менее
в данном уроке мы будем использовать <di v>, как показано
в листинге 11.1 .
. Листинг 11.1. Код HTML, содержащий разметку
для ко нте йнера, изображения и его подписи
<d i v class="imagecaption">
<i mg src= "chapt erll.gif" alt="">
А f l ower from my garden.
</div>
<р>
_
Lorem ipsum dolor sit amet ...
</р>
\

98 Урок 11
Чтобы гарантировать, что вы не захватите все элем енты
<div> на странице, в се л ек тор необходимо включить класс,
как показано в листинге 11.2 .
В данном случае мы используем именно класс, а не иден­
тификатор, поскольку на странице может обрабатыватьс я не­
сколько "плавающих" изображений с подпи сями.
Листинг 11.2. Код CSS, иллюстрирующий селекторы
для стилевого оформления контейнера
div.imagecaption {...}
div.imagecaption i mg {...}
"Плавающий" :контейнер
Чтобы переместить контейнер вдоль правого края окна
браузера , следуе т ис пользов ать св о йство float : right .
Для "плавающего" контейнера необходимо задать шири­
ну. В данном случае используется свойство width: 182рх .
Почему ширина такая странная? Изображение внутри
данного конт ейнера имеет ширину 18 Орх. Ниже в этом уроке
для изображения будет задана граница шириной l px. Шири­
на правой границы (lpx), ширина левой границы (lpx) и ши­
рина изображения (180рх) в сумме дают 182рх.
Далее можно создать немного пустого места вокруг кон ­
тейнера, чтобы текст и другие элементы не слипались
(рис . 11 .1). Для этого можно указать правое, нижнее и левое
поля контейнера, как показано в листинге 11 .3 .
Ли стин г 11 . 3 . Код CSS, определяющий "плав'ающий"
контейнер
div . imagecaption
{
float: right;
width: l82px;
margin: О lem lem lem;
display: inline;

Расположение изображения и его подписи 99
Текст абзаца текст
абзаца текст абзаца
текст абзаца текст
абзаца текст абзаца
текст абзаца текс~
абзаца текст абзаца
текст абзаца текст
абзаца текст абзаца Цветок из моего сада.
текст· абзаца текст
абзаца текст абзаца текст абзаца текст абзаца
текст абзаца текст абзаца текст абзаца текст
абзаца текст абзаца.
Рис.11.1. "Плавающий" контейнер

100 Урок 11
Применение заполнения, цвета
фона и фонового изображения
Расположив контейнер, можно заняться его внешним
видом, используя свойства padding, background - image и
background-color.
Сначала к контейнеру необходимо применить заполнение,
чтобы создать пустое место вокруг рисунка и подписи. Чтобы
задать верхнее, правое, нижнее и левое значения заполнения,
можно использовать сокращенную форму записи свойства
padding . Всем сторонам должно быть присвоено значение
l Opx, кроме верхней, которой присвоено значение 70р х. В ре­
зультате получится пустое пространство вокруг изображения.
Фоновое изображение можно задать с помощью
background -image: ur l (chapterll . g i f), как показано на
рис. 11.2 .
Чтобы изображение не повторялось по всей фоновой об­
ласти контейнера, необходимо правильно установить режим
повтора и зображения. В нашем случае изображение должно
повторяться по оси х, поэтому используется свойство
background-repeat : repeat-x .
Рис . 11.2 . Фоновое изображение
Фоновое изображен ие необходимо выровнять по нижней
грани це контейнера. Для этого можно присвоить свойству
v ertical зн ачение 100%, при этом нижняя граница изобра­
жени я будет помещена рядом с нижней границей области за­
полн ения. Соответствующее объявление выглядит . как
backgro und-po sition : О 100%.
Цвет фона можно за,п;ать с помощью свойства background-
color : #036 .
Все названные объявления фона можно собрать в одно,
как показано в листинге 11.4 . Результаты выполнения дан­
ного кода иллюстрируются на рис. 11.3 .

Расположение изображения и его подпис1;1 101
Листинг 11.4. Код CSS, устанавливаl()щий заполнение, цвет ­
фона и фоновое изображение
div.imagecaption
{
•
float : right;
width: 182рх ;
margin : О lem lem lem;
display: inline;
padding: lOpx lOpx 70рх lOpx;
Ьackground: #036 url(chapterll.gif) repeat-x О 100%;
Текст абзаца
текст абзаца
текст абзаца
тек.ст абзаца
текст абзаца
текст абзаца
текст абзаца
текст абзаца
текст абзаца
текст абзаца
текст абз аца
текст абзаца
текст абзаца
текст абзаца текст абзаца текст абзаца текст
абзаца текст абз аца текст абзаца текст абз аца
Рис.11.3. Коптейпер с заполпепием
и фопом

102 Урок 11
Стилевое оформление подписи
Следующий шаг- применить стили к тексту подписи .
Начнем с цвета .
Существует множество способов задания, например, белого
цвета: #fff, #ffffff, rgb(255,255,255) и rgb(100%,100%,
100%) . В нашем случае будет использоваться трехзначное шест­
надцатеричное представление color: #fff. _
Текст можно выровнять по левому и правому краям, по
центру и по ширине. Мы выбрали вариант text-align :
center, ка к показано в листинге 11 .5 . Результаты выполне­
ния данного кода представлены на рис . 11.4 .
Листинг 11.5 . Код CSS со стилевым оформлением подписи
div . imagecaption
{
float : right;
width: 182рх;
margin: О lem lem lem;
display: inline;
padding : 10рх 10рх 70рх 10рх;
Ьackground: #036 url(chapterll.gif} repeat-x О 100%;
color: #fff;
text-align: center;
Текст абзаца
те кст абзаца
текст абз аца
те кст е~бзаца
текст абзаца
текст абзаца
текст абзаца
тексr абзаца
текст аб:Заца
текст абзаца
текст абзаца
текст абзац~
те~с.ст абзаца
текст абзаца текст абзгща текст 21бэаца текст
абзаца текст абзаца тек.ст абзаца текст абзаца
-
-
Рис. 11.4 . Стилевое оформление подписи
j
1

Расположение изображения и его подписи 103
Стилевое оформление
изображения
Изображение можно снабдить границей.
Существует множество способов задани.я рамки вокруг
изображени.я. Простейший из них - использовать сокра­
щенную форму записи свойства border, показанную в лис­
тинге 11.6 и проиллюстрированную на рис. 11.5 .
Листинг 11.6. Код CSS со стилевым оформлением
изображения
div.imagecaption
{
float: right;
width: 182рх;
margin: О lem lem lem;
display: inline;
padding: lOpx lOpx 70рх lOpx;
background: #036 url(chapterll.gif) repeat-x О 100%;
color: #fff;
text-align: center;
div.imagecaption img
{
Ьorder: lpx solid #fff;
Текст абзаца
текст абзаца
текст абзаца
тек.ст абзаца
текст абзаца
текст абзаца
текст абзаца
текст абзаца
текст абзаца
текст абзаца
текст абзаца
текст абзаца
теt::ст абзаца
текст абзаца текст абзаца текст абзаца те1ест
абзаца текст абзаца текст абзаца текст абзаца
Рис. 11.5 . Конечный результат

104 Урок 11
Расположение подписи рядом
с рисунком
С помощью одних и тех же селекторов и кода HTML мож­
но изменить структуру страницы , чтобы изображение и под­
пись располагались рядом.
Прежде всего, необходимо увеличить ширину контейнера,
чтобы он вмещал новое положение подписи и изображения.
Меняем объявление на wi d th : 3 02р х. Такой ширины долж­
но быть достаточно .
Далее устанавливаем заполнение 10рх для всех сторон, по­
скольку уже не требуется место для фоново го изображения.
Свойства background -imag e , back ground- r e p eat и
background - pos ition также можно удалить, оставив ед ин­
ственное объявление b a ckgroun d : # О36.
Изображение следует прижать к прав ой стороне, чтобы
подпись могла расположиться рядом с ним. В данном случае
ширину определять уже не нужно, поскольку изображение
имеет собственную ширину.
Наконец для изображения необходимо определить поля,
чтобы подпись не вторглась в изображение. Для этого мож­
н о и сп ользовать свой ство margin-right : lem . Получаю­
щийся рез ультат по каз ан в лист инге 11 .7 и проиллюстриро­
ван нарис. 11.6 .
Листинг 11 .7 . Код CSS для расположения рисунка и подпис и
рядом
div. imagecaption
{
float : right;
width: 302рх ;
margin : О lem lem lem;
display: inline ;
paddin g: l Opx ;
Ьackground : # 036;
color : #fff;
d iv. imagecaption img
{
•
float : right;
margin - left : lem;
Ьorder : lpx solid #fff;

Расположение изображения и его подписи 105
Текст абзаца
текст абзаца
текст абзаца
текст абзаца
текст абзаца
текст абзаца
т~кст абзаца
текст абзаца
текст абзаца
тексr абзаца текст абзаца текст абзаца текст абзаца тек
абзаца текст абзаца текст абзаца текст абзаца текст абз;
текст абзаца текст абзаца текст абзаца тексr абзаца.
Рис. 11.6 . Рисунок и подпись расположены рядом
Создание фотоснимка
Другим вариантом является создание простого фотосним­
ка с использованием контейнера и границ.
Первый этап - изменить заполнение на 15рх для верхней,
правой и левой сторон и на 20рх для нижней стороны. Как и
в первоначальном примере, дополнительное место будет ис­
пользовано для фонового изображения.
Для создания иллюзии трехмерного изображения будут
использованы границы. Верхний и левый края получат свет­
лые тонкие границы, а правый и нижний - темные и тол­
стые. Для реализации сказанного можно использовать три
объявления границ, как показано в листинге 11.8 . .·
Листинг 11.8. Код CSS для создания фотоснимка
div . imagecaption
{
float: right;
width: 182рх;
margin: О lem lem lem;
padding: lSpx lSpx 20рх lSpx;
display: inline;
text-align : center;
Ьorder-color: #ССС #999 #999 #ССС;
Ьorder-width: lpx 2рх 2рх lpx;
Ьorder-style: solid;
Ьackgroшid: url(chapterllc.gif) repeat-x О 100%;
div.imagecaption img
{

106 Урок 11
Ьorder-color: #000 #ссс #ссс #000;
Ьorder-width: lpx lpx lpx lpx;
Ьorder - style: solid;
Новое фоновое изображение можно использовать с теми
же настройками, которые были в первоначальной версии.
Наконец к изображению необходимо добавить границы.
Эти границы рисуются цветом, противоположным цвету кон­
тейнера, - более темные границы вверху и слева, более свет­
лые - справа и внизу. Окончательный результат представлен
нарис.11.7.
Текст абзаца текст
абзаца текст абзаца
текст~ абзаца текст
абзаца текст абзаца
текст абзаца текст
абзаца текст абзаца
текст абзаца текст
абзаца текст абзаца
текст абзаца текст
абз аца текст абзаца
текст абзаца текст
Цветок из моеrо С2\д.а.
абзаца текст абзаца текст абзаца текст абзаца т екст
абз аца те кст абзаца.
Рис . 11.7 . Фотосним ок:
Резюме
Из этого урока вы узнали, как создавать контейнер-оболоч ­
ку вокруг изображения и его подписи . После этого вы научи­
лись создав ать "плавающий " контейнер , определять его стиль
с использ ованием ширины, полей, заполнения, фонового изо­
бражения , цвета и выравнивания текста. Кроме того, вы узна­
ли, как пр и менять границы к изображению . В следующем
урок е вы науч итесь создавать фотогалерею.

Урок 12
Создание фотогалереи
В этом уроке вы н,аучитесь создавать фотогалерею, исполь­
зуя ряд "плавающих" элемен,тов <div>. Кроме того, вы уз­
н,аете, как использовать два фоповых изображен,ия для соз­
дапия гибкого коптейпера.
Создание галереи с эскизами
Прежде всего, требуется ряд изображений-эскизов и под­
писей. Каждое изображение и подпись необходимо поместить
внутрь элемента <div>. После этого подпись будет помещена
внутрь элемента <р>, как показано в листинге 12.1 .
Чтобы гарантировать, что вы не захватите все элементы
<div> •на странице, со всеми нужными элементами необхо 0
димо сопоставить одно имя класса.
Листинг 12. 1 . Код HTML, содержащий разметку для галереи
эскизов
<div -class="thumЬnail">
<img src="chapter12c.jpg" alt="">
<р>А flower from my garden</p>
</div>
<div class="thumЬnail">
<img src="chapter12c.jpg" alt="">
<p>White and pinkflower in Spring</p>
</div>
<div class="thumЬnail">
<img src="chapter12c . jpg" alt=" ">
<p>Flower in morning light</p>
</div>
<div class="thumЬnail">
<img src="chapter12c.jpg" alt="">
<р>А close-up of flower petals</p>
</div>
<div class="thumЬnail">

108 Урок 12
<img src="chapter12c . jpg" alt=" ">
<р>А timeless flower </р>
</div>
В этом уроке будут использоваться три селектора . Первый
из них будет направлен на все элементы <div>, содержащие
класс "thumЬnai 1 " .
Второй селектор будет направлен на все изображения
внутри элемента <div>, содержащего класс "thumЬnail".
Третий селектор будет направлен на все элементы <р>
внутри элемента <div>, содержащего класс "thumЬnail".
Данные селекторы показаны в листинге 12.2 .
Листинг 12.2 . Код CSS, иллюстрирующий селекторы,
которые используются в стилевом оформлении контейнера
div.thurnЬnail { ... }
div.thurnЬnail img { ... }
div. thurnЬnail р { ... }
Расположение элементов <div>
Поскольку изображения и _подписи будут располагаться
рядом, требуется "плавающий" элемент <div>. Для этого
можно использовать свойство float: left.
•
Если элемент <div> является "плавающим", для него не­
обходимо задать ширину. В нашем случае используется свой­
ство width: 130рх (вы можете выбрать любое удобное для
вас значение).
Далее можно создать пустое пространство вокруг элемен­
тов <div>, чтобы они не перекрывали друг друга. Для этого
к верхней и нижней границам каждого элемента <div> мож­
но прикрепить поля.
Наконеr,, к <div> будет добавлено фоновое изображение,
показанное на рис. 12.1 . Как видно на рисунке, изображение
очень длинное, поэтому оно может "расти", . вмещая большие
подписи.
Указанное фоновое изображение следует задать с парамет­
ром · nо-rереаt, поскольку вам не нужно, чтобы оно повторно
появилось под подписью. Соответствующий код CSS показан
в листинге 12.3 и проиллюстрирован на рис. 12.2 .
Ссс

Создание фотогалере и 109
Рис. 12.1 . Фоновое изображение ,
используемое элементом <di v >
Листинг 12 .3 . Код CSS , представляющ ий "плавающий "
контейнер
diV. thumЬnail
{'
wi dth: 130рх;
float: left;
margin: О lOpx lOpx О;
Ьackground: url(chapter12a.gif) no-repeat;
j
~еток из моег
fада
Рис.12.2. Размещенные контейнеры

110 Урок 12
~719 ''Текучая" и_фикс~р_ов~!"lн~я.,~тр:!~ры
Созданные вами '''пJiаЕ\ающ '''эл
' <div> б
располагаfься р
вашего .браузер
.Еслиу
скол
Стилевое оформление
изображения
Сейчас изображения жестко связаны с границами своих
контейнеров - элементов <div> . Чтобы дать им определен­
ную свободу, можно установить поля сверху и слева, исполь­
зуя свойство mаrg in : 10рх О О 10рх.
Кроме того , можно добавить границу к изображению, ис­
.пользуя
свойство border : lpx solid #777, как показано
в листинге 12.4 . Результаты выполнения данного кода пред­
ставлены на рис . 12.3 .
Листин г 12.4. Код CSS со стилевым оформлением
и зображения
div. thumЬnail
{
width : 130рх;
float : left;
margin: О lOpx lOpx О;
~..,.....
~ 71 .,.,,,....,_. -- 3Ш
АЪЕL
1.З__;
___
.

Создание фотогалереи 111
background: url (chapt erl2a. gif) no.- repeat;
}
div.thumЬnai l img
{
margin: 10рх О О lOpx;
Ьorder: lpx solid # 7 77 ;
,.
'
i
fада
~ fада
:
Рис . 12.3. Изображепия с переопределеппы.м
стилем
Стилевое оформление элемента
абзаца
Большинство браузеров представляет стандартные эле­
менты <р> с полями l em сверху и снизу . Чтобы убрать эти по­
ля, используйте свойство margin: О.
Сейчас абзац располагается под изображением , но все еще
вплотную к границе контейнера. Чтобы добавить пустое про­
странство , следует использовать заполнение. В данном случае
мы применяем 20 пикселей заполнения справа , 30 пикселей
заполнения снизу и 10 пикселей - слева.
Далее необходимо добавить фоновое изображение, чтобы
завершить иллюзию рамки, отбрасывающей тень. Данное
изображение , показанное на рис. 12.4, будет располагаться
над элементом <р>.

112 Урок 12
Для изображения необходимо задать свойство no-repeat,
чтобы оно не повторялось в длинной подписи. Вертикальное по­
ложение фона устанавливается равным 100%, в результате чего
нижняя граница изображения будет выровнена по нижней гра­
нице элемента <р>. Соответствующий код показан в листин­
ге 12.5, результат его выполнения иллюстрируется на рис. 12.5 .
Рис.12.4. Фоновое изображение,
используемое элементом <р>
Листинг 12.5 . Код CSS, определяющий стилевое
оформление элемента <р>
div. thumЬnail
{
width: 130рх;
float: left;
margin: О lOpx lOpx О;
background: url(chapter12a.gif) no - repeat;
div.thumЬnail img
{
border: lpx solid #777;
margin: lOpx О О lOpx;
div.thumЬnail р
{
margin: О;
padding: О 20рх ЗОрх lOpx;
Ьackground: url(chapter12b.gif) no-repeat О 100%;

Создание фотогалереи 11 3
Рис.12.5. Окончательный вид галереи
эскизов
Принудительный перевод строки
Иногда требуется .разместить несколько эскизов в одной
строке. Для этого необходимо создать новый класс, а затем при­
менить его к конкретным элементам <div> . Данный новый
класс будет иметь одно объявление - clear: left. Эта коман­
да переведет элемент <div> вниз на новую строку, расположен­
ную ниже нижней границы всех предшествующих элементов
<div>. Соответствующий код CSS показан в листинге 12.6 .
Листинг 12.6 . Код CSS с принудительным переводом строки
div.thшnЬnail
{
width: 130рх;
float: left;
margin: О lOpx lOpx О;
background: url(chapter12a.gif) no-repeat;
div.thшnЬnail img
{
Ьorder: lpx solid #777;
margin: 10рх О О lOpx;

114 Урок 12
div. thumЬnail р
{
margin: О;
padding: О 20рх ЗОрх lOpx;
back~round: url(chapter12b.gif) no-repeat О 1 00%;
.clear
{
clear: left;
Описанный новый класс требуется добавить ко всем элемен­
там <div>, которые должны начинаться с новой строки. Про­
ще всего добавить этот новый класс, включив его в сущест­
вующий атрибут класса. Таким образом, class="thumЬnail"
можно заменить классом class="thumЬnail clear", как по­
казано в листинге 12. 7 . Окончательный результат представлен
на рис. 12.6 .
Листинг 12.7 . Код НТМ L с новым классом
<div class="thumЬnail">
<img src="chapter12c.jpg" alt="">
<р>А flower from my garden</p>
</div>
<div class="thumЬnail">
<img src="chapter12c.jpg" alt="">
<р>А flower from my garden< /p>
</div>
<div class="thumЬnail">
<img src ="chapter12c.jpg" alt="">
<р>А flower from my garden</p>
</div>
<div class="thumЬnail clear">
<img src="chapter12c.jpg" alt=" ">
<р>А flower from my garden</p>
</div>
<div class="thumЬnail">
<img src="chapter12c.jpg" alt=" ">
<р>А flower from my garden</p>
</div>
1
1

Создание фотогалереи 115
Рис.12.6. Галерея эскизов
Размещение подписей рядом
Используя те же селекторы и код HTML, можно изменить
структуру страницы так, чтобы изображения и их подписи
располагались рядом.
Чтобы реализовать эту идею, вначале необходимо увели­
чить ширину элемента <div>, чтобы он, помимо изображе­
ния, вмещал подпись. Для этого соответствующее объявление
заменяется объявлением width : 2 5 Орх.
Далее к <div> добавляются нижнее заполнение (свойство
padding-bottom) и граница (border).
Объявление background можно убрать вообще .
Изображение должно "всплывать" влево, чтобы подпись
могла располагаться рядом с ним . Ширину в данном случае
определять не нужно, поскольку изображение имеет собст­
венную ширину.
Наконец изображению требуется небольшое поле, чтобы
подпись не перекрывала его. Как показано в листинге 12.8,
для всех сторон, кроме нижней, величину поля можно вы­
брать равной lOpx. Результаты выполнения данного кода
представлены на рис. 12.7 .

116 Урок 12
Листинг 12.8. Код CSS для размещения подписи рядом
с рисунком
div. thumЬnail
{
float: left;
width: 250рх;
margin: О lOpx 10рх О;
padding-Ьottam: 10рх;
Ьorder: lpx solid #777;
}
div.thumЬnail img
{
float: left;
Ьorder: lpx solid #777;
margin: lOpx lOpx О lOpx;
}
div. thumЬnail р
{
margin: О;
padding: 10рх;
Цвет ок из
мое го с~а
Цветок из
моего сг~да
Цветок из
моего сада
Цвето к. из
моего сада
Цветок из
моего сада
Рис. 12.7 . Размещение подписи рядом с рисунком
Резюме
Из этого урока вы у31:rали, как сделать "плавающими" ряд
элементов <div> и определить для них стиль отображения.
Кроме того, вы научились принудительно начинать новую •
строку с помощью c l ear. В следующем уроке вы научитесь
определять стиль цитаты.

Урок · 13
,,'+
·
~
...
~
'"'
--
~.
.
1-U
Стилевое офорЙление
блока цитаты
В этом уроке вы научитесь определять стил ь блока цита- .
ты, используя два фоновых изображения. Наша цель - соз­
дать цитату внутри двух больших (графическ их) кавыч ек.
Применение элемента
<Ьlockquote>
Элемент < Ьl oc kqu ote> часто используется для создания
текста с отступом. Это недопустимо! Его следует применять
только для разметки длинных цитат, состоящих из элементов
блочного уровня.
В данном уроке требуются цитата и источник или автор цита­
ты . Данные две строки можно пометить как абзацы , а затем по­
местить внутрь элемента <Ьl ockquote> . Абзацу, содержащему
информацию об источнике, будет присвоен класс source. В дан­
ном случае используется именно класс, а не идентификатор, по­
скольку может потребоваться визуально выделить на одной
странице несколько элементов <Ьlockquote> .
Более подробную информацию об источнике (например,
WеЬ - адрес) можно добавить в элемент <Ьlockquote > , ис­
пользуя атрибут cite, как показано в листинге 13.1 .
Листинг 13. 1. Код HTML, содержащий разметку
дл я иллюстрации ци таты
<Ыockquo t e cite=" http://www.s i tename.com/quote / smith.htm">
<р>
Lorem i psum dol or ...

118 Урок 13
</р>
<р class="source">
John Smith
</р>
</Ьlockquote>
Чтобы определить стиль элемента <Ьlockquote> и его со­
держимого, используются три селектора.
•
•
Селектор типа, используемый для отбора всех экземп­
ляров <Ьlockquote> на данной странице.
Селектор-потомок, используемый для отбора всех эле­
ментов <р>, располагающихся внутри <Ьlockquote>.

ws
rт
а
WМIW
Стилевое оформление блока цитаты 119
•
Еще один селектор-потомок, используемый для отбора
всех элементов <р>, стиль которых определен с помо­
щью класса source.
Данные селекторы показаны в листинге 13.2 .
Листинг 13.2. Код CSS, илл!_Острирующий селекторы,
которые используются в стилевом оформлении элемента
<Ьlockquote>
•
Ьlockquote { ... }
Ыockquote р { ... }
Ьlockquote p.source { ... }
·Стилевое оформление элемента
_<Ьlockquote>
По умолчанию элементы <Ьlockquote> представляются
с отступами слева и справа. Такое положение можно изме­
нить, переустановив поля. В данном случае верхнее и нижнее
поля устанавливаются равными lem, а левое и правое - рав­
ными О. Для реализации этого можно использовать- сокра­
щенную форму объявления полей - marg in: 1 em О.
Далее необходимо применить границу к элементу
<Ьlockquote>, чтобы отделить его от другого содержимо­
го страницы. Используем светло-серую границу шириной
1 пиксель: border: lpx solid #ddd.
Первое фоновое изображение будет применяться непосред­
ственно к элементу <Ьlockquote>. Соответствующее объяв­
ление выглядит следующим образом: background-image:
url(lessonlЗ.gif).
Выбранное изображение будет размещено в левом верхнем
углу элемента <Ьlockquote>. Для этого координатам по осям
х и у присваивается значение 5 пикселей с помощью объявле­
ния background-position: 5рх 5рх.
Чтобы запретить изображению повторяться по всему эле­
менту <Ьlockquote>, добавьте свойство background-repeat:
no-repeat.
Указанные три объявления свойств фона можно объеди­
нить в одно, используя background: url (lessonlЗ .gif)

120 Урок 13
5рх 5рх no-repeat. Получающееся в результате фоновое
изображение показано на рис. 13.1 .
Рис.13.1. Фоновое изображение, соот ­
несенное с эле.ментом <Ыockquo te>
Теперь изображение находится на месте, но текст распола­
гается поверх него. Чтобы это исправить, необходимо доба­
вить заполнение вверху, <Ьlockquote>, используя padding -
top : ЗОрх, как показано в листинге 13.3 . Результаты вы­
полнения данного кода представлены на рис. 13.2.
Листинг 13.3 . Код CSS со стилевым оформлением элемента
<Ьlockquote>
Ыockquote
{
margin: lem О;
Ьorder: lpx solid #ddd;
Ьackground: url(lesson13.gif) Spx Spx no-repeat;
padding-top: 30рх;
Текст абзаца текст абзаца текст абзаца текст
:абзаца текст абзаца текст абзаца текст абзаца '
h"екст абзаца текст абзаца текст абзаца текст
!аб'заца текст абзаца текст абзаца текст абзаца
1'екст абзаца те кст абзаца текст абзаца текст
!абзаца текст абзаца текст абзаца текст абзаца
~екст абзаца текст абзаца.
Джон Смит
.,Р~с. 1з.2: Эле.мент <bibckqu b.t'e> ё· пе­
реопределенным стилем

Стилевое оформление блока цитаты 121
Стилевое офо-рмление абзаца
Далее необходимо добавить заполнение к левой и правой гра­
ницам всех абзацев, принадлежащих элементу <Ьlockquote>.
Таким образом, содержимое отодвинется от границ. Используем
свойство padding: О 70рх, как показано в листинге 13.4. Ре­
зультаты выполнения данного кода представлены на рис. 13.3 .
Листинг 13.4 . Код CSS со стилевым оформлением абзаца
Ыockquote
{
margin: lem О;
Ьorder: lpx sol id #ddd;
Ьackground: ur l ( l essonlЗ.gif) Spx Spx no-repeat;
padding-top: ЗОрх;
Ыockquote р
padding: О 7 Орх;
Текст абзаца текст абзаца
текст абзаца текст абзаца
текст абзаца текст абзаца
текст абзаца текст абзаца
текст абзаца текст абзаца
текст абзаца текст абзаца
текст абзаца текст абзаца
текст абзаца текст абзаца
текст абзаца текст абзаца
текст абзаца текст абзаца
текст абзаца текст абзаца
текст абзаца.
Джон Смит
Рис. 13.3 . Абзац с переопределенным
стилем

122 Урок 13
Стилевое оформление класса
source
Теперь стили элемента <Ьlockquo t e> и абзацев определе­
ны , и можно сосредоточиться на абзаце класса source. С по­
мощью данного абзаца мы поместим в правом нижнем углу
цитаты второе фоновое изображение.
Чтобы задать изображение, режим повтора и положение
изображения , можно использовать сокращенную форму . запи­
си: background: url(lessonlЗa . gif) n o -repeat 100%
1 00% . Положения по осям х и у должны устанавливаться рав ­
ными 100%, чтобы правый нижний угол изображения находил­
ся в правом нижнем углу абзаца . Чтобы изображение не повто­
рялось под тексто м, задается режим no - rep e a t . Использован ­
ное нами фоновое изображеl,Jие показано на рис . 13.4 .
''
Рис .1 3 . 4. Фоновое изображение, соот­
несе нное с а бзаце м ·кл а сса source
Чтоб ы отодв и нуть текст вверх на 30 пикселей и не дать
ему перекрыть фоновое изображение, используйте padding-
bottom : ЗОрх.
Верхнее изображение располагается на 5 пикселей к цен­
тру от в ерхней и левой границ элемента <Ьlockquote> . Что­
бы создать такой же эффект для ни жнего изображения, до­
бавьте поле 5рх к правой и нижней границам абзаца класса
source, используя margin: О 5рх 5рх О.
Наконец, чтобы отличать измененный нами текст от дру­
гих цитат в блоке, можно выровнять его по правой границе
и представ ить курсивом. Для этого используются свойства
tex t-align : right и font-style: italic, как показано
в листинге 13 .5 . Результаты выполнения данного кода пред­
ставлены на рис. 13.5.
::nn:;;;,,

Стилевое оформление блока цитаты 123
Листинг 13.5. Код CSS со стилевым-оформлением абзаца
класса source
Ьlockquo t e
{
margin: lem О ;
border: lpx solid #ddd;
background: url(lesson13.g i f) Spx Spx no - repeat;
padding- top: ЗОрх;
Ыockquote р
padding: О 70рх;
Ыockquote p.sou rce
{
Ьackground: url(lessonlЗa.gif) no-repeat 100% 100%;
padding-Ьottom: ЗОрх;
margin: О Spx Spx О;
text-align: right;
font-style: italic;
'
Текст абзаца текст абзаца
текст абзаца текст абзаца
текст абзаца текст абзаца
текст абзаца текст абзаца
текст абзаца текст абзаца
текст абзаца текст абзаца
текст абзаца текст абзаца
текст абзаца текст абзаца
текст абзаца текст абзаца
текст абзаца текст абзаца
текст абзаца текст абзаца
текст абзаца.
Джон.Смит
Рис.13.5.Абзац класса source с пере­
определенным стилем

124 Урок 13
Создание другого варианта ,
С помощью тех же селекторов и кода HTML можно изме­
нить стиль так, чтобы элемент <Ыockquote> и его содержи­
мое выглядели совершенно иначе.
Для примера создадим элемент <Ыockquote> фиксиро­
ванной ширины с одним большим фоновым изображением,
как показано на рис 13.6 .
[1
Рис.13.6. Новое фоновое
изображение
В селекторе Ыockquote необходимо изменить фоновое
изображение и его положение. В данном случае положения по
осям х и у устанавливаются равными О (это означает, что изо­
бражение будет располагаться в левом верхнем углу элемента
<Ьlockquote> ).
Объявление padding-top меняется с З Орх на lpx, чтобы
зафиксировать поля абзаца.

Стилевое оформление блока цитаты 125
Селектор Ьlockquote. р меняется: с padding: О 7 Орх на
padding: О lem О _ ВОрх. Данное новое заполнение отодви­
нет текст от левой границы элемента <Ьlockquote>, освобо­
див место для нового фонового изображения.
Селектор Ыockquote р. source меняется еще больше.
Фоновое· изображение удаляете.я совсем. Пол.я устанавлива­
ются равными О. К верхней границе абзаца добавляется -белая
граница шириной 5рх, отделяющая источник от цитаты. За­
полнение меняете.я с padding - bottom: ЗОрх на padding:
. 5em .5em .5em80рх.
Наконец свойство text-align: right удаляете.я и добав­
ляется свойство background: # 3 3 6. Результаты изменений
показаны в листинге 13.6 . Результаты выполнения данного
кода представлены на рис. 13. 7.
Листинг 13.6 . Код CSS для другого варианта стиля
<Ыockquote>
-
Ьlockquote
{
margin: lem О;
Ьorder: lpx solid #000;
Ьackground: #000 url(lessonl3b.gif) no-repeat О О;
padding-top: lpx;
color: #fff;
width: 500рх;
Ьlockquote р
{
padding: О lem О 80рх;
Ыockquote p.source
{
margin: О;
border-top: 5рх solid #fff;
padding: .Sem .Sem . Sem 80рх;
Ьackground: #336;
font-style : italic;

126 Урок 13
Q Текстабзацатекстабзацатекстабзацатекстабзаца
текст абзаца текст абзаца текст абзаца текст абзаца
текст абзаца текст абзаца текст абзаца текст абзаца
текст абзаца текст абзаца текст абзаца текст абзаца
текст абзаца текст абзаца текст абзаца текст абзаца
текст абзаца текст абзаца текст абзаца.
Джон Cuum
Рис. 13.7 . Один из вариантов оформления стиля
·<Ыockquote>
Резюме
Из этого урока вы узнали, как поместить длинную цитату
и ее источник в элемент <Ьlockquo t e>, а затем оформить их
различными стилями. В следующем уроке вы научитесь раз­
мечать таблицы и определять для них стили.
===
-
~
c:rrr::--,-9::SИ .,,

•--a"crcr;az:nr:,-,-wпг::a.::;;;....,,_.-.___,rn..., . _. , ,., .,'"""_ _,,,__,,...,__,.,,.IE'_...,....,i:;.ж;, ..
..-ro:,c.~;:;a;.~,.,_-..a._,._"""'_..,..
Урок 14
Стилевое оформление
таблицы
Дан,н,ый урок разбит н,а две части. Вн,ачале вы н,ауч итес ь до­
бавлять к дан,н,ым элемен,ты, повышающие их доступ н,ос ть
для программ чтен,ия с экран,а, а затем - определять стили
разл ичн,ых эл емен,тов таблицы.
Стартовая таблица
По мере роста популярности CSS наблюдается все более
сильная тенденция к отказу от таблиц как средства разметки
контекста. Тем не менее было время, когда таблицы пред­
ставляли собой лучшее средство разметки , особенно для дан­
ных, визуализируемых в форме матрицы. В данном уроке мы
будем использовать для иллюстрации таблицу, представлен­
ную в листинге 14 .1 .
Листинг 14.1. Код HTML, содержащий разметку таблицы
данных
<tаЫе>
<tr>
<td>Item</td>
<td>Threaded screws </td>
<td>Flat nails</td>
<td>Dyna - bolts </td>
<td>Spring washers</td>
</tr>
<tr>
<td>l kg</td>
<td>$2.50</td>
<td>$3 . 50</td>
<td>$4.50< / td>
<td>$2 . 50 </ td>

128 Урок 14
</ tr>
<tr>
<td>2kg</td>
<td>$3.00 < /td>
<td>$4 .00</ td>
<td>$5 . 00</td>
<td>$3 . 00 </td>
</ tr>
< tr>
< td>Зkg</ td>
<td>$3 . 50</td>
< td>$4. 50 </ td>
<td>$5 . 50</td>
< td>$3. 50< / td>
</ tr>
< tr>
<td>4 kg</ td>
<td>$4 .00</t9->
< td>$5.00< / td>
<td>$6 . 00</td>
<td>$4. 00 </ td>
</ tr>
</t аЫ е>
Добавление к таблице
элементов, повышающих
ее доступность
:К таблице можно добавить несколько элементов, которые
сделают ее более доступной .
В сложных таблицах следует использовать атрибут summary,
показанный в листинге 14. 2, поскольку он предлагает четкое
описание того, что представляет таблица. Он не отображается на
экране современных (созданных согласно существующим стан­
дартам) WеЬ-браузеров, но его можно отображать на других уст­
ройствах навигации в Web - ручных устройс,твах, сотовых теле­
фонах и т.д. Чтобы сделать код доступным для пользователей,
применяющих невизуальные устройства, используется атрибут
summary.

Стилевое оформление таблицы 129
Листинг 14.2 . Код HTML, демонстрирующий использование
атрибута surnmary
<tаЫе S1.UШl\ary="TaЬle of screws, Flat nails, Dyna-bolts and
Spring washers, in kilos">
В любой таблице данных должен присутствовать элемент
caption, кратко описывающий содержимое таблицы. В от­
личие от surnmary, элемент caption отображается на экране
(обычно отцентрированным над таблицей) . Как показано в
листинге 14.3, данный элемент должен располагаться непо­
средственно после тега, открывающего таблицу .
Листинг 14.3. Код HTML, демонстрирующий использование
элемента caption
<caption>
Pricing for threaded s~rews , flat nails, dyna-bolts and
spring washers
</caption>
Элемент <th>, показанный в листинге 14.4, должен ис­
пользоваться для определения строки или столбца с заголов­
ком в таблице данных. Таким образом, создаются связи меж­
ду элементами <th > и <td>, что очень важно для невизуаль­
ных 'устройств.
Листинг 14.4 . Код HTML, демонстрирующий использование
элементов <th>
<th>Item</th>
<th>Threaded screws </th>
<th> Flat nails</th>
<th>Dyna - bolts </th>
<th>Spring washers</th>
Элементь1 <thead>, <tbody> и <tfoot>, показанные в лис­
тинге 14.5, используются для группировки строк в таблицы.
Элементы <thead> и <tfoot> должны содержать информацию
о столбцах таблицы, а <tbody> - собственно данные таблицы.
Листинг 14.5 . Код HTML, де м о н стр ирующий использование
элементов <thead> и <tbody>
<thead>
<tr>
<th >Item</ th>
<th>Threaded screws </th>

130 ~рок 14
<th>Flat nails</th>
<th>Dyna - Ьolts </th>
<th>Spring washers</th>
</tr>
</thead>
<tЬody>
<tr>
<th>l kg</th>
<td>$2.50</td>
<td>$3.50</td>
<td>$4.50</td>
<td>$2.50</td>
</tr>
</tbody>
Атрибут abbr, показанный в листинге 14.6, используется
для создания сокращенной формы содержимого важных ячеек.
Атрибут abbr важен для людей, использующих программы
чтения с экрана, которым может потребоваться, чтобы содер­
жимое ячейки громко считывалось несколько раз подряд.
Листинг 14.6 . Код HTML, иллюстрирующий использование
атрибутов abbr
<tr>
<th> Item</ t h>
<th aЬЬr="screws" >Threaded screws </ th>
<th aЬЬr= " nails" > Flat nails</ th>
<th aЬЬr =" Ьo lts" >Dyna-Ьolts </ th>
<th aЬЬr=" washer s " > Spring washers</ th>
</ tr>
С помощью атрибутов headers и id ячейки таблицы свя­
зываются с соответствующим заголовком . Каждому заголов­
ку должен присваиваться уникальный идентификатор id.
После этого , как показано в листинге 14.7 , к каждому эле­
менту <td> добавляется атрибут headers .
Листинг 14.7. Код HTML, демонстрирующи й и спользование
атрибутов headers и id
< tаЫе summa ry=" TaЫe of screws, Flat nai l s, Dyna-Ьolts and
Spring washers , in kilos" >
<caption >
Pri cing f o r threaded scr e ws, flat nails , dyna-Ьolts
and spring washers
</ caption>
<thead>
<tr>

Стилевое оформление табл ицы 13 1
<th>Item</ t h>
<th id=" screws " aЬЬr= "screws" >Threaded
screws< / th>
<th id= "nails" aЬЬr = "nails " >Flat nails< /th>
<th id= "bolts" aЬbr="bolts">Dyna-Ьolts </ th>
<th id= "washers " aЬЬr= "washers">Spring
washers< / th>
</tr>
</thead>
<tbody>
<tr>
<th i d = "one">l kg</th>
<td headers =" screws one " >$2.50</td>
<td headers="nails one " >$3 . 50</td>
<td header s = "bolts one">$4 . 50</td>
<td header s=" washers one">$2.50 </ td>
< /tr>
<tr>
<th i d="two" >2kg< / th>
<td h e ade rs="screws two">$3.00 </td>
<td header s="nails t wo" >$4 . 00</td>
<td header s="bolts t wo">$5 . 00 </ td>
<t d headers="washer s two">$3.00</td>
</tr>
<tr>
<th id= " three " >Зkg</th>
<td headers =" screws three " >$3 . 50</td>
<t d headers=" nails three ">$4 . 50</ t d>
<td headers= "bolts three " >$5.50</td>
<td headers =" washers three">$3.50</td>
</tr>
<tr>
<th id= "four " >4kg</th>
<td headers= "screws four">$4.00</td>
, <td headers =" nails four">$5 . 00</td>
<td headers = "bolts four " >$6 . 00</td>
<td headers="washers four">$4.00</td>
</tr>
</tbody>
</tаЫе>
Создание селекторов
для формирования стилевого
оформления таблицы
Чтобы определить стиль таблицы и ее содержимого, ис­
пользуются восемь селекторов, как показано в листинге 14.8 .

132 Урок 14
Листинг 14.8 . Код CSS, иллюстрирующий селекторы,
которые используются для создания стиля таблицы
caption { ... }
tаЫе {...}
th, td {...}
tr{...}-
thead th {...}
tЬody th {...}
tr.alternate { . . . }
tr.alternate th { ... }
Стилевое оформление подписи
По умолчанию подпись таблицы отображается над табли­
цей. В большинстве современных браузеров подпись вырав­
нивается по центру, но это положение можно изменить, ис­
пользуя, например, свойство text-align: . left.
Чтобы увеличить отступ между подписью и таблицей,
cвoйcтвymargin-bottom присваивается значение . Sem.
Кроме того, подпись можно сделать немного крупнее, что­
бы она отличалась от шрифта содержимого таблицы. Для это­
го используется свойство font.- weight: bold, как показано в
листинге :i4.9 . Результаты выполнения данного кода пред­
ставлены на рис. 14.1 .
Листинг 14.9 . Код CSS, определяющий стилевое оформление
подписи
caption
{
text-align: left;
margin: О О .Sem О;
font-weight: Ьold;
Цена на IIIYPYПЫ, кровельные rвоэди, болты и пружинные ·
шаибы
Товар Шурупы Кровельные гвозди Болты Пружинные шаибы
1 кr $2,50
$3,50
$4,50 $2,50
2кr $3,00
$4,00
$5,00 $3,00
Зкr $3,50
$4,50
$5,50 $3,50
4кr $4,00
$5,00
$6,00 $4,00
Рис. 14.1. Подпись таблицы с измененным стилем

Стилевое оформление таблицы 133
Стилевое оформление эл.емента
<tаЫе>
Чтобы убрать отступы между ячейками, к элементу
<tаЫе> применяется свойство border-collapse: collapse,
как показано в листинге 14.10.
Листинг 14.1 О. Код CSS, определяющий стилевое
оформление элемента <tаЫе>
captioh
{
text-align: left;
margin: О О .5em О;
font-weight: Ьold;
)
tаЫе
{
Ьorder-collapse: collapse;

134 Урок 14
Стилевое оформление
элементов <th> и <td>
Теперь в стиль элементов <th> и <td> необходимо вклю­
чить правую и левую границы . Поскольку граница будет по­
являться во всех элементах <td> и <t h>, эти элементы можно
сгруппировать в один селектор.
Использование границы лучше использования атрибута
c el lspac i ng; поскольку в любой момент можно, например,
изменить ее цвет или ширину.
Чтобы применить заполнение ко всем ячейкам , используйте
свойство padd i n g : . 5em, как показано в листинге 14.11.
Листинг 14. 11 . Код CSS, о пределя ю щий стил евое
оформление эл е м е нтов <th> и <td>
caption
{
text-align: l eft;
margin: О О .5emО;
font- we ight: Ьold ;
}
tаЫе
{
Ьorder-collapse : co l lapse ;
th, td
{
Ьorder-right: lpx solid #fff;
Ьorder-Ьottom : lpx solid #fff;
padding: . Sem;
Стилевое оформление
элемента <tr>
Как показано в листинге 14.12, стиль элемента <t r> удоб­
но определить с использованием свойства background-
color . Если выбранный нами цвет вам не нравится, вы мо­
жете его изменить. Результаты выполнения данного кода
представлены на рис . 14.2 .
...
:rn -
«а
'"

Стилевое оформл е ние таблицы 135
Листинг 14. 12. Код CSS, определяющий стилевое
оформлен и е элемента <tr>
'
caption
{
text-align: left ;
margin: О О .5em О;
font- weight: Ьold;
}
tаЫе
{
border-collapse : c o llapse ;}
th, td
{
tr
{
border-right : lpx s o lid # fff;
border-bo ttom : lpx solid #ff f;
paddi ng : . 5em;
Ьackgrotшd: #BOC4D7;
Цена на шурупы, кровельные rвозди, болты и пружинные
шай бы
Рис. 14.2. Элемент <tr> с переопределенным стилем
Выбор экземпляров
элемента <th>
Следующий шаг заключается в создании фоновых цветов для
элемента <th>. Используя селекторы-потомки, элеме нты <th >
вверху и слева от таблицы можно окрасить другим цветом .
Стиль элементов <th> в верхней строке задается с исполь ­
зованием t h ead t h { . . . }, поскольку они находятся внутри
элемент а <thead>.

136 Урок 14
Стиль элементов <th> в левом столбце определяется с ис­
пользованием tbody th { . , . } , поскольку они находя тся
внутри элемента <tbody>.
Кроме того, как показано в листинге 14.13; для элементов
<th> левого столбца ·можно задать свойство font - weight :
normal, чтобы отличать их ' от заголовка, представленного
в верхней строке. Результаты выполнения данного кода пред­
ставлены на рис. 14,'3.
Листинг 14. 13. Код CSS, определяющий стилевое
оформление элементов <th>
caption
{
text-align: left;
margin: О О .Sem О;
, font - weight: Ьold;
tаЫе
{
border-collapse: collapse;
th, td
{
tr
{
border -right: l px solid #fff;
border - Ьottom: lpx solid # ff f;
padding: . Sem;
Ьackground: #BOC4D7;
}
thead t h
{
}
background: #036;
color: #fff;
tЬody th
{
font-weight: normal;
Ьackground: #658СВ1;

Стилевое оформление таблицы 137
Цена на шурупы, кровельные rвоэди, болты и пружинные
шайбы
Рис.14.3. Элементы <th> с переопределенньiми
стилями
Чередование цветов в строках
Стиль таблицы можно задать так, чтобы соседние строки
отображались с разными цветами фона . Это повышает чита­
бельность, особенно в длинных таблицах.
Для реализации этой идеи можно добавить класс к каждому
второму элементу <tr>. В данном случае используем класс
alternate. Элементы <td> и <th> в соседних строках получат
несколько отличающиеся цвета фона. Как показано в листин­
ге 14.14, требуемые селекторы имеют вид tr . alternate td
{... } и tr. alternate th { . . } . Результаты выполнения
данного кода представлены на рис. 14.4 .
Листинг 14. 14 . Код CSS, задающий стиль чередующихся строк
caption
{
text-align: left;
margin: О О .5em О;
font-weight : Ьold;
tаЫе
{
Ьorder-collapse: collapse;
}
th, td
{
tr
border-right: lpx solid #fff;
border-bottom: lpx solid #fff;
padding : . 5em;

138 Урок 14
ьackground: #BOC4D7;
}
thead th
{
}
ьackground: #036;
color: #fff;
tbody th
{
font-weight : normal;
background: #658СВ1;
tr . alternate
{
Ьackgrowid : #D7EOEA ;
tr.alternate th
{
Ьackgrowid: #8АА9С7;
Цена на шурупы, кровельные rвоэди, болты и пружинные
шайбы
Рис. 14.4 . В стиль строк добавлепо чередовапие
цветов
Резюме
Из этого урока вы узнали, как добавить к таблице элемен­
ты, повышающие доступность: sшnrnary, caption, <thead>,
<th>, headers и id. Кроме того, вы научились изменять
стиль таблицы и ее элементов. Данные элементы доступности
не только улучшают вид WеЬ-сайта на различных устройст­
вах, но и позволяют использовать на этих устройствах css:
В следующем уроке вы научитесь создавать вертикальную
панель навигации.

Урок 15
с_оздание вертикальной
панели навигации
В этом уроке вы н,аучитесь создавать вертикальн,ую пан,ель
н,авигации. Кроме того, вы узн,аете, как примен,.ять фоповые
изображепи.я и эффекты визуальпого выделепи.я.
Зачем нужен список
По своей сути панель навигации сайта представляет просто
набор ссылок на другие его страницы. Таким образом, для на­
чала работы идеально подходит стандартный список HTML,
описанный в листинге 15.1 и визуализированный на рис . 15 .1 .
Листинг 15. 1. Код HTML, содержащий разметку списка
<ul id="navigation ">
<li><a href="#">Home</a></li>
<l i ><a href="#">AЬout</a></li>
<li><a href ="# " >Services</a></li>
<li ><a href="# ">Staff</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href = "#">Contact</a></ li>
<li><a href="#">Sitemap</a></li>
</ul>
• На главную
•Онас
• Услуги
• Сотрудники
• Порт-фолио
• Конт акты
• Карта сайта
Рис.15.1. Список без стиля

140 Урок 15
Определение стиля списка
Чтобы определить стиль списка, необходимо использовать
селекторы, направленные на элементы <ul>, <li> и <а>.
Чтобы гарантировать, что вы не захватите все экземпляры
этих элементов, с каждым селектором необходимо задейство­
вать уникальный идентификатор, navigation. Используе­
мые в этом уроке четыре селектора показаны в листинге 15.2 .
Листинг 15.2 . Код CSS, иллюстрирующий селекторы,
которые используются для определения стиля списка
ul#navigation { ... }
ul#navigation а { ... }
ul#navigation a:hover { . .. }
ul#navigation li { ... }
Стилевое оформление
элемента <ul>
Большинство браузеров отображает списки HTML с отсту­
пом слева. Чтобы задать величину этого отступа, в одних брау­
зерах применяется заполнение (Firefox, Netscape и Safari), а в
других - поля (Internet Explorer и Opera). Чтобы убрать дан­
ный отступ во всех браузерах, необходимо обнулить значения
свойств padding-left и margin - left в элементе <ul>, как
показано в листинге 15.3 .
Листинг 15.3. Код CSS для обнуления полей и заполнения
ul#navigation
{
margin-left: О;
padding-left: О;

С.оздание вертикальной панели навигации 141
Чтобы убрать маркеры списка, присвойте свойству list-
style-type значение попе, как показано в листинге 15.4 . Ре­
зультаты выполнения данных правил CSS показаны на рис 15.2 .
Листинг 15.4 . Код CSS для удаления маркеров списка
ul#navigation
{
margin- left: О;
padding-left: О;
list-style-type: none;
На главную
О нас
Услуги
Сотрудники
Порт-фолио
Контакты
Карта сайта
Рис. 15.2 . Список с переопре­
делеппым элемептом <ul>
Стилевое оформление
элемента <а>
Текстовые ссылки обычно активны только при установле­
нии указателя мыши на область текста. Чтобы увеличить эту
активную область, примените к элементу <а> свойство
display : Ыосk;. Это переведет элемент из категории внут­
ритекстовых в разряд блочных и активная область займет
всю ширину элемента списка .
Когда <а> является элементом блочного уровня, пользова­
телям не обязательно щелкать на тексте; достаточно щелкнуть
на любой области элемента списка. Присвоение элементам <а>
свойстваdisрlау: Ыосk; иллюстрируется в листинге 15.5.
Листинг 15.5 . Код CSS для установки значения display : Ыосk
ul#navigation
{
margin-left: О;

142 У.рок 15
padding-left: О;
list-style-type: none;
ul#navigation а
{
display: Ыосk;
Чтобы убрать подчеркивание ссылок, используйте text-
decoration: none; (листинг 15.6).
Листинг 15.6 . Код CSS для удаления подчеркивания ссылок
ul#navigation
{
margin-left: О;
padding-left: О;
list-style-type: none;
ul#navigation а
{
display: Ыосk;
text-decoration: none;
Чтобы установить цвет фона, можно использовать сокращен­
ную форму записи соответствующего свойства: background:
# О 3 6 ; , как показано в листинге у;:;: 7. Если вам не нравится вы­
бранный нами цвет, поменяйте его в любой момент.
Листинг 15.7 . Код CSS для установки цвета фона
. ul#navigation
{
margin- left: О;
padding - left: О ;

Создание вертикальной панели навигации 143
list-style-type : none;
.ul#navigation а
{
display: Ыосk;
text-decoration: none;
Ьackground: #036;
Далее цвет текста устанавливаете.я равным #fff (шестнад­
цатеричное представление белого цвета), как показано в лис­
тинге 15.8 . Как и цвет фона, вы можете по своему усмотре­
нию изменить цвет текста.
Листинг 15.8. Код CSS, устанавливающий цвет текста
ul#navigation
{
margin-left: О;
padding..:left: О;
list-style-type: none;
ul#navigation а
{
display: Ыосk;
text-decoration: none;
Ьackground: #036;
color: #fff;
Далее потребуете.я заполнение . 2em сверху и снизу от эле­
мента <а> и заполнение . 5em слева и справа. Чтобы не задавать
эти величины в отдельных объявлени.ях, можно использовать
сокращенную форму записи и задать их все сразу. В данном
случае применяется свойство padding : . 2em . 5em, как пока­
зано в листинге 15.9 .
Листинг 15.9. Код CSS, устанавливающий заполнение
ul#navigation
{
margin-left: О;
padding-left: О;
list-style-type: none;
ul#navigation а
{
display: Ыосk;
text-decorati"on: none;
Ьackground: #036;

144 Урок 15
color: #fff;
padding: . 2em . Sem;
Чтобы создать пустое пространство между элементами спи·
ска, вверху каждого из них можно добавить границу. В данном
случае используется свойство border-bottom: #fff, как по·
казана .в листинге 15.10.
Листинг 15.1 О. Код CSS, устанавливающий границы
ul#navigation
{
margin-left: О;
padding-left: О;
list-style-type: none;
ul#navigation а
{
displ ay: Ыосk;
text - decorat i on: none;
background: #036;
color : #fff;
padding: .2em . Sem;
Ьorder-Ьottom: lpx solid #fff;
1 По определению 1 ет - эn'to ширина буквы "т" данного шриф­
та. - Примеч. пер.

Создание вертикальной панели навигации 145
Для установки ширины элемента <а> используйте width:
7em; , как показано в листинге 15.11 и проиллюстрировано на
рис. 15.3 . Данную ширину вы можете изменить по собствен­
ному усмотрению .
Листинг 15. 11 . Код CSS для настройки - ширины
ul#navigation
{
margin- left : О;
padding-left : О;
list-style-type : none;
ul#navigation а
{
display: Ыосk;
text - decoration: none;
Ьackground : #036;
color: #fff;
padding: .2em .5em;
border-bottom: lpx solid #fff;
width: 7em;
•• ;;;.;щщ;.щ
-
.;.;;.;;
11\-Ф,
маго. в дан
слева и GПР .
в Gписка стана~.·
го 7 em плюс два·
,:sc-··c;
Рис.15.3. Список с переопреде­
ленным стилем элемента <а>

146 Урок 15
Добавление эффекта
визуального выделения
Чтобы изменить стиль ссылок при их визуальном выделе­
нии, можно использовать псевдокласс : hover. В данном слу­
чае установим цвет фона равным #69С, а цвет теста - равным
#ООО, как показано в листинге 15.12 . Результаты выполне­
ния данного кода представлены на рис. 15.4 . Если вам не нра­
вится такой подбор цветов , можете его изменить.
Листинг 15. 12. Код CSS с настройкой в изуального выделения
ul#nav igation
{
margin- left : О ;
padding-left : О ;
list-sty le-type : попе ;
ul#nav igation а
{
display: Ыосk;
text-decoration : попе ;
backgrou nd: #036;
color: #fff;
padding : . 2e,n . 5em;
border-Ьottom: lpx solid #fff;
width: 7e m;
ul #navigation a:hover
{
Ьackground : # б9С ;
col or: #000;
~rmrr:
«а
-
YLX::W..::

Создание вертикальной панели навигации 147
•• ;;.,;щщ.р
-
Рис.15.4. Список с изменен­
ным визуальным выделением
Стилевое оформление
элемента <li>
Возможно, вы заметили , что в некоторых версиях Internet
Explorer для Windows или Opera наблюдаются небольшие
промежутки между элементами списка. Это можно испра­
вить, добавив к элементу <li> свойство display: inline
(листинг 15.13).
Листинг 15.1 З. Код CSS для установки свойства display:
inline для элемента . <li>
ul#navigation
{
margin-left: О;
padding-left : О;
list-style-type: none;
ul#navigation а
{
display: Ыосk;
text-decoration: none;
background: #036;
color: #fff;
padding: . 2em . Sem;
border-bottom : lpx solid #fff;
width: 7em;
ul#navigation a:hover
{
background: #69С;
color: #ООО;

148 Урок 15
ul#navigation li
{
display: inline;
Резюме
Из -этого урока вы узнали, что, измен.я.я стиль списков,
можно создать вертикальную панель навигации, научились
устанавливать объявления дл.я элемента <а> и использовать
псевдокласс : hover. В следующем уроке вы научитесь созда­
вать горизонтальную панель навигации.

Урок 16
Создание
u
горизоцтальнои панели -·
навигации
В этом уроке вы паучитесь. создавать горизоптальпую па­
пель павигации из стапдартпого списка HTML. Кроме того,
вы узпаете, как сделать "плавающими" элемепт <ul> (для
создапия павигациоппой папели) и элемепт <а> ( для созда­
пия ряда квадратпых кпопок с топкими разделяющими ли­
пиями вдоль правой грапицы ).
Стилевое оформление списка
Чтобы создать стиль списка, необходимо использовать се­
лекторы, направленные на элементы <ul>, < li> и <а>. Кроме
того, в каждый селектор необходимо включить уникальный
идентификатор navigation. Используемые в этом уроке че­
тыре селектора показаны в :Листинге 16.1 . Код HTML, с кото­
рым мы будем работать, показан в листинге 16.2 .
Листинг 16.1. Код CSS, иллюстрирующий селекторы,
которые используются для стилевого оформления списка
ul#navigation { ... }
ul#navigation li { ... }
ul#navigation а{ ... }
ul#navigation a:hover { ... }
Листинг 16.2. Код HTML, содержащий разметку списка
<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">AЬout</a></li>

150 Урок 16
<li><a h ref="#" >Services</a></ li>
<li><a href="# ">Staff</a></li>
<li><a href= " # ">Port folio</a></li >
<li><a href="#">Contact</a></li>
</ul>
Стилевое оформление
элемента <ul>
Как обсуждалось в уроке 15, "Создание вертикальной па·
нели навигации", большинство браузеров отображает списки
HTML с отступом слева . Чтобы убрать этот отступ, в элементе
<ul> значения свойств padding-left и rnargin-left уста­
навливаются равными О, как показано в листинге 16.3 .
Л истинг 16.3 . Код CSS, обнуляющий поля и заполнение
ul#navigation
{
margin-left: О;
padding-left : О;
Чтобы убрать маркеры списка, установите значение свойства
list-style-type равным none, как показано в листинге 16.4 .
Листинг 16.4 . Код CSS, удаляющий маркеры списка
ul#navigation
{
margin-left : О;
padding-left : О;
list-style-type: none;
Далее добавляем цвет фона # О 3 6, используя сокращенную
форму записи, как показано в листинге 16.5 . При желании
выбранный цвет можно изменить.
Листинг 16.5. Код CSS, устанавливающий цвет фона
ul#navigation
{
margin-left: О;
padding-left: О;
list- style- type: none;
Ьackground: #036 ;

Создание горизонтальной панели навигации 151
Чтобы сделать элемент <ul> "плавающим", используйте
float : left. Кроме того, необходимо установить его шири­
ну. В данном случае используем значение 100%, поскольку
требуется, чтобы список распространялся на всю ширину
страницы. Соответствующий код показан в листинге 16.6, ре­
зультат его выполнения иллюстрируется на рис. 16.1 . На
этом этапе текст практически нечитаемый. Не волнуйтесь,
все это будет исправлено после переопределения стиля эле­
мента <а>.
Л истин г 16~6 . Код CSS, задающий свойства и ширину
"плавающего" элемента
ul#navigation
{
margin-left : О;
padding-left : О;
list-style-type: none;
background : #036;
float: left ;
width: 100%;
Рис.16.1. Вид списка с заданным стилем
элемента <ul>

152 Урок 16
Стилевое оформление
элемента <li>
Чтобы гарантировать, что элементы списка отображаются
в одной строке, элемент <li> должен устанавливаться со свой­
ством display : inline, как показано в листинге16.7. Ре­
зультаты выполнения данного кода представлены на рис. 16.2.
Листинг 16.7 . Код CSS, задающий свойство display:
inline;
ul#navigation
{
margin-left: О;
padding-left: О;
list-style-type: none;
Ьackground : #036;
float: left;
width : 100%;
ul#navigation li
{
display: inline;
Рис.16.2. Список с переопределеппым сти­
лем элемепта <li>
Стилевое оформление
элемента <а>
Чтобы увеличить активную область текстовых , ссылок,
можно применить свойство display: Ыосk; к элементу
<а>. Это переведет данный элемент из разряда внутритексто­
,вых в разряд блочных и позволит применить заполнение ко
всем сторонам элемента.
Задайте элемент <а·> со свойством display: Ыосk;. Те­
перь ко всем его сторонам можно будет применять заполнение.
Таким образом, элемент получит дополнительную ширину
и высоту, что увеличит область, на которой можно щелкнуть.

Созда ние горизонтальной панели навигации 153
После этого элемент <а> следует сделать "плавающим",
чтобы все позиции списка выстраивались рядом в одной стро ке
(листинг 16.8),
Листинг 16 ..8 . Код CSS, устанавливающий свойство
display: block;
ul#nav igation
{
margin-left: О;
padding-left: О;
list-style-type: none;
background: #036;
float: left;
width: 100%;
ul#navigation li
{
display: inline;
ul#nav igation а
{
display: Ыосk;
float: left;

154 Урок 16
Далее с помощью объявления padding необходимо доба­
вить немного заполнения. Вы можете использовать значения
. 2ern для верхнего и нижнего заполнения и lern для левого и
правого заполнения, как показано в листинге 16.9 .
Листинг 16.9. Код CSS, устанавливающий заполнение
ul#navigation
{
margin-left: О;
padding-left: О;
list-style-type: none;
background: #036;
float: left;
width: 100%;
ul#navigation li
{
display: inline;
ul#navigation а
{
display: Ыосk;
float: left;
padding: . 2em lem;
Чтобы убрать подчеркивание ссылок, используйте t ext-
decoration: none;. Чтобы установить цвет текста и фона;
используйте color: # f ff; (белый) и background: #036;,
как показано в листинге 16.10. При желании данные значе­
ния можно изменить.
Листинг 16. 1О. Код CSS, устанавливающий обрамление
и цвет текста, а также цвет фона
·u1 #navigation
{
margin-left: О;
padding- left: О;
list- style- type: none;
background: #036;

Создание горизонтальной панели навигации 155
float : left;
width: 100%;
ul#navigation li
{
display : inline;
ul#navigation а
{
display: 1 Ыосk;
float : left;
padding : .2em lem ;
text-decoration: none;
color: #fff;
Ьackground: #036;
Чтобы разграничить элементы списка, в конце каждого
элемента добавляется белая линия-разделитель. Для этого с
помощью border-right: lpx solid #fff; справа от каж­
дого элемента добавляется белая граница. Соответствующий
код приводится в листинге 16.11, результат выполнения это­
го кода иллюстрируется на рис. 16.3 .
Листинг 16. 11 . Код CSS, устанавливающий границу
ul#navigation
{
margin-left : О;
padding-left : О;
list-style-type: none;
Ьackground : #036;
float: left;
width: 100%;
ul#navigation li
{
display : inline;
ul#navigation а
{
display: Ыосk;
float : left;
padding: .2em lem;
text-decoration: none;
color: #fff;
Ьackground: #036;
Ьorder-right: lpx solid #fff; _
.

156 Урок 16
\
На rл:li:>ную О на~ У~луги Сотруднн1.и MtM&IШMIIIII
Рис. 16.3. Элемент <а> с переопределенным стилем
Определение стиля
псевдокласса : hover
Для изменения стиля ссылок при визуальном выделении
используется псевдокласс : hover. В данном случае цвет фона
выбран равным #69С, а цвет текста - равным #ООО, как по·
казано в листинге 16.12 и проиллюстрировано на рис. 16.4 .
При желании данные цвета можно изменить.
Листинг 16.12 . Код CSS, задающий параметры визуального
выделения
ul#navigation
{
margin-left: О;
padding-left : О;
list-style-type : none;
background: #036;
float: left;
width: 100%;
ul#navigation li
{
display: inline;
ul#navigation а
{
display: Ыосk;
float: left·;
padding: .2em lem;
text - decoration: none;
color: #fff;
background: #036;
border-right: lpx solid #fff;
ul#navigation a:hover
{
•
color: #000;
background: #б9С;

Создание горизонтальной панели навигации 157
■,11;,;:;;;;■-111111t1WIMiдФ•iiiliillti-i&1&,lii 41111
Рис.16.4 . Завершен,Н,ый список:
Резюме
Из этого урока вы узнали, что стиль списка можно опр еде ­
лить так, чтобы результат выглядел, как горизонтальная панель
навигации. Вы научились использовать "плавающие" элементы
<ul> и <а> и псевдокласс :hover. В следующем уроке вы научи­
тесь определять стиль рамок с закругленными углами.

~-зw:...ьаzапа:::.-м

Урок 17
рамки с закругленными
углами
В этом уроке вы научитесь с помощью четырех изображений
углов создавать растяжимую рамку с закругленными углами.
Подготовка НТМL-кода
НТМL-код этого урока состоит из общего контейнера· <div>,
заголовка и двух абзацев . Стиль элемента <div> определяется
с помощью pullquote id, а стиль второго абзаца - с помо­
щью класса further infо, как показано в листинге 17.1.
-, __
Листинг 17.1 . Код HTML, содержащий разметку рамки
с закругленными углами
<div id="pullquote">
<h2>Heading here</h2>
<р>
Lorem ipsum dolor sit amet . . ..
</р>
<р class="furtherinfo">
<а href="#">More information</a>
</р>
</diV>

160 Урок 17
Создание иллюзии
закругленных углов
Создать растяжимую рамку с закругленными углами
можно множеством методов. В методе, описываемом в этом
уроке, используется четыре отдельных изображени~ углов .
Эти изображения не должны помещаться в код HTML , по­
скольку они являются исключительно средствами представ­
ления. В идеальном случае их необходимо применить как фо­
новое изображение, используя CSS.
Левое_ верхнее изображение будет применяться как фон
к контейнеру <div> , а правое верхнее - к элементу <h 2 >.
Левое нижнее изображение будет применяться к послед­
нему элементу <р> внутри рамки. Данный элемент <р> мы
отнесем к классу furtherinfo, чтобы отличать его от других
абзацев в рамке .
Правое нижнее изображение будет применяться к специ­
альному экземпляру элемента <а>.
&2& - -,,-
1
J1

у
Стилевое оформление рамки... 161
Созданиеселектороn
для определения стиля рамки
с закругленными углами
Чтобы определить стиль рамки с закругленными углами,
необходимо использовать пять селекторов, показанных в лис­
тинге 17.2 .
Листинг 17.2. Код CSS, иллюстрирующий селекторы,
которые используются для стилевого оформления структуры
с двумя колонками
div#pullquote
div#pullquote h2
div#pullquote р
div#pullquote p.furtherinfo
div#pullquote p.furtherinfo а
Подготовка изображений
Четыре изображения, используемые в этом уроке, показа­
ны на рис. 1 7.1 - 1 7.4. Стиль и цвет данных изображений вы
можете изменить по своему усмотрению .
Рис.17.1. Изображение 1, которое будет применяться
к элементу <div>.Длина изображения должна состав­
лять свыше 2000 пикселей, чтобы оно могло растяги­
ваться до ширины экрана самого большого монитора
..
Рис.17.2. Изображение 2, которое будет применяться
к элементу <h2 >
Рис.17.3. Изображение 3, которое будет применяться
к элементу <р>, стиль которого задан с использова ­
нием класса . furtherinfo

162 Урок 17
Рис.17.4. Изображение 4, которое будет применяться
к элементу <а>
Стилевое оформление
элемента <div>
При создании рамки с закругленными углами первым эта­
пом является стилевое оформление элемента <div>, вокруг ко­
торого со всех сторон необходимо добавить свободное простран­
ство . Для этого можно использовать свойство margin: 2em.
Далее элементу <div> требуется фоновое изображение , приме­
няемое к левому верхнему углу. Как показано в листинге 17.3,
для этого следует использовать свойство background: #09f
url ( lessonl 7а . gif) no-repeat; . Результаты выполнения
данного кода представлены на рис. 17.5 .
Листинг 17.З. Код CSS, определяющий стилевое
оформление элемента <div>
divflcpullquote
{
:margin: 2em;
background: #09f url(lessonl7a.gif) no-repeat;
Рис.17.5. Элемент <div> с переопре­
деленным стилем

Стилевое оформление рамки... 163
Стилевое оформление
элемента <h2 >
Итак, со стилем элемента <div> мы закончили. Теперь не­
обходимо представить элемент <h2>, в правом верхнем углу
которого будет располагаться второе фоновое изображение.
Поля элемента <h2 > отключаются с использованием свой­
ства margin: О.
Далее элементу <h? > требуется заполнение на всех сторо­
нах, исключая нижнюю. Для этого применяется свойство
padding: 20рх 20рх О 20рх.
Наконец с помощью свойства background:
url
(lessonl7b.gif) • no-repeat 100% О; к элементу <h2>
добавляется фоновое изображение. Горизонтальное поло­
жение фонового изображения устанавливается равным
100%, так что правая граница изображения будет распола ­
гаться рядом с правой границей элемента <h2> . Как пока­
зано в листинге 17.4, для изображения также устанавли-
. вается параметр no-repeat, поэтому оно не будет повто­
ряться на фоне элемента <h2>. Результаты выполнения
данного кода представлены на рис. 1 7.6.
Листинг 17.4 . Код CSS, определяющий стилевое
оформлениеэлемента<div>
div)pullquote
{
margin: 2em;
background: #09f url(lesson17a . gif) no-repeat;
}
div#pullquote h2
{
margin: О;
padding: 20рх 20рх О 20рх;
Ьackground: url(lesson17b.gif) no-repeat 100% О;

164 Урок 17
Рис.17.6. Элемент <h2> с переопре·
деленным стилем
Стилевое оформление
элемента <р>
К элементу <р> необходимо с обеих сторон добавить за­
полнение, чтобы отделить его от границ контейнера. Дл.я это­
го можно использовать свойство padding : О 2 Орх, как по­
казано в листинге 17.5 . Результаты выполнени.я данного кода
представлены на рис. 1 7. 7.
Листинг 17.5 . Код CSS, определяющий стилевое
оформление элемента <р>
div#pullquote
{
margin: 2em;
Ьackground: #09f url(lessonl7a.gif) no-repeat;
div #pullquote h2
{
margin: О;
padding: 20рх 20рх О 20рх;
Ьackground: url(lessonl7b.gif) no-repeat 100% О;
}
div#pullquote р
{
padding: О 20рх;

Стилевое оформление рамки... 165
Рис.17.7. Элемен,т <р> с переопре­
делен,н,ым стилем
Стилевое оформление класса
.furtherinfo
Стиль последнего абзаца внутри рамки с закругленными
углами задается с помощью класса . furtherinfo . С помо­
щью данного абзаца в левом нижнем углу размещается третье
изображение.
Для абзаца необходимо указать заполнение, которое, од­
нако, можно задавать только для левой границы. Поэтому
используем свойство padding : О О О 2 Орх.
Чтобы установить фоновое изображение, применяется cвoй­
cтвo background: url(lesson17c . gif) no-repeat О 100%; .
Вертикальное положение устанавливается равным 1 О О%, поэто­
му нижняя граница изображения будет выровнена по нижней
границе элемента <р>. Как показано в листинге 17.6, изображе­
ние также задается с параметром no-repeat, поэтому оно небу­
дет повторяться на фоне элемента <р>. Результаты выполнения
данного кода представлены на рис. 17.8 .
Листинг 17.6. Код CSS, определяющий стилевое
оформление класса . furtherinfo
div#pullquote
{
rnargin: 2ern;

166 Урок 17
backgrourid: #09f url(lesson17a.g i f) no-repeat;
}
div#pullquote h2
{
margin: О;
padding: 20рх 20рх О 20рх;
background: url(lesson17b.gif) no-repeat 100% О;
}
div#pullquote р
{
padding: О 20рх;
div#pullquote p.furtherinfo
{
padding: О О О 20рх;
background: url{lessonl7c.gif) no-repeat О 100%;
Рис. 17.8 . Класс
. fur therinf o с пе­
реопределенным стилем
Стилевое оформление
элемента <а>
Правое нижнее изображение применяется к элементу <а>.
Чтобы изображение было показано правильно, элемент
<а> вначале необходимо перевести на блочный уровень, ис­
пользуя disp l ay : Ыосk.

Стилевое оформление рамки... 167
Следующий шаг заключается в добавлении заполнения с
помощью свойства padding: О 2 Орх 2 Орх О; . Таким обра­
зом, будет увеличено заполнение справа и снизу от элемента.
Содержимое элемента <а> выравнивается по правому
краю с помощью свойства tex t-align : right.
Как показано в листинге 17. 7, с помощью свойства
background: url (lessonl7d.gif) no-repeat 100% 100%;
к правой нижней границе элемента <а> применяется фоновое
изображение. Результаты выполнения данного кода представле­
ны на рис. 17.9.
Листинг 17.7 . Код CSS, определяющий стилевое
оформление элемента <а>
div#pullquote
{
margin: 2em;
Ьackground: #09f url(lesson17a.gif) no-repeat;
}
div#pullquote h2
{
margin: О;
padding: 20рх 20рх О 20рх;
Ьackground: url(lesson17b . gif) no-repeat 100% О;
div#pullquote р
{
padding: О 20рх;
div#pullquote p.furtherinfo
{
padding: О О О 20рх;
Ьackground: url{lesson17c.gif) no-repeat О 100%;
}
div#pullquote p.furtherinfo а
{
display: Ыосk;
padding: О 20рх 20рх О;
text-align: right;
Ьackground: url(lessonl7d.gif) no-repeat 100% 100%;

168 Урок 17
Рис. 17.9 . Элемент < а> с переопреде ­
ленным стилем
Создание вариацта
с фиксированной длиной
Создание рамки с закругленными углами , имею щей фик­
сированную длину, требует всего двух фоновых изображений.
Первое изображение можно связать с контейнером <div>,
используя свойство background: · #09f url(lesson17f.gif)
no-repeat О 100% ;. Таким образом, данное изображение, по­
казан~ое на рис. 17.10, будет помещено в нижний угол рамки.
Рис.17.10. Фоновое изображение, с помощью
стил.я привязываемое к элементу <div>
Ширина элемента <div> должна соответствовать ширине
двух изображений; в данном случае выбрано значение 4 О Орх
(при желании вы можете выбрать любое другое).
Кроме того, для элемента <div> необходимо задать запол­
нение, чтобы текст не сливался с верхней границей изображе­
ния . Для этого применяется cвoйcтвopadding-bottorn: 20рх.
Для элемента <р> необходимо задать заполнение по бо­
кам, чтобы отодвинуть его . от границ контейнера. Для этого
используете~ свойство padding: О 2 Орх.

Стилевое оформление рамки... 169
Элемент <h2> должен иметь нулевые поля, чтобы между
верхней границей контейнера и изображением не было ника-
ких промежутков. Кроме того, требуется ввести заполнение
сверху, справа и слева, используя свойство padding: 20рх
20рх О 20рх;.
Чтобы применить фоновое изображение к элементу <h2>,
используется свойство background: url ( lessonl 7е. gif)
no-repeat 100% О;. Таким образом, изображение, показан­
ное на рис. 17.11, располагается в левом верхнем углу эле­
мента.
Рис.17.11. Фоновое изображение, связы­
ваемое с эле.ментом <h2>
Содержимое абзаца . furtherinfo необходимо выровнять
по правому краю. Для этого переопределяется свойство text-
align: right, как показано в листинге 17.8 . Результаты
выполнения данного кода представлены на рис; 17 .12.
Листинг 17.8 . Код CSS, определяющий стилевое
оформление закругленной рамки фиксированной ширины
div#pullquote
{
Dackground: #09f url(lesson17f.gif) no-repeat О 100%;
width: 400рх;
padding-Ьottom: 20рх;
div#pullquote р
{
padding: О 20рх;
}
div#pullquote h2
{
margin: О;
padding: 20рх 20рх О 20рх;
Ьackground: url(lesson17e.gif) no-repeat 100% О;
div#pullquote p.furtherinfo
{
text - align: right;

170 Урок 17
Рис.17.12. Рамка с закругленными углами
и фиксированной шир иной
Создание гибкого варианта
только с верхним изображением
Чтобы создать гибкий вариант рамки с закругленны м уг­
лами , содержащ ий только верхнюю часть изображения, тре­
буется два фоновых рисунка.
Первое изображение можно применить к контейнеру
<div>, используяЬасkgrоund : #fff url(lessonl7g . jpg)
no-repeat ; . Таким образом , изображение, показанное на
рис. 17.13, будет помещено в левом верхнем углу рамки.
Рис.17.13. Фоновое изображение, которое
будет применяться к элементу <div>. Дли·
на изображения должна составлять свыше
2000 пикселей,· чтобы оно могло растяги·
ваться до ширины экрана самого большого
м онитора

Стилевое оформление ра м ки... 171
Для элемента <р> необходимо задать заполнение по бо­
кам , чтобы отодвинуть его от границ контейнера. Для этого
можно использовать свойство padding: О 2 Орх .
Поля элемента <h 2> должны быть нулевыми, чтобы меж­
ду верхней границей контейнера и изображением не было ни­
каких промежутков . Кроме того, требуется ввести заполне­
ние сверху, справа и слева, используя свойство padding:
20рх 20рх О 20рх;.
Чтобы применить фоновое изображение к элементу <h2> ,
используется свойство backgroun d : url ( lessonl 7h. gif)
no - repeat 100% О;. Таким образом , изображение, показан ­
ное на рис. 17.14, располагается в правом верхнем углу эле ­
мента.
Рис.17.14. Фоновое изобра­
жение элемента <h2>
Наконец содержимое абзаца . f urtherinfo необходимо вы­
ровнять по правому краю. Для этого переопределяется свойст­
во tex t-align : right , как показано в листинге 17. 9. Резуль­
таты выполнения данного кода представлены на рис. 1 7 .15 .
Листинг 17.9. Код CSS, определяющий стилевое
оформл е ние варианта только с верхним изображением
div#pullquote
{
background: #fff url(lessonl7g.jpg) no - repeat ;
}
d i v#pullquote р
{
paddi ng: О 20рх;
}
div#pu llquote h2
{
margin: О;
padding: 20рх 20рх О 20рх;
background : url(le s sonl7h . jpg ) no-repe at 100% О;

172 Урок 17
div#pullquote p.furtherinfo
{
text-align: right;
· а заца текст а заца текст а заца текст а · заца текст
абзаца текст абзаца текст абзаца текст абзаца текст
абзаца текст абзаца текст абзаца текст абзаца.текст
абзаца текст абзаца текст абзаца текст абзаца текст
абзаца текст абзаца текст абзаца текст абзаца.
Подробнее
Рис . 17.15. Стиль варианта только с верх·
ним изображением
Резюме
Из этого урока вы узнали, как, применяя изображения к че­
тырем различным элементам, создать иллюзию гибкой рамки
с закругленными углами. Кроме того, вы научились создавать
рамку с закругленными углами фиксированной ширины и рам­
ку, состоящую только из верхнего изображения. В следующем
уроке вы научитесь настраивать стиль заголовка сайта, исполь ­
зуя элемент <hl>, изображение и список.
- e;r,zr;z;--, -;tti"ir.4
znrwr:::
,мс

Урок 18
,,~'''~
~
~
;;~
.. .._,
-
~
~.N
"' #.
Создание заголовка
u
саита
В этом уроке вы научитесь устанавливать стиль заголовка
сайта, используя элемент <hl>, изображение и список.
Подготовка НТМL-кода
Как показано в листинге 18.1, НТМL-код этого урока со­
стоит из трех основных компонентов: элемента <div>, помо­
гающего семантически определить заголовок, элемента <hl>
и элемента <ul>, используемого для навигации.
Листинг 18.1 . Код HTML, содержащий разметку заголовка
сайта
<d i v id="container" >
<hl>
<а h ref=" / "><img src="header . jpg" alt="Sitename "a></a>
</hl>
<ul id="topnav">
<li><a href="# ">Skip to content</a></li>
< li ><a href="# ">Home</a></li>
<li><a href="#">AЬout</a></li>
<li><a href="# ">Services</a></li>
< li ><a href="# ">Staff</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

174 Урок 18
Создание селекторов
для определения стиля
заголовка
Чтобы переопределить стиль заголовка сайта, потребуется
10 селекторов, показанных в листинге 18.2 .
Листинг 18.2 . Код CSS, иллюстрирующий селекторы,
которые используются для определения стиля заголовка
Ьоdу {...}
#container { .. . }
hl {...}
hl img {...}
ul#topnav {...}
ul#topnav li { .. . }
ul#topnav li a:link { ... }
ul#topnav li a:visited { .. . }
ul#topnav li a:hover { ... }
ul#topnav li a:active { .. . }

Создание заголовка сайта 175
Стилевое оформление элемента
<body>
Одни браузеры для отделения содержимого от границ окна
браузера используют в элементе <body> поля, другие - за -
полнение. Поскольку заголовок данного сайта располагается
вверху окна браузера, и поля, и заполнение следует сделать
нулевыми.
Теоретически, чтобы отцентрировать контейнер на стра­
нице, можно применить автоматически заданные поля слева
и справа. Однако некоторые браузеры не позволяют отцен­
трировать контейнер таким способом, поскольку игнорируют
автоматические поля. Данную проблему можно решить, до­
бавив дв-а простых объявления.
Первое объявление, text - align: center, применяется
к элементу <body> . Второе, t e x t-~ l ign : left, добавляется
к набору правил контейнера (см. следующий раздел, "Стиле­
вое оформление контейнера", этого урока).
Кроме того, для элемента <body> необходимо установить
свойства background-color и color. В данном случае цвет
фона выбирается равным #BOBFC2, а цвет текста - равным
#444, как показано в листинге 18.3 . Результаты выполнения
данного кода представлены на рис. 18.1 .
Листинг 18.3. Код CSS, определяющий стилевое
оформление элемента <body>
body
{
margin: О ;
padding: О ;
text-align: center;
Ьackground: #BOBFC2;
color: #444;

176 Урок 18
Рис.18.1. Элемепт <body> с переопре ­
делеппым стилем
Стилевое оформление
контейнера
Теперь, завершив стилевое оформ л ение элемента <body>,
мы расположили все содержимое по центру страницы. Дан­
ные настройки можно изменить, задав для контейнера свой­
ство t ext-a l ign: left.
После этого для браузеров, поддерживающих автом атиче­
ские поля , при меняется правильный метод центрирования:
margin: О auto .
Ширину контейнера можно задать равной 7 О Орх (вы мо­
жете изменить это значение по своему усмотрению) .-
Наконец, как показано в листинге 18.4, для контейнера не­
обходимо задать белый фон, используя свойство background:
#fff. Результаты выполнения данного кода представлены
на рис. 18.2 .
Л исти нг 18.4. Код CSS, определяющий стилевое
оформление контейнера
Ьо dу
{
}
margin: О;
padding : О;
text-align: center;
Ьackground: #BOBFC2;
color : #444;
#container
{
text-align: left1

margin: О auto;
width: 700рх;
Ьackground: #FFF;
Создание заголовка сайта 177
• Пропустить заст авку
• На rлавну~
•Онас
• У<л~
• Со. rрудни ки
• Порт•фопио
• Контакrы
Рис.18.2. Контейнер с переопреде­
ленным стилем
Стилевое оформление
элемента <hl>
Как было показано в листинге 18.1, элемент <hl> содер­
жит изображение. Данный рисунок помещается внутрь эле­
мента <hl> для придания ему большего семантического зна­
чения. Программы чтения с экрана и текстовые браузеры
прочтут атрибут "Sitename", просто как заголовок текста. ··
Поля и заполнение необходимо установить равными О , что­
бы изображение располагалось в самом верху окна браузера.
Кроме того, можно добавить белую линию к нижней грани­
це элемента <hl>, исполь.зуя сокращенную форму записи
border: lpx solid #fff;, как показано в листинге 18.5. Ре­
зультаты выполнения данного кода представлены на рис. 18.3.
Листинг 18.5 . Код CSS, определяющий стилевое
оформление элемента <hl>
Ьоdу
{
margin: О;
paddi ng: О;
t ext-a l ign: center;
Ьackground: #BOBFC2;
co l or: #444;
}
#contain e r

178 Урок 18
}
hl
{
text-align: left;
·m a rgin: О auto;
width: 700рх;
background: #FFF;
margin : О;
padding: О;
Ьorder-Ьottam: lpx solid #fff;
• Про-пу-стит~ за.ставку
• На_ главн УЮ
•Она~
• У-=~У.!.~
• Сотр vдни ки
• Поот-фолио
• Контакты
lV~i!i& "' ~~~~'>i<&t"'3⁄4"Ф~ ~J! ~~i
Рис . 18.3. Элемент <hl> с переопре·
деленным стилем
Стилевое оформление элемента
•
<.1mage>
Изображение должно задаваться с атрибутом d isp l ay:
Ыосk. Таким образом, мы удаляем промежутки между ним
и верхней границей элемента <hl >.
Изображение вкладывается внутрь элемента <а>. В неко ­
торых браузерах это приведет к тому, что изображение будет
показано с границей 'шириной 2 пикселя. Чтобы избежать
этого, в стиль изображения следует включить определение
border: О, как показано в листинге 18.6. Результаты вы­
полнения данного кода представлены на рис. 18.4 .
Листинг 18.6. Код CSS, определяющий стилевое
оформление элемента <image>
body
{
margin: О;

padding: О;
text-align: center;
Создание заголовка сайта 179
font: 85% arial, helvetica, sans-serif;
background: #BOBFC2;
color: #444;
}
#container
{
}
hl
{
}
text-align: left;
margin: О auto;
width: 700рх;
background: #FFF;
margin: О;
padding: О;
Ьorder-bottom: lpx solid #fff;
hl img
{
display: Ыосk;
Ьorder: О;
• П ропусr.-nъ за::'Т'а~ку
• Нагла зную
• О :н:ас
• услуги
• Сотрудники
• Порт-фолио
Рис.18.4. Элемент <image> с пере­
определенным стилем
Стилевое оформление
элемента <ul>
Как обсуждалось в уроке 15, "Создание вертикальной па­
нели навигации", большинство браузеров отображает списки
HTML с отступом слева. Чтобы убрать этот отступ для всех
браузеров, необходимо переопределить и поля, и заполнение.
В данном случае мы устанавливаем поля равными О, что­
бы списки выравнивались по элементу <hl>.

180 Урок 18
К позициям списка необходимо добавить заполнение 5рх
сверху и 1 Орх слева и справа. Для этого можно использовать
сокращенную форму записи padding: 5рх 1 Орх.
Маркеры HTML необходимо удалить с помощью list-
style -type: none.
В стиль элемента <ul> включается объявление background-
color: #387А9В.
Поскольку нам не нужно, чтобы данные правила применя·
лись ко всем элементам <ul> страницы, следует использовать
селектор-потомок, отбирающий только список topnav. Для это­
го применяется ul#topnav, как показано в листинге 18. 7 . Ре­
зультаты выполнения данного кода представлены на рис. 18.5 .
Листинг 18.7 . Код CSS, определяющий стилевое
оформление элемента <ul> •
body
{
margin: О;
padding: О;
text-align: center;
font: 85% arial, helvetica, sans-serif;
Ьackground: #BOBFC2;
color: #444;
#container
{
}
hl
{
}
text-align: left;
margin: О auto;
width: 700рх;
background: #FFF;
margin: О;
padding : О;
Ьorder-Ьottom: lpx solid #fff;
hl img
{
}
display: Ыосk;
Ьorder: О;
ul#topnav
{
margin: О;
padding: Spx 10рх;
list-style-type: none;
Ьackground: #387А9В;

Создание заголовка сайта 181
Рис. 18.5 . Элемент <ul> с переопреде­
ленным стилем
Стилевое оформление
элемента <li>
Наш список должен отображаться на экране горизонталь­
но, а не вертикально. Для этого в стиле элемента <li> задает­
ся disрlау: inline .
После этого в <li> необходимо добавить графические мар­
керы. Лучше всего это сделать, используя фоновое изображе­
ние, установленное с помощью background: url (header-
bullet. gif) no-repeat О 50%; . Таким образом, рядом с
каждым элементом списка будет расположено одно изображе-
ние, отцентрированное по вертикали.
1
Чтобы отодвинуть текст от фонового изображения, потребу­
ется заполнение. В данном случае будет использовано свойство
padding : О 10рх О 8рх;, как показано в листинге 18.8 . Та­
ким образом, 10 пикселей заполнения будет добавлено справа,
а 8 пикселей - слева от каждого элемента списка. Результаты
выполнения данного кода представлены на рис. 18.6.
Листинг 18.8. Код CSS, определяющий стилевое
оформление элемента <li>
body
{
margin: О;
padding: О;
text-align: center;

182 Урок 18
font: 85% arial, helvetica, sans-serif;
background : #BOBFC2;
color: #444;
#container
{
}
hl
{
text-align: left ;
margin : О auto;
width: 700рх;
background : #FFF;
margin: О;
padding: О;
border-Ьottom : lpx solid #fff;
}
hl img
{
display: Ыосk;
border: О;
}
ul#topnav
{
}
margin : О;
padding: Spx lOpx;
list-style-type : none;
background: #387А9В;
ul#topnav li
{
display: inline;
background: url(header-Ьullet.gif) no-repeat О 50%;
padding: О 10рх О 8рх;}
Рис.18.6. Элемент <li> с переопределенным стилем

Создание заголовка сайта 183
Стилевое оформление
элемента <а>
Чтобы не затронуть все ссылки на странице, следует ис­
пользовать определенные селекторы, в данном случае -
ul#topnav li a:link,ul#topnav li a:visited,ul#topnav
·1i
a : hoverиul#topnav li a : active.
Псевдоклассы ссылки и посещенной ссылки можно задать
с помощью свойств text-decorat.ion : none (отключает
подчеркивание ссылки) и color: #FFF, 'как показано в лис­
тинге 18.9 .
Псевдоклассы визуального выделения и активной ссылки
задаются со свойствами text-decoration: none,' co l or :
#387А9В; и background: #FFF;. Результаты выполнения
данного кода представлены на рис. 18. 7.
Листинг 18.9 . Код CSS, определяющий стилевое
оформлен и е элемента <а >
Ьоdу
{
margin: О ;
padding: О;
text-align: center;
font : 85% arial, helvetica , sans - serif ;
background: #BOBFC2 ;
co1or : #444;
#container
{
}
hl
{
text-align : left;
margin: О auto;
width: 700рх;
Ьackground: #FFF;
margin: О;
padding: О;
Ьorder - Ьottom: lpx solid #fff;
}
hl img
{
display: Ыосk;
Ьorder: О;

184 Урок 18
ul#topnav
{
margin: О;
padding: Spx lOpx;
list-style-type: none;
Ьackground: #387А9В;
ul#topnav li
{
display: inline;
background: url(header-bullet.gif) no - repeat О 50%;
padding: О lOpx О 8рх;
ul#topnav li a:link, ul#topnav li a:visited ,
{
text-decoration: none;
color: #fff;
ul#topnav li a:hover, ul#topnav li a:active
{
text-decoration: none;
color: #387А9В;
background: #fff;
Рис.18.7. Элемент <а> с переопределенным стилем
Резюме
Из этого урока вы узнали, как в окне браузера выравни­
вать содержимое по центру и определять стили элементов
<hl>, <image> и <ul> в виде ссылок. В следующем уроке вы
научитесь размещать страницу с двумя колонками с заголов­
ком и примечанием.

Урок 19
Расположение двух
колонок с заголовком
и примечанием
В этом уроке вы каучитесь размещать стран,ицу из двух ко­
локок с заголовком и примечакием. Существует мкожество
способов размещен,и.я даккых элемектов. Метод, рассмот­
реккый в дан,н,ом уроке, включает примекекие "плавающих"
объектов, поскольку это каиболее кадежкый подход, прием­
лемый для большикства современ,н,ых браузеров.
Подготовка НТМL-кода
НТМL-код этого урока состоит из пяти основных контей­
неров: элемента <hl> и трех элементов <div>, расположен­
ных внутри другого контейнера <div>, как показано в лис­
тинге 19.1 .
Листинг 19. 1 . Код HTML, содержащий разметку для урока 19
<div id="container">
<hl>
Sitename
</hl>
<div id="nav">
<ul>
< li><a href= "#">Horne</ a>< / li >
<l i><ahref= "#">AЬout us </a></ li >
<li><a href="# "> Services</a ></ li>
<li><a href="#">Staff</ a> </l i >
<li><a href="#" > Portfolio< /a></ li >
<li><a href=" # ">Contact us< /a></li> .
</ul>
</div>

186 Урок 19
<div id="content">
<h2>
AЬout Sitename
</h2>
<р>
Lorem ipsum dolor ....
</р>
<р>
Ut wisi enim ad ...
</р>
</div>
<div id="footer">
Copyright &сору; Sitename 2005
</div>
</div>
Создание селекторов
для стилевого оформления двух
колонок
Чтобы определить стиль двух колонок и их содержимого,
потребуется 12 селекторов, показанных в листинге 19.2 .
Листинг 19.2 . Код CSS, иллюстрирующий селекторы, которые
применяются для стилевого оформления двух колонок
body {...}
ilcontainer { ... }
hl {...}
#nav {...}
#nav ul {...}
#nav li {...}
#content { ... }
#footer { ... }
h2 {...}
a:link { ... }
a:visited { ... }
a:hover, a : active { ... }
Стилевое оформление элемента
<body>
Как обсуждалось в уроке 18, "Создание заголовка сайта",
для выравнивания контейнера по центру страницы необходи·
мы решения, подходящие для всех браузеров, не поддержи-
e:nse

Расположение двух колонок . .. 187
вающих автоматически заданные пол.я . Первое, что необходи­
мо дл.я этого сделать, - применить к элементу <body> свойство
text-align: center, как показано в листинге 19.3 . Резуль­
таты представлены на рис. 19.1 .
Кроме того, дл.я элемента <body> необходимо задать свой­
ства backgr~JUnd-color и color. Цвет фона, например, можно
выбрать равным #B0BFC2, а цвет текста - равным #444.
Листинг 19.З. Код CSS, определяющий стилевое
оформление элемента <body>
Ьоdу
{
text-align: center;
Ьackground: #ВОВFС2;
color: #444;
Рис.19.1. Элемен т <b o dy> с переопределен­
ным стилем
С.тилевое . оформление
u·
контеинера
Определив сти.дь элемента <body>, получаем выровненное
по. центру все содержимое страницы. Чтобы исправить поло­
жение, зададим дл.я контейнера свойство text-al ign: left .

188 Урок 19
После этого для браузеров, поддерживающих автоматиче­
ски заданные поля, устанавливается правильный метод цен­
трирования: margin: О auto.
Ширину контейнера можно установить равной- 7 О Орх (вы
можете использовать любое удобное для вас значение).
Наконец для контейнера необходимо задать фоновое изобра­
жение, используя background: #FFF url (header-base.gif)
repeat-y;, как показано в листинге 19.4 . Фоновое изображение
представлено на рис. 19.2, а внешний вид полученной страницы
показаннарис.19.3.
Рис.19.2. Фоновое изо­
бражение , контейнера
Листинг 19.4 . Код CSS, определяющий стилевое
оформление контейнера
body
{
text-align: center;
lt:7Т7121ГZ~(:IC
эcзrra:rn

background : #B0BFC2;
color: #444;
Расположение двух колонок... 189
#container
{
text-align: left;
margin: О auto;
width : 700рх;
background: #FFF url~header-Ьase . gif) repea t-y;
а ТЕУ..ст аб:заdа теr..ст абзаца 7ЕiУ..СТ а6:заца ·rer.cr абзаца,
тек. ~--r а6зща тек.ст а6згща тек1:t абэаца тек~\ а6зеща т
;',{~ст, а 7rща текс-т а6э~ща те ксr абзаца т~кп а6э<'!ца тек('Т а6з~ща т
т~к<:т абз~цn. теr::.t."Т а6:з3ца теt::ст а5эаца те~t."Т afuaцa.
т ексr абзаца текст абзаца текст аб:эща тексr абз~ща т
тек,:т абзаца те:ксr абз аца тer..cr абз аца текст абзаца т
Рис.19.3. Коптейпер с переопределеппым стилем
Стилевое оформление
элемента <hl>
Первым шагом при определени и стиля заголовка является
задание цвета фона. В нашем случае применяется свойство
background : #DЗ 6832 . Цвет текста устанавливается равным
#fff.
Далее для создания небольшого пустого пространства вокруг
содержимого <hl> используется свойство padding : 2 Орх .
После этого необходимо задать margin : О , удаляя уста­
новленные по умолчанию верхнее и нижнее поля .

190 Урок 19
Кроме того, можно установить границу сверху от элемента
<hl>, используя сокращенную запись border: 5рх solid
#387А9В;, как показано в листинге 19.5. Результаты выпол­
нения данного кода представлены на рис. 19.4 .
Листинг 19.5 . Код CSS, определяющий стилевое
оформление элемента <hl>
Ьоdу
{
text-align: center;
background: #BOBFC2;
color: #444;
}
#container
{
text-align : left;
margin: О auto;
width: 700рх;
background: #FFF url(header-Ьase.gif) repeat-y;
}
h1
{
background: #D3б832;
color: #FFF;
padding: 20рх;
margin: О;
Ьorder-Ьottom: Spx solid #387А9В;
t1. тt-r.cr обэtщ~ -re~cr n6эещг~ теl(СТ а&.заца Te1'cr абэс.ца т
., тоt.ст iSбэаца текст абз~tt=1-r1=1кст ~6э~ща тек~т ~6:э:ща те
а тcr:.c-r абзаца тGУ...'.:Т :::~.6заца 7~x:cr а6:-нща те)::{'1' 216эаца rc
n теJ<:(.'1' n6:,t:щt1 ':''.ЭХ.СТ 1:16э1:ща теt:о::т о.бзаца т.еr.ст обэащ, т
•~ текст ~6згща техст :~:6эаца -.-шест абэ;,,ца ТР. k.С:Т абэац~ т,:~
~а.текст а6:пща тех(.'1' аб:эаца те~ст абэаца те~.:!т t~Вэаца те
Рис.19.4. Элемент <hl> с переопределенным
стилем

Расположение двух колонок... 191
Стилевое оформление
КQнт~йнера #nav
Чтобы разместить контейнер #nav и элемент #content
рядом, их необходимо сделать "плавающими".
Чтобы сделать контейнер #nav "плавающим", используй­
те свойство float: left. Кроме того, для этого элемента не­
обходимо установить ширину, например, 130рх.
Отметим, что Internet Explorer 5 и 5.5 для Windows при оп­
ределенных обстоятельствах отображает поля, удваивая за­
данный для них размер. Данный дефект браузера объясняется
в уроке 11, "Расположение изображения и его подписи". Чтобы
исправить данный дефект, "плавающие" элементы следует за­
давать со свойством display: inline. Все остальные браузе­
ры проигнорируют данное объявление, а Internet Explorer 5
и 5.5 для Windows будут правильно считать ширину поля .
Решив проблему с отображением полей, можно задать
cвoйc'твomargin-left: 20рх.
Након·ец вверху и внизу контейнера необходимо добавить
заполнение. В данном случае применяется объявление
padding: 15рх О, как показано в листинге 19.6. Результаты
выполнения данного кода представлены на рис . 19. 5 .
Листинг 19.6. Код CSS, определяющий стилевое
оформление контейнера #nav
body
(
text-align: center;
background : #BOBFC2;
color: #444;
#container
(
text-align: left;
margin : О auto;
width: 700рх;
Ьackground: #FFF url(header-base.gif) repeat-y;
}
hl
(
Ьackground: #D36832;
color: #FFF;

192 Урок 19
paddi ng: 20рх;
margin: О;
border-Ьottom: 5 рх solid #387А9 В ;
#nav
{
float: l eft ;
wid th: 13 0рх;
display: inline;
margin- left: 20рх;
padding: 15рх О;
! ·.Еа гЛ:_аеную Q сай.те
•
О1щ(:
• 'Уо!Е:!:!
_ТЕtк~т абзrщат~кст абэацатекст абэацате~ст абзюr,атекст,
• 'О::,!f'...Удн.1н~~6:ьэ.ца те~:::~г абзаца теt:.ст a6:;;aцtt т ек.ст абз:ща тeit~ t16заца
• _iЬр-r~ф-;J:-;;d'екст а6з~:ш.t1 те~t:СТ r:6зl)ц~ текс; абз~ща ТЕУ..'7 абзаца 1'er..cr
• :К◊пта :Сты - •~6.з,ш,r.~ ТЕ!К('Т 116э,ш,fl ·:·е.к<'r абэ,щ,а T E!l(<'r а6:'1 2ща т;;~км · абэ;щп
тек~т а5:~:!!ца .
Т°еХМ' <'iБ."ttЩn теJ:с1' .n8зi.•щ1.1. тек"1" п6:н,11,1') теК.:'Т t.16щщ~ тек.:т ?.6заш1. теr.:;.•; 1'.6З<'Щl1. •
l'f;;K<. '7 .;16:.н:ца :на:.<.-т ','t6-заца н1к<.'Т s16зац а т ti к<:r абэаца ;·1;ксr абзац а т~к<:т абзаца·;
r..;кс, абзаца l'.'<НС:<:т а6эаца т,эr..ст а6зац.!1. TEKcr ~6защ1. ,sr .cr а6:::а ц.,, т ~ ксr ~бзащ1;
rо;.:ст а9:ЗаФ1. т-'еt:_<:!' абзацn.
Рис.19.5. Эл емент #паv с переопределенным
стилем
Стилевое оформление
элемента <ul>
Чтобы убрать установле нные в браузере значения по умол ­
чанию , и поля , и заполнение необходимо обнулить .
Для удаления маркеров списка используйте свойство
list-style - type : none .
Далее позиции списка не·обходимо выровнять по правому
краю контейнера # n av. Для этого можно использовать объ ­
явление text- a lig n : . r i ght, как показано в листин­
ге 19.7 . Результаты выполнения данного кода представлены
нарис. 19.6 .

Расположение двух колонок... 193
Листинг 19.7. Код CSS, определяющий стилевое
оформление элемента <ul>
body
{
text-align: center;
Ьackground: #BOBFC2;
color: #444;
#container
{
}
hl
{
text-align: left;
rnargin: О auto;
width: 700рх;
Ьackground: #FFF url(header-base .gif ) repeat-y;
background: #D36832;
color: #FFF;
padding: 20рх;
rnargin: О;
border - bottorn: Spx solid #387А9В;
#nav
{
float: left;
wi ,dth: 130рх ;
display: inline;
rnargin-left: 20рх;
padding: 15рх О;
#nav ul
{
margin: О;
padding: О;
list-style-type: none;
text-align: right;

194 Уррк,,19
·· f.'~_i:-!:~!-~~~0-o сайге
~
:
~~..е.z1~~'Т:·~ст а5эzща т_:t:<:'t 1.16заца т:r:~::т абзаца т;к<:ё абзаца те1.:ст
Порт~ф-Олио1:16эа1~а :•~К.СТ аь::tаца :ек.ст аб-з:,.ц~ "1""11С<':Т .,_о:,ацn тЕt:а:т n6:1tщr
К◊t:таr.:-:ыт.ек~""Т а6з;н!,а те~<"Т г.6з11ц1.1 тек.с-r '16з~:що тev.cr 0.6:10.цn Т1:!К~:
--·_
.._~6:1ац:11 тer.:t:";· а6:1tщ11 тut:•~т н6:н111,а ,ок.с-т n5~~~ц:i т-зк.сr
абзац~
·1·1н•хr сtбз~ца .
Г1к.сr аб.111•.щ;) ·rе кст абз~щ~ тек<':'!' ~б:нщн тек~т н6:н1ш~. -:- o ~cr абэаца те.:.ст абзаца
retcr з6з:ща т.екС"Т afu;щt'I те1.:<-Т 216:эrща T'1t:.<'- =- r.: .6з 1ща те к . с т -сt бзац э. те кс r зб з , щ а •
roкcrа5::~ацаT'!ll.l'. аG~аца текст абэ~ц~ тек<.:т ~6:itщa тur.:~т t~б:ища -r<J:кст 11Sэац:,. •
ru:кc:r u5э-ац,а 'NK<' ' ! · :;)IXi:c1ц.:1.
Рис.19.6. Элемент <ul> с Гl;ер еопределен­
ным стилем
Стилевое оформление
элемента <li>
Теперь элемент списка получил фоновое изображение, кото­
рое будет выступать как маркер списка. Чтобы разместить фоно­
вое изображение по правой границе элемента <li> на расстоя­
нии . 4em от его вершины, используйте объявление background:
url (header-bullet. gif) no-repeat 100% . 4em;. Кроме то­
го , для изображения устанавливается свойство no-repeat, по­
этому оно не будет повторяться по всему элементу <li>.
Далее к правой и нижней границам элемента <li> можно
добавить заполнение, как показано в листинге 19.8 . Заполне­
ние СПР.ава отодвинет со4ержимое списка от края, чтобы оно
не располагалось выше фонового изображения. Заполнение
снизу обеспечивает некоторый промежуток между элемента­
ми списка. Результаты выполнения данного кода представ­
лены на рис. 19.7.
Листинг 19.8 . Код CSS, определяющий стилевое
оформление элемента <l i>
body
{
text - align: center;
background: #B0BFC2;
color: #444;

#container
{
text-align: left;
margin: О auto;
width: 700рх;
Расположение двух колонок ...
Ьackground: #FFF url(header-base . gif) repea-t -y;
}
hl
{
background: #D36832;
color: #FFF;
padding: 20рх;
margin: О;
Ьorder-bottom: 5рх solid #387А9В;
Jlnav
{
float: left;
width: 130рх;
display: inline;
margin-left: 20рх;
padding: 15рх О;
Jlnav ul
{
}
margin: О;
padding: О;
list-style-type : none ;
text-align : right;
#nav li
{
195
background: url(header-Ьullet.gif) no-repeat 100% .4em;
padding: О lOpx Spx О;
ст :~бзаuа тех:ст а5зtщд т ,н:.ст а6'3аца теr.ст ;:~.бэ~ц<t те):,:: а
J~fф i:щa теУ..сr а6з.~цс т,н:.с. а5заца т~кст абзаца ,~к.ст ~5,зt:;ца •
•тflka аб:ищn Tf!t::cт н63,ш,n тАхм- е6:11r.ца тек.с-:- аб-;;ац:,1 те~:.с.т а!
~~ ~ aua ;е1.:ст абзаца т ,эк~, абзац'!!~ тев:-:т а6заца тer.cr а5з::1ца •
тll'J:.c. аьэаца.
Ц<'L т е1.:ст абз~ца , екст tiбзtщt1 ТЕrк-:т аБзацn теУ.ст абзаца т
\8 тексr г~бзац,а т сх<'Т а6эа17,?.; тоr..:!": ' аб:;;аца теt .ст 1!16:йЩ!,
а те ксr абзаца тек~'Т абз~ц:,, тer..cr абзаца теtr.ст t~6:эаца т
Рис.19.7. Элемент < li> с переопределен­
ным стилем

196 Урок 19
Стилевое оформ~ение
контейнера #content
Контейнер #content требуется задать со свойством float:
left, чтобы он располагался рядом с контейнером #nav . Кроме
того, для него необходимо указать ширину, которая в данном
случае равна 4 7 5рх.
Чтобы создать промежуток между двумя колонками, ис­
пользуйте свойство margin-left: 45рх.
Наконец вверху и внизу контейнера необходимо добавить
заполнение, используя padding: 15рх О, как показано в лис­
тинге 19.9 . Результаты выполнения данного кода представле­
ны на рис. 19.8 .
Листинг 19.9. Код CSS, определяющий стилевое
оформление контейнера #content
body
(
text-align: center;
background: #BOBFC2;
color: #444;
}
#container
(
text-align: · left;
margin: О auto;
width: 700рх;
,Ьackground: #FFF url(header-Ьase.gif}
}
hl
(
background: #D36832;
color: #FFF;
padding: 20рх;
margin: О;
border-Ьottom: Spx solid #387А9В;
}
#nav
(
}
float: left;
width: 130рх;
display: inline;
margin-left: 20рх;
padding: 15рх О;
#nav ul
(
-, -·.-
repeat-y;
-;

·· ---
-
..
--- ., .:.:: -_ , , ..,,. . .,, . . .. ., _,., . ._ _ _: :;..,,_31:,_"""_,,,.. . ._ "" "._ ..:;..,,__=----~---=.........
}
margin : О;
padding: О;
list- sty le- type : none;
text - a l ign: right;
#nav li
{
Расположение двух колонок. .. 197
Ьackground: url(header - bullet . g i f) no-repea t 10 0% .4 e m;
padding : О lOpx 5рх О;
}
#content
{
f l oat: left;
w i dth: 475рх;
margin-left: 45рх;
padding: lSpx О;
О саигс
Текс-г 2'16з2'1щ~ теJСст а6э1щ11 ·t-эк.сr а6::~:1ц.а тuк.ст ~Gпца т
абзаца тЕ~~:::<:т абзаца т,аксr а5з:ща т,н,:.сr абзаца Т-з~..:.~т .: i. 1
теt'.СТ а6зt1ца тек-:-r а6заu..!! текст абза1::;а тeJ:::.cr абз!j.ца т,
dб:.аца ;е1'.ст а6зz~ш H!;.:.cr а5з~ц'.:!. теr:ст абзnца теr.ст 111
тт:::м- ?..5э~ца. те.:.С"!' а6::; ;~ц:!1. теJС.ст з.6эаца т~,х:с-, з&.1:.'Щ<'! т•
t,,б:;,.щ!l.
т~ксr абзац.а текс-т абэе.ц,11-:-,н:ст абэ;;~.ца: т•н:.::т аЬзщ::~ т
а6:нща 1'еr.,:т nбзаца т,а:~(ст n5эац:1 т,н:.сr абз.1:щz~ те1.:.~т a l
те~.~ :!!.6:~аца тек<-: а6згща Тf!КСТ 1t6з,ш,1\ тт,:.сr гб:о:,;ца т-
116:.аца текст а6заш ;екст а5-.:Jаца т<Jr.cr аб:.аца т11r.ст ul
твкст абзаца Т.?К.сr а6-:::ац.,. текст а6эаца теr.:('7 абз~ца т •
абз•.:ща..
Рис.19.8. Элемент #content с переопреде ­
ленным стилем
Стилевое оформление
контейнера #footer
Контейнер #footer отображае тся после контейнеров #nav и
# c ont e n t. Поскольку последние два контейнера являются
"плавающими", существует вероятность того, что контейнер
# f oot e r попытается разместиться рядом с ними. Чтобы преду­
предить эту возможность, при определении контейнера #fo o t er

198 Урок- 19
используйте свойство clear. Допускаются следующие вариан­
ты: clear: left, clear: right, clear: both и clear: none.
В данном случае используется значение clear: both,
применяя которое, мы указываем контейнеру #footer рас­
положиться ниже двух "плавающих" контейнеров.
Чтобы задать цвет фона, используйте свойство background:
# 3 8 7А9В. Цвет текста можно установить равным # f f f .
Далее для создания небольшого промежутка вокруг со­
держимого можно ввести заполнение 5рх снизу и сверху,
1 Орх слева и справа, используя, как показано в листин­
ге 19 .1 О, свойство padding : 5рх 1 Орх .
Чтобы выровнять содержимое примечания по правому
краю, используйте text-align: right.
Наконец можно уменьшить размер примечания, посколь­
ку обычно представляемая им информация менее важна, чем
основной тест. Для этого можно использовать объявление
font-size: 80%, как показано в листинге 19.10. Результаты
выполнения данного кода представлены на рис. 19.9.
Листинг 19. 1О. Код CSS, определяющий стилевое
оформление контейнера #footer
body
{
text-align: center;
Ьackground: #BOBFC2;
color: #444;
}
#container
{
}
hl
{
text-align: left;
margin: О auto;
width: 700рх;
background: #FFF url(header-base.gif) repeat-y;
background: #D36832;
color: #FFF;
padding: 2 Орх; -
margin: О;
border-bottom: 5рх solid #387А9В;
}
#nav
{
float: left;
width: 130рх;
display: inline;

margin-left : 20рх;
padding: 15рх О;
Расположение двух колонок... 199
#nav ul
{
}
margin: О;
padding: О;
list-style-type: попе;
text-align: right;
#nav li
{
}
background: url(header-bullet.gif) no-repeat 100% .4em;
padding: О lOpx 5рх О;
#content
{
float : left;
width : 475рх;
margin-left : 45рх;
padding : 15рх О;
}
#footer
{
clear: Ьoth;
Ьackground: #387А9В;
color: #fff;
padding: Spx lOpx;
text-align: right;
font-size: 80%;
О сайте
Tcx:cr абзаца тек.с-:: al,szщa тгr..ст абзаца тer.:cr t\6:эаца те
абэаца т ,н::.ст 45зlща тei.::cr ::~.6зща те~::ст а5зzща тЕr:а аб
текс-r абзаца тех;сr е.бэ~ща 't>!к.с-:- !lf;::;aцa те1и:т ~бэзц~ те
аб:эац.а т,зкст абзаца тet:cr t16эац:1 тех.ст а6зац3. Toa' K i. '7 ' аб
т1~t<:<.'Т aG;1,,.ц;;i TCJ<:. :."t · аб'J~ц<1 ·1· tк~т ~6:нща Тt!хм· ttбэаца 1·е
абзаца.
Текс:т r.fuuщ,n т,~1(.С":' 116:1аца те).'".С.Т ,:1.6:1аца тексr абзац~, те
абзаца теJ::СТ ;:,бэаца Т€1ССТ 36заца тех:сr а6зtща теке. аб
Т()КС'Т абэ1ш,а тех.ст afuiш..1,ll.1·1Jк.cт аб:н"ц;j т ск.1..1 а6:J:з.ца т<~!
абзаца т,зк.,:т абзаца т~t:.,:т n6эац;:~; тех.ст абз аца т,екс. аб
т~i::cr абз;:.ц.а TE!).'7.,-: -t а6эац:, т~t~п абзаца те ~::ст абзаца те
аб заца.
Рис.19 .9. Элемент #footer с переопределен­
ным стилем

200 Урок 19
Стилевое оформление
элемента <h2 >
Элемент <h2> используется для оформления основного за­
головка страницы. Если верхнее поле необходимо убрать, что­
бы <h2 > находился на одном уровне с содержимым контейнера
#nav container, используется cвoйcтвomargin-top: О.
Далее необходимо изменить цвет, используя объявление
color: #В23В00 .
Стандартные заголовки принято отображать полужирным
шрифтом. Данное положение по умолчанию можно изме­
нить, используя font-weight: normal, как показано в лис­
тинге 19.11 . Результаты выполнения данного кода представ­
лены на рис. 19.10.
Листинг 19. 11 . Код CSS, определяющий стилевое
оформление элемента <h2 >
body
{
text - align: center;
background: #BOBFC2;
color: #444;
#container
{
text-align: left;
margin: О auto;
width: 700рх;
background: #FFF url(header-base.gif) repeat-y;
}
hl
{
background: #D36832;
color: #FFF;
padding: 20рх;
margin: О;
Ьorder - bottom: Spx solid #387А9В;
}
#nav
{
float: left;
width: 130рх;
display: inline;
margin-left: 20рх;
padding: 15рх О;
==-
=
1

Расположение двух колонок. . . 201
#nav ul
{
margin: О;
padding: О;
list-style-type : none;
text-align: right;
#nav li
{
Ьackground: url{header-bullet.gif) no-repeat 100% .4em;
padding: О lOpx 5рх О;
#content
{
float : left;
width: 475рх;
margin-left : 45рх;
padding: 15рх О;
}
#footer
{
}
h2
{
clear: Ьoth;
Ьackground: #387А9В;
color : #fff;
padding : 5рх lOpx;
text-align: right;
font-size : 80%;
margin-top: О;
color: #В23ВОО;
font-weight: normal ;
T P.X<!'t' 11&.1ща тt:кст "6ё!11..Ц:s т~i:.c-r 11,fr.1 ,,1tt1 ,:11,::cr аБзац11 т,н:сr
ri)Заца ,11~ -: - 115зо.ц1l тс,:,,:т 116:нщс на:.r. аБ:н-.ца т,;r.:cr а6:.аце.
,е~а l!бзаца т,а:.<."Т аб;аца ,:-ексr аб:~г.1μ тt:у..ст a5:i"'1.: ,n Т'.11:.СТ
1'!6:зnц,'1 нкr. ainnц:,, Т l:!1:.<:Т nбэ;щ'.1 тet:.<"t ,,.5:нщn ты,,~ :sбзl!.цn
-:-е,:.ст ~б:~;ш.а тн.:;,r .: .' .i:i~ ·••~к-:-.- u6-Jot!~ ,·екс:-r ~6-.iiщ<l те1:.ст
,6,,щ,.
Тer.(;t абзац:,. ТЕ'r.:ст "бэш'!!. те,::сr 3.5заца те..:сr а6з!!.ца т,а:.ст
а6заца ;ок,:,:- .11Маца тек~ а6;;1ща Tf:!l:.C7 а6з.~1.111. тr:1<:,~ т ;1.6зiщii
, ,н:.сr ебэnца н r.: !!Т' nб-эn..:.3 7 ('КС;' а6защ, т о~.:ст :,5:нщn тв~:.<ёТ
абэ&J.Э~ Т~J'.::Т afoau.a TE):cl' а6:нща т.is::r.:- абзаца т.;- ~::ст аб:нща
-rекст лf>':1:,,1ui Тf!КС'Г :16:нu;;;, ,акс-:- а6:зtщ1,. т,н::ст t16;.1щ:1 те~:.п
а6-Jоща.
Рис.19.10. Элемент <h2> с переопределеп­
пым стилем

202 Урок 19
Стилевое оформление
элемента <а>
Последний этап данного урока связан с переопределением
цветов ссылок. При этом мы будем работать с четырьмя псев­
доклассами.
Для псевдокласса а: link устанавливается свойство color:
#175B7D, для псевдокласса a : visited:- свойство color:
#600 .
Для псевдоклассов а: hover и а: act i ve устанавливаются
соответственно свойства color: #fff; и background:
#175B7D, как показано в листинге 19.12 . Результаты выпол­
нения данного кода представлены на рис. 19.11 .
Листинг 19. 12. Код CSS, определяющий стилевое
оформление элемента <h2>
Ьоdу
{
text-align: center; ·
background: #BOBFC2;
color: #444;
#container
{
text-align: left;
margin: О auto;
width: 700рх;
Ьackground: #FFF url(header-Ьase.gif) repeat-y;
}
hl
{
Ьackground: #DЗ 683 2;
color: #FFF;
padding: 20рх;
margin: О;
border-bottom: Spx solid #387А9В;
#nav
{
float: left;
width: 130рх;
display: inline;
margin-left: 20рх;
padding: 15рх О;

#nav ul
{
margin: О;
padding: О;
list-style-type: попе;
text-align: right;
#nav li
{
Расположение двух колонок... 203
background: url(header-bullet.gif) no-repeat 100% .4em;
padding: О 10рх 5рх О;
#content
{
float: left;
width: 475рх;
margin-left: 45рх;
padding: 15рх О;
#footer
{
}
h2
{
clear: both;
background : #387А9В;
color: #fff;
padding: 5рх 10рх;
text - align: right;
font-size: 80%;
margin-top: О;
color: #В23ВОО;
font-weight: normal;
а:link
{
color: #175B7D;
a:visited
{
color: #600;
a:hover, a:active
{
color: #fff;
Ьackgro\Шd: #175B7D;

204 Урок19
_С,т..е.:,:r.J!~1;и•
:ьрт-Щм-~ .
K:cfir._1.1.;~:zы:;, ·
Т .~т.:ст !!.Ь'Зl'Щ.'- т,:,,~,:,::т .,6::,,.ц'1 т~t:("Т :,5:11.1.1 ~/\ To!J" ...~ >1 б: ищ1 1 "! ';\'r.:l!'I '
&Гу-"-'Цtl i'ilK"-"ё t16-.,itщa т е~::\'"!' 116;;;:.ц,tt .t!l:.(7 с6:11ш11 те1:.,:-r :)бзаu11
,ur.:~ аб:з:ща т,а:<'!Т 116;!.).:.1,а те ~:::ст ,б:.а~ тн:... .-т ::16защ1 Tt:Ko?:"
uf.:uЩ. ":"f!K<7 e$зnu,11 т@к<:r r.~6э11.ц11;-4к1,; ~:.5:НЩ>) т,э,~::.,.-r t16нщr.,
-:-е-кст .:.6-J:щa -rv•·.м- 3.6:iaJ..;,a T'Jr..c-:: абз-аца тcr:cr t16-э1Щ,:!!.ТС1t<'Т
абз.ща.
Ter.~ а6э~ш т1;;.-.сr а6:э;щ11 т•зJ.:,..; а&.аца т~~::.ст :~бэаца тer.cr
а6:нщ., ;-,1 1,: ,;. 11.6::11~i,, т~t:<'Т 116'!!1ш.ат0-.:.с-т 11.5:t"- 1 1 1'1 тr,~·.,'!Т ,1,f ,:;a 1Jft
rех.ст а6:1rщ.а·r н:ст а6-.Jц.Ц1:1 т1:1~:::-:т ~&эzща т~1:сr ~6:нщn т,э,кl.'1'
isf-:;aцa ':"Н.С': а6:~аЩ1 то::ст аб~МJ,11. тс~:.,:т :6~t1ца т~е.:с; 11бз,ща
>flkC':" аОО,щr. Tf<Kt'Т 1.1.бза:,.n те~::.~, е.ООnца TP.r:cr nб-:нща Т4К<';"
а&.1аца.
Рис.19.11. Элемент <а> с переопределенным
стилем
Резюме
Из этого урока вы узнали, как выровнять по центру со­
держимое окна браузера, определить стиль элемента <hl>
и разместить на странице две · колонки и примечание. В сле­
дующем уроке вы научитесь, используя CSS, определять
стиль страницы, предназначенной для печати.
rc:::-::
~

~=.._.,,,,..........,__,,,.,._
.._2)11-:;:JW'"""ili---==,c:;a__
..._ _.:::,,
♦ ...-----~~-!a:a-lDМlil
Урок20
Подготовка стрkницы
для печати
В этом уроке вы паучитесь, используя CSS, создавать стиль
страницы для печати. Кроме того, вы узпаете о типах сре­
ды и их использовании.
Настройки CSS для печати
В прошлом многие сайты предлагали две версии каждой
страницы - -для отображения на экране и для печати. В об­
щем случае содержимое двух страниц не отличалось, оно про­
сто представлялось различными способами.
Одно из достоинств CSS заключается в том, что можно
разработать стиль страницы для печати, не создавая при этом
дополнительных страниц. Для этого используется атрибут
media, который можно применять к ссылкам на внешние
таблицы стилей (как показано в листинге 20.1) или к элемен­
ту style внедренных стилей (как показано в листинге 20.2).
Листинг 20. 1 . Код HTML, содержащий ссылку на внешнюю
таблицу стилей и значение media, равное screen
<link rel="stylesheet" href="lesson20.css " type="text/css"
media= 11 screen11 >
Листинг 20.2. Код HTML, содержащий внедренный стиль
и значение media, равное screen
<styl e type=""text/css" media="screen">
<!--
.
Screen style rules go here ...
-->
</styl e>

206 Урок20
Если структура страницы должна быть одинаковой для
экрана и для печати, значение атрибута media необходимо
установить так, как показано в листинге 20.3 (для внешней
таблицы стилей) и в листинге 20.4 (для внедренных стилей).
Листинг 20.3. Код HTML, содержащий ссылку на внешнюю
таблицу стилей и значение media, равное al l
<link rel="stylesheet" href="lesson20.css" type="text/css"
media="all">
Листинг 20.4 . Код HTML, содержащий внедренную таблицу
стилей и значение media, равное all
<style type="text/css" media="all">
<!--
.
All style rules go here ...
-->
</style>
Если структура страницы должна отличаться при отобра­
жении на экране и при ·печати, значения атрибута media
должны устанавливаться равными screen и print, как по­
казано в листингах 20.5 и 20.6..
Листинг 20.5 . Код HTML, содержащий ссылки на внешние
таблицы стилей и значения media, равные screen и print
<link rel="stylesheet" href="lesson20.css" type="text/css"
media= 11 screen11 >
<link rel="stylesheet" href="lesson20-print.css"
type="text/css" media="print">
Листинг 20.6 . Код HTML, содержащий внедренные таблицы
стилей и значения media, равные screen и print
<style type="text/css" media="screen">
<! --
.
Screen style rules go here ...
-->
</style>
<style type="text/css" media="print">
<!- -
.
Print style rules go here ...
-->
</style>

Подготовка страницы для печати 207
Начальные код-ы HTML и CSS
Как показано в листинге 20. 7, в данном уроке мы будем
использовать код HTML из урока 19, "Расположение двух ко­
лонок с заголовком и примечанием", и подготовим его для
печати.

208 Урок20
Листинг 20. 7. Код HTML, содержащий разметку страницы
с двумя колонками
<div id= 11 container 11 >
<hl>
Sitename
</hl>
<div id= 11nav11 >
<Ul>
<l i><a href="# ">Home</a></li>
<li><a href="#">AЬout us</a></li>
<li><a href="# ">Services</a></li>
<li><a href ="# " >Staf f</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href ="# " >Con tact us</a></li>
</ul>
</div>
<div id="content">
<h2>
AЬout Sitename
</h2>
<р>
Lorem ipsum dolor ....
</р>
<р>
Ut wisi enim ad ...
</р>
</div>
<div id="footer">
Copyright &сору; Sitename 2005
</div>
</div>
Создание селекторов для стиля
для печати
Для определения стиля страницы с двумя колонками будем
использовать пять селекторов, показанных в листинге 20 .8.
Листинг 20.8. Код CSS, иллюстрирующий селекторы,
применяемые для создания стиля для печати страницы
с двумя колонками
body {...}
hl {...}
#nav {...}
#footer {. ..}
а {...}
_.......,:с: tfИЗi15ieeнr:tlИ
..;,)
?i'strhFF;;;

Подготовка страницы для печати 209
Стилевое оформление элемента
<body>
Стиль элемента <body> будет переопределен с использова­
нием объ.явлен~й font, color и background, как показано
в листинге 20.9 .
Свойство font используете.я для определения стандартного
размера шрифта и семейства шрифтов для всех элементов
страницы. В данном примере используете.я значение 100% , по­
скольку это позволяет пользователю контролировать размер
шрифта. Кроме того, выбран шрифт с засечками (serif), по­
скольку он .являете.я более читабельным на печати, тогда как

210 Урок20
шрифт без засечек (sans-serif) удобнее на экране или мони­
торе (например, на небольших экранах мобильных · телефонов
шрифты с засечками читать практически невозможно). Все на­
стройки вы можете изменить по своему усмотрению.
Для элемента <body> не задаются ни поля, ни заполнение;
все соответствующие настройки определяются принтером. Ре­
зультаты выполнения данного кода представлены на рис. 20.1.
Листинг 20. 9. Код CSS, определяющий стилевое
оформление тела
body
{
font: 100% georgia, times, serif;
background: #fff;
color: #000;
Имя сайта
• На гп"в..!:!.Ую
•Онас
• Усл.уrи
• Сотрудники
• Порт-ф олио
1
•
Контакты
О сайте
Текст абзаца текст абзаца текст абзаца т екст абзаца текст абзаца текст абзаца текст абзаца
текст абзаца текст абзаца текст абзаца текст абзаца текст абзаца текст абзаца текст абз аца
текст абзаца текст абзаца текст абзаца текст абзаца т~кст абз аца текст абзаца текст абзаца
те кст абзаца текст абзаца.
Текст абзаца текст абза ца текст абзаца текст абзаца текст абзаца текст абзаца текст абзаца
текст абзаца текст абзаца текст абзаца текст абзаца текст абзаца т е кст абзаца текст абз аца
текст абзаца текст абзаца текст абзаца текст абзаца текст абзаца текст абзаца текст абзаца
текст абзаца текст абзаца.
Copy right С) Имя сайта 2005
Рис. 20.1. Элемент <body> с переопределенным стилем

Подготовка стра н ицы для печати
Стилевое оформление
элемента <hl>
211
Стиль элемента <hl> будет очень простым ; для него зада­
ются только свойства border-bottom и margin-bottom, как
п6казано в листинге 20.10 и на рис. 20.2 .
\
-
Листинг 20. 1О. Код CSS, определяющии стилевое
оформление элемента <hl>
Ьоdу
{
}
hl
{
font : 100% georgia , times, serif;
Ьackground: #fff;
color: #ООО;
Ьorder-Ьo tt om: lpx sol id #999;
margin-Ьottom: 1~;
Имя сайта
• На rлаЕную
• Она,:
• '{сл VГи
• Сотрудники
• Порт-фолио
• Контакты
О сайте
Т екст .!1.бзаца т екст абз аца текст абзаца текст абзаца текст абзаца текст абзаца текст абзаца
текст абзаца те кст абза ца т екст абзаца т екст аб з аца текст абзаца текст абзаца текст абзаца
те кст абза ца т екст абза ца т екст абз аца т екст абзаца текст абзаца текст абза ца текст абзаца
текст абзаца текст абзаца.
Текст абзаца текст абзаца текст абзаца текст абзаца текст абзаца текст абзаца текст абзаца
те кст абзаца те кст абзаца те кст абзаца текст абзаца текст абзаца текст абзаца текст абзаца
те кст абз аца те кст абзац;z,: т екст абз аца т екст аб з аца т екст абзаца текст абзаца текст абзаца
те кст абзаца текст абзаца.
Copyright С1 Имя сайта 2005
Рис. 20.2. Элемент <hl> с п ереопреде ле нны м с тилем

212 Урок20
Стилевое оформление
контейнера #nav
Чтобы удалить средства навигации с печатаемой страни­
цы, необходимо использовать свойство display: none;, как
показано в листинге 20.11 . Результаты выполнения данного
кода представлены на рис. 20.3 .

Подготовка страницы для печати
Листинг 20.'11. Код CSS, определяющий стилt":вое
оформление контейнера #nav
body
{
}
hl
{
font: 100% georgia, times, serif;
background: #fff;
color: #ООО;
Ьorder-bottom: l px solid #999;
margin- bottom: lem;
#nav
{
display: none;
Имя сайта
/
О сайте
Т екст абзаца текст абзаца текст абзаца текст абзаца текст абзаца текст
абзаца т екст абзаца текст абз аца текст абз аца текст абзаца текст абзаца
текст абзаца текст абзаца текст абзаца текст абзаца текст абзаца текст
абзаца текст абзаца текст абзаца те кст абзаца текст абзаца текст абзаца
текст абзаца.
текст абзаца. Текст абзаца текст абз аца текст абзаца текст абзаца текст
абзаца текст абз аца текст абзаца текст абзаца текст абзаца текст абзаца
текст абзаца.
Copyright С> Имя сайта 2005
Рис. 20.3 . Элемент #navc переопределенным стилем
213

214 Урок20
Стилевое оформление
контейнера #footer
Примечание можно отделить от остального содержимого,
используя свойства border-top и margin-top.
Содержимое примечания необходимо выровнять по пра­
вому краю, используя свойство text-align.
Чтобы добавить промежуток между границей и содержи­
мым примечания, можно использовать свойство padding -
top, как показано в листинге 20.12 . Результаты выполнения
данного кода представлены на рис. 20.4.
Листинг 20. 12. Код CSS, определяющий стилевое
оформление контейнера #footer
body
{
}
hl
{
font: 100% georgia, times, serif;
background: #fff;
color: #ООО;
border-bottom: lpx solid #999;
margin-bottom : lem;
#nav
{
display: none;
#footer
{
Ьorder-top: lpx solid #999;
text-align: right;
rnargin-top: Зеm;
padding-top: lem;

- - - ------------ ~
Подготовка страницы для печати 215
Имя сайта
О сайте
Текст абзаца текст абзаца текст абзаца текст абзаца текст абзаца текст
абзаца текст абзаца текст абзаца текст абзаца текст абзаца текст абзаца
текст абзаца текст абзаца текст абзаца текст абзаца текст абзаца текст
абзаца текст абзаца текст абз.!lца текст абзац21. текст абзаца текст абзаца
текст абзаца.
текст аб~аца. Текст абзаца текст абзаца тек.ст абзаца текст абзаца текст
абзаца текст абзаца текст абзац.!1 текст абзаца текст абзаца текст абзаца ·
текст абзаца.
Рис. 20.4. Элемент #footerc переопределенным стилем
Стилевое оформление
элемента <а>
Гиперссылки не имеют реальной ценности на печатаемой
странице . Чтобы сделать вид ссылки таким же, как вид всего
остального содержимого, ее цвет необходимо установить рав­
ным #ООО, а затем отключить подчеркивание , используя
text-decoration: none;, как показано в листинге 20.13.
Окончательный результат представлен на рис. 20.5.
Листинг 20. 13. Код CSS, определяющий стилевое
оформление элемента <а>
body
{
}
hl
{
font: 100% georgia, times, serif;
background: #fff;
color: #ООО;
border - bottom: lpx solid #999;
margin-Ьottom: lem;
#nav
{
display: none;
}
#footer

216 Урок20
а
{
border-top: l px solid #999;
text-align: r ight ;
ma rgin- top : Зет;
paddi ng - top: lem;
color: #000;
text-decoration: none;
Имя сайта
О сайге
Текст абзаца текст абз аца те кст абзаца текст абзаца текст абз аца текст
абзаца текст абзаца текст абзаца текст абз аца текст абзаца текст абзаца
текст абзаца текст абзацатекст абзаца текст абзаца текст абзаца текст
абзаца текст абзаца текст абзаца те кст абз аца текст абзаца текст абзаца
текст абза ца.
текст абзаца. Текст абзацатекст абзаца текст абзаца текст абзаца текст
абзаца текст абзаца текст абз аца текст абзаца текст абзаца текст абз аца
текст абза ца .
Copyright С> Имя саит а 2005
Рис . 20.5 . Эл емепт <а> с переопределеппы м стилем
Резюме
Из этого урока вы узнали, как, используя атрибуты среды,
определять стиль материала, подготавливаемого для печати.
В следующем уроке вы научитесь размещать на странице три
колонки переменного размера с заголовком и примечанием.
АА&
СГЭ?Гl:::-::Л .k < .
.ш:а::w.:::...Е-.&.!~

Урок 21
Размещение трех
колонок с заголовком
и примечанием
В этом уроке вы научитесь размещать на странице три ко­
лонки текста с заголовком и примечанием. Используемый
метод предусматривает расположение фоновых изображений
внутри двух контейнеров, позволяющее создать иллюзию
цветных колонок, а также использование трех " плавающих"
колонок .
Подготовка НТМL-кода
Хотя для формирования структуры НТМL-страниц можно
использовать таблицы, такое решение не идеально . С добавле­
нием таблиц страницы сушественно увеличиваются в размерах
из-за необходимости дополнительной разметки . Кроме того ,
они становятся менее гибкими, поэтому разделы документа
уже нельзя легко перемещать, не затрагивая всю разметку .
Формируя структуру с помощью C$S , мы в общем случае
получаем меньшие и более гибкие документы.
НТМL-код этого урока состоит из семи основных контей­
неров - элемента <hl> и шести элементов <div>, как пока­
зано в листинге 21.1 .
Листинг 21.1 . Код HTML, содержащий разметку страницы
с тремя колонками
<hl>
Sitename
</hl>

218 Урок21
<div id="container">
<div id="container2">
<div id="content">
<h2>
Page heading
</h2>
<р>
Lorem ipsum dolor sit amet ...
</р>
</div>
<div id="news">
<hЗ>
News
</hЗ>
<р>
Lorem ipsum dolor sit amet ...
</р>
</div>
<div id= 11 nav11 >
<hЗ>
Sections
</hЗ>
<ul>
<li><a href = "# ">Home</a></li>
<li><a href="#">AЬout us</a></li>
<li><a href = "#">Services</a></li>
<li><a href="# ">Staff</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
<div id="footer">
Copyright &сору; Sitename 2005
</div>
</div>
</div>
Создание селекторов
для определения стиля
страницы с тремя колонками
Чтобы оформить стиль страницы с тремя колонками, будут
использованы 10 селекторов, как показано в листинге 21.2.

Размещение трех колонок... 219
Листинг 21.2. Код CSS, иллюстрирующий селекторы,
которые применяются для стилевого оформления страницы с
тремя колонками
body {...}
hl {...}
h2, hЗ, р {...}
#container { ... }
#container2 { . .. }
#content { ... }
#news { ... }
#nav {...}
#nav ul {...}
Jtfooter { ... }

220 Урок21
Создание сетки "жидкой"
структуры
При создании "жидкой" структуры важно создать верти-
1
кальные разделительные полосы, чтобы колонки с содержи-
)
мым не перекрывались. Все размеры ширины необходимо за-
давать в процентах, чтобы при изменении размера в зависи-
мости от состояния окна браузера страница представляла со- ,
бой единый объект .
Ширина в процентах вычисляется браузером, поэтому при
вычислениях неизбежно округление в большую или меньшую
сторону. Поэтому суммарная ширина всех элементов должна
быть меньше ширины окна, чтобы за счет разницы можно
было сгладить возможные ошибки округления.
В нашем случае общая ширина контейнеров и их заполне­
ния составляет 100 % . Тем не менее заполнение с правой сто­
роны элемента #nav не включено в расчеты, поэтому в общей
структуре остается неопределенным 3 % МЕ)ста. Все выбран­
ные размеры пок.азаны на рис 21.1 .
Рис. 21.1 . Диаграмма сетки "жидкой" структуры
Создание фоновых изображений
В данной структуре используется два фоновых изображения,
создающих иллюзию цветных колонок. Изображения должны
быть достаточно широкими , чтобы заполнить наибольший эк­
ран. В данном случае их ширина выбрана равной 2 О О Орх.
«с
•:1:sa:

Размещение трех колонок... 221
С помощью первого изображения .создается цвет фона ко·
лонок #content и #news.
С помощью второго изображения создается цвет фона ко­
лонки #nav. Поскольку данное изображение накладывается
поверх первого, оно должно иметь прозрачный фон, как по­
казано на рис 21.2.
L___
"y
__
_.)~~
50%
30%
20%
Фоновый рисунок 1 (2000 рх)
50%-1000рх
Фоновый рисунок 2 (2000 рх)
80% - 1600рх(прозрачный раздел)
Рис. 21 .2 . Фоповые изображепия
Стилевое оформление элемента
<body>
Завершив работу с сеткой и изображениями, можно начи­
нать кодирование страницы.
Первый этап заключается в выравнивании содержимого
страницы по границам окна браузера. Для этого свойствам
margin и padding необходимо присвоить значение О.

222 Урок21
Для всех элементов страницы можно установить свойства
font-size и font-family, задав их для элемента <body> с
помощью объявления font: 90%
arial, helvetica,
sans-serif;.
Кроме того, для элемента <body> необходимо задать свой­
ства background-color и color. В качестве цвета фона выби­
рается #387А9В, цвет текста равен #333, как показано в лис­
тинге 21.3. Результаты выполнения данного кода представле­
ны на рис. 21.3.
Листинг 21.3 . Код CSS, определяющий стилевое
оформление элемента <body>
body
{
margin: О;
padding: О;
font: 90% arial, helvetica, sans-serif;
Ьackground: #387А9В;
color: #333;

Размещение трех колонок... 223
Рис. 21.3. Элемент <body> с переопределеппым стилем
Стилевое оформление
элемента <hl>
Используем элемент <hl> для создания "шапки" вверху
страницы.
Вначале необходимо задать свойства background-color
и col'or. В данном примере используем цвет фона #D36832 и
цветтекста#fff.
Стандартные элементы <hl> имеют предопределенные
верхние и нижние поля. Чтобы поместить элемент <hl> в ле­
вый верхний угол окна браузера, этим полям необходимо
присвоить значение О.
Для создания пустого пространства вокруг содержимого
элемента <hl > применяется свойство padding : . 5 em 3 %; .
Таким образом, вверху и внизу содержимого добавляется за­
полнение . 5 em, а слева и справа - заполнение 3 %.

224 Урок21
Наконец с помощью объявления border-bot-tom: 5рх
solid #387А9В; вверху элемента добавляется граница, как
показано в листинге 21.4 и на рис. 21.4 .
Листинг 21.4. Код CSS, определяющий стилевое
оформление элемента <hl>
body
{
}
hl
{
rnargin: О;
padding: О;
font: 90% arial, helvetica, sans-serif;
background: *387А9В;
color: *333;
Ьackground: #D36832;
color: #FFF;
margin: О;
padding: .Sem 3%;
Ьorder-Ьottom: Spx solid #387А9В;
Рис. 21.4 . Элемент <hl> с переопределенным стилем
~

IJ
1
Размещение трех колонок... 225
Стилевое оформление
элеме-нтов <h2 > и <hЗ >
Элементы <h2 > и <hЗ > располагаются внутри элементов
#container и #container2. Одни браузеры отобразят эти
элементы заголовков и их верхние границы внутри контей­
нера. Другие покажут только заголовки и позволят полям
выходить за верхнюю границу контейнера. Подробнее этот
момент объясняется во врезке "Пол.я в ловушке" в уроке 13,
"Стилевое оформление блока цитаты". Существует множест­
во способов решения данной проблемы. В этом уроке вер·хние
пол.я элементов <h2> и <hЗ> просто удаляются с помощью
margin-top: О (листинг 21.5 и рис. 21.5).
Листинг 21.5. Код CSS, определяющий стилевое
оформление элементов <h2> и <hЗ>
•
Ьоdу
(
}
hl
(
margin: О;
padding: О;
font: 90% arial, helvetica, sans-serif;
background: #387А9В;
color: #333;
Ьackground: #D36832;
color: #FFF;
margin: О;
padding: .Sem 3%;
Ьorder-bottom: Spx solid #387А9В;
h2, h3
(
margin-top: О;

226 Урок21
Рис. 2 1.5 . Элементы <h2> и <hЗ> с переопределенным стилем
Стилевое оформление первого
u
контеинера
Первое фоновое и зображение будет связано с элементом
#container посредством объ}JЗЛения background:
url
(backOl.gif) repeat-y 50% О ; , как показано в листин­
ге 21 .6. Таким образом, это изображение (backOl . gif) будет
повторяться сверху в~из по оси у .. Изображение размещает­
ся так, чтобы 50 % его площади занимали точно половину
фона элемента #container (рис . .21 .6).
Листинг21.б. Код CSS, определяющий стилевое
оформление первого конте й нера
body
{
margin : О;
padding : О;

.
, _ Ра~м~щение трех КОf!Онок ...
font: 90% arial, helvetica, sans-serif;
Ьackground: #387А9В;
color: #333;
}
hl
{
ЬacKground: #D36832;
color: #FFF;
margin: О;
padding: .5em 3%;
Ьorder-Ьottom: 5рх solid #387А9В;
h2, h3
{
margin-top: О;
#container
{
background: url(ЬackOl.gif) repeat-y 50% О;
екст абзаца текст абзаца текст абзаца те
абзаца текст абзаца текст абзаца текст аб
екст абзаца текст абзаца текст абз,~ца те
абзаца текст абзаца текст абзаца ~екст аб
ОБОСТИ
кст абзаца текст абзаца текст абзаца те
заца текст абзаца текст абзаца текст аб
• На гла:в :ную
•Онас
• у~~
• Сотрудник.и
• Поf:'1':фолио
• К о :нтакть1
----
Рис. 21.6. Первый коптейпер с переопределеппым стилем
227

228 Урок21
Стилевое оформление второго
и
контеинера
Второе фоновое изображение будет связано с элементом
#container2 посредством объявления background : url
(back02. gif) repeat-y 80% О;, как показано в листин­
ге 21. 7 и на рис. 21. 7. Подобно предыдущим правилам эле­
мента #container, 80 % изображения будут занимать 80 %
окна браузера и повторяться вниз по оси у.
Листинг21.7. Код CSS, определяющий стилевое
оформление второго контейнера
Ьоdу
{
}
hl
{
margin: О;
padding: О;
font: 90% arial, helvetica, sans-serif;
Ьackground: #387А9В;
color: #333;
Ьackground: #D36832;
color: #FFF;
margin: О;
padding: .5em 3%;
Ьorder-Ьottom: 5рх solid #387А9В;
h2, h3
{
margin-top: О;
#container
{
Ьackground: url(ЬackOl.gif) repeat-y 50% О;
#container2
{
Ьackground: url(Ьack02.gif) repeat-y 80% О; }

Размещение трех колонок... 229
екст аб:,аца текст аб:,аца текст аб:,-zща текс
абзаца текст абзаца текст абзаца текст абз
екст абзаца текст абзаца текст абзаца тек.с
абзаца текст абзаца текст абзаца текст абза
овости
екст абзаца текст абзаца текст абзаца тек
• На главную
•Онас
• услуги
• Сотрудниr.и
• П ОJ!Г:фолио
• Конrа к1.ы
Рис. 21.7. Второй контейнер с переопределенным стилем
Ст1:1левое оформление колонки
#content
Первая колонка должна быть "плавающей" и иметь ши­
рину 44 % . Кроме того, для нее необходимо задать поля, ис­
пользуя объявление rnargin: lern З %; , как показано в лис­
тинге 21.8 . Мы получаем 1 em пустого пространства над кон­
тейнером и 3 % полей со всех сторон (небольшой промежуток
между колонками). Результаты выполнения данного кода
представлены на рис. 21.8 .
Листинг 21.8 . Код CSS, определяющий стилевое
оформле н ие столбца #content
Ьоdу
{
margin : О;
padding: О ;
font : 90 % arial, helvetica, sans-serif ;
Ьackground: # 387 А9В;

230 Урок21
color: #333;
}
hl
{
background: #D36832;
color: #FFF;
margin: О;
padding: .5em 3%;
border-Ьottom: 5рх solid #387А9В;
}
h2, h3
{
marg in-- top: О ;
#container
{
background: url(backOl.gif) repeat - y 50% О;
#container2
{
background: url(back02.gif) repeat-y 80% О;
#content
{
width: 44%;
float: left;
margin: lem 3%;
Заголовок страницы
Текст аб:щца текст абзаца т~кст абзаца
текст абзаца текст абзаца текст абзаца
текст абзаца текст абзаца тек.ст абзаца
текст абзаца текст абзаца текст абзаца
текст абзаца текст абзаца текст абзаца
текст абзаца текст абзаца текст абзаца
текст абзаца текст абзаца текст абзаца •
текст абзаца текст абзаца.
• П орг:фолио
• К Ol·П'ZiК'IЪl
Рис. 21.8. Колонка #content с переопределенным стилем

Размещение трех колонок... 231
Стилевое оформление колонки
#news
Вторая колонка должна быть "плавающей" и иметь шири­
ну24%.Какипервая,онадолжнаиметьполя1 em 3 %;,
как показано в листинге 21.9 и на рис. 21.9 . Как и в случае с
колонкой #content , выполнение приведенного кода даст
пустое пространство величиной 1 em над контейнером и 3 %
поля с обеих сторон.
Листинг 21.9 . Код CSS, определяющий стилевое
оформление столбца #news
body
{
}
hl
{
margin: О;
padding: О;
font: 90% arial, helvetica, sans-serif;
Ьackground: #387А9В;
color: #333;
Ьackground: · #D36832;
color: #FFF;
-
margin: О;
padding: .Sem 3%;
border-bottom: Spx solid #387А9В;
}
h2, hЗ
{
margin-t:op: О;
#container
{
background: url(backOl . gif) repeat - y 50% О;
#container2
{
background : url(back02.gif) repeat-y 80% О;
)'
#content
{
width: 44%;
float: left;
margin : lem 3%;

232 Урок21
#news
{
width: 24%;
float: left;
margin: lem 3%;
Заголовок страницы
Текст абзаца текст абзаца текст абзаца
текст абзаца тек.ст абзаца. тек.ст абзаца
текст абзаца текст абзаца тек.ст абзаца
текст абзаца тек.ст абзаца текст абзаца
тек.ст абзаца текст абзаца текст абзацj1
текст абзаца текст абзаца текст абзаца
Рис. 21.9. Колопка #news с переопределеппым стилем
Стилевое оформление
колонки #nav
Третья колона должна быть "плавающей" и иметь ши­
рину 14 % . Подобно другим колонкам, ей также требуется
заполнение. Однако заполнение для этого элемента задается с
помощью свойства padding: lem О lem 3 %; , как показано
в листинге· 21.10. Заполнение по правому краю не определе­
но, поскольку данный промежуток не определяется с целью
учета ошибок округления. Результаты выполнения данного
кода представлены на рис. 21.10.
, Листинг 21.1 О. Код CSS, определяющий стилевое
оформление столбца #nav
Ьоdу
{
margin : О;
padding: О;
font: 90% arial, helvetica, sans-serif;

}
hl
{
background: #387А9В;
color : #333;
Ьackground: #D36832;
color : #FFF;
margin : О;
padding : .Sem 3%;
Размещение трех ко11онок... 233
Ьorder-Ьottom : Spx solid #387А9В;
}
h2, h3
{
margin-top : О;
#container
{
Ьackground : url(Ьack01.gif) repeat-y 50 % О;
#container2
{
Ьackground: url(Ьack02 . gif) repeat-y 80% О;
#content
{
width: 44%;
float: left;
margin : lem 3%;
#news
{.
width: 24%;
float : left;
margin: lem 3%;
#nav
{
width: 14%;
f _loat: left;
margin: lem О lem 3%;

234 Урок21
Заголовок страницы
Текст абзаца текст абзаца текст абзi1t.ца текст
абзаца текст абзаца текст абзаца текст абз:ща
тексr абзаца текст абзаца текст абзаца текст
абзаца текст абзаца текст абзаца текст абзаца
текст абзаца текст абзаца теJСст абзаца текст
абзаца текст абзаца текст абзаца текст абзаца
текст абзаца текст абзаца.
Рис. 21.10. Колонка #navc переопределеппым стилем
Стилевое оформление
элемента <ul>
Третья колонка содержит навигационную панель (список).
В этом уроке позиции списка будут выровнены по границе
контейнера без использования · маркеров. Для этого приме­
няются три объявления - margin: О; , padding: О; и
list-style-type: none;. Чтобы добавить пустое простран­
ство между позициями списка, можно увеличить высоту
строки, например, используя line-height: 150%;, как по­
казано в листинге 21.11 и на рис. 21.11 .
Листинг 21. 11 . Код CSS, определяющий стилевое
оформление элемента <ul>
body
{
}
hl
margin: О;
padding: О;
font: 90% arial, helvetica, sans-serif;
Ьackground: #387А9В;
color: #333;

background: #D36832;
color: #FFF;
margin: О;
padding: .Sem 3%;
Размещение трех колонок... 235
border-bottom: Spx solid #387А9В;
}
h2, hЗ"
{
margin-top: О;
#container
{
background: url(backOl.gif) repeat-y 50% О;
#container2
{
Ьackground: url(back02.gif) repeat-y 80% О;
#content
{
width: 44%;
float: left;
margin: lem 3%;
#news
{
width: 24%;
float: left;
margin: lem 3%;
#nav
{
width: 14%;
float: left;
margin: lem О lem 3%;
#nav ul
{
margin: О;
padding: О;
list-style-type: none;
line-height: 150%;

236 Урок21
Заголовок страницы .
Текст абзаца текст абзаца текст абзаца
текст абзаца текст абзаца тею:т абз.аца
текст абзаца текст абзаца текст абзаца
текст· абзаца текст абзаца текст абзаца
текст абзаца текст абзаца текст абзаца
текст абзаца текст абзаца текст абзаца
текст абзаца текст абзаца текст- абзаца­
текст абзаца текст абзаца.
Рис. 21 .11. Элемент <и l > с переопределенным с тилем
Стилевое оформление элемента
#footer
Элемент #footer должен находиться под тремя "плаваю ­
щими" колонками. Для этого используется объявление
c l ear : both; . Свойства backgrou nd- col or и col or зада­
ются с использованием объявлений background : #ЗВ 7 А9В;
и color: #fff;.
Далее к элементу #footer необходимо добавить заполне­
ния, чтобы немного увеличить пустое пространство вокруг
содержимого . Для этого используется объявление padding:
5рх 3%;.
Наконец содержимое примечания можно выровнять по
правому краю , используя объявление text - align: right;,
как показано в листинге 21.12 . Результаты выполнения дан­
ного кода представлены на рис . 21 . 12 .
1

Размещение трех колонок... 237
Листинг 21.12. Код CSS, определяющий стилевое
оформление элемента #footer
Ьоdу
{
}
hl
{
margin: О;
padding : О;
font: 90% arial, helvetica, sans-serif; ·
background: #387А9В;
color: #333;
,
Ьackground: #D36832;
color: #FFF;
margin: О;
padding: .Sem 3%;
Ьorder-Ьottom: Spx solid #387А9В;
h2, h3
{
margin-top : О;
#container
{
background : url{ЬackOl.gif) repeat-y 50 % О;
#container2
{
background : ur+{Ьack02 . gif) repeat-y 80% О;
#content
{
width: 44%;
float: left;
margin: lem 3%;
#news
{
width: 24%;
float: left;
margin: lem 3%;
#nav
{
width : 14%;
float: left;
margin: lem О lem 3%;
#nav ul
{
margin: О;

238 Урок21
padding: О;
list-style-type: none;
line-height: 150%;
#footer
{
cle!!,r: Ьoth;
Ьackground: #387А9В;
color: #fff;
padding: Spx 3%;
text-align: right;
Заголовок страницы
Текст абзаца текст абзаца текст абзаца
текст абзаца текст абзаца. текст абзаца
текст а6за1~а текст абзаца текст абзаца
текст абзаца текст абзаца текст абзаца
текст абзаца текст абзаца текст абзаца
текст абзаца текст абзаца текст абзаца
текст абзаца текст абзаца текст абзаца
текст абзаца текст абзаца.
Рис. 21.12 . Окончательный вид страницы

Размещение трех колонок... 239
Резюме
Из этого урока вы узнали, как создать "жидкую" структу­
ру с трем.я колонками разного цвета. Кроме того, вы научи­
лись переопределять стиль элемента <hl>, превращая его
в "шапку" вверху страницы. В следующем уроке вы научи­
тесь исправлять основные ошибки CSS и получите несколько
подсказок по улаживанию конфликтов CSS.

Урок22
Устранение ош:и:бок
css
В этом урок:е вы научитесь исправлять основные ошибки
CSS. Кроме того, вы получите неск:ольк:о подсказок: по уст­
ранению ошибок: CSS.
Подготовка кода CSS
Код CSS для этого урока показан в листинге 22.1 . Он со­
держит 12 наиболее распространенных проблем CSS, которые
мы будем исправлять в данном уроке.
Листинг 22.1 . Код CSS, иллюстрирующий 12 наиболее
распространенных ошибок
body
{
font-family: times, times new roman, serif;
#container
{
}
hl
{
Ьorder: lpx gray;
background- image : url ( "Ьackground . j pg" ) ;
Ьackground-repeat: repeat-x;
background-attach: fixed;
width: 700;
font - size: 200%;
co l or: none;
.introductionText
{
font - weight: Ьold;
}
h2

242 Урок22
font- size: 120%
font-weight: normal;
color: #34а32;
р, ul,
{
font - size: 80%;
color: 333;
a:visited
{
color: purple;
}
а: link
{
color: Ыuе;
a:hover
{
color: red;
a:active
{
color: Ыасk;
#container р
{
color: #ООО;
p.intro
{
color: #900;
Решение проблем
Проблема 1. В наборе правил для элемента <body> имя се­
мейства шрифтов Times New Roman содержит пробелы. Лю­
бое название шрифта, . содержащее пробелы, должно заклю­
чаться в кавычки. Проблемная строка исходного кода показана
в листинге 22.2, а в листинге 22.3 приведен исправленный код.
Листинг 22.2 . Код CSS, иллюстрирующий имя семейства
шрифтов без кавычек
body
{
font - family: times, times new raman, serif;

Устранение ошибок CSS 243
Листинг 22.3. Код CSS, иллюстрирующий имя семейства
шрифтов в кавычках
Ьоdу
{
font-family: times,
" times new roman", serif;
Проблема 2. Свойство border в наборе правил #container
не содержит заданного свойства border-style. Граница ото-
-
бражаться не будет, поскольку тю умолчанию значение
border-style равно none. Поэтому необходимо задать значе­
ние border-style равным dotted, dashed, solid, douЬle,
grooved, ridged, •inset или outset. Проблемная строка ис­
ходного кода показана в листинге 22.4, а в листинге 22.5 при­
веден исправленный код.
Листинг 22.4. Код CSS, иллюстрирующий неправильное
объявление свойства border
#container
{
Ьorder: lpx gray;
background-image: url ( "background. jpg") ;
background--repeat: repeat-x;
background- attach: fixed;
width: 700;
Листинг 22.5. Код CSS, иллюстрирующий правильное
объявление свойства border
#container
{
Ьorder: lpx solid gray;
Ьackground-image: url ( "background. jpg");
background-repeat: repeat-x;
background-attach: fixed;
width: 700;
Проблема 3. Свойство background-attach не существует.
Правильным свойством является background-attachment.
Проблемная строка исходного кода показанд в листинге 22.6,
а в листинге 22. 7 приведен исправленный код.
Листинг 22.6. Код CSS, иллюстрирующий неверное свойство
#container
{
Ьorder: lpx solid gray;

244 Урок22
Ьackground-image: url ( "background. jpg") ;
Ьackground - repeat: repeat-x;
ЬackgroW1d-attach: fixed;
width: 700;
Листинг 22.7. Код CSS, иллюстрирующий верное свойство
#container
{
Ьorder : lpx solid gray;
background- image : ur1 ( "Ьackground . j pg" ) ;
Ьackground-repeat: repeat-x;
ЬackgroW1d-attachment: fixed;
width: 700;
Проблема 4 . Значение width в наборе правил #container
не содержит единицы изменения. Браузеры должны догадать­
ся, в чем автор задал ширину- в пунктах, пиках, пикселях,
единицах em или ех, миллиметрах, сантиметрах, дюймах или
процентах. Проблемная строка исходного кода показана в лис­
тинге 22.8, а в листинге 22.9 приведен исправленный код.
Листинг 22.8 . Код CSS, иллюстрирующий размер, заданный
без единицы изменения
•
#container
{
Ьorder: lpx solid gray;
Ьackground- image : ur1 ( "background. j pg" ) ;
background-repeat: repeat-x;
Ьackground-attachment: fixed;
width: 700;
Листинг 22.9 . Код CSS, иллюстрирующий размер, заданный
в пикселях
#container
{
Ьorder: lpx solid gray;
Ьackground-image: url ( "Ьackground. jpg") ;
Ьackground-·repeat: repeat-x;
Ьackground-attachment: fixed;
width : 700рх;

Устранение ошибок CSS 245
Проблема 5. В наборе правил <hl> код цвета задан как
none. Использовано неприемлемое значение. · Данная величи­
на должна задаваться как шестнадцатеричный RGВ-код,
ключевое слово, ключевое слово пользовательского интер­
фейса или десятичный RGВ~код. Автор может указать, чтобы
код цвета наследовался от родительского элемента; в таком
случае следует использовать значение inherit. Проблемная
строка исходного кода показана в листинге 22.10, а в листин­
ге 22.11 приведен исправленный код.
Листинг 22.1 О. Код CSS, иллюстрирующий неприемлемый
код цвета
hl
{
font-size: 200%;
color: none;
Листинг 22.11. Код CSS, иллюстрирующий допустимый код
цвета
hl
{
font-size: 200%;
color: inherit;
Проблема 6. Некоторые авторы предпочитают использо­
вать имена, состоящие из прописных и строчных букв. Что­
бы класс был использован, в коде HTML и селекторе он дол­
жен быть представлен одинаково.
Предположим, что код HTML содержит класс Introduc-
tionText. В приведенном в начале урока коде автор исполь~
зовал селектор . introductionText. Этот селектор не соот­
ветствует имени класса HTML, поэтому объявленное правило
не будет к нему применимо. Проблемная строка исходного
кода показана в листинге 22.12, а в листинге 22.13 приведен
исправленный код.
Листинг 22.12. Код CSS, иллюстрирующий неправильное
написание имени класса
.introductionText
{
font-weight: Ьold;

246 Урок22
Листинг 22.1 З. Код CSS, иллюстр и рующий прав и льное
написание имени класса
.IntroductionText
{
font-weight: bold; /
Проблема 7. В наборе правил <h2> пропущено объявле­
ние font --size. Браузеры прочтут следующее объявление,
font - weight : norma l ; , как часть объявления fon t -s i ze,
и получат неправильный код. В результате оба объявления
будут проигнорированы. Проблемная строка исходного кода
показана в листинге 22.14, а в листинге 22 .15 приведен ис­
правленный код.
Листинг 22. 14. Код CSS, иллюстрирующий объявл е ни е с
пропущенной точкой с запятой
h2
{
font-size: 120%
f ont-we i ght: n ormal ;
col or : #34а32;
Л истинг 2 2 . 15. Код CSS, иллюстрирующий правильное
объявление
h2
{
font-size: 120%;
font-weight: normal;
color : #34а32;
Проблема 8. Пропущена цифра шестнадцатеричного чис­
ла в наборе правил <h2>. Шестнадцатеричные числа должны
состоять из трех или шести цифр. Дроблемная строка исход­
ного кода показана в листинге 22.16, а в листинге 22.17 при­
веден исправленный код.
Л исти н г 22 . 16. Код CSS, иллюстрирующий неверное
шестнадцатеричное число
h2
{
font-size: 120%;

font-weight: normal;
color: #34а32;
Устранение ошибок CSS 247 •
Листинг 22. 17. Код C~S, иллюстрирующий правильное
шестнадцатеричное число
h2
{
font-size: 120%i
font-weight: normal;
color: #34а323;
Проблема 9. После перечисления селекторов поставлена
лишняя запятая: р, ul, . Из-за этого весь набор правил будет
проигнорирован. Проблемная строка ИСХОДНОГО кода показа­
на в листинге 22.18, а в листинге 22.19 приведен исправлен­
ный код.
Листинг 22. 18. Код CSS, иллюстрирующий запятую в конце
селекторов
р, ul,
{
font-size: 80%;
color: 333;
Листинг 22. 19. Код CSS, иллюстрирующий правильный
синтаксис при использовании нескольких селекторов
р, ul
{
font-size: 80%;
color: 333;
Проблема 10. В коде ц~ета #333 отсутствует символ шест­
надцатеричных значений #. Хотя одни браузеры принимают
подобное объявление, дл:Я других оно недопустимо. Проблем­
ная строка исходного кода показана в листинге 22.20, а в лис­
тинге 22.21 приведен исправленный код·.
Листинг 22.20. Код CSS, иллюстрирующий код цвета
без символа #
р, ul
{

• 248 Урок22
font-size: 80%;
color : 333;
Листинг 22.21 . Код CSS , иллюстрирующи й прав ильн ое
объявлени е
р, ul
{
font-size: 80% ;
color : #333 ;
Проблема 11 . Псевдокласс а : h over не применяется, по­
скольку он указан перед псевдоклассом а : 1ink . Объявления
псевдоклассов необходимо поменять местами. Проблемная
строка исходного кода показана в листинге 22.22, а в листин ­
ге 22.23 приведен исправленный код.
Листинг 22.22 . Код CSS, илл юстрирующий и с польз о вание
псевдокласса а : h over п е ред псе вдо классом а : link
a:hover
{
color: red;
a:link
{
color : Ыuе;
Листинг 22. 23. Код CSS, иллюстрирующий правильный
порядок псевдоклассов
a:link
{
color: Ыuе;
a : hover
color : -red;
Проблема 12. Набор правил #container р
color:
Ыасk; } задает черный цвет текста для всех абзацев внут­
ри элемента #container. Следующий набор правил, р. intro
{ color : #900 ; } , должен был задать цвет текста первого
абзаца элемента #container равным #900 .
,;r;;;м---,

Устранение ошибок CSS 249
Однако набор правил р. intro не будет применен, посколь­
ку набор правил #container р имеет более высокий приори­
тет. Из-за того что селекторы, которые содержат идентифика­
торы, имеют более высокий ·приоритет, чем селекторы с клас­
сами, текст всех абзацев внутри элемента #container будет
представлен черным цветом.
Чтобы задействовать набор правил р. intro, селектор необ­
ходимо изменить на #container р. intro, что повысит его
приоритет. Проблемная строка исходного кода показана в лис­
тинге 22 .24, а в листинге 22 .25 приведен исправленный код.
Листинг 22.24. Код CSS, иллюстрирующий набор правил
без идентификатора
#container р
{
color: #ООО;
p.in tro
{
color : #900;
Листинг 22.25 . Код CSS, иллюстрирующий набор правил
с иде нтификатор о м
#container р
{
color : #ООО;
#container p . intro
{
color: #900:
Советы по устранению
проблем CSS
Совет 1. Не забудьте верифицировать файль• НТМL и CSS .
Семь из двенадцати перечисленных выше проблем можно
практически мгновенно решить с помощью сред с тва верифи ­
кации СSS .

250 Урок22
Средство верификации HTML от W3C можно найти по ад­
ресу http://validator.wЗ.org/, Средство верификации
CSS от W3C доступно по адресу http://jigsaw . w3.org/
css-validator /.
Совет 2. Лучший способ избежать проблем (особенно если
вы являетесь новичком в использовании CSS)- создавать
документы поэтапно, проверяя результат каждого этапа на
нескольких браузерах. Начните с общей структуры, распо­
ложите необходимые элементы и текст, а затем проверьте по­
лученный результат . в нескольких браузерах. Убедившись
в устойчивости каркаса, можно начинать детальную разра­
ботку элементов.
Совет 3. Если на странице наблюдается локальная про­
блема, часто помогает включение границ, чтобы были видны
элементы и их взаимосвязь. Чтобы сделать границы види­
мыми, можно воспользоваться кодом, приведенным в лис­
тинге 22.26.
Листинг 22.26. Код CSS, иллюстрирующий набор правил,
делающих границы видимыми
li а { border: lpx solid red; }
Совет 4. Для быстрой локализации ошибок можно после­
довательно закомментировать наборы правил (как показано
в листинге 22.27), наблюдая за получаемыми эффектами.
Обнаружив проблемный набор правил, можно последова­
тельно закомментировать все его объявления, пока не будет
найдено правило с ошибкой.
Листинг 22.27. Код CSS, иллюстрирующий отключение
набора правил с помощью комментария
h2
{
!*
font - size: 120%;
font-weight: norrna l ;
color: #34а323;
р, ul,
{
*/
font - size: 80%;
color: #333;

Устранение ошибок CSS 251
Совет 5. Если это возможно, используйте в начале доку­
мента (X)HTML полное объявление типа документа. Все до­
кументы (X)HTML обязаны содержать объявление типа до­
кумента, в котором указывается версия (X)HTML, использо­
ванная в документе. С помощью данной информации WеЬ­
браузеры определяют, какой режим визуализации использо­
вать. Если в документе присутствует правильное и полное
объявление типа документа, многие WеЬ- браузеры переклю­
чаются в стандартный режим, т.е. более тесно придержива­
ются спецификаций CSS. Основные типы документов иллю­
стрируются в листингах 22.28-22.32.
Листинг 22.28. Код HTML, демонстрирующий объявление
строгого типа документа HTML 4.01
<!DOCTYPE НТМL PUВLIC "-/ /WЗС//ИD НТМL 4.01//EN"
" http://www.w3.org/TR/html4/str ~ct.dtd">
Листинг 22.29. Код HTML, демонстрирующий объявление
переходного типа документа HTML 4.01
<!DOC TYPE НТМL PUВLIC "-//WЗС//ИD НТМL 4.01 Transitional//EN"
" http ://www.w3.org/TR/html4/loose.dtd">
Листинг 22.30. Код HTML, демонстрирующий объявление
строгого типа документа XHTML 1.0
<!DOCTYPE html PUВLIC "-//WЗС//ИD ХНТМL 1.0 Strict//EN"
"http : //www.w3.org/TR/xhtml1/ИD/xhtml1-strict . dtd">
Листинг 22.31. Код HTML, демонстрирующий объявление
переходного типа документа XHTML 1.0
<!DOCTYPE html PUBLIC "-//WЗС//ИD ХНТМL 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/ИD/xhtml1-transitional . dtd">
Листинг 22.32. Код HTML, демонстрирующий объявление
типа документа XHTML 1.1
<!DOCTYPE html PUВLIC "-//WЗС//ИD ХНТМL 1 . 1//EN"
" http://www . w3.o rg/TR/xhtmlll /ИD/xhtmlll .dtd''>
Резюме
Из этого урока вы узнали, как исправлять характерные
ошибки CSS, и получили несколько советов, помогающих из­
бежать таких ошибок.

Предметный указатель
с
css
блочная модель, 51
использование,19
использование правил, 21
настройка для печати, 205
.советы по устранению
проблем,249
характерные ошибки, 241
НТМL-код
подготовка, 67
Абзац , 111
Блок
ширина, 52
н
А
-Б
Блок объявления, 22
в
Визуальное выделение, 146
Внутритекстовый стиль, 44
г
Граница,56;78;92
сокращенная форма записи , 29
з
Заголовок , 77
в закругленной рамке, 81
определение стиля, 81
сайта, 173
уровни , 76
Заполнение,31;55;65;78;100
сокращенная форма, 31
Значение,24
и
Из ображение, 97; 103; 110
Каскад, 18
Комментарий, 26
Набор правил, 21
к
н
о
Область содержимого, 57
Объявление, 23; 24·
Ошибки, 241
п
Панель навигации
горизонтальная , 149
вертикальная, 139
Подпись, 102
рядом с рисунком, 104; 115
Поля , 31;54
сокращенная форма, 31
Правило, 21
Псевдокласс, 87; 89
р
Рамка, 159

с
Свойства, 23
сокращенная форма записи, 27
- Селектор
идентификаторов, 37
класса, 36
объединение, 26
потомки, 38
расширенные, 40
создание, 60
типа, 36
универсальные, 39
Сокращенная форма записи, 27; 33
Список, 139; 149
Ссылка,87
увеличение активной области, 94
удаление подчеркивания, 92
Стилевое оформление
заголовка, 75
Стиль
внутритекстовый, 44
заголовков , 45
. применение, 43
сокрытие от старых браузеров, 4 7
Предметный указатель 253
Таблица, 127
Таблица стилей
внешняя, 46
т
Текст, 78
форматирование,67
Фон, 100
цвет, 55
ф
Фоновое изображение, 55-60; 80;
83;100
масштабируемое, 82
Фотогалерея, 107
Фотоснимок, 105
ш
Шрифт, 76
общие семейства, 70
э
Элемент
блочный, 51
внутритекстовый, 51

Научпо-попул.ярпое издание
РассУикли
Освой самостоятельно CSS
10 минут на урок
Литературный редактор
Верстка
Художественный редактор
Корректор
Л.Н.]Срасножон
О.В. Мишутина
В.Г. Павлютин
А.В. Луценко
Издательский дом "Вильяме"
101509, Москва ,ул.Лесная ,д. 43,стр. 1
Подписано в печать 20.03.2006. Формат 84Х108/32.
Гарнитура Tiшes. Печ ать офсетная.
Усл. печ. л. 13,52 . Уч.-изд. л. 6,9.
Тираж 3000 экз. Заказ No 809.
Отпечатано с диапозитивов
в ФГУП "Печатный двор" им. А. М. Горького
Федерального агентства по печати и массовым коммуникациям .
197110 , Санкт-Петербург , Чкаловский пр . , 15.

['
l_
1
1
l.
...
Шпаргалка CS S
Синтаксис CSS
селектор { свойство: значение;}
Свойства шрифтов
Свойство
Значение
font-family Название или тип шрифта
font - style
normal I italic
font - var i ant normal I small - caps
font - weight normal I bol d
font-size
процент Iразмер
xx-small I x-smal l
small I medium I large
x - large I xx-large
smaller I larger
Свойства текста
Свойство
Значение
letter-spacing normalJдлuнa
line - height
normal I число
длина I процент
text - align
left I right
center I justify
text-decoration none I underline
overline 1
l ine - through
text-indent
длина I процент
text-transform
capitalize 1
uppercase
l owercase I none
vertical - align
sub I super
word- spacing
normal Iдлина
Свойства цвета и фона
Свойство
Значение
color
Цвет
background-color цвет I transparent
background-image
url l none
Пример
{font-family: arial;}
{font - style: italic;}
{font-variant: small - caps;}
{font-weight: bold;J
{font-size: 12pt;)
Пример
{letter-spacing: Spt;}
{line-height: 15pt;}
{text-align: center;}
{text-decoration:underline;J
{text-indent: 25рх;}
{text-transform: lowercase;J
{vertical-align: sub;J
{word-spacing: lOpx;}
Пример
{color: Ыuе;}
{background- color:
yellow;}
{background-image:
url(marЫe.g if) ;}
background-repeat repeat I repeat-x repeat-y 1
no- repeat
{background-repeat:
no- repeat;J
background-
attachment
background-
position
scrol l I fixed
top l eft I top center top
right I center l eft center
center I center right bottom
left I bottom center bottom
rightх%у% 1ху
{background-
attachment: fixed;J
. {background-
position: top left;J

Шпаргалка CSS
Свойства рамки: границы, поля, заполнение
Свойство
Значение
bor·der
ширина Iстиль I цвет
border-left
ширина Iстиль I цвет
border-right
ширина I стиль I цвет
border-top
ширина Iстиль I цвет
border-bottom
ширина I стиль I цвет
border-width
thin 1 medium thickj
длина
border-left-width
thin 1 medium thickl
длина
border-right-width thin 1 medium thickl
длина
border-top-width
thin 1 medium thick
длина
border-bottom-width thin 1 medium thickl
длина
border-color
цвет
border- left- color
цвет
border-right-color
цвет
border-top-color
цвет
border- bottom-color цвет
margin-top
длина Iпроцент Iaut o
margin-bottom
длина I процент Iauto
margin-left
длина Iпроцен]Jl Iauto
margin-right
длина I процент Iauto
padding-top
длинаlдлина
padding-bottom
длина I процент
padding-left
длина I процент
padding-right
длина I процент
1
Пример
{border: thick dotted
Ыue;J
{border-left: thick
dotted Ыue;J
{border-right : thick
dotted Ыuе; J
(border-top: thick
dotted Ыuе;}
(border-bottom : thick
dotted Ыuе;}
(border-width: thin;J
(border-left-width :
thick; J
{border-right-width:
0. lin; J
{border-top-width:
О.Spx;J
(border-bottom-width:
O.Scm;J
(border-color: Ыuе;}
(border-left-color:
#OOOOFF;}
{border-right-color:
Ыасk;}
(border- top-color:
rgb(0,0,255);}
(border-bottom-color:
red; J
{margin- top: lOpx;J
(margin- bottom: lem;J
(margin-left: Spt;J
(margin-right: Spt;J
(padding-top: l Opx;J
(padding-bottom: lem; J
(padding-left: Spt;J
(padding-right: Spt;J
]