УДК 004.738.5(075.4)
ББК 32.973.202-018.2я78-1
Х75
Серия: «Официальный учебный курс»
Холыпплаг, Молли Е.
Х75 Языки HTML и CSS : для создания Web-сайтов : [учеб. пособие]
/ М. Хольцшлаг; [пер. с англ. А. Климович]. — М.: ТРИУМФ, 2007. —
304 с.: ил. — (Официальный учебный курс). — Доп. тит. л. англ. —
ISBN 978-5-89392-146-5.
Агентство CIP РГБ
Вы хотите создать собственный Web-сайт? Или обновить уже
имеющийся? Может быть, вы хотите быстро и легко освоить новые технологии и
сделать свою работу максимально эффективной? Тогда эта книга для вас.
Автор является членом организационного комитета рабочей группы
по разработке Web-стандартов и членом консультативного комитета
всемирной организации Web-мастеров.
На основе множества прекрасно подобранных примеров кода HTML,
XHTML, CSS вы освоите все, что нужно для практической работы в Web.
Никакой теории или занудных нотаций, только освоение техники работы с
HTML/CSS и применение уже готовых шаблонов для своих целей. К тому
же в книге содержится приложение с описаниями всех элементов языка
XHTML и CSS, что делает ее ценным справочником для Web-дизайнера.
Authorized translation from the English language edition, entitled SPRING INTO HTML AND CSS, Iя Edition,
ISBN 0131855867, by HOLZSCHLAG, MOLLY E., published by Pearson Education, Inc, publishing as Addison Wesley Professional,.
Copyright © 2005 Pearson Education, Inc.
All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or
mechanical, including photocopying, recording or by any information storage retrieval system, without permission from Pearson
Education, Inc. Russian language edition published by Triumph Publishing (OOO «Издательство Триумф»). Copyright © 2007.
Авторизованный перевод англоязычного издания под названием SPRING INTO HTML AND CSS. 1" Edition,
ISBN 0131855867, by HOLZSCHLAG, MOLLY E., published by Pearson Education, Inc, publishing as Addison Wesley Professional,.
Copyright © 2005 Pearson Education, Inc.
Все права защищены. Никакая часть данной книги не может быть переделана или изменена в какой-либо
форме, электронной или механической, включая фотокопирование, переписи на носители информации, без разрешения
Pearson Education, Inc. Русскоязычная версия, изданная ООО «Издательство Триумф». Все права защищены
© ООО «Издательство Триумф». 2007
ISBN 978-5-89392-146-5 © Обложка, серия, оформление
ISBN 0-13-185586-7 (амер.) ООО «Издательство ТРИУМФ», 2007

Краткое содержание
От редактора серии 12
Введение 13
УРОК 1. Создание HTML-страницы 17
УРОК 2. Добавление текста и ссылок 30
УРОК 3. Добавление изображений,
мультимедиа и сценариев 48
УРОК 4. Создание таблиц 66
УРОК 5. Создание форм 85
УРОК 6. Работа с фреймами 104
УРОК 7. Использование языка CSS 121
УРОК 8. Работа с цветом и изображениями
с использованием языка CSS 133
УРОК 9. Стилизация текста 152
УРОК 10. Эффекты ссылок, списки и навигация 175
УРОК 11. Поля, границы и отступы 195
VPOK 12. Позиционирование,
плавающее размещение и Z-индекс 207
VPOK 13. CSS-макеты 229
ПРИЛОЖЕНИЕ А. Аннотированный справочник
по языку XHTML 1.0 242
ПРИЛОЖЕНИЕ В. Аннотированный справочник
по языку CSS 2.1 269

Содержание
От редактора серии 12
Введение 13
УРОК 1. Создание HTML-странииы 17
Объявление и идентификация документа 18
Добавление элемента html 20
Элементы head и title 21
Подробнее об элементе title 22
Элемент meta 23
Кодировка документа 24
Ключевые слова, описание и авторство 24
Элемент body 26
Комментарии языка HTML 27
Просмотр шаблона 28
Следующим будет текст! 28
УРОК 2. Добавление текста и ссылок 30
Правильное использование заголовков 31
Добавление абзацев 32
Использование тега разрыва строки 32
Упорядоченные списки 33
Неупорядоченные списки 34
Вложенные списки 35
Списки определений 37
Старая добрая ссылка 38
Ссылки электронной почты 40
Внутристраничное связывание 42
Добавление содержимого в шаблон 44
В заключение 46
Текст - это еще не все 47
УРОК 3. Добавление изображений,
мультимедиа и сценариев 48
Элемент img 49
Использование атрибутов width и height 50

Содержание 7
Предоставление альтернативного текста 52
Связывание изображения 53
Связывание аудио- или видеофайла 55
Вставка файлов при помощи элемента object 57
Ваша Честь, я - объект! 59
Добавление скриптов 60
Вставка скрипта 61
Связывание со скриптом 62
Скрипты и проблемы браузеров 63
Сокрытие скриптов от старых браузеров 63
Использование элемента noscript 63
Осознайте это! 65
УРОК 4. Создание таблиц 66
Элемент table 67
Ширина таблицы 67
Границы таблицы и интервалы 68
Добавление строки таблицы 69
Добавление ячеек таблицы 70
Добавление заголовков таблицы 70
Добавление заглавия 72
Описание таблицы 73
Объединение строк 74
Объединение столбцов 76
Комбинирование атрибутов colspan и rowspan 79
Группирование столбцов таблицы: элемент col 80
Группирование столбцов таблицы при помощи элемента colgroup 82
Группирование строк таблицы 83
Данные таблицы 84
УРОК 5. Создание форм 85
Элемент form 86
Добавление поля ввода 87
Добавление флажков и переключателей 89
Заранее выбранные элементы 91
Использование меню формы 92
Использование текстовых областей 94
Кнопки Reset (Сбросить) и Submit (Отправить) 96

8 Языки HTML и CSS
Использование графической кнопки Submit (Отпрапить) 97
Обеспечение доступности форм с использованием элемента label 98
Группирование полей формы 99
Группирование элементов меню 101
Настройка и улучшение форм 102
Теперь вы правильно сформированы 103
УРОК 6. Работа с фреймами 104
Сила тройки 105
Создание набора фреймов 106
Добавление столбцов 107
Работа со строками 109
Комбинирование столбцов и строк 110
Элементы управления границами,
изменением размеров и скроллингом 111
Именование и указание целевых фреймов 112
Волшебные целевые имена 113
Фреймы без границ 114
Создание доступных фреймов при помощи элемента noframes 116
Удивительные встроенные фреймы 117
Вы познакомились с фреймами! 119
УРОК 7. Использование языка CSS 121
Упрощенная теория языка CSS 122
Правила языка CSS 122
Применение языка CSS 122
Каскад 123
Наследование 123
Специфичность 124
Добавление встроенного стиля 124
Использование внедренного стиля 125
Создание связанной таблицы стилей 126
Импортирование таблиц стилей 128
Непосредственное импортирование в документ 128
Импортирование стиля в связанную таблицу стилей 129
Комментирование и форматирование кода на языке CSS 130
Комментирование кода на языке CSS 130
Форматирование кода на языке CSS 132
Настало время использовать воображение! 132

Содержание 9_
УРОК 8. Работа с цветом и изображениями
с использованием языка CSS 133
Цвет и язык CSS 134
Шестнадцатеричное значение цвета 134
Сокращенное шестнадцатеричное значение цвета 134
Значения RGB 135
Процентные значения RGB 135
Названия цветов 135
Задание цвета фона 136
Цвет и фон документа 136
Цвет и фон элемента 136
Использование цвета фона для украшения таблиц 137
Присоединение фонового изображения 139
Управление заполнением фона 142
Заполнение вдоль горизонтальной оси 142
Заполнение вдоль вертикальной оси 142
Размещение фонового изображения 144
Фиксация или прокрутка фоновых изображений 146
Создание прозрачного цвета фона 148
Сокращение языка CSS для свойств фона 149
Стало веселее? 151
УРОК 9. Стилизация текста 152
Выбор шрифтов 153
Применение семейств шрифтов к тексту 155
Одиночные названия шрифтов 155
Ключевые слова семейства шрифтов 155
Несколько названий 156
Изменение размера шрифтов 157
Ключевые слова абсолютных и относительных значений 157
Значения длины 158
Проценты 159
Жирность и стиль шрифта 159
Жирностынрифта 160
Стиль шрифта 161
Раскрашивание текста 162
Выравнивание текста 162
Оформление текста 163
Установка отступа текста : 164

10
Языки HTML и CSS
Преобразование регистра и изменение шрифта текста 166
Установка интервалов между строками 169
Установка интервала между буквами и словами 170
Модификация первой буквы и первой строки текста 171
Использование сокращений для стилей шрифта 172
Теперь используйте воображение! 173
УРОК 10. Эффекты ссылок, списки и навигация 175
Работа с состояниями ссылок 176
Модификация стилей ссылки 178
Несколько стилей ссылок с использованием селекторов класса 179
Стилизация ссылок с использованием селекторов потомков 180
Стилизация упорядоченных списков 183
Стилизация неупорядоченных списков 185
Сокращения языка CSS для стилей списка 187
Вертикальная панель навигации
на основе списка с использованием цвета 188
Вертикальная панель навигации
на основе списка с эффектами изображения 190
Горизонтальная панель навигации
на основе списка с использованием цвета 191
Горизонтальная панель навигации
на основе списка с изображениями 192
Роскошные ссылки, списки и навигация 194
УРОК 11. Поля, границы и отступы 195
Исследование блочной модели , 196
Использование полей 197
Использование отрицательных значений при указании полей 199
Свойство-сокращение margin 200
Стилизация границ 201
Толщина границы 201
Начертание границы 201
Цвет границы 202
А теперь все вместе! 202
Свойство-сокращение border 203
Сокращенная форма записи для стороны, толщины, начертания и цвета 203
Свойство border 204
Использование отступов 204

Содержание 11
Свойство-сокращение padding 205
Получение большего контроля 206
УРОК 12. Позиционирование,
плавающее размещение и Z-инлекс 207
Введение в позиционирование 208
Нормальный поток 209
Блоки-контейнеры 211
Окно просмотра браузера 213
Абсолютное позиционирование: относительно корневого элемента 214
Абсолютное позиционирование: относительно другого блока 216
Относительное позиционирование 218
Фиксированное позиционирование 221
Плавающие элементы 223
Очищенное плавающее размещение 225
Z-индекс 227
Как профессионал 228
УРОК 13. CSS-макеты 229
Три столбца с обрамляющими меню фиксированной ширины 230
Три столбца с шапкой и нижним колонтитулом 232
Вложенный плавающий блок 234
Макеты с выравниванием по центру 236
Смешанные макеты 238
Повторяйте за мной 241
ПРИЛОЖЕНИЕ А. Аннотированный справочник
по языку XHTML 1.0 242
Разъяснение типов элементов: Отображение 242
Разъяснение типов элементов: пустой и непустой 242
ПРИЛОЖЕНИЕ В. Аннотированный справочник
по языку CSS 2.1 269
Селекторы, псевдоклассы и псевдоэлементы 269
Свойства, доступные в языке CSS 2.1 274

От редактора серии
Барри Аж. Розенберг
Несколько лет назад я нашел новую
работу, где мне нужно было
получить множество новых навыков за
очень короткий промежуток
времени. Мне не нужно было быстро
становиться экспертом, однако я
должен был стать компетентным в этих
вопросах.
Я отправился в книжный магазин и
был шокирован тем, насколько
изменился издательский мир. В том
месте, где когда-то прославлялись
разум и интеллект, сейчас чтят
тупиц. Что же случилось?
Фотография Эда Радунса
Итак, я сделал несколько телефонных звонков, попросил тетю Барбару сшить
несколько костюмов и убедил дядю Эда позволить нам использовать амбар в
качестве сцены. Ой, подождите... это другая проблема. На самом деле, я сделал
несколько телефонных звонков и попросил некоторых действительно
талантливых друзей написать книги, которые умным людям было бы не стыдно
читать. Мы назвали серию «Spring into...» (Окунись в), поскольку все хорошие
названия уже были заняты.
Нам кажется, что, создав серию Spring Into..., мы создали отличную серию для
занятых профессионалов. Однако существует препятствие - мы не можем быть
уверены до тех пор, пока вы не скажете нам об этом. Может быть мы выбили мяч
из-за пределов поля и забили прямо между штангами ворот, подкрутив его, как
Бэкхем, и не получили ничего, кроме гола. С другой стороны, может быть мы
просто раскрутили клубок из шаблонных фраз. Только вы можете сказать нам.
Поэтому, все - позитивное или негативное, - что вы думаете об этих книгах,
пожалуйста, отправьте мне по электронной почте
barry.rosenberg@awl.com
Я обещаю не добавлять ваш электронный адрес в какие-либо списки рассылки,
отсылать спам или выполнять безнравственные действия с вашим адресом.
Искренне ваш,
Барри

Введение
Интернет, возможно, является самым интригующим изобретением 20-го века.
Безусловно, это технология, которая распространилась быстрее, чем лесной
пожар в Калифорнии, и, буквально за десятилетие, изменила образ жизни, работы
и обучения современного общества - не говоря уже про покупки.
Трудно представить, что все это начиналось как эксперимент в лаборатории
физики элементарных частиц. Тим Бернерс-Ли (Tim Bemers-Lee) и его коллеги-
физики из организации CERN (European Organization for Nuclear Research -
Европейская организация по ядерным исследованиям) искали эффективный
способ совместного использования документов на множестве компьютерных
платформ. Интернет, с его сложной, международной компьютерной сетью, был
настоящим естественным фундаментом для размещения технологий, которые
вместе образуют Всемирную паутину.
Начиная со скромных истоков и заканчивая абсолютно поразительным
проникновением в мировую культуру, Интернет, согласно задумке его отца, Бернерса-
Ли, предназначался как для общественной среды, так и для технической. Эта
идея, возможно, привела к быстрому распространению Интернета в
значительной степени из-за того, что Интернет позволяет социально взаимодействовать
различными способами с использованием технологии настолько сильно, что
возникло новое исследование социального взаимодействия (social networking) для
изучения последствий влияния Интернета на общество и наоборот.
Для кого предназначена эта книга?
На самом деле, вы можете быть и физиком элементарных частиц, но эта книга
также предназначается для широкого круга нетехнических профессионалов,
заинтересованных в создании Web-сайтов и работающих с Web-документами для
профессиональных приложений в определенной области, например образовании,
медицине, юриспруденции или науке. С этой целью я написала книгу с применением
меньшего количества слов из технического жаргона, чем, если бы я писала книгу
для разработчиков программного обеспечения, однако вы обнаружите, что эта
книга, являясь весьма доступной, знакомит с некоторыми жизненно-
необходимыми вещами. Хорошие новости - вам не нужно быть конструктором
ракет, чтобы понять эту книгу - но если вы являетесь им, то эта книга поможет и вам.
И, хотя эта книга предназначена для нетехнических профессионалов, она
вероятнее всего будет также полезна и для людей, работающих в сфере Web-дизайна и
разработки, и которые заинтересованы в изучении современных подходов для
работы с Web-страницами.

14
Языки HTML и CSS
Как организована эта книга?
Я разбила книгу на две части. Первая часть фокусируется на языке HTML - языке,
который используется для структурирования документа и его содержимого.
И хотя язык HTML все еще используется, он был переформулирован в язык,
известный под названием Extensible Markup Language (XHTML)
(Расширенный язык разметки). Для решения общих задач эти языки по существу оди-
.jT"v- наковы, за исключением того, что язык XHTML можно расширять при по-
I Д? мощи методов, которые не рассматриваются в данной книге. Однако,
\ f' чтобы соответствовать существующим требованиям и позволить вам
Щ работать с современным языком разметки, в этой книге используется
язык XHTML. В действительности, важным моментом является то, что я
стремлюсь использовать термины HTML и XHTML, как синонимы, хотя, на
самом деле, они немного отличаются.
О языках HTML и XHTML вы узнаете больше из первой части книги, состоящей из
следующих глав:
Табл. 1. Главы части 1
Глава
1
2
3
4
5
6
Название
Создание HTML-страницы
Добавление текста и ссылок
Добавление изображений,
мультимедиа и скриптов
Создание таблиц
Построение форм
Работа с фреймами
Обучает, как...
Создавать страницу в языке XHTML
Форматировать текст и ссылки
Добавлять динамическое содержимое
Создавать эффектные таблицы данных
Создавать HTML-формы
Работать с фреймами
Вторая часть книги фокусируется на Каскадных таблицах стилей (CSS), которые
являются языком, интегрированным с языками HTML и XHTML, для добавления
дизайнерских особенностей страницы: макета, цветов, шрифтов и любых
декораций. Вы сможете узнать о том, как применять язык CSS к создаваемым
страницам, изучив подходы, описанные в следующих главах:
Табл. 2. Главы части 2
Глава
7
8
Название
Использование CSS
Работа с цветами и
изображениями с использованием языка CSS
Обучает, как...
Интегрировать язык CSS
с языком HTML
Добавлять цвет и изображения

Введение
15
Глава
9
10
11
12
13
Название
Оформление текста
Эффекты ссылок, списки и
навигация
Края, границы и отступы
Позиционирование, плавающее
размещение и Z-индекс
CSS-макеты
Обучает, как...
Работать с оформлением текста
в Интернете
Разрабатывать с использованием
ссылок и списков
Получать управление над
пространством
Размещать и создавать плавающие
элементы
Создавать макеты страниц
с использованием языка CSS
Помимо глав, в книге содержатся два очень важных приложения. Первое
приложение, «Аннотированный справочник по языку XHTML 1.0», содержит
информацию по правильному использованию и подсказки по всем элементам, доступным
в языке XHTML 1.0. Второе приложение, «Аннотированный справочник по
языку CSS», представляет список всех доступных свойств языка CSS вместе с
информацией по правильному использованию и подсказками.
Между главами и приложениями будет установлено, когда потребуется объем
знаний, необходимый для создания потрясающих Web-страниц с использованием
современных методик.
Что особенного в этой книге?
Эта книга, как и остальные книги серии Spring Into..., использует следующий
уникальный подход для организации содержимого:
• Каждая тема объясняется в отдельных одно- или двухстраничных единицах,
называемых «порциями».
• Каждая порция строится па предыдущих порциях текущей главы.
• Большинство порций содержит врезки и «Квантовые скачки», отражающие
полезную, дополнительную информацию, которая зачастую является более
продвинутой, чем основной текст.
Порционный стиль был специально создан для занятых людей. Знаю, что у вас
нет времени для изучения сложных понятий, поэтому их представление в виде
порций небольшого размера является полезным способом начать работу
максимально быстро и правильно, с самого начала.
Где взять примеры из книги
Посетите Web-страницу книги по адресу www.awprofessional.com/springinto/.

16
Языки HTML и CSS
Благодарности
Написание книги может показаться уединенным процессом, однако в реальности
вам помогает множество людей. Барри Розенберг на раннем этапе предоставил
совершенно необходимую информацию, как лучше всего писать в порционном
стиле, используемом в книгах этой серии. На протяжении всего времени три
рецензента оставляли ценные замечания: Кимберли Блессинг (Kimberly Blessing) и
Эрис Фри (Eris Free) показывали, как можно улучшить текст, а Даниэл Смит
(Daniel Smith) одолжил свой зоркий глаз и искал ошибки и неточности, и все
время приводил очень поддерживающие подсказки. Особая благодарность Марку
Таубу (Mark Taub), который предоставил отличную возможность и все время
присматривал за мной. И, наконец, Дэвиду Фугэйту (David Fugate),
экстраординарному литературному агенту, который всегда блистал остроумием, мудростью,
и, к тому же, потрясающими художественными советами.
Об авторе
Завоевавшая репутацию «одной из лучших компьютерных экспертов» и
считающаяся одной из «25 самых влиятельных женщин в Интернете», можно почти не
сомневаться, что в мире Web-дизайна и разработки Молли Е. Хольцшлаг является
энергичным и влиятельным мыслителем, преподавателем и автором. Написав
более 30 книг по Web-разработке, Молли является членом организационного
комитета рабочей группы по разработке Web-стандартов (Web Standards Project - WaSP)
и членом консультативного комитета всемирной организации Web-мастеров. Она
также преподавала курсы по подготовке Web-мастеров в университете Аризоны,
Финикса, Новом университете и колледже Pima Community. Многие узнают Молли
по ее книгам, очеркам и популярному Web-сайту, molly.com.
О редакторе серии
Барри Розенберг написал культовую классику, KornSfiell Programming Tutorial
(Руководство по программированию на KornShell) (Addison-Wesley, 1991), которая стала
родоначальницей множества порционно-ориентированных методик,
используемых в серии Spring Into... Он является автором более шестидесяти корпоративных
технических руководств, в основном, по программированию. Опытный
преподаватель, Барри преподавал все, начиная с физики высшей школы и заканчивая
недельными корпоративными семинарами по структурам данных.
Совсем недавно Барри провел четыре семестра в Массачусетском
технологическом институте, где он преподавал написание профессиональной технической
документации. Барри также является профессиональным фокусником. Он провел
более 1.200 выступлений, включая трехнедельную программу в Японии. Фокусы
стали основой для его романа Cascade (Каскад) (еще не опубликован). В настоящий
момент Барри работает в компании 170 Systems заведующим делопроизводством.

УРОК 1.
Создание HTML-страницы
Б силу своей специфики Web-документы должны создаваться на основе
некоторых правил. Чтобы обеспечить согласованность Web-документов с этими
правилами, а также сделать возможной проверку их корректности, в Web-документах
должны присутствовать определенные элементы. Согласованность означает, что
Web-документ на самом деле соответствует языку и версии языка, на котором он
был написан. Проверка корректности - это технический процесс, с помощью
которого проверяется согласованность Web-документов и благодаря которому мы
получаем возможность находить и исправлять в них ошибки.
Чтобы обеспечить согласованность Web-документов, их создание следует
начинать с указания всех обязательных структурных элементов, которые должны
присутствовать в документе перед добавлением текста и другого содержимого.
Как ни странно, большинство людей, работающих над Web-сайтами, улучшали
способы использования разметки только в прошлом. Интернет
эволюционировал настолько быстро, что в браузеры - и язык HTML - постоянно добавлялись
новые элементы и возможности. Большая часть этих возможностей была внесена
в существующие спецификации, другая же часть осталась неформализованной.
Более того, некоторые обязательные элементы HTML-страниц зачастую
игнорировались даже профессионалами.
Как такое возможно, вероятно, спросите вы? Дело в том, что основным
программным обеспечением, используемым для интерпретации языка HTML,
является настольный Web-браузер. У этих браузеров давняя история простительных
ошибок. Безусловно, у них есть и давняя история технических ошибок! Браузеры
одновременно являлись благословением и проклятием Интернета: они были
открыты для нововведений, но при этом большая часть времени тратилась на
добавление забавных возможностей, а не на реализацию основных средств для
поддержки языков, на использование которых они были рассчитаны. В результате,
Интернет превратился в мешанину вариантов языка HTML - большинство из
которых не соответствует спецификации и не является корректным. В свете
обсуждения темы этой главы, очень часто в создаваемых документах не используются
обязательные основные структурные компоненты.
Процесс, направленный на реализацию стандартов в браузерах и инструментах,
применяемых людьми для разработки Web-сайтов, а также на использование этих
стандартов теми из нас, кто заинтересован в создании страниц - не просто
работающих, а работающих безупречно - независимо от того, являются ли цели
личными или профессиональными, уже приведен в действие.
В этой главе мы рассмотрим, как создать шаблон, который будет служить
основой для всех примеров, приведенных в этой книге. Шаблон будет включать все
необходимые и полезные технические и структурные элементы, формирующие
основу согласованного и корректного документа

18
Языки HTML и CSS
Объявление и идентификация документа
Первым делом в документ необходимо добавить небольшой фрагмент кода, с
помощью которого будет объявлен тип используемого документа и
идентифицирована версия языка. Это осуществляется при помощи Стандартного Обобщенного
Языка Разметки (Standardized General Markup Language - SGML), который
является предком языка HTML и используется в этом важном объявлении, известном
как объявление DOCTYPE. Объявление DOCTYPE является уникальным фрагментом
кода, и поэтому во всех создаваемых документах должно использоваться
подходящее объявление.
В примере 1.1 демонстрируется объявление DOCTYPE, которое будет
использоваться во всех примерах данной книги.
Пример 1.1. Объявление DOCTYPE для языка XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
Немного непонятно? Не беспокойтесь. Сейчас будет рассмотрено все
объявление, что позволит получить полное представление о каждой его составляющей.
Во-первых, здесь используется открывающая последовательность <!, которая
вызовет интерес у большинства читателей, которые уже встречали HTML-код.
Угловая скобка - это знакомый компонент языка HTML, однако в языке HTML
восклицательный знак употребляется только в одной ситуации - в комментариях,
которые также будут рассмотрены в этой главе. Этот символ применяется редко,
поскольку это использование синтаксиса языка SGML в контексте языка HTML.
В данном случае приведенная последовательность просто обозначает начало
объявления. За открывающей последовательностью символов следует элемент
DOCTYPE, обозначающий тот факт, что данный код объявляет тип документа.
Следующим элементом является html, что говорит о том, что этот документ
написан на языке HTML. Обратите внимание, что элемент записывается строчными
буквами. Это существенно, поскольку мы используем язык XHTML, - регистр
символов в языке XHTML имеет значение, и поэтому именно эта часть объявления
должна быть записана с использованием строчных букв. Если это не сделать,
документ не пройдет проверку на корректность. Слово PUBLIC является важной
частью информации. Это означает, что класс документа, в котором используется
данное объявление, является открытым. Множество компаний создают
уникальные версии языка XHTML с собственными элементами и атрибутами. Для наших
целей будет достаточно открытой версии языка HTML, которую мы и собираемся
использовать.

Урок 1 ■ Создание HTML-страницы
19
Следующий синтаксис "-//W3C//DTD XHTML 1.0 Transitional//EN" определяет узел,
на котором хранится тип и версия языка документа (Консорциум World Wide
Web, W3C), и отражает тот факт, что документ написан в соответствии с
определением типа документа (Document Type Definition, DTD) языка XHTML 1.0
Transitional. Определение DTD - это просто длинный список разрешенных
элементов и атрибутов для данного языка и его версии. И, наконец, указывается
полный адрес URL, определяющий местоположение определения DTD,
"http://www.w3.org^FVxhtml1/DTD/xhtml1-transitional.dtd". Если в браузер загрузить
документ, находящийся по этому адресу, мы увидим определение DTD для языка
XHTML 1.0 Transitional, как показано на рисунке 1.1.
<! — There
Slack
Silver
Gray
№ice
Hexoon
Red
Purple
are also 16
.
-
-
-
-
-
-
Fuchsia-
—>
'1
№00000
ЯСОС0С0
№Oeoeo
#FFFFFF
«600000
«ГГООС0
явоооео
HTYOOYT
»r
vldely
Green
Line
Olive
Те 1 low
Navy
Blue
Teal
Aqua
known color names
- №08000
- 0OOFFOO
- №06000
- WFFF00
- Я00С0БС
- №000FF
- flOOBOBO
- №0FFFF
with
their
-J
SRGB
values:
'
aj
■JLl
w
J?
Рис. 1.1. Часть определения DTD для языка XHTML Transitional
Разместив это объявление в самом начале документа, можно создавать документ
и выполнять проверку на согласованность при помощи средства проверки
корректности. Средство проверки корректности использует информацию в
объявлении и сравнивает документ с определением DTD, указанным в объявлении.
Если при создании документа использовались допустимые в указанном
определении DTD правила, то при проверке никаких ошибок найдено быть не должно,
что, конечно же, и является нашей целью.
Квантовый скачок
Из-за различий в способах обработки разнообразных аспектов языков HTML и
CSS множеством браузеров, возникла необходимость в создании средств
получения лучшей производительности для документов, написанных в
соответствии со спецификацией. Тантек Целик (Tantek Celik), работавший в
корпорации Microsoft, создал механизм переключения в браузере IE, решающий
многочисленные проблемы. Принцип работы этого переключателя основан
на корректно оформленных объявлениях DOCTYPE, используемых для
переключения браузера из режима «обратной совместимости» (прощающий
режим, о котором было упомянуто во введении главы) в режим
«согласованности», который позволяет сайтам, написанным на согласованном языке
разметки и языке CSS, функционировать гораздо эффективнее. Один важный
момент: никогда ничего не размещайте в Web-документе перед объявлением
DOCTYPE, иначе у браузера могут возникнуть проблемы с его отображением.

20
Языки HTML и CSS
Чтобы побольше узнать о механизме переключения, основанном
на объявлениях DOCTYPE, посетите страницу в Интернете
http://gutfeldt.ch/matthias/articles/doctypeswitch.html. На этом сайте также
приведена замечательная таблица, содержащая разнообразные
объявления, с указанием тех из них, для которых действительно используется
механизм переключения. Корректное объявление DOCTYPE для языка XHTML 1.0
Transitional, приведенное в этом разделе, было выбрано не случайно,
поскольку для него также используется механизм переключения.
И хотя объявления DOCTYPE никогда не отображаются в окне браузера,
необходимость их использования не вызывает сомнений. Если правильно использовать
эти объявления, в результате будут получены корректные страницы,
интерпретацию которых браузер выполняет наиболее оптимально для каждой конкретной
ситуации.
Добавление элемента html
После объявления DOCTYPE создание документа начинается с корневого
элемента. Термин корневой, использован специально, поскольку у каждого документа есть
дерево документа, с которым мы познакомимся более детально. Понятие дерева,
создаваемого HTML-документами, играет важную роль в их эффективной
стилизации с использованием языка CSS.
Элемент html считается корневым элементом любого HTML-документа.
Запомните, объявление DOCTYPE не является элементом языка HTML - это элемент
языка SGML. Поэтому первый указанный элемент получает важный статус
корневого элемента.
В примере 1.2 демонстрируется элемент html с открывающим и закрывающим
тегами.
Пример 1.2. Корневой элемент языка HTML
<html>
</html>
Достаточно просто, не правда ли? Но в языке XHTML к открывающему тегу
необходимо добавить еще один компонент: пространство имен XML для языка XHTML.
Это всего лишь еще один способ идентификации языка, используемого в
документе. Я не хочу углубляться в идеологические причины того, для чего это
нужно. Достаточно сказать, что присутствие этого компонента необходимо для
поддержания корректности документа, как показано в примере 1.3.

Урок 1. Создание HTML-страницы
21
Пример 1.3. Корневой элемент языка HTML с атрибутом
и значением пространства имен XML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
</html>
В примере используется атрибут xmlns, название которого представляет собой
сокращение от словосочетания «XML namespace», и его значение,
представляющее собой адрес URL. Этот адрес не ведет ни к чему выдающемуся, поверьте!
Просто будет загружена страница с сообщением, что мы добрались до
пространства имен XML для языка XHTML. Повторюсь, это просто еще один способ
идентификации документа.
О
Обратите внимание на другие элементы синтаксиса, включая атрибут
xml zlang, определяющий язык документа при помощи синтаксиса языка
XML (запомните, что язык XHTML - это комбинация языков HTML и XML).
В данном случае значение en соответствует английскому языку. Атрибут
lang языка HTML предоставляет ту же информацию. Эти атрибуты
являются необязательными, однако мы будем использовать оба атрибута
для получения полной совместимости.
Элементы head и title
У нас уже есть основа документа с объявлением DOCTYPE и корневым элементом.
Сейчас мы приступим к добавлению других важных частей документа и начнем с
элемента head. Данный элемент содержит все элементы, необходимые для
отображения и выполнения документа, но которые не отображаются в окне
браузера. Чтобы создать раздел head, необходимо просто добавить теги head в
верхнюю часть шаблона, непосредственно за открывающим тегом <html>, как
показано в примере 1.4.
Пример 1.4. Создание шаблона: добавление раздела head
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
<head>
</head>
</html>

22
Языки HTML и CSS
Обратите внимание, что у элемента head нет обязательных атрибутов, а есть
только открывающие и закрывающие теги. Так обозначается раздел head.
В таблице 1.1 перечислено несколько различных элементов, которые можно
размещать внутри раздела документа head.
Табл. 1.1. Элементы в разделе документа head
Элемент
title
meta
script
style
link
Назначение
Этот элемент позволяет задать заголовок документа. Указанный
заголовок будет отображаться в строке заголовка браузера.
Элемент title является обязательным.
Элемент meta используется для множества целей, включая
указание ключевых слов и описаний, кодировки символов и автора
документа. Элемент meta не является обязательным и его
использование может варьироваться в зависимости от
поставленных задач.
Этот элемент позволяет вставлять скрипты непосредственно в
документ, или, что более предпочтительно, с его помощью
указывается ссылка на необходимый для использования скрипт.
Элемент используется при необходимости.
Элемент style позволяет размещать информацию о стиле прямо
на странице. Стиль, информация о котором размещена таким
образом, называется встроенным. Дополнительные сведения об
этом стиле можно получить в главе 7 «Использование CSS».
Элемент используется при необходимости.
Элемент link наиболее часто используется для выполнения
связывания с внешней таблицей стилей, хотя он может применяться
и для других целей, например для связывания с альтернативной
страницей, реализующей специальные возможности, или для
связывания со значком сайта - это те популярные значки,
которые отображаются в строке адреса некоторых Web-сайтов.
Подробнее об элементе title
Элемент title является единственным обязательным элементом раздела head.
В строке заголовка браузера отображается любой текст, содержащийся в этом
элементе, вместе с названием браузера, которое добавляется в конец текста, как
показано на рисунке 1.2.

Урок 1. Создание HTML-страницы 23
Рис. 1.2. Текст элемента ti tie отображается в строке заголовка браузера
Помимо того, что элемент title всегда должен присутствовать в документе,
создание хороших заголовков является первоочередной задачей, преследующей
три цели:
• указание заголовка страницы;
• предоставление ориентировки пользователям - то есть предоставление
пользователям информации о том, где они находятся в Интернете и на самом сайте;
• предоставление дополнительной информации о странице сайта.
Создание эффективных заголовков подразумевает выполнение этих трех
положений. Эффективный заголовок представлен в примере 1.5.
Пример 1.5. Пример эффективного заголовка, включающего название сайта
и размещение страницы для ориентировки пользователя
<title> molly.com - Книги - HTML &amp; CSS </title>
Обратите внимание, что заголовок страницы включает имя сайта, раздел и
подраздел сайта, предоставляя посетителю полезную информацию.
Неэффективный заголовок приведен в примере 1.6.
Пример 1.6. Пример эффективного заголовка, включающего название сайта
и размещение страницы для ориентировки пользователя
<title> Читайте мои книги!</title>
В данном случае в заголовке не содержится никакой полезной для нас
информации. Получается, что техническое требование об обязательном наличии
заголовка выполняется, однако от такого заголовка нет никакой практической пользы.
Хотя в тексте заголовка нельзя применять язык HTML, в нем можно
использовать символьные объекты, что было продемонстрировано в
примере 1.5, где был использован символьный объект &атр; для
воспроизведения символа &. За дополнительной информацией по доступным
символьным объектам обратитесь к Приложению А «Аннотированный
справочник по языку XHTML 1.0».
Элемент meta
Хотя его наличие в документе не обязательно, элемент meta выполняет множество
различных функций, поэтому будет нелишним познакомиться с ним прямо сейчас.

24 Языки HTML и CSS
Колировка документа
Кодировка документа означает установку набора символов для страницы, что
особенно важно при создании документов на других языках. Многие годы те из
нас, кто создавал документы с использованием латинского языка (включая
английский язык), применяли набор символов ISO 8859-1. Наборы и подмножества
ISO поддерживают большое количество языков. Однако в наши дни существует
кодировка UTF-8, представляющая собой более универсальный формат и
использующая стандарт, отличный от стандарта ISO. Кодировка UTF-8 может оказаться
полезной во множестве браузеров, однако существует несколько ограничений.
Если создание документа происходит на другом языке, например русском или
японском, в качестве кодировки документа желательно использовать наборы
символов ISO, а не наборы Unicode.
В идеале, кодировка символов должна устанавливаться на сервере,
а не с помощью элемента meta. Однако установить кодировку можно и
при помощи элемента meta. Посетите страницу по адресу
http://www.webstandards.org/learn/askw3c/dec2002.html.
В примере 1.7 показан элемент meta, который задает кодировку документа в
формате UTF-8. Данный формат подходит для документов, созданных с использованием как
английского, так и других языков, поддерживаемых браузером.
Пример 1.7. Использование элемента meta
для объявления кодировки документа Unicode
<meta http-eguiv="Content-Type" content="text/html; charset=
UTF-8" />
В примере 1.8 показан элемент meta для документа на русском языке с
использованием кодировки ISO.
Пример 1.8. Использование элемента meta для объявления кириллической
кодировки документа с применением кодировки ISO
<meta http-equiv="Content-Type" content="text/html; charset=
iso-8859-5" />
Ключевые слова, описание и авторство
Элемент meta можно использовать для определения ключевых слов, описания
сайта, а также для указания автора. Это крайне полезно как для открытых
поисковых систем, так и любых поисковых систем, которые, возможно, будут
осуществлять поиск по вашему сайту.
Ключевые слова - это отдельные слова и комбинации слов, используемые при
поиске. Это помогает людям, осуществляющим поиск определенных вопросов,
найти предоставляемую вами информацию, как показано в примере 1.9.

Урок 1. Создание HTML-страницы 25
Пример 1.9. Использование элемента meta
для определения ключевых слов и комбинаций ключевых слов
<meta паше="keywords" content="Молли, molly.com, html, xhtml,
ess, проект, веб-проект, разработка, веб-разработка, perl,
цвет, веб-цвет, журнал регистрации, журнал регистрации
интернета, книги, компьютерная литература, статьи, учебные пособия,
изучать, автор, инструктор, инструкция, инструктировать,
обучение, образование, консультироваться, консультация, консультант,
страница известных людей, список известных людей, стандарты,
веб-стандарты, технический журнал веб-стандартов, веб-обзор,
webreview.com, ух ты, мировая организация веб-мастеров,
конференция, конференции, пользовательский интерфейс, простота
использования, доступность, интернационализация, веб-культура" />
Обратите внимание, что хотя я много раз использовала слово web, оно
употреблялось в сочетании с другими ключевыми словами. Большинство поисковых
систем заблокируют поиск по сайту, если одиночное ключевое слово используется
несколько раз. Это способ получения более высоких рангов, но не более того.
Используйте ключевые слова, которые имеют смысл, или, если хотите
употребить одно слово несколько раз, используйте его в реальных словосочетаниях.
Описания - это обычно 25 слов или меньше, описывающих назначение
документа, как показано в примере 1.10.
Пример 1.10. Использование элемента meta. для описания сайта или страницы
<meta name="description" content="H Молли Е. Хольцшлаг, и этот
веб-сайт часть моих трудов в Интернет-разработках и мои
собственные мысли." />
Коротко и точно в цель! Элемент meta также применяется и для определения
автора документа, как показано в примере 1.11.
Пример 1.11. Использование элемента meta для определения авторства страницы
<meta name="Author" content=" Молли Е. Хольцшлаг" />
Конечно, эта информация никогда не будет отображаться на самой
Web-странице. Как и все остальные элементы и атрибуты, размещаемые в разделе
документа head, элементы meta используются браузером и другими ресурсами,
например поисковыми системами.
Элемент meta также можно использовать для автоматического
обновления документов в окне браузера и для запрещения индексирования
определенных страниц поисковыми системами. Более подробную информацию
можно получить по адресу http://www.learnthat.com/eourses
/computer/metatags/meta.html.
Я

26
Языки HTML и CSS
Элемент body
Элемент body - это то место, где происходят все действия. Это тот элемент, где
будет размещено содержимое и произведена разметка страницы с
использованием языка XHTML для структурирования содержимого соответствующим образом.
Элемент body размещен в элементе html, непосредственно за элементом head,
как показано в примере 1.12,- что имеет смысл, не правда ли?
Пример 1.12. Размещение элемента body
<html>
<head>
<title>3flecb размещается подходящий текст заголовка</Ь1ь1е>
</head>
<body>
</body>
</html>
При просмотре страницы в браузере информация, размещенная внутри элемента
body, отображается в окне браузера, называемом также окном просмотра
(viewport). Это область предназначена только для содержимого - без всяких при-
украс браузера (сюда относятся компоненты интерфейса браузера, например,
полосы прокрутки и строки состояния). На рисунке 1.3 показана основная
страница поисковой системы Google, открытая в Web-браузере.
Google - Mozilla
Ele Edit ¥tew £o Bookmarks Iools Window Help
-lOlxl
Web Images Groups News Frocgle mole»
Щ Google Search | I'm Feeling Lucky |
; Advanced Seatoh
~~~l Preferences
Lannuan» Tools
Advertising Programs - Business Solutions - About Google
O2004 Google- Searching3.285.109.774web pages
&, a -£■ ra es
"Re-Id"
/
Рис. 1.З. Отображение текста эмментаЪобу в окне просмотра браузера

Урок 1. Создание HTML-страницы
27
Комментарии языка HTML
Еще одной важной составляющей разметки языка HTML, которую можно
использовать прямо сейчас, являются комментарии. Комментарии позволяют временно
скрыть содержимое или разметку, оформить содержимое элементов особым
образом для обратной совместимости, обозначить части внутри документов и создать
пояснения для других людей, которые, возможно, будут работать над страницей.
Синтаксис комментария языка HTML выглядит следующим образом:
<!— —>
Все, что необходимо скрыть, обозначить или представить в виде руководства,
размещается между открывающей и закрывающей частью комментария. В
примере 1.13 текстовое содержимое внутри элемента body скрывается при помощи
комментариев.
Пример 1.13. Скрытие текстового содержимого и разметки
<body>
<р>Содержимое этого параграфа не будет отображаться внутри
элемента body, поскольку оно заключено в комментарий.</р>
—>
<р>Содержимое этого параграфа будет отображаться, поскольку оно
находится за пределами поля комментария.</р>
</body>
Можно отмечать разделы документа, как показано в примере 1.14.
Пример 1.14. Скрытие текстового содерэюшого и разметки
<body>
<!-- начало основного содержимого -->
<!-- начало содержимого нижнего колонтитула -->
</body>
И наконец, комментарии удобно использовать для указания инструкций, как
показано в примере 1.15.
Пример 1.15. Размещение указания внутри комментария
<body>
<!-- Angie: пожалуйста, в этой части обязательно вместо таблиц
используй списки -->
</body>

28
Языки HTML и CSS
Просмотр шаблона
Настало время завершить изучение шаблона и собрать все компоненты вместе,
как показано в примере 1.16.
Пример 1.16. Просмотр структуры документа на языке XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<head>
<title>caUT : расположение на сайте : заголовок TeMbi</title>
<meta http-equiv="Content-Type" content="text/html; charset=
iso-8859-5">
<meta name="keywords" content="здесь, размещаются, ключевые,
слова">
<meta name="description" content="здесь размещается описание">
<meta name="author" content="здecь размещается ваше имя">
</head>
<body>
<!-- область основного содержимого -->
</body>
</html>
Скопируйте эту разметку и сохраните ее в рабочей папке на компьютере, назвав
файл именем index.html. Мы будем открывать этот файл и добавлять содержимое
и дополнительную разметку по мере рассмотрения материала.
Следующим будет текст!
Конечно, если открыть только что созданный документ в Web-браузере, область
окна просмотра - где обычно отображается содержимое - будет абсолютной
пустой! Это происходит потому, что внутри элемента body нет ничего, кроме
комментария, который скрывает текст, размещенный в нем. Единственное, на что
можно обратить внимание, - это заголовок сайта, отображаемый в строке
заголовка браузера.
Начать работу с формирования структуры документа - это отличный способ
узнать, как создавать изначально превосходные страницы. Если вы разочарованы,
что после выполнения этих сложных задач нет видимых результатов, я обещаю,
что цель оправдает средства. В конце концов, вы овладеете профессиональными

Урок 1. Создание HTML-страницы
29
приемами управления содержимым и научитесь гораздо лучше понимать все
моменты, касающиеся работы с разметкой и языком CSS.
Поэтому после сохранения документа проверьте его корректность. Откройте
страницу http://validate.w3.org/, найдите раздел выгрузки файла и выгрузите
сохраненный файл. Запустите процесс проверки корректности на
выгруженном документе. Есть ошибки? Исправьте их и попробуйте снова. Нет ошибок?
Отлично.
И я обещаю, что по окончании изучения следующей главы, «Добавление текста и
ссылок», у вас будет, что просмотреть в, браузере!

УРОК 2.
Добавление текста и ссылок
Если считать содержимое королем, текст - это то, что помогает ему добраться до
королевского трона! Без правильно отформатированного, организованного
текста и осмысленных связей любая попытка создать королевское содержимое будет
крайне сложной.
Если чуть-чуть углубиться в историю, мы обнаружим, что сначала Интернет
состоял только из текста и ссылок. На самом деле, когда Интернет стал живой,
красочной, визуальной средой, для большинства его тогдашних пользователей это
стало трагедией. Основная идея изобретателя Интернета, Тима Бернерса-Ли,
заключалась в создании мультиплатформенных средств, позволяющих его
коллегам-ученым совместно использовать информацию, публиковать данные и
помещать в рефераты ссылки непосредственно на реферируемый текст. Но этот
человек был физиком, а не дизайнером, и он работал в среде, которая даже не
имела графического интерфейса. Я говорю об устаревшем Интернете, в котором
документы отображались в виде зеленого или желтого текста на черном фоне.
Имея такое скромное происхождение, Интернет прошел долгий путь. Теперь
Интернет предлагает своим пользователям среду, насыщенную визуальными
образами, и до того, как язык CSS стал доступным для широкого применения, для
создания такой среды Web-сайты создавали с помощью средств HTML,
предназначенных для оформления текста. Например, чтобы получить дополнительные
пустые строки на странице, вставляли несколько тегов разрыва строки.
Однако теперь для оформления визуального содержимого Web-сайтов гораздо
эффективнее использовать язык CSS. Поэтому использование средств
оформления текста ныне снова сфокусировалось на том, для чего они были задуманы: на
форматировании текста. Все дело в том, что, несмотря на появление Интернета,
перенасыщенного визуальным содержимым и средствами интерактивного
общения, текст и ссылки остаются самой важной составляющей любого стоящего Web-
сайта. Отсюда следует, что каждому, кто работает с текстом, следует особое
внимание уделять осмысленному использованию текст и ссылок.
В этой главе мы научимся эффективным и корректным способам работы с
текстом и ссылками. Начнем мы с описания методов создания заголовков и списков,
а закончим обсуждением множества вариантов связывания текста ссылками. Все
это позволит вам понять, что это значит - создать приятный для чтения текст, да
к тому же имеющий благородный внешний вид, который можно назвать просто
королевским!

урок 2. Добавление текста и ссылок
31
Правильное использование заголовков
Заголовки в языках HTML и XHTML представляют собой теги, которые
используются для определения заголовков на странице. Существуют теги для шести
уровней заголовков, начиная с <hl> . . . </hl> и заканчивая <h6> . . . </h6>.
Заголовок, оформленный с использованием тега <hl> . . . </hl>, считается
самым важным, приравниваемым по значимости к заголовку страницы;
заголовок, оформленный с использованием тега <h2> . . . </h2>, исполняет роль
подзаголовка, и так далее. Заголовки пятого и шестого уровней используются
редко, хотя иногда они бывают полезны в очень сложных документах. В
примере 2.1 демонстрируется список заголовков, которые могут использоваться в
документе. Стоит отметить, что между заголовками будет размещаться текст.
Пример 2.1. Заголовки с логическим содержимым
<Ы>Добро пожаловать на домашнюю страничку Молли!</hl>
<Ь2>Книги</Ь2>
<ЬЗ>Как автор</ЬЗ>
<Ь4>Заглавие книги</Ь4>
Обычно в одном разделе используется больше одного подзаголовока - это
позволяет сделать содержимое более понятным для читателей. Как видно на
рисунке 2.1, каждый уровень заголовка выделяется визуально при помощи размера
шрифта. Самый большой размер шрифта соответствует тегу <hl>, для остальных
тегов размер постепенно уменьшается.
Добро пожаловать на домашнюю
страничку
Книги
Как автор
Заглавие книги
Молли!
»
Рис. 2.1. Представление заголовков в Web-браузере
Заголовки - это структурные единицы, а не визуальные
Способ отображения заголовков реализуется по усмотрению разработчиков
браузера. В дальнейшем мы будем использовать язык CSS для определения
стилей заголовков. Заголовки должны быть использованы в виде иерархии,
поскольку теги описывают форматируемый текст.

32
Языки HTML и CSS
Добавление абзацев
Управление абзацами выполняется при помощи элемента абзаца, который
обозначается открывающим и закрывающим тегами <р> . . . </р>. Между тегами
элемента абзаца размещается текстовое содержимое, как показано в примере 2.2.
Пример 2.2. Разметка абзацев с использованием открывающего
и закрывающего тегов
<р>Мыслимо ли? На самом деле? Они едва не погибли. У них был
бессмысленный взгляд, устремленный в море. Они смотрели с
неослабевающим вниманием, как загипнотизированные.</р>
<р>Это был Франк Меррил, тот, кто в конце концов прервал
тишину, Меррил казался мраморным и его голос звучал неестесственно,
монотонно, с нотками металла.</р>
На рисунке 2.2 приведен пример отображения абзацев в браузере. Обратите
внимание, что все необходимые разрывы строк вставляются в тех местах
страницы, где размещены теги абзаца.
Мыслимо ли? На самом деле? Они едва не погибли. У них был бессмысленный
взгляд, устремленный в море. Они смотрели с неослабевающим вниманием, как
загипнотизированные.
Это был Франк Меррил, тот, кто в конце концов прервал тишину, Меррил казался
мраморным и его голос звучал неестесственно, монотонно, с нотками металла.
Рис. 2.2. Форматирование абзацев в Web-браузере
Встречаются случаи, когда у абзацев нет закрывающего тега. Это
разрешается в языке HTML, но даже если вместо языка XHTML вы
используете язык HTML, хорошим тоном программирования все же является
использование закрывающих тегов абзаца. Тем не менее, отображение абзацев
не зависит от выбранного подхода.
Длина строк текста абзаца соответствует размерам окна браузера и подбирается
таким образом, чтобы заполнить все свободное пространство окна браузера до
конца абзаца. В том месте страницы, где размещен конец абзаца, перед
последующим содержимым вставляется разрыв строки и пустая строка.
Использование тега разрыва строки
Тег разрыва строки применяется для разрыва строк абзаца. Он крайне полезен,
когда для оформления текста, например стихотворения, необходимо
использовать заданные разрывы строк, как показано в примере 2.3.

Урок 2. Добавление текста и ссылок
33
Пример 2.3. Использование разрывов строк
<р> Мой дядя самых честных правижЬг />
Когда не в шутку занемог,<br />
Он уважать себя заставил<Ьг />
И лучше выдумать не мог</р>
Обратите внимание, что строки стихотворения оформлены при помощи
элемента абзаца, поскольку мы хотим получить некий вид структуры. Выбор элемента
абзаца является логичным, поскольку стихотворение на самом деле состоит из
нескольких абзацев, разделенных строками. На рисунке 2.3 показано, как браузер
отображает разрывы строк.
Мой дядя самых честных правил
Когда ие в шутку занемог,
Он уважать себя заставил
И лучше выдумать не мог
Рис. 2.3. Абзац с заданными разрывами строк
} Встречаются разрывы строк, обозначаемые следующим образом: <Ъг>.
\ f Так записываются разрывы строк на языке HTML
Ш
Избегайте использования абзацев и разрывов строк
для доводки отображения
Как уже отмечалось ранее, множество людей создают Web-страницы с
использованием тегов, которые не предназначены для доводки отображения.
Например, некоторые люди размещают несколько тегов разрыва строки друг
за другом для получения в документе пустых строк.
Этот подход является сомнительным, так как в данном случае разметка
документа используется неосмысленно. Поскольку теперь можно уверенно
использовать язык CSS для решения подобных задач отображения, всегда
используйте абзацы и разрывы строк по их прямому назначению: для
форматирования абзацев и установки разрывов строк.
Упорядоченные списки
Упорядоченный список - это список, элементы которого обязаны располагаться
в определенном порядке. Примерами такого списка могут служить рецепт или
указания, как добраться до дома какого-нибудь человека. Упорядоченные списки
также называют нумерованными списками.
2-1356

34
Языки HTML и CSS
Для создания упорядоченного списка необходимо два элемента. Первым
элементом является элемент <ol> ... </ol> (ordered list - упорядоченный список),
а вторым - элемент <li> ... </li> (list item - элемент списка), как показано
в примере 2.4.
Пример 2.4. Создание упорядоченного списка
<ol>
<li> Возьмите 1-10 к выезду с трассы</И>
<li> После выезда поверните налево на трассу Булевард</И>
<li> Проедьте по трассе несколько миль, пока не попадете на Парк
авеню.</li>
</ol>
Элемент упорядоченного списка предупреждает браузер, что за
последовательную нумерацию всех элементов списка отвечает сам браузер, как показано на
рисунке 2.4.
1. Возьмите 1-10 к выезду с трассы
2. После выезда поверните налево на трассу Булевард
3. Проедьте по трассе несколько миль, пока не попадете на Парк авеню.
Рис. 2.4. Так интерпретируется упорядоченный список браузером
Браузер автоматически генерирует порядковый номер для каждого элемента списка.
Изменив с помощью языка CSS поведение браузера, для отображения диапазона
чисел можно использовать различные стили, например римские цифры.
% Как и а случае с элементом абзаца, в языке HTML не требуется, чтобы
,/' теги элементов списка были закрыты (хотя хорошим тоном программи-
I рования все же является использование закрывающих тегов).
Неупорядоченные списки
Неупорядоченный список - это список, в котором порядок размещения элементов
не существенен. Эти списки больше известны как маркированные списки.
Маркированные списки можно использовать для отображения такой информации, как
перечень продукции, список доступных возможностей или тезисов.
Структура неупорядоченного списка почти такая же, как у упорядоченного списка,
просто вместо элемента <ol> . . . </ol> используется элемент <ul> . . . </ul>
(unordered list - неупорядоченный список), как показано в примере 2.5. Этот тег
информирует браузер, что элементы списка должны отображаться с маркерами,
а не с порядковыми номерами.

Урок 2. Добавление текста и ссылок
35
Пример 2.5. Неупорядоченный список
<р>Раэделы сайта включают:</р>
<ul>
<И>Книги</И>
<li>CD и DVD</li>
<И>Электроника</И>
<И>Фотографическое оборудование»:/li>
<И>Программное обеспечение</И>
</ul>
Здесь был использован закрывающий тег элемента списка </li>,
необязательный в языке HTML (где он не требуется, но его можно использовать) и
обязательный в языке XHTML.
Разделы сайта включают:
♦ Книги
♦ CD и DVD
♦ Электроника
♦ Фотографическое оборудование
♦ Программное обеспечение
Рис. 2.5. Неупорядоченный список
Браузер корректно интерпретирует элемент <ul> . . . </ul>, отображая для
каждого элемента списка маркер, а не его порядковый номер. В языке CSS
существуют свойства для изменения стиля маркеров, например для использования
квадратных маркеров вместо круглых.
Вложенные списки
Иногда, весьма полезно использовать вложенные списки, объединяющие
неупорядоченные и упорядоченные списки. Вложенный список - это список,
размещенный внутри другого списка. Чтобы корректно создать вложенный список в
языке XHTML, необходимо обязательно разместить вложенный список между
открывающим и закрывающим тегом элемента списка, как показано в примере 2.6.
Пример 2.6. Упорядоченный список вложен внутрь другого упорядоченного списка
<ol>
<И>Взбивайте яйца, муку, масло и сахар до консистенции густой
сметаны</Ц>
<И>Вылейте в форму для выпечки пирога</И>
<И>Медленно добавьте и помешивайте перечисленные ингредиенты в
следующем порядке:

36
Языки HTML и CSS
<ol>
<И>Шоколадную массу, </li>
<И>Измельченную корицу, </li>
<li>l ложку мускатного opexa</li>
</ol>
</li>
<И>Поставьте печься в духовку на 40 минут</И>
</ol>
На рисунке 2.6 продемонстрированы результаты.
1. Взбивайте яйца, муку, масло и сахар до консистенции густой сметаны
2. Вылейте в форму для выпечки пирога
3. Медленно добавьте и помешивайте перечисленные ингредиенты в
следующем порядке:
1. Шоколадную массу,
2. Измельченную корицу,
3. 1 ложку мускатного ореха
А. Поставьте печься в духовку на 40 минут
Рис. 2.6. Вложенность упорядоченных списков
Для реализации вложенности можно использовать различные комбинации типов
списков, например:
• упорядоченные списки внутри упорядоченных списков;
• упорядоченные списки внутри нумерованных списков;
• нумерованные списки внутри нумерованных списков;
• нумерованные списки внутри упорядоченных списков.
Предположим, что у нас есть упорядоченный список, представляющий собой
рецепт, однако порядок добавления ингредиентов - произвольный, а не
последовательный, как показано в примере 2.7.
Пример 2.7. Комбинация типов списков для создания вложенного списка
<ol>
<И>Вэбивайте яйца, муку, масло и сахар до консистенции густой
сметаны</И>
<И>Вылейте в форму для выпечки пирога</И>
<И>Медленно добавьте и помешивайте одну из комбинаций
следующих ингредиентов:
<ul>
<И>1Иок о ладную массу, </li>
<И>Измельченную корицу,</li>
<li>l ложку мускатного opexa</li>
</ul>

Урок 2. Добавление текста и ссылок
37
</li>
<И>Поставьте печься в духовку на 40 минут</И>
</ol>
1. Взбивайте яйца, муку, масло и сахар до консистенции густой сметаны
2. Вылейте в форму для выпечки пирога
3. Медленно добавьте и помешивайте одну из комбинаций следующих
ингредиентов:
о Шоколадную массу,
о Измельченную корицу,
о 1 ложку мускатного ореха
4. Поставьте печься в духовку на 40 минут
Рис. 2.7. Комбинация упорядоченных и неупорядоченных списков
при отображении в браузере
Обратите внимание, что маркеры любого вложенного неупорядоченного списка
обычно не закрашены. Это обычное стандартное поведение браузера. При
помощи языка CSS можно изменять стили порядковых номеров и маркеров для
вложенных списков.
Берегитесь: использование чрезмерной вложенности
Вложенные списки - это превосходный способ быстрого и простого
представления информации читателям, однако существует проблема чрезмерной
вложенности списков. Если глубина вложенности списка составляет более
трех уровней, а его структура сама по себе не является сложной, возможно,
стоит пересмотреть подход, использованный для организации информации.
Списки определений
Список определений - это древняя конструкция языка HTML. Но к большому
сожалению, эти списки использовались крайне редко, хотя они являются
отличным способом определения терминов и понятий.
Списки определений состоят из трех элементов: элемента списка определений,
<dl> . . . </dl>; элемента определения термина, <dt> . . . </dt>, и элемента
определения описания, <dd> ... </dd>.
Список определений может включать несколько терминов, как показано
в примере 2.8.
Пример 2.8. Список содержит несколько терминов
<dl>
<dt> Furkid (n)</dt>

38
Языки HTML и CSS
<dd> Любимец, обласканный лишь за то, что он ребенок.</dd>
<dt> Nearshoring (v)</dt>
<dd> Реструктуризация рабочих сил компании путем
перемещения работ в близко расположенные страны.</dd>
<dt> Neurodiversity (n)</dt>
<dd> Набор не отклоняющихся от нормы невралгических манер
поведения и способностей, представленных человеческой
расой.</dd>
</dl>
Браузер отображает термин обычным образом, а само определение
отображается с отступом, как показано на рисунке 2.8.
Furkid (n)
Любимец, обласканный лишь зато, что он ребенок.
Nearshoring (v)
Реструктуризация рабочих сил компании
расположенные страны.
Neurodiversity (n)
путем перемещения работ в
Набор не отклоняющихся от нормы невралгических манер поведения
представленных человеческой расой.
близко
и спосс
бностей,
Рис. 2.8. Отображение списка определений в браузере
Чтобы сделать список немного более стильным, можно воспользоваться языком
CSS для применения стилей, например шрифтов или цвета.
Старая добрая ссылка
Без ссылок существование Интернета просто немыслимо. Ссылки - это сердце
и душа Интернета, поэтому к ним следует относиться с добротой!
Выполнить связывание не составляет труда, однако, когда дело доходит до
создания ссылок, возникает несколько важных моментов. Перед тем, как перейти к
коду, мне хотелось бы познакомить вас с двумя основными типами связывания:
абсолютным и относительным.
При абсолютном связывании используется точный адрес файла, на который
будет указывать ссылка. Этот тип связывания подразумевает указание домена, всех
подкаталогов и имени файла, как показано в примере 2.9.
Пример 2.9. Пример абсолютного адреса ^^^^
http://www.molly.com/books/springboard.html

Урок 2. Добавление текста и ссылок
39
Относительное связывание подразумевает создание ссылок на файлы,
находящиеся на одном и том же сервере, - другими словами, файлы, находящиеся
поблизости. Можно связать один документ с другим документом, если оба
хранятся в одном каталоге, просто используя имя файла: springboard.html.
Или, если документ находится в подкаталоге, указывается подкаталог:
books/springboard.html.
Можно переместиться из каталога в другой каталог, находящийся уровнем выше:
../books/springboard.html.
А на некоторых серверах можно использовать глобальный идентификатор,
чтобы указать «в каком месте сервера находится этот документ»:
/includes/springboard.html.
Берегитесь: ссылки в сетевых журналах
и системах управления содержимым
Хотя большинство людей пропагандирует повсеместное использование
относительных ссылок при работе с документами, которые находятся на одном
сервере, такой вид связывания не всегда является наилучшим выбором.
Сервисы сетевых журналов и систем управления содержимым (Content
Management Systems, CMS) создают архивы. Это значит, что относительные
ссылки в архивном файле, хранящемся в другом месте, чем исходный файл,
могут стать недействительными.
По этой причине, я предлагаю использовать абсолютное связывание в
подобных случаях.
В следующих примерах будет использовано как абсолютное, так и относительное
связывание.
Обычные ссылки создаются с использованием якорного элемента <а>
</а>. Атрибут гипертекстовой ссылки (href) используется для указания адреса
ссылки, а текст, размещенный между открывающим и закрывающим тегами,
становится связанным, как показано в примере 2.10.
Пример 2.10. Связывание с использованием абсолютного адреса
<а href="http://www.molly.com/books/aw.пып1">Читайте о HTML
и CSS</a>
На рисунке 2.9 показаны результаты.
Читайте о HTML и CSS
Рис. 2.9. Потрясающая гиперссылка

40
Языки HTML и CSS
Важным моментом является доступность ссылок. Чтобы сделать ссылки более
доступными для людей с ограниченными возможностями, можно использовать
атрибуты, представляющие дополнительные подсказки для таких людей. Очень
полезно использовать атрибут title. В примере 2.11 применяется данный
атрибут с более подробным описанием ссылки.
Пример 2.11. Добавление атрибута title и его значения
<а href="http://www.molly.com/books/springboard.html" title=
"Читайте о планируемой книге от Эддисон-Весли называющейся HTML
и С5Б">Читайте о HTML и CSS</a>
Когда указатель мыши проходит над ссылкой, появляется всплывающая
подсказка с дополнительной информацией, как показано на рисунке 2.10.
Читайте
oHTMkffCSS
[читайте
о планируемой книге от Эддисон-Весли называющейся HTML и CSS
Рис. 2.10. Использование атрибута title
и соответствующего описания делает ссылки более доступными
Еще одним важным атрибутом, отвечающим за доступность ссылок, является
атрибут tabindex, который позволяет задавать порядок выбора ссылок при нажатии на
клавишу EJ3. Это удобно для тех людей, кто для переходов между элементами
страницы использует клавишу IS11*!, а не щелкает на элементах мышью.
Поэтому, если вы хотите, чтобы ссылка была второй по значимости ссылкой
на странице, следует указать значение атрибута ссылки tabindex:
<а href="springboard.html" tabindex="2"> . . . </a>.
Ссылки электронной почты
Ссылка электронной почты - это обыкновенная ссылка, которая вместо
выполнения перехода на другую страницу открывает окно приложения для работы с
электронной почтой, благодаря чему можно отправлять электронные письма
человеку, электронный адрес которого указан в ссылке. Ссылки электронной
почты полезно использовать для контактных адресов электронной почты человека,
членов команды на сайте компании, для службы работы с покупателями и
обратной связи со службой поддержки.
Значение атрибута href ссылки электронной почты начинается с префикса
mailto:, за которым указывается адрес электронной почты получателя, как
показано в примере 2.12.

Урок 2. Добавление текста и ссылок
41
Пример 2.12. Использование префикса mail to: для создания ссылки электронной почты
<а Ьге£="та1^о:то11у@то11у.сот">электронный адрес Молли</а>
На рисунке 2.11 показаны результаты.
Ьлектронтый адрес Молли
В* Создать сообщение (_ )
: Файл Правка Вид Вставка Формат Сервис Сообщение Справка
! &
| Отправить
ЕЁ) Кому: ■Ч"!""
Щ) Копия:
Тема:
X 11 ©- ■■ К>
Вырезать: Копировать - Вставить Отменить- ■
Проверить
п]|х
»
[mollvgimollv.comi
1
.! ........
! ■'■■--'-"; v. .v j [j>Ai:v;j 1=; j ж ..а- ;н.:Д.| i= :=- Ш
iW | С 111
■ --.i ■.■ *■>..*!
Рис. 2.11. Щелчок на ссылке mailto: приводит к открытию программы
для работы с электронной почтой и вставке
адреса электронной почты в поле ввода То (Кому)
Если вы хотите сделать ссылку более дружественной, можно добавить
предметную строку, разместив за адресом электронной почты вопросительный знак (?),
атрибут subj ect и его значение, как показано в примере 2.13.
Пример 2.13. Добавление темы к адресу электронной почты
<а Ьге£="та11Ьо:то11у@то11у.сот?Би^есЬ=£еебЬаск">электронный
адрес Молли </а>
На рисунке 2.12 показаны результаты.

42
Языки HTML и CSS
Jgff^n^^WJiMP6.? Молли
a feedback
: Файл Правка Вид Вставка Формат Сервис Сообщение Справка ед
« X £ С ^ *
Отправить Вырезать Копировать Вставить Отменить Проверить
Ш Кому: |rnollvg>molly,com
Igg Копия: |
Тема: feedback
|г„ Ж К Ч А, !Е
SE tS Ш
Рис. 2.12. Ссылка mail to: с добавленной предметной строкой
Для ссылок электронной почты можно реализовать и специальные возможности,
воспользовавшись атрибутом title и его значением, а также атрибутом
tabindex, если порядок следования ссылок на странице чрезвычайно важен для
посетителей сайта, как показано на примере 2.14.
Пример 2.14. Реализация специальных возможностей для ссылокmailto :
<а href="mailto:molly@molly.com?subject=feedback" title=
"электронный адрес Молли для связи относительно книги"
tabindex^'3'^злектронный адрес Молли</а>
Текст атрибута title теперь отображается в виде всплывающей подсказки,
когда указатель мыши проходит над ссылкой. Значение атрибута tabindex
установлено в 3, поэтому посетитель сайта может трижды нажать клавишу Р>ТаЬ1.
чтобы добраться до этой ссылки, что очень полезно для людей с нарушениями
двигательной функции.
Внутристраничное связывание
Внутристраничное связывание позволяет создавать в документе ссылки, которые
автоматически переносят посетителя в другое место этого же документа. Такое
связывание осуществляется путем создания ссылки на местоположение с
использованием знака решетки (#), за которым указывается соответствующее имя, после

Урок 2. Добавление текста и ссылок
43
чего определяется местоположение с использованием якорного элемента и
атрибута name, значение которого соответствует имени, указанному в ссылке.
При необходимости, в документе можно использовать любое количество
подобных ссылок. Этот метод особенно полезен для навигации по очень большим
документам, как показано в примере 2.15.
Пример 2.15. Настройка внутристраничных ссылок
<рха href ="#пе\л7Б">Перейдите к новостям</ах/р>
<п1>Добро пожаловать</п1>
<р>Этот параграф приглашает вас.</р>
<h2>Ha тему</Ь2>
<р>Этот параграф расскажет о нас.</р>
<h2xa name="news">HoBocTM</a></h2>
<р>Эта секция ваша связь с переходом.</р>
На рисунках 2.13 и 2.14 показано, как работает внутристраничное связывание.
Перейдите к новостям
Добро пожаловать
Этот параграф приглашает вас.
Рис. 2.13. Щелчок на внутристраиичной ссылке
Этот параграф расскажет о нас.
Новости
Эта секция ваша связь с переходом.
Рис. 2.14. Браузер прокручивает документ
до указанного местоположения
Используя метод внутристраничного связывания, можно выполнять связывание
одного документа с определенным местоположением другого документа. Этот
метод полезно использовать для создания ссылки на текст, который может
находиться на другой странице. В этом случае просто используется абсолютный адрес
URL, за которым следует знак решетки и имя местоположения в первом
документе, как показано в примере 2.16.

44
Языки HTML и CSS
Пример 2.16. Использование ссылок для перехода на определенное местоположение
в другом документе
<рха href="http: //www.molly.com/headers.гЛт1#Ь2">Перейдите по
этой ссылке для чтения о заголовках второго уровня</ах/р>
Раздел определяется в том документе, на который создается ссылка, как показано
в примере 2.17.
Пример 2.17. Желаемое местоположение
<hl><a name="h2">Bce о заголовках второго уровня</ах/Ы>
Первый документ содержит ссылку на определенное местоположение другого
документа.
Берегитесь: атрибуты Name и ID
В языке XHTML 1.1 атрибут name был полностью заменен атрибутом id.
Поэтому, если вы используете язык XHTML 1.1, во всех якорных элементах
необходимо заменить атрибут name на атрибут id.
Некоторые браузеры не понимают такую замену, поэтому, чтобы избежать
проблем, для подобных страниц используйте документы, написанные на
языках XHTML 1.0 или HTML.
Добавление содержимого в шаблон
В примере 2.18 используется шаблон, созданный в главе 1 «Создание HTML-
страницы», к которому добавлены некоторые элементы, рассмотренные в
данной главе. На примере рабочего документа можно получить представление о том,
когда применяются эти элементы.
Пример 2.18. Добавление содержимого в шаблон
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
<head>
<title>your site : Location within site : topic title</title>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<meta name="keywords" content="здесь ваши ключевые слова" />

Урок 2. Добавление текста и ссылок
45
<meta name="description" content=3flecb ваше описание" />
<meta name="author" content="здесь ваше имя" />
</head>
<body>
<Ы>Добро пожаловать !</hl>
<р>Некоторые вещи вам здесь понравятся/</р>
<Ь2>Стихотворение...</h2>
<р> What earthly tongue, and, oh! What human pen<br />
Can tell that scene of suffering, too severe.<br />
'Tis ever present to my sight, oh! When<br />
Will the sound cease its torture on mine ear?</p>
<Ь2>Рецепт</Ь2>
<p> Мне так нравится этот рецепт, я рассказываю всем моим
друзьям о нем!</р>
<ЬЗ>Кофейный пирог</ЬЗ>
<ol>
<И>Взбивайте яйца, муку, масло и сахар, пока они не преврятят-
ся в крем</И>
<И>Вылейте в форму для пирога</И>
<li> Медленно вылейте и помешивайте одну из комбинаций следующих
ингредиентов:
<ul>
<И>шоколадную массу</И>
<И>измельченную корицу, </li>
<li>l ложку мускатного opexa</li>
</ul>
<И>Поставьте печься в духовку на 40 минут</И>
</ol>
<Ь2>Необыкновенные времена</Ь2>
<dl>
<dt> Furkid (n)</dt>
<dd> A pet treated as though it were one's child.</dd>
<dt> Nearshoring (v)</dt>

46
Языки HTML и CSS
<dd> Restructuring a company's workforce by moving jobs to
a nearby foreign country.</dd>
<dt> Neurodiversity (n)</dt>
<dd> The variety of non-debilitating neurological behaviors
and abilities exhibited by the human race.</dd>
</dl>
<Ь2>Когда друзья входят в контакт...</h2>
<рха href="mailto:molly.com?subfect=feedback">Элeктpoнный
адрес Молли</а> </р>
</body>
</html>
Загрузите эту страницу в браузер и взгляните на результаты!
Квантовый скачок: значение структуры
В этой части мы получили представление о двух самых важных аспектах Web-
страницы: тексте и ссылках. Но кроме всего прочего, мы немного узнали о
важности семантики, или значении, элементов и их тегов.
Это важно понимать, поскольку неправильное применение элементов для
получения визуальных результатов, вместо передачи значения, накладывает
очень большие ограничения на документ. Значения этих элементов
составляют часть логической структуры документа, а логическая структура документа,
в свою очередь, формирует так называемое дерево документа.
Дерево документа - это просто иерархическая логика структуры документа,
основанная на семантике тегов, которые используются для разметки
содержимого. Само по себе это дерево не представляет большого значения, однако,
когда мы начнем использовать языки CSS, JavaScript или серверные скрипты
для генерации динамического содержимого, дерево документа будет иметь
огромное значение.
Аккуратный документ формирует логическое дерево документа, упрощая
применение языка CSS и написание скриптов, поскольку в этом случае можно
воспользоваться передовыми идеями, в основе которых лежит наследование.
Без четкого дерева документа, попытка отладить документ вызовет массу
затруднений.
В заключение
Возможность правильно форматировать текст и управлять содержимым имеет
большое значение при создании Web-страницы, представляющей интерес

урок 2. Добавление текста и ссылок
47
не только для вас и других людей, которые, возможно, обновляют ваши
документы, но и для тех хороших ребят, которые посещают ваш сайт.
Преимущества хорошо отформатированного содержимого:
• посетители сайта будут иметь четкое представление о его назначении;
• можно помогать посетителям перемещаться по сайту нужным путем;
• содержимое будет хорошо организовано;
• ссылки будут осмысленными и, следовательно, более удобными для публики;
• при помощи текстового содержимого и ссылок можно убедить посетителей
посетить другие части сайта, особенно наиболее интересные из них.
По существу, способ представления текста и ссылок гарантирует не только то,
что содержимое - это король, но и то, что при его просмотре посетители сайта
будут ощущать себя членами королевской семьи.
Текст - это еше не все
Конечно же, текст - это не единственный способ, с помощью которого можно
убедить или развлечь наших посетителей или же предоставить им нужную
информацию. Изображения, мультимедиа и интерактивные возможности могут
иметь очень большое значение для обогащения впечатлений от Web-сайта.
Итак, в следующей главе мы узнаем, как добавлять изображения, мультимедиа и
скрипты в документы. Если у вас возникло ощущение, что еще немного рановато
переходить к изучению темы, которая, возможно, кажется вам более сложной, не
стоит беспокоиться! Идея заключается в том, чтобы вы смогли применить свои
знания уже сейчас, решая забавные и доставляющие удовольствие задачи,
которые помогут сохранить ваш интерес к дальнейшему обучению.

УРОК 3.
Добавление изображений,
мультимедиа и сценариев
Изображения, мультимедиа и сценарии позволяют сделать сайт «динамичным и
насыщенным». Такой сайт будет динамичным, поскольку многие из
перечисленных возможностей позволяют посетителям активно взаимодействовать с сайтом.
Сайт будет содержательным благодаря его насыщенности визуальными образами,
дополняющими содержимое. В этой главе термин изображения относится как
к рисункам, используемым для улучшения дизайна страницы, так и к рисункам,
дополняющим содержимое сайта, например к фотографиям. Изображения для
Интернета должны быть подготовлены особым образом в хорошем графическом
редакторе; при желании, этому можно быстро научиться.
Изображения для Интернета можно создавать с помощью ряда программ,
но обычно хочется воспользоваться неплохим графическим редактором,
например программой Photoshop (если ваш бумажник не позволяет купить
эту программу, можете попробовать программу Paint Shop Pro компании
Jasc). Существует множество других программ для создания Web-
графики; найти эти программы можно с помощью любимой поисковой
системы, введя в поле строки поиска фразу «web graphics software».
Для Web-графики применяется два основных формата: GIF и JPEG. Формат файла
GIF лучше всего подходит для изображений с небольшим количеством цветов,
простыми фигурами и областями, заполненными сплошным цветом; формат
файла JPEG лучше всего подходит для изображений с большим количеством
цветов и цветовых градиентов, например фотографий. Третьим форматом для Web-
графики является формат PNG, однако отсутствие поддержки этого формата
в некоторых браузерах, делает его использование менее привлекательным.
Понятие мультимедиа в Интернете можно отнести к ряду вещей, включая
анимационные GIF-файлы, Flash-анимацию, аудио, видео, а также Java-апплеты. В этой
главе понятие скрипты относится к эффектам, созданным с использованием
языка JavaScript или DHTML. Эти эффекты можно вставлять в документы для
придания страницам неповторимых особенностей.
Не смотря на то, что изображения, мультимедиа и скрипты могут
придать сайту дополнительные особенности, они также могут внести
ненужный беспорядок и увеличить время загрузки страницы. Я считаю,
что большая часть подобного содержимого является декорацией.
Вы ведь не хотите украсить свой дом огромным количеством
декораций, поэтому подумайте о том, во что превратит вашу страницу
такой объем декораций.

Урок 3. Добавление изображений, мультимедиа и сценариев 49
Элемент img
При работе с изображениями мы будем использовать элемент img. Этот элемент
является пустым - иначе говоря, элемент не содержит никакого текстового
содержимого. Поэтому для него не нужно использовать закрывающий тег. На языке
XHTML это выглядит следующим образом:
<img />
Если вставить этот элемент в таком виде в тело документа, ничего не произойдет.
Поэтому, помимо самого элемента img, необходимо еще указать путь к
изображению. Для этого используется атрибут src, название которого является
сокращением от слова «source» (источник).
В значении атрибута src указывается месторасположение и имя с расширением
существующего файла с Web-графикой. В примере 3.1 демонстрируется готовый
документ с указанным источником изображения.
Пример 3.1. Добавление изображения в тело документа
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>r\naBa 3</title>
</head>
<body>
<img src="images/4>oTo.jpg" />
</body>
</html>
Обратите внимание, что для хранения Web-графики был использован
подкаталог images. Изображения удобно размещать в подкаталоге того
каталога, в котором хранятся документы, использующие их, или, если
сайт невелик, в одном подкаталоге корневого каталога.
В окне браузера появится изображение, как показано на рисунке 3.1.
О

50 Языки HTML и CSS
Ole Edit yew go £ okmarks Tools Window Help
■igt "ей- Done и^оЛ1
Pwc. 3.1. В окне браузера отображается изображение
Если в документе нет другого содержимого, изображение автоматически
размещается в левом верхнем углу. Конечно, чтобы сделать это изображение более
полезным, мы выполним ряд вещей:
• окажем содействие браузерам для лучшего отображения изображения;
• предоставим полезную информацию для тех, кто, возможно, не сможет
увидеть изображение;
• свяжем изображение.
Сначала мы рассмотрим, как решать эти задачи с использованием языка
XHTML, но в главе 8 «Работа с цветом и изображениями с использованием
языка CSS» мы познакомимся с современными методами управления
представлением изображения с использованием языка CSS.
Использование атрибутов width и height
Следующее, что мы хотим сделать с изображением, - использовать атрибуты
width и height. На самом деле, это поможет браузерам отображать изображения
более эффективно, поэтому эти атрибуты стоит использовать всегда.
Узнать ширину и высоту изображения можно несколькими способами. Первый
способ заключается в использовании графического редактора, который
позволяет получить необходимую информацию, как показано на рисунке 3.2.

Урок 3. Добавление изображений, мультимедиа и сценариев
51
Другим способом узнать ширину и высоту является открытие изображения
непосредственно в браузере.
На рисунке 3.3 показано само изображение (не HTML-файл), а в строке заголовка
отображаются его ширина и высота.
Размер изображения , .
I— Ызмрения в точка* ЦМ
Ширина- |7К] II точки
Высот* JS37 II точки
Ширина: 113.94 ||он
Высота. 114.21 11 с„
Разрешение: 196 II пикееп^дюин
1 | Сжатие размере»
[^Повторное изображение: Бикубическая
- »•■» -
ч
.4
3
ч
ч
V
..—т
1 ок J
[ Отмена 1
| Авто... ]
1
Рис. 3.2. Хотите узнать ширину и высоту изображения в пикселах - в данном случае,
программа Photoshop отображает ширину и высоту
в верхней части диалога Image Size (Размеры изображения)
(S W1 .|ре (JPIC Imtff, Н6x53/ pixels] - MoztlU
Be E* V«w fio Bookmarks look Jtfrdow
**" « ^^fV^Kf --^Z '
Л~4 -- » ■r'rHWIVT ■»- -''4Ю&Ф*
^ » - ' ^ ^ . '_*-.
-St 4* Done
**
I w1 HSj;^;.4 'x* "дач
■ 'It Tii» ii мши iiM|ш*
—^P -M.V j^Sr'"^ -fa*
t-b^tbbVBJBj^—^b*V «* T——>
-; -r~?- .-**- -*•- -*~-—
-s^ ■ v >■
iiBBl
^bbb!
i
T
**;
- -'
-41
BBS
-i>-ta"
Pwc. 3.3. Изображение, открытое в браузере,
в строке заголовка браузера появились ширина и высота изображения

52 Языки HTML и CSS
Такая возможность существует не во всех браузерах, а только в самых
распространенных.
¥)
Получив размеры изображения - в данном случае ширина составляет 250 пикселов,
а высота -188 пикселов, - их можно указать в разметке изображения:
<img Бгс="фото.jpg" width="250" height="188" />
Следует всегда указывать правильную ширину и высоту. Если значения
width и height будут больше размеров реального изображения, браузер
растянет изображение, чтобы подогнать его размеры под указанные
значения. Если указать меньшие значения, браузер выполнит сжатие
изображение до указанных значений, уменьшив его.
Предоставление альтернативного текста
Некоторые люди перемещаются по Интернету, отключив в браузере функцию
отображения изображений. Хотя в современном мире с высокими пропускными
способностями это звучит странно, однако некоторые люди не имеют
высокоскоростного выхода в Интернет, а поскольку изображения могут существенно
замедлять доступ к содержимому страницы, люди отключают функцию
отображения изображений. Другим важным моментом является то, что у многих людей,
посещающих Интернет, плохое зрение, или они вообще слепы. В таких случаях
посетителям полезно предоставлять какие-нибудь сведения о том, что из себя
представляет изображение.
Для этих целей используется альтернативный текст, который является
значением атрибута alt, как показано в примере 3.2.
Пример 3.2. Добавление текстового описания при помощи атрибута alt
<img Бгс="фото.jpg" width="250" height="188" а1Ь="фотография
красивого замка на фоне гор" />
Альтернативный текст отображается на сайте в двух случаях. В первом случае,
он отображается в месте расположения изображения до его полной загрузки,
а также когда функция отображения изображений отключена, как показано на
рисунке 3.4.
Во втором случае, альтернативный текст отображается в тот момент, когда
указатель мыши проходит над изображением. Это полезно для всех, поскольку
альтернативный текст предоставляет контекстно-зависимую информацию о
назначении изображения, как показано на рисунке 3.5.
О
о

Урок 3. Добавление изображений, мультимедиа и сценариев
53
. £ie Edit £iew fio bookmarks I°ols ^vindow Це1р
фотография красивого замка на фоне гор
•St ч£ Done | | HtnoS1
Рис. 3.4. Альтернативный, текст в браузере
с выключенной функцией отображения изображений
Рис. 3.5. Альтернативный текст в виде всплывающей подсказки,
появляющейся при перемещении указателя мыши над изображением
Связывание изображения
Нам много раз придется связывать изображение с другим HTML-документом или
полной версией изображения. В любом случае, связывание изображения
выполняется точно так же, как и связывание текста. Код изображения помещается в
якорный элемент и указывается адрес связываемого документа, как если бы на
месте изображения находился текст, что показано в примере 3.3.
Пример 3.3. Связывание изображения
<а href«"Подробно.html">
<img src="images/фото.jpg" width="250" height="188" alt=
"фотография красивого замка на фоне гор" />
</а>
Теперь изображение связано, и если посетитель щелкнет на нем, он будет
перемещен на страницу detail.html. К ссылке можно добавить атрибут title, чтобы
предоставить посетителям дополнительную информацию о ссылке. По
умолчанию, вокруг изображения отображается граница, подчеркивающая тот факт, что
изображение является связанным, а указатель мыши, когда находится над
изображением, принимает вид руки, как показано на рисунке 3.6.

54
Языки HTML и CSS
Qle Edit View go Bookmarks Tools Window Help
■SS. Ч>£- Ме:(№'./Подробно html '[ |4&~gS*
Рис. 3.6. Связанное изображение
Если изображение-ссылка была активирована, граница вокруг изображения
примет стандартный цвет посещенной ссылки. Конечно, многие люди считают
границу ссылки уродливой. Если вы хотите избавиться от нее, это можно сделать
прямо в языке HTML, как показано в примере 3.4.
Пример 3.4. Использование атрибута border
<а href="подробно.html">
<img src="images/ct)OTo.jpg" width="250" height="188" alt=
"фотография красивого замка на фоне скал" border="0" />
</а>
Граница вокруг изображения, которое все еще остается связанным, больше не
отображается, как показано на рисунке 3.7.
Берегитесь: Границы отвечают за представление
Атрибут border считается презентационным, поскольку его можно
использовать для представления документа. Значение атрибута, большее 0,
изменяет толщину границы, независимо от того, является изображение связанным
или нет. В идеале, для изменения границ вместо атрибута border будут
использованы свойства языка CSS. Язык CSS также будет применен для
позиционирования или плавающего размещения изображения относительно
содержимого страницы. Более подробно об этом можно узнать в главе 11
«Поля, границы и отступы» и в главе 12 «Позиционирование, плавающее
размещение и Z-индекс».

Урок Э. Добавление изображений, мультимедиа и сценариев
55
Щ Глава 3 - Mozill*
^шшт
Рис. 3.7. Вокруг изображения, которое все еще остается связанным,,
больше нет видимой границы
Связывание аудио- или видеофайла
Если вы хотите разместить на сайте ссылки на файлы мультимедиа, сделать это
так же просто, как и создать ссылку на изображение. Для аудио и видео
существует большое количество форматов файлов, но самыми популярными на
сегодняшний день являются форматы МРЗ, QuickTime, Real и Windows Media.
Сначала файл мультимедиа размещается в подкаталоге. Как и в случае с
изображениями, структура подкаталогов позволяет поддерживать организацию
различных файлов. В данном случае, в подкаталоге с именем media находятся два
файла, первый из которых является аудиофайлом в формате МРЗ, а второй -
видеофайлом с расширением .avl. В примере 3.5 демонстрируется весь документ и то,
как было выполнено связывание с файлами мультимедиа.
Пример 3.5. Связывание аудио и видео
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
<head>
<title>r\naBa 3</title>
</head>
<body>

56
Языки HTML и CSS
<а href="media/audio-sample.mp3">CcbLnKa на образец звука</а><Ьг
/>
<а href="media/video-sample.avi">CcbmKa на образец видео</а>
</body>
</html> ^^^^^^^
Я добавила текст для ссылок и для ясности вставила разрыв строки между двумя
ссылками, чтобы они располагались на разных строках, а не друг за другом.
В результате, ссылки отображаются так, как показано на рисунке 3.8.
ЦТ ГлаваЭ -Mozilla
' gle Edit View go Bookmarks
Ссылка на образец звука
Ссылка иа образец видео
\ 1
•«&• 4j£- I
швш
Tools Window
| Щ>»|вр
Рис. 3.8. Ссылки на аудио- и видеофайл
Пока все довольно просто, не так ли? Хорошо, нам осталось сделать несколько
вещей со ссылками, чтобы упростить посетителям работу с аудио и видео.
Берегитесь: поведения браузеров различаются
Различные браузеры по-разному отображают аудио- и видеофайлы.
Существенное влияние на способ отображения оказывают и настройки браузеров.
При щелчке на ссылке, некоторые браузеры автоматически загружают файл
во внешний проигрыватель мультимедиа и воспроизводят аудио- или
видеоклип. Другие браузеры отображают диалог, в котором предлагается открыть
файл с помощью подходящего приложения или загрузить его и сохранить на
жестком диске. Из-за указанных различий в поведении браузеров,
посетителям полезно предоставлять максимально возможное количество информации
о ссылке, на которой они собираются щелкнуть.
Поскольку размеры большинства аудио- и видеоклипов достаточно велики, на
странице полезно указывать размеры этих файлов для предупреждения
посетителей. Просто добавьте информацию в текст ссылки или разместите ее
непосредственно за ссылкой.
s\ Некоторые люди идут еще дальше, предоставляя файлы с разными
размене рами для посетителей с низкой, средней и высокой пропускной способно-
I стью канала передачи данных.

урок 3. Добавление изображений, мультимедиа и сценариев
57
Другим способом содействия посетителям является размещение описания файла
в атрибуте ссылки title, как показано на рисунке 3.9.
Этот способ помогает предоставить всем дополнительную информацию, а также
объяснить людям, не способным видеть или слышать, назначение данной
ссылки, как показано в примере 3.6.
Пример 3.6. Добавление дополнительной информации для посетителей
<а href="media/audio-sample.mp3" title="3By4aHMe пения Мол-
ли">Ссылка на образец эвука</а>.Размер: l,300KB<br />
<а href="media/video-sample.avi" title="BMfleo из класса танцев
Сары">Ссылка на образец видео</а>. Размер: 29,000KB
:| File Edit liew Go Bookmarks Tools Window Help
Ссылка на образец звукаРазмер: 1,300КБ
Ссылка на образец видео. Размер: 29,000КБ
Видео из класса танцев Сары]
Рис. 3.9. Предоставление полезной дополнительной информации
для ссылок на аудио и видео
Вставка файлов при помоши элемента object
Другим способом представления аудио, видео и других файлов мультимедиа,
например Flash-анимации и Java-апплетов, является их вставка непосредственно на
страницу. Это означает, что вместе со страницей автоматически загружается
программный модуль.
Все внешние файлы считаются объектами. К ним относятся как изображения, так
и файлы мультимедиа. В современных спецификациях языков HTML и XHTML
корректным способом включения всех файлов мультимедиа на страницу
является использование элемента ob j ect для непосредственной вставки файла:
<object data="media/video-sample.avi" type="video/avi" />
В результате на странице появится приложение-плейер, после чего можно
воспроизводить видео, как показано на рисунке 3.10.
Конечно, при помощи дополнительных параметров можно решать гораздо
большее количество задач. Подробнее узнать о многих доступных
параметрах для файлов мультимедиа можно в отличном учебном пособии по
адресу http://www. w3schools.com/media/tlefault.asp.

58
Языки HTML и CSS
/f| piaeaJL--t№jy«o(t Ijjtemet^..., BuSt
Адрес:
*©<>© »
<з| Мой компьютер
Рис. 3.10. Вставленный на страницу плейер загружен в браузере Internet Explorer
В случае с файлами в формате Flash, для размещения файла среди содержимого
страницы используется элемент ob j ect, как показано в примере 3.7.
Пример 3.7. Вставка файла Flash-ролика (SWF)
на страницу с использованием элемента <object>
<object classid="clsid:d27cdb6e-ae6d-llcf-96b8-444553540000"
width="100" height="100"
codebase="http://active.macromedia, com/ flash6/ cabs/ swf lash. cab#version= 6, 0,0,0">
<param name="movie" value="media/intro.swf" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="guality" value="hight" />
</object>
В большинстве браузеров, соответствующих стандартам и у которых включена
функция воспроизведения Flash-анимации, сразу после загрузки страницы
должно начаться воспроизведение файла, как показано на рисунке 3.11.
Обратите внимание, что вместе с объектами указывается
дополнительная информация. К ней относится значение атрибута codebase
и элемента parameter, используемого для определения не только
местоположения файла, но и других аспектов его воспроизведения.
Все эти параметры генерируются программой Macromedia Flash
при создании Flash-файпа. За дополнительной информацией по
технологии Flash обратитесь к документу по адресу
http://www.macromedia.com/software/flash/.

Урок 3. Добавление изображений, мультимедиа и сценариев
59
Файл Правка Вид Избранное Сервис Справка
СЭ Назад - щ,
DU
Готово Мой компьютер
Рис. 3.11. Flash-анимация логотипа AVA воспроизводится
в браузере Internet Explorer
Элемент object можно также использовать для аудио и Java-апплетов.
Необходимо просто указать правильное значение для атрибута codebase и желаемые
параметры, и все будет готово.
Ваша Честь, я - объект!
Хорошо, вся предыдущая часть была враньем. Но я не пытаюсь сбить вас с
толку - как раз наоборот, я пытаюсь вести вас правильным путем. Если вы хотите
использовать разметку, существующую в достоверном мире языков HTML и
XHTML, адресация ко всем внешним файлам мультимедиа должна выполняться
при помощи элемента ob j ect.
Однако существует огромный камень преткновения по использованию элемента
object, то есть поддержка этого элемента в различных браузерах и платформах
несовместима. Этот факт весьма беспокоит сторонников пуризма, поскольку
в спецификациях другой альтернативы не существует.

60
Языки HTML и CSS
Квантовый скачок: Обработка элемента object в языке XHTML 2.0
В языке XHTML 2.0 элемент object используется повсеместно. Другими
словами, все остальные элементы, предназначенные для работы с внешними
объектами, включая элемент img, выведены из употребления. Понятно, что пока
рано использовать язык XHTML 2.0, поскольку результаты будут ограничены
очень немногими браузерами, поддерживающими элемент object вместо
элемента img. Однако это дает хорошее представление о направлении
развития языка XHTML.
Простыми словами, вот к чему все это сводится: если файл мультимедиа
должен быть максимально совместимым в различных браузерах, необходимо
воспользоваться специальным элементом - элементом embed. Этот элемент
никогда не существовал в формальных спецификациях, однако почти все
браузеры его поддерживают; и хотя страницы, в которых используется элемент
embed, при выполнении проверки корректности вызывают ошибки, они все
равно будут работать.
Абсолютно логичным подходом считается одновременное использование
элементов object и embed. Итак, если применить этот подход к только что
использованному Flash-файлу, окончательная разметка будет выглядеть так, как
показано в примере 3.8.
Пример 3.8. Вставка файла Flash-ролика (SWF)
на страницу с использованием элементов <object> и <embed>
<object classid="clsid:d27cdb6e-ae6d-llcf-96b8-444553540000"
width="100" height="100"
codebase="http://active.macromedia, com/flash6/cabs/swflash.cab#version=6,0,0,0">
<param name="movie" value="media/intro.swf" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="quality" value="high" />
<exnbed src="media/intro.swf" width="100" height="100"
play="true" loop=true" quality="high"</embed>
</object>
Теперь Flash-ролик будет воспроизводиться на странице практически во всех
браузерах.
Добавление скриптов
Сделать страницы интерактивными и интересными можно еще одним способом,
который заключается в добавлении скриптов. Обычно этот способ имеет
отношение к языку JavaScript или к языку, известному под названием Динамический
HTML (Dynamic HTML) или DHTML, который представляет собой комбинацию

Урок 3. Добавление изображений, мультимедиа и сценариев
61
технологий, включая языки HTML, CSS, JavaScript и модель Document Object Model
(Объектная модель документа). Объединение этих технологий позволяет
использовать богатые возможности, например ниспадающие меню и
интерактивные игры.
Квантовый скачок: модель Document Object Model
Модель Document Object Model, также известная как модель DOM, представляет
собой интерфейс в браузерах, который позволяет присоединять скрипты к
отдельным элементам. Одной из причин, по которым язык DHTML стал
спорным и сомнительным, явилось то, что в браузерах были реализованы
нестандартные модели DOM, что привело к плохой совместимости. При
использовании скриптов на языке DHTML, убедитесь, что в них максимально реализована
кросс-браузерная поддержка. Модель DOM является стандартизованной, и
разработчики всех современных браузеров, построенных на стандартах,
эффективно работают над реализацией стандартов модели DOM.
Добавить скрипты в документ можно двумя основными способами. Первый
способ заключается в размещении скрипта в разделе документа head. Другим
способом является размещение скрипта вне документа; такой скрипт называется
связанным.
Вставка скрипта
Для вставки кода на языке JavaScript в раздел документа head, используется
элемент script, содержащий код скрипта, как показано в примере 3.9.
Пример 3.9. Вставка скрипта в раздел документа head
<head>
<script type="text/javascript">
function newWindowO {foodWindow=window.open
("images/фото.ppg", "foodWin", "windth=250,height=188")}
</script>
</head>
Задача этого скрипта - открыть изображение photo.jpg в новом окне, когда
пользователь щелкнет на определенной ссылке. В саму ссылку, расположенную в
разделе документа body, необходимо добавить инструкцию на языке JavaScript, как
показано ниже:
■?а href=" javascript: newWindowO ">Фотография красивого замка на
фоне гор</а>

62
Языки HTML и CSS
На рисунке 3.12 демонстрируется, как щелчок на ссылке приводит к открытию
нового окна с загруженным изображением.
Рис. 3.12. Результаты работы вставленного скрипта
Связывание со скриптом
Принимая во внимание передовые практики, чем большее количество кода,
относящегося к скриптам и стилям, удастся вынести за пределы документа во
внешние файлы, тем лучше. К одному скрипту может обращаться большое
количество страниц, и если потребуется внести изменения в скрипт, их гораздо
проще выполнить в одном файле скрипта, чем во множестве документов со
вставленными скриптами.
Чтобы выполнить связывание со скриптом, сначала разместите код скрипта (без
каких-либо тегов языка HTML) в отдельном файле и назовите этот файл именем с
расширением .js, например, popup.js. Данный файл можно разместить в
подкаталоге scripts (по аналогии с размещением изображений и мультимедиа), а затем
использовать элемент script для связывания этого файла с документом, как
показано в примере 3.10.
Пример 3.10. Связывание со скриптом
<head>
<script src="scripts/popup.js" type="text/javascript"></script>
</head>
He изменяйте код ссылки в разделе документа body, и результаты будут точно
такими же, как на рисунке 3.12.

Урок 3. Добавление изображений, мультимедиа и сценариев 63
Скрипты и проблемы браузеров
В некоторых случаях люди используют старые браузеры, не имеющие
поддержки языка JavaScript или имеющие недостаточную поддержку самого элемента
script, или же просто отключают функцию поддержки языка JavaScript. Чтобы
обойти данные проблемы, необходимо прибегнуть к помощи дополнительной
разметки.
Большинство современных Web-дизайнеров не используют обходные пути
для решения данных проблем до тех пор, пока не будут знать наверняка,
что необходимо реализовать поддержку старых браузеров. Однако,
возможно, вы захотите использовать эти пути. В любом случае, важно
посмотреть на данные методики в действии, чтобы в последствии
узнавать их при изучении HTML-кода, полученного из других источников.
Сокрытие скриптов от старых браузеров
Если используются вставленные скрипты на языке JavaScript, некоторые старые
браузеры пытаются отображать все, что находится внутри элемента script, как
текст раздела body.
Чтобы избежать такой ситуации, многие люди выполняют «комментирование»
скриптов - другими словами, используют синтаксис комментариев, как показано
в примере 3.11, для предотвращения отображения скрипта.
Пример 3.11. Сокрытие скрипта при помощи комментариев
<head>
<script type="text/javascript">
<»—Это скрывает скрипт от старых браузеров
function newWindow() {foodWindow=window.open
(»images/фото.jpg", "foodWin", "windth=250,height=188")}
// Окончание скрытия скрипта от старых браузеров -->
</script>
</head>
Обратите внимание на / / . Это синтаксис языка JavaScript, позволяющий
записывать за этими символами комментарий, который также не будет отображаться.
Способ комментирования, используемый в данном случае, не будет мешать
нормальной работе скрипта в любом браузере, поддерживающем скрипты.
Использование элемента noscript
Если есть желание добавить какой-либо текст, чтобы браузеры отображали
сообщение, касающееся поддержки скриптов, можно воспользоваться элементом
noscript, как показано в примере 3.12.

64 Языки HTML и CSS
Пример 3.12. Использование элемента noscript
<head>
<script type="text/javascript">
<!— Это скрывает скрипт от старых браузеров
function newWindowf) {foodWindow=window.open
("images/фото.jpg", "foodWin", "windth=250,height=188")}
// Окончание скрытия скрипта от старых браузеров —>
</script>
<noscript>BHMMaHMe: Ваш браузер не поддерживает
JavaScript или же Вы выключили JavaScript.
</noscript>
</head>
В тех браузерах, в которых существует поддержка скриптов и у которых не
отключена соответствующая функция, содержимое элемента noscript
отображаться и£ будет.
Однако в браузерах, которые не имеют поддержки языка JavaScript, или в браузерах,
которых функция поддержки языка JavaScript отключена преднамеренно, будет
отображаться текст элемента noscript, как показано на рисунке 3.13.
:, Eile Edit View _> Bookmarks I00'5 Window fcfclp
Внимание-. Ваш браузер не поддерживает JavaScript или же Вы выключили JavaScript.
Фотография красивого замка на фоне гор
Рис. 3.13. Отображение текста элемента tig script в браузере,
в котором отключена функция поддержки языка JavaScript
Обратите внимание, что ссылка не изменилась, однако скрипт, отвечающий за
открытие нового окна, работать не будет, если у браузера отсутствует поддержка
языка JavaScript или отключена соответствующая функция.
Поиск скриптов в Интернете
Одним из приятнейших моментов использования языков JavaScript и DHTML
является доступность множества бесплатных скриптов. Конечно, такое
обилие бесплатных скриптов означает, что многие из представленных
скриптов нестандартны или что с момента опубликования появились более
новые, лучшие скрипты. Именно поэтому будьте внимательны и читайте
то, что написано мелким шрифтом. Лично мне нравится несколько
сайтов: http://javascriptkit.com/, http://simpiythebest.net/scripts/DHTML_scripts/,
http://www.javascripts.com/ и http://www.dynamic-drive.com/.

Урок 3. Добавление изображений, мультимедиа и сценариев
65
Осознайте это!
От структуры до хорошо отформатированного текста, отличных изображений и
интерактивных возможностей - несомненно, за три коротких главы вы прошли
длинный путь.
Конечно, если вы разочарованы, вас можно понять, поскольку все это очень
напоминает строительство дома в то время, как вы представляете себе его
предстоящую отделку. Важно помнить, что в современном мире для построения
хороших Web-страниц необходимо потратить дополнительное время для
организации материалов, иметь четкие цели и получать удовольствие от создания своих
документов.
Как и в случае с домом, чем лучше фундамент, чем более хорошо построена и
продумана структура, тем будет проще осуществлять эстетические изменения.
Это как раз то, что мы хотели получить, потратив время на правильное
построение страниц. Такая простая вещь, как размещение всех изображений в каталоге
image, скриптов - в каталоге script и других файлов мультимедиа в
соответствующих каталогах, означает наличие внутренней структуры сайта, которая будет
расти, а не обрушиваться по мере роста сайта и внесении изменений для
соответствия новым требованиям.
Представьте, что вы заранее не потратили время на построение правильной
структуры. Воспользуйтесь советом профессиональных Web-разработчиков,
которые учились на собственных ошибках: плохо построенная инфраструктура
может все время приводить к разнообразным дорогостоящим, трудоемким и
разочаровывающим проблемам.
Теперь, когда вы стали немного более организованными в плане использования
документов, текста, изображений и мультимедиа, настало время заняться
украшением. В следующей главе мы познакомимся с созданием полезных таблиц.
Когда чаша Грааля была переполнена внешним видом сайтов, были пересмотрены
возможности использования таблиц из-за их структурной целостности.
Известно, что язык CSS гораздо более эффективен и гибок для
репрезентативных аспектов сайта, однако таблицы могут быть чрезвычайно полезны для
эффективного отображения ряда информации. В зависимости от поставленных
задач таблицы могут быть отличным способом представления данных, помогая
посетителям сайта легко получать и осмысливать информацию, публикуемую для
совместного использования.
3 -1356

УРОК 4.
Создание таблиц
Использование таблиц чрезвычайно эффективно для представления данных на
Web-сайте. У таблиц интересная история развития в Интернете - поэтому, перед
тем, как взяться за дело и начать создавать таблицы, стоит познакомиться с этой
историей поближе.
Многие читатели наверняка знают, что Интернет создал физик. Тим Бернерс-Ли
(Tim Berners-Lee) представлял, что эту технологию можно применять для
высокоэффективного распределения и совместного использования
исследовательских документов. Таким образом, таблицы являются дополнением
первоначальной идеи: они были добавлены в развивающийся язык HTML, как средство
представления данных для их совместного использования другими
исследователями и учеными.
В то время языка CSS еще не было, а значит, и не было технологии, отвечающей
именно за способы представления страниц. Поскольку таблицы формируют
сетку, разработчики быстро пришли к соглашению использовать таблицы скорее
для отображения содержимого, чем данных - фактически, таблицы стали
инструментом для создания макетов страниц, ибо ничего лучшего в тот момент не
существовало.
На сегодняшний день таблицы остаются основным способом формирования
макетов Web-документов. Однако у такого подхода существует ряд недостатков.
Макеты, созданные на основе таблиц, медленно загружаются и зачастую
являются сильно детализированными, что затрудняет эффективную работу с ними.
Таблицы, используемые для макета, не соответствуют предположениям
поисковых систем о структуре страниц, что является весьма важным моментом при
формировании рейтингов, поэтому применение таких таблиц может привести к
невозможности улучшения рейтинга. И, наконец, вероятно, самое важное -
табличные макеты создают множество препятствий для доступности.
Использование таблиц для макетов стало крупнейшим обходным решением в
истории языка HTML, поскольку элементы и атрибуты, предназначенные для одной
конкретной задачи - отображения табличных данных, - были использованы для
чего-то совершенно другого. Несомненно, табличные макеты изменили лицо
Интернета, однако теперь существует язык CSS, и для большинства макетов больше
нет причин использовать таблицы. Вместо этого, таблицы снова рассматривают
в истинном свете: как способ отображения данных.
Подход, известный под названием переходный дизайн (transitional design),
объединяет использование без труда разработанных таблиц и языка CSS для создания
макетов, совместимых со старыми браузерами. Если необходимо поддерживать
не только современные браузеры, то этот подход - отличный выбор. Однако
в идеале следует совершенно отказаться от использования таблиц, кроме тех
случаев, для которых они предназначались изначально.

Урок 4. Создание таблиц
67
Элемент table
Создание таблиц начинается с элемента table. Этот элемент предупреждает
браузер, что последующие данные относятся к таблице, которая сейчас будет
отображена. Элемент table считается непустым, поскольку в нем находится
текстовое содержимое. Поэтому он записывается с использованием открывающего
и закрывающего тега, как показано ниже:
<table>
</table>
Если загрузить этот код в браузер, вы ничего не увидите - для этого необходимо
добавить другие элементы. Однако у элемента table существует несколько
атрибутов, с которыми следует познакомиться.
Ширина таблицы
Если необходимо задать ширину таблицы, это можно сделать с помощью
атрибута открывающего тега table. Значения ширины могут выражаться двумя
способами: в пикселах и в процентах. Значение, выраженное в пикселах, считается
фиксированным, значением, поскольку ширина таблицы всегда будет
соответствовать этому значению, как показано в примере 4.1.
Пример 4.1. Таблица с шириной, выраженной в пикселах, или фиксированной шириной
<table width="250">
</table>
Таблица с фиксированной шириной, равной 250 пикселам, будет занимать именно
250 пикселов доступного пространства в окне браузера, как показано на рисунке 4.1.
Eile Edit ^ew Qp Bpokmarlcs Tools ^jndow tielp
I
•Sfc- -Ф ' Done HD-a^
Puc. 4.1. Независимо от ширины окна браузера, ширина таблицы с фиксированной
шириной всегда остается постоянной - в данном случае, ее ширина составляет 250 пикселов
Значение, выраженное в процентах, считается плавающим значением (известное
так же, как динамическое, или текучее), поскольку таблица будет занимать
пространство, выраженное в процентах относительно свободного пространства
окна браузера, как показано в примере 4.2.
В данном случае таблица будет занимать 90% доступной ширины окна браузера,
как показано на рисунке 4.2.

66
Языки HTML и CSS
Пример 4.2. Таблица с шириной, выраженной в процентах, или плавающей шириной
<table width="90%">
</table>
Wf.na.aa 4 ^Mozilla *Л '^.. ^r+st - ^^У^Й^-,' Л
■ | @e Edit View Qp gpckmarks Ipols Vj/indow belp
1
-3ftr sZ- ' Done ||
"PW'v'lL^i.JiiLii
|-ф-1ЙР
Рис. 4.2. Ширина таблицы, выраженная в процентах, приводит к тому, что таблица
заполняет окно браузера в соответствии с указанным, значением - в данном случае 90%
Ширина таблиц будет варьироваться из-за различных разрешений
компьютерных мониторов, а также из-за изменения людьми размеров окна
браузера на рабочем столе. Размеры плавающей таблицы будут
изменяться всякий раз при изменении размеров окна браузера, чтобы
заполнять доступное пространство.
Границы таблицы и интервалы
Язык HTML позволяет включить отображение границ таблицы, как показано ниже:
<table width="250" border="l">
В результате выполнения этой строки кода вокруг таблицы, а также вокруг всех
ее строк и ячеек, будет отображена граница шириной в 1 пиксел.
Для добавления интервала между ячейками используется атрибут cellspacing.
Для добавления интервала между содержимым ячейки и самой ячейкой
используется атрибут cellpadding:
<table width="90%" border="l" cellspacing="5" cellpadding="5">
Как и в случае со всеми атрибутами, отвечающими за представление документа,
управление атрибутами width, border, cellspacing и cellpadding в
конечном счете будет осуществляться при помощи языка CSS, который предлагает
намного больше вариантов представления информации. Однако с этими
атрибутами необходимо познакомиться и использовать в данной главе для создания
таблицы данных. Позднее, мы модифицируем указанные свойства таблицы с
использованием языка CSS.
За дополнительной информацией по созданию таблиц данных,
выглядящих просто фантастически, обратитесь к главе 8 «Работа с цветом и
изображениями с использованием языка CSS».

урок 4. Создание таблиц
69
Добавление строки таблицы
Еще одна важная составляющая HTML-таблицы - это строка таблицы,
представляемая элементом tr, как показано в примере 4.3.
Пример 4.3. Таблица со строкой
<table width="90%" border="l" cellspacing="5" cellpadding="5">
<tr>
Данные
</tr>
</table>
В каждой таблице должна быть хотя бы одна строка. Строки - это вид таблицы по
горизонтали. И хотя сама по себе приведенная разметка в браузере отображаться
не будет, я добавила необходимые компоненты, чтобы можно было четко увидеть
строку, как показано на рисунке 4.3.
@е Edit View Qp Bookmarks Iools Window Help
Данные
■Mfc-eg. ! D°ne 'I ЦШ>*аУ _
Puc. 4.3. Таблица с одной строкой ~ интервалы между
контуром строки и контуром таблицы установлены
при помощи атрибутов eel 1 spacing и eel Ipadding
Таблица может содержать любое необходимое количество строк.
В следующем примере были добавлены две дополнительные строки, чтобы
привести пример таблицы, состоящей из трех строк. Также была использована
разметка, необходимая для отображения трех строк таблицы, как показано на рисунке 4.4.
. File Edit View S° Bookmarks Iools Window Help
Данные
Данные
Данные
i!5fc \Z- , Done ' | ' ' ) HB-gSP
Puc. 4.4. Таблица, состоящая из трех строк

70
Языки HTML и CSS
Добавление ячеек таблицы
Ячейки формируют вертикальные столбцы таблицы, используя теги табличных
данных:
<td>
</td>
Элемент табличных данных, вместе с элементами table и tr являются тремя
неотъемлемыми составляющими любой таблицы, как показано в примере 4.4.
Пример 4.4. Таблица с одной строкой и тремя столбцами
<table width="90%" border="l" cellspacing="5" cellpadding="5">
<tr>
<td>flaHHbie</td>
<td>flaHHbie</td>
<td>flaHHbie</td>
</tr>
</table>
Ячейка таблицы
Интервал между ячейками
F*- Edit View Go Bookmarks I00'5 Window Help
..-СИЯ
Данные
Данные
Данные
Щ. ч2- Done
] -0-ri*
Строка
Ширина таблицы (90%)
Рис. 4.5. Анатомия простой таблицы: три ячейки,
одна строка, ширина равна 90%, интервал равен 5
Эта таблица отображается в Web-браузере без дополнительной разметки, как
показано на рисунке 4.5, поскольку в ней присутствуют все необходимые
составляющие.
Конечно, таблица может содержать любое число ячеек, соответствующее
необходимому количеству столбцов. Более того, можно улучшать внешний вид ячеек таблицы
при помощи заголовков, что позволяет отличать заголовки столбцов от данных.
Добавление заголовков таблицы
Заголовок таблицы обозначает заголовок столбца или строки таблицы.
<th>
</th>

урок 4. Создание таблиц
71
Чтобы заголовки описывали столбцы, находящиеся под ними, разместите все
заголовки в одной строке, а затем добавьте столбцы, которые будут находиться
под заголовками в последующих строках, как показано в примере 4.5.
Пример 4.5. Заголовки для ячеек таблицы
<table width="90%" border="l" cellspacing="5" cellpadding="5">
<tr>
<1:Ь>Местоположение</1:г1>
<th>norofla</th>
<th>4acoBOM noHc</th>
</tr>
<tr>
<td>TMKcOH, Apn30Ha</td>
<td>)KapKaH</td>
<td>fleHb flojirMii</td>
</tr>
</table>
По умолчанию браузер отображает заголовки шрифтом с полужирным
начертанием. На рисунке 4.6 видно, что текст заголовка отцентрирован. При помощи языка
CSS можно, конечно, изменить начертание шрифта, цвет и другие стили заголовка.
@е Edit View Qp gookmarks Iools Window tielp
Местоположение
Тиксон, Аризона
Погода
Жаркая
Часовой пояс
День долгий
-ЗД >£ ! Done ~* | | -Ф-'ой4
Рис. 4.6. Добавление заголовков в таблицу
Заголовки также можно использовать и для описания заголовков строк, как
показано в примере 4.6. Заголовок будет размещаться в строке, как показано на рисунке 4.7.
Пример 4.6. Заголовки для ячеек таблицы ___^_
<table width="90%" border="l" cellspacing="5" cellpadding="5">
<tr>
<th>Mecтoпoлoжeниe</th>
<td>TMKcoH, ApMSOHa</td>
</tr>
<tr>
^th>norOfla</th>
<td»KapKaH</td>
</tr>
<tr>

72
Языки HTML и CSS
<th>4acoBOM noflc</th>
<td>fleHb долгий</Ьс!>
</tr>
</table>
Efte Edit View Qp Bookmarks Iools ytfndow Help
Местоположение
Погодя
Часовой пояс
Тиксон, Аризона
Жаркая
День долгий
да, \& оопе [ 1 «"О-сй"
Рис. 4.7. Использование заголовков строк в таблице
Для многих таблиц данных требуется одновременное использование как
заголовков столбцов, так и заголовков строк, поэтому при необходимости данный метод
можно комбинировать, как показано на рисунке 4.8.
@е Edit View Qp gookmarks Tools yitndow Це1р
Местоположение
Погодя
Часовой пояс
Тиксон, Артона
Жаркая
День долгий
Лас Вегас, Невада
Жаркая
Стандартное горное время
Рис. 4.8. Заголовки строк и столбцов в таблице
Добавление заглавия
Заглавие таблицы можно задать при помощи элемента caption.
<caption> . . . </caption>
Содержимое заглавия размещается между открывающим и закрывающим тегом
элемента caption. Этот элемент располагается непосредственно за
открывающим тегом table, и большинство браузеров отображает его содержимое над
таблицей по центру, как показано в примере 4.7.
Пример 4.7. Добавление заглавия таблицы
<table width="90%" border="l" cellspacing="5" cellpadding="5">
<caption>CpaBHGHMe погоды и часового noHca</caption>

Урок 4. Создание таблиц
73
<tr>
<th>MecTonc^03KeHMe</th>
<th>TMKCOH, ApM30Ha</th>
<th>Hac Berac, HeBafla</th>
</tr>
<tr>
<th>Ilorofla</th>
<td>>KapKafl</td>
<td>Жapкaя</td>
</tr>
<tr>
<th>4acoBOM noflc</th>
<td>fleHb дoлгий</td>
<td>CTaHflapTHOe горное BpeMfl</td>
</tr>
</table>
На рисунке 4.9 показаны результаты выполнения кода.
Ete Edit View Qp Bookmarks Ipols Window h[elp
Сравнение погоды и часового пояса
Местоположение
Погодя
Часовой пояс
Тпксон, Аризона
Жаркая
День долгий
Лас Вегас, Невада
Жаркая
Стандартное горное время
Ч& •&■ Done | 1 ЧЬ-ВЙР
Рис. 4.9. Добавление заглавия
Описание таблицы
Кратко описать содержимое таблицы можно при помощи атрибута summary
элемента table:
<table summary="текстовое описание">
Если вы думаете: «Эй, держу пари, что это как-то связано с доступностью», то вы
попали в самую точку. Фактически, описание помогает людям с ограниченными
возможностями, которым требуется больше контекстной информации о таблице.
Описание не отображается на экране в виде всплывающей подсказки, когда
указатель мыши перемещается над таблицей, в отличие от альтернативного текста
или атрибута title, используемого в ссылках. Описания могут быть прочитаны
только вспомогательным устройством, например читателем экрана для слепого
пользователя.

74
Языки HTML и CSS
В примере 4.8 демонстрируется таблица из предыдущего примера, в которую
было добавлено описание.
Пример 4.8. Добавление описания таблицы
<table width="90%" border="l" cellspacing="5" cellpadding="5"
summary="3Ta таблица отображает местности и информацию о связи
в них погоды и часового пояса>
<сарЫоп>Соответствие погоды и временного noHca</caption>
<tr>
<ЬЬ>Местность</ЬЬ>
<Ьп>Тиксон, Аризона</Ьп>
<th>Jlac Вегас, Невада</Ьп>
</tr>
<tr>
<th>norofla</th>
< td>5KapKaH< / td>
< td>Жapкaя</td>
</tr>
<tr>
<Ьп>Часовой пояс</ЬЬ>
<td>fleHb дoлгий</td>
<td>CTaHflapTHoe горное epeMH</td>
</tr>
</table>
Квантовый скачок
Использование заглавий и описаний имеет большое значение в процессе
улучшения доступности таблиц данных для людей с ограниченными
возможностями - и делает таблицы более понятными для всех. Чтобы побольше
узнать о методах улучшения доступности таблиц, ознакомьтесь с документом
Creating Accessible Tables (Создание доступных таблиц) на сайте компании
WebAIM (http://webaim.org/techniques/tables/), являющимся, в целом, отличным
источником информации по доступности.
Объединение строк
В процессе создания таблицы может понадобиться растянуть один столбец на
несколько строк. Для этого используется атрибут rowspan, значение которого
определяет количество строк, охватываемых заголовком . или определенной
ячейкой таблицы, как показано в примере 4.9.

урок 4. Создание таблиц
75
/Гример 4.9. Использование атрибута rowspan для объединения двух строк
<table width="90%" border="l" cellspacing="5" cellpadding="5'
диштагу="Эта таблица демонстрирует объединение строк">
<сарЫоп>Демонстрация объединение строк</сарЫоп>
<tr>
<th го^7Брап="2">Заголовок (объединены 2 строки)</th>
< td> да нные </1d>
< td>данные</td>
</tr>
<tr>
< td>данные</td>
<td>данные </td>
</tr>
<tr>
<th>Зaгoлoвoк (слияния нет)</ЬЬ>
<td>flaHHbie</td>
<td>flaHbme</td>
</tr>
</table>
На рисунке 4.10 демонстрируются строки с объединенным заголовком.
IS? Глава 4 - Mozilla
File Edit View £o Bookmarks Tools Window ЬЫр
Демонстрация объединение строк
Заголовок (объединены 2 строки)
Заголовок (слияния нет)
1
данные
1
данные
данные
данные
данные
дакыке
-$&, \g. Done
С
Ь»ф-в5Р
Рис. 4.10. Объединение строк с заголовками
Можно объединять строки и внутри ячеек. Если необходимо растянуть второй
столбец на все три строки, это можно сделать при помощи атрибута rowspan
соответствующей ячейки таблицы, как показано в примере 4.10.
Пример 4.10. Объединение трех строк в ячейке таблицы
<table width="90%" border="l" cellspacing="5" cellpadding="5"
summary=" Эта таблица демонстрирует объединение строк">
<caption> Демонстрация объединение строк </caption>
<tr>
<th rowspan="2">3aronoBOK (объединены 2 строки)</th>
<td rowspan="3">flaHHbie (объединены З строки) </td>

76
Языки HTML и CSS
< Ь<3>данные< / td>
</tr>
<tr>
< td>данные</td>
</tr>
<tr>
<Ьп>Заголовок (объединения нет)</Ьп>
< td>flaHHbie< / td>
</tr>
</table>
Обратите внимание, что все ненужные ячейки таблицы были удалены, как
показано на рисунке 4.11.
Fie Edit View Go Bookmarks Tools Window Help
Демонстрация объединение строк
Заголовок (объединены 2
строки)
Заголовок (объединения нет)
1
даииые (объединены 3
строки)
данные
данные
данные
~Ж \Z Done | ] -ф-аР
Рис. 4.11. Использование атрибута rowspan для ячейки таблицы
Берегитесь перекрывающихся ячеек
Если не удалить ячейки, перекрывающиеся с объединением, получится
большой беспорядок! Поэтому, необходимо просто выполнить несложные
математические вычисления и отнять соответствующее число ячеек,
относительно таблицы и объединения строк. Если работа выполнена правильно,
в таблице не будет дополнительных свободных пространств или видимых
пустых промежутков. Если видны странные пробелы, вернитесь и заново
пересмотрите структуру таблицы - вы быстро найдете перекрытие и исправите
возникшие проблемы.
Объединение столбцов
Точно так же, как объединяются строки, можно объединять столбцы. Для этого
используется атрибут colspan в заголовке или ячейке таблицы, как показано в
примере 4.11.

Урок 4. Создание таблиц
77
Пример 4.11. Объединение столбцов в заголовке таблицы
<table width="90%" border="l" cellspacing="5" cellpadding="5"
summary="3Ta таблица демонстрирует объединение столбцов">
<сарЫоп>Демонстрация объединения столбцов</сарЫоп>
<tr>
<th со1Брап="2">Заголовок (объединены 2 столбца)</th>
<ЬЬ>Заголовок (объединения HeT)</th>
</tr>
<tr>
< td>flaHHbie< / td>
< td>flaHHbie< / td>
< td>flaHHbie< / td>
</tr>
<tr>
< td>flaHHbie< / td>
< td>данные</td>
<td>flaHHbie</td>
</tr>
</table>
На рисунке 4.12 показаны результаты.
I File Edit View Go gookmarks Tools yrtndow Help
Демонстрация объединения столбцов
Заголовок (объединены 2 столбца)
данные
1
данные |
j
данные
данные
Заготовок (объединения нет)
данные
данные
■Ж- s£- ' Done | Г-ф-af
Рис. 4.12. Объединение двух столбцов в заголовке таблицы
Подобным образом можно объединять ячейки таблицы. В примере 4.12 нижняя
ячейка таблицы растягивается на всю строку. Будьте внимательны - различия
между атрибутами rowspan и colspan могут вас немного запутать. Просто
помните, что объединение строк означает вертикальное объединение, а
объединение столбцов - горизонтальное объединение.
Пример 4.12. Объединение трех столбцов
<table width="90%" border="l" cellspacing="5" cellpadding="5"
Еиггипагу="Эта таблица демонстрирует объединение столбцов">
<сарЫоп>Демонстрация объединения CTon6uOB</caption>

78
Языки HTML и CSS
<tr>
<th со1Брап="2">Заголовок (объединены 2 столбца)</th>
<th> Заголовок (объединения HeT)</th>
</tr>
<tr>
<td>flaHHbie</td>
< td>данные</td>
< td>flaHHbie< / td>
</tr>
<tr>
<td со1Брап="3">данные (объединены З столбца)</td>
</tr>
</table>
Результаты приведены на рисунке 4.13.
I File £dit J/iew go Bookmarks Tools Window Help
Демонстрация объединения столбцов
Заголовок (объединены 2 столбца)
данные
1
данные
данные (объединены 3 столбца)
Заголовок (объединения нет)
данные
1
■S, •«£- Done | 14J>*af
Рис. 4.13. Объединение столбцов ячейки таблицы
Квантовый скачок
Когда вы приобретете опыт в структурировании таблиц, поймете, почему
использование таблиц для макетов было очевидным решением для создания
сеточной системы, которая легла в основу дизайна сайтов в начале
существования Интернета. Посмотрите, как в результате добавления графики и
текста в ячейки таблицы и удаления всех границ может получиться
эффектный дизайн. Web-дизайнеры, которые сначала изучили данный подход,
столкнулись со значительными трудностями при переходе на CSS-макеты,
функционирующие совершенно по-другому. Необходимо понимать, что хотя
таблицы использовались для макетов, совершивших революцию в Web-
дизайне, проблемы, возникающие при применении таблиц, о чем было
упомянуто во вступлении к данной главе, не могут сравниться с современными
возможностями языка CSS для создания изумительных макетов,
чрезвычайно доступных и удобных.

Урок 4. Создание таблиц
79
Комбинирование атрибутов colspan и rowspan
Конечно, атрибуты colspan и rowspan можно комбинировать для получения
ряда различных таблиц. В примере 4.13 демонстрируется совместное
использование объединения столбцов и строк.
Пример 4.13. Комбинирование атрибутов colspan и rowspan
<table width="90%" border="l" cellspacing="5" cellpadding="5"
summary=""3Ta таблица комбинирует объединение столбцов и строк">
<сарЬ1оп>Комбинирования объединения столбцов и cTpoK</caption>
<tr>
<th colspan="2" rowspan="2">Заголовок (Объединены 2 столбца и 2
строки)</th>
<td>flaHHbie< / td>
</tr>
<tr>
<td>flaHHbie< / td>
</tr>
<tr>
< td>flaHHbie< / td>
<td>flaHHbie</td>
< td>flaHHbie< / td>
</tr>
</table>
На рисунке 4.14 приведены результаты.
1лава4 - Moziilt. 4. v.
■ i Eile &Л View Qq Bpo!<marks Tools V^mdow Help
K-M
Комбинирования объединения столбцов н строк
'Заголовок (Объединены 2 столбца п 2 строки)
данные
данные
данные
данные i
данные
■Ш -1/g, Done
)4D-o8°
Рис. 4.14. Комбинирование атрибутов colspan и rowspan
Можно смешивать и сопоставлять атрибуты colspan и rowspan в любых
воображаемых комбинациях. Два предупреждения: обязательно избавьтесь от
всех ячеек и заголовков, перекрываемых объединением, и помните, что чем
сложнее становится таблица, тем менее доступной она будет для
большинства программ, предназначенных для чтения экрана, которые используются
слепыми пользователями или пользователями с нарушением зрения.

80
Языки HTML и CSS
Группирование столбцов таблицы: элемент col
Если вы весьма обеспокоены доступностью или если у вас есть широкие таблицы
данных, полезно сгруппировать столбцы, чтобы сохранить их организацию и
логику. Осуществить группирование столбцов для лучшего управления и
доступности можно с помощью двух элементов.
Первым элементом является элемент col. Элемент col - это способ
группирования столбцов для задания значений атрибутов или применения стиля.
Элемент col должен располагаться сразу за элементом caption, если таковой
присутствует, и поддерживает ряд атрибутов. Особое значение имеет атрибут
span, который определяет число столбцов, объединяемых элементом col.
В примере 4.14 демонстрируется использование элемента col с атрибутом span,
значение которого равно 2. Обратите также внимание, что был добавлен элемент
width, определяющий ширину, и что для элемента col необходимо
использование замыкающего слеша: <col />.
Пример 4.14. Использование элемента col
для применения значений атрибутов к нескольким столбцам
<table width="90%" border="l" cellspacing="5" cellpadding="5"
Бшптагу="Эта таблица рассматривает группирование столбцов">
<сар^оп>Группирование столбцов</сар^оп>
<col span="2" width="100" />
<tr>
<^п>Заголовок таблицы</^п>
<^п>Заголовок таблицы</^п>
<^п>Заголовок таблицы</^п>
</tr>
<tr>
<td>flaHHbie< / td>
<td>данные</td>
<td>flaHHbie</td>
</tr>
<tr>
<td>flaHHbie</td>
<td>flaHHbie</td>
<td>flaHHbie</td>
</tr>
</table>
На рисунке 4.15 показано, как сгруппированы первые два столбца. Ширина,
определенная в элементе col и равная 100 пикселам, применена к обоим
столбцам в объединенной группе.

Урок 4. Создание таблиц
81
.Глава 4 - Mozilla
pie £dit View go gookmarks Tools Window Help
Группирование столбцов
Заголовок
таблицы
даииые
данные
Заголовок
таблицы
даииые '
данные
Заголовок таблицы
данные
данные
Чя£- I Done
L
|H>aJP
Рис. 4.15. Группирование столбцов с использованием элемента col
Можно также добавлять и другие атрибуты, отвечающие за представление
документа, включая атрибуты align и valign:
<col span="2" width="100" align="right" valign="bottom" />
Результаты использования приведенной разметки показаны на рисунке 4.16.
•3 Глава 4 - Microsoft Internet Explorer ^ , "Wi" * .„ •• .Lll> ГОЦ'Х]
Файл Правка Вид
^3 Назад -
Адрес ]^Q D:\l.html
Заголовок
таблицы
данные
даииые
ЗУ Готово
Избранное Сервис Справка Hfjj
[ж] |g?] Поиск Избранное ^ - Щ - Ы
v Щ Переход ыпги п
Группир
Заголовок
таблицы
оваине столбцов
Заголовок таблицы
данные данные
данные данные
Jjj Мой компьютер
Рис. 4.16. Использование элемента col для применения атрибутов,
отвечающих за представление документа, к нескольким столбцам
В данном случае, обратите внимание, что заголовки, принадлежащие группе, как
и текст в ячейках таблицы, выровнены по правому краю. Если присмотреться
внимательно, можно заметить, что текст в ячейках группы расположен немного
ниже текста в правом столбце, который не является частью группы.

82
Языки HTML и CSS
Группирование столбцов таблицы
при помоши элемента colgroup
Другим способом группирования столбцов является использование элемента
colgroup, по существу выполняющего ту же функцию, что и элемент col. В примере
4.15 используется основная таблица из примера 4.14, состоящая из трех столбцов и
трех строк, к двум столбцам которой применяются различные значения атрибутов.
Пример 4.15. Использование элемента colgroup
для применения значений атрибутов к нескольким столбцам
<table width="90%" border="l" cellspacing="5" cellpadding="5"
Бшптагу="Эта таблица рассматривает группирование столбцов">
<сарь1оп>Группирование столбцов</сарЬ1оп>
<colgroup align="right" valign="bottom" />
<colgroup align="right" valign="bottom" />
<tr>
<Ьп>Заголовок таблицы</ьЬ>
<Ьп>Заголовок таблицы</ьЬ>
<Ьп>Заголовок таблицы</ьЬ>
</tr>
<tr>
<td>flaHHbie</td>
< td>flaHHbie< / td>
< td>flaHHbie< / td>
</tr>
<tr>
< td>flaHHbie< / td>
<td>flaHHbie</td>
<td>данные</td>
</tr>
</table>
Значение атрибута align применяется ко всей группе ячеек таблицы, что
позволяет избежать необходимости добавления атрибута к каждой ячейке.
Отображаемые результаты точно такие, как и представленные на рисунке 4.16.
Берегитесь поддержки браузерами элементов col и colgroup
Обратите внимание, что на рисунке 4.16 вместо моего любимого браузера Mozilla я
использовала браузер Internet Explorer. И хотя вообще считается, что браузер Mozilla
является лучшим браузером, реализующим стандарты, чем браузер IE, в данном
случае поддержка элементов col и colgroup, и их атрибутов у браузера
отсутствует. Это справедливо и для многих других браузеров. В связи с этим,
использование элементов col и colgroup должно быть ограничено ситуациями, в которых
точно известно, что посетители увидят желаемые результаты. Многие дизайнеры
предпочитают вовсе не использовать элементы col и colgroup.

урок 4. Создание таблиц
83
Группирование строк таблицы
Можно также группировать строки таблицы, используя три элемента, которые
определяют группы строк в зависимости от их назначения. К этим элементам
относятся элементы thead, tf oot, tbody, соответственно, для заголовка,
нижней части и тела таблицы, как показано в примере 4.16.
Пример 4.16. Группирование строк таблицы
<thead>
<tr>
<^11>Заголовок таблицы</^Ь>
<^Ь>Заголовок таблицы</^Ь>
<^]1>Заголовок таблицы</^Ь>
</tr>
</thead>
<tfoot>
<tr>
<td>0cHOBaHMe таблицы</^3>
<td>0cHOBaHMe тaблицы</td>
<td>0cHOBaHMe тaблицы</td>
</tfoot>
<tbody>
<tr>
<td>Teлo тaблицы</td>
<td>Teлo тaблицы</td>
<td>Teлo тaблицы</td>
</tr>
</tbody>
</tr>
</table>
Поддержка браузером этих элементов является более совместимой. На
рисунке 4.17 приведены результаты.
Р.Глава4-Mozilla.
File £dit View go gookmarks
L
'Заголовок таблицы
Тело таблицы |
Основание таблицы !
\& ■ Done
» - . г, •.
Tools Window Help
Группирование столб!
(ОЕ
Заголовок тайшщы
Тело таблицы '
Основание таблицы
Заголовок табчпцы
Тело таблицы
Основани таблицы
-Ф-'aT
Рис. 4.17. Группирование по строкам - обратите внимание, что элемент tfoot
в документе был определен в середине таблицы, однако строка, определенная
как низ таблицы, все равно отобразилась в нижней части таблицы

84
Языки HTML и CSS
Данные таблицы...
Будь вы доктор, ученый, помощник специалиста, преподаватель, студент или
сотрудник юридической службы, в определенный момент времени у вас появляется
необходимость разместить информацию в таблицах. Ознакомьтесь с вариантами
возможного применения таблиц на открытых или закрытых Web-сайтах:
• Медицинские карты.
• Результаты научных исследований.
• Календарь событий.
• Контроль оценок и посещений.
• Управление задачами.
• Информация о судебном деле.
И этот список можно продолжать бесконечно. Теперь понятно, почему таблицы
так важны для соответствующего размещения содержимого.
Конечно, таблицы используются для отображения информации, хранящейся в
базах данных. Один из способов сбора этой информации - через Web-сайт.
Предположим, что вы - агент по торговле недвижимостью и желаете разработать базу
данных людей, заинтересованных в покупке или продаже земельной
собственности в вашем районе.
Можно создать интерактивную форму для получения информации от
заинтересованных участников. Данные формы будут обработаны на сервере с помощью
технологии для работы с базой данных и возвращены на Web-сайт в виде
таблицы. Конечно, для этого потребуются интерактивные формы и технология на
стороне сервера. Хотя, рассмотрение баз данных и серверных приложений
выходит за рамки данной книги, разметка включает необходимые элементы для
разработки интерактивных форм.
В следующей главе мы узнаем все о формах, а также узнаем, как создавать
прекрасные интерактивные формы, которые улучшат впечатление посетителя сайта
от страниц - что, в свою очередь, обеспечит максимальную обратную связь.

УРОК 5.
Создание форм
формы являются неотъемлемой частью процесса, благодаря которому Интернет
стал интерактивным и полезным. Формы интерактивны, поскольку вам,
пользователю, для выполнения какой-либо задачи необходимо взаимодействовать с
ними. Примерами важных задач являются:
• Ввод информации в онлайновую банковскую систему для управления
средствами через Интернет.
• Отправка имени и информации, чтобы стать членом онлайновой службы
знакомств.
• Покупка билета на самолет и путешествий.
• Покупка других товаров и сервисов через Интернет.
Без форм мы не смогли бы воплотить в жизнь никакие из перечисленных
возможностей - и, фактически, сам Интернет, с точки зрения предоставления
интерактивных сервисов, никогда бы не стал таким эффективным, каким он
является сейчас. В наши дни для выполнения задач, для которых
предназначены формы языка HTML, часто используются другие технологии.
Технология Flash, например, поддерживает формы с расширенными
возможностями, которые, помимо всего прочего, очень быстро загружаются и их
обновление происходит на той же странице без перезагрузки. Однако это не означает,
что пользователи потеряли интерес к формам языка HTML: хотя Flash-формы и
могут быть очень полезными для некоторых людей, их невозможно сделать
такими же доступными для поиска и для людей с ограниченными возможностями,
как формы на языке HTML. Поэтому даже сайты, использующие Flash-формы,
часто предоставляют альтернативные формы, реализованные на языке HTML.
Другие технологии начинают насыщать формы более богатыми возможностями,
однако эти технологии пока являются предварительными, поэтому формы на языке
HTML остаются традиционным способом добавления интерактивности и
функциональности на Web-сайты.
Работать с формами относительно просто, по крайней мере, с точки зрения
языка HTML. Чтобы форма функционировала определенным образом, ее необходимо
запрограммировать - рассмотрение программирования форм на стороне сервера
выходит за рамки данной книги.
В этой главе мы рассмотрим, как создавать формы на языке HTML и делать их
логичными и доступными. На протяжении всей главы я буду ссылаться на ресурсы,
которые помогут лучше познакомиться с возможностями для проверки и
обработки построенных форм, предоставляемыми на стороне сервера.

86
Языки HTML и CSS
Элемент form
Создание всех форм начинается с элемента form:
<form>
</form>
У элемента form существует два обязательных атрибута, необходимых для
функционирования формы:
• method - атрибут определяет способ, с помощью которого будет
осуществляться связь между формой и Web-сервером. Атрибут может принимать
значения get и post;
• action - значением атрибута action является корректный адрес скрипта,
обрабатывающего данные, введенные на форме, как показано в примере 5.1.
Пример 5.1. Добавление атрибутов method и action,
а также соответствующих значений в элемент form
<form method="get" action="http://www.myserver.com/cgi-bin/
mailscript">
</form>
Квантовый скачок
Необходимо проконсультироваться с вашим Интернет-провайдером, чтобы
определить предпочтительный метод передачи данных формы в скрипты,
предоставляемые для обработки данных. Более того, многие Интернет-
провайдеры предлагают несколько скриптов для обработки данных формы,
однако не все скрипты будут соответствовать вашим требованиям.
Если необходимо создать простую форму для связи, трудностей не возникнет.
Однако, если это скрипт, реализующий, например, функциональность
корзины Интернет-магазина, потребуется дополнительное программирование и
настройка. Важно понимать, что не все поставщики услуг позволяют улучшать
скрипты, поэтому придется подготовиться заранее, чтобы получить
требуемый сервис.
Если загрузить приведенную разметку в браузер, ничего не произойдет. Формы
основаны на понятии элементов управления. Элементы управления - это
стандартные поля и кнопки, отображаемые в результате разметки HTML-формы.

Урок 5. Создание форм
87
Добавление поля ввода
Поля ввода предназначены для выполнения ряда задач, включая ввод имени,
адреса и так далее. Для создания поля ввода используется элемент input с атрибутом
type, значение которого устанавливается в text, как показано в примере 5.2.
Пример 5.2. Добавление полей ввода
<form method="get" action="http://www.myserver.com/cgi-bin/
mailscript">
Имя: <input type="text" /><br />
Фамилия:<input type="text" /><br />
Телефон:<input type="text" />
</form>
Как показано на рисунке 5.1, использование элемента input с атрибутом type
для ввода текста создает знакомый вид формы.
Имя:
Фамилия:
Телефон:
Рис. 5.1. Поля ввода формы с текстом
Конечно, эта форма неаккуратная и непривлекательная. Мы это исправим с
помощью языка CSS далее в этой книге, однако до того момента необходимо
обсудить несколько технических вопросов. Самый важный из них - как отличить
одно поле от другого. Элемент input создает поле ввода, но нам хотелось бы
идентифицировать каждое поле формы, а также модифицировать поля формы
относительно их внешнего вида и поведения. Для идентификации полей ввода
используется комбинация атрибутов name и id и ассоциированных значений. Это
гарантирует, что форма будет являться обратно совместимой и позволит
идентифицировать конкретные области ввода для применения стилей, скриптов и
улучшения доступности. В примере 53 показано, как это работает для
предыдущего примера.
Пример 5.3. Идентификация поля ввода при помощи атрибутов name и id
<form method="get" action="http://www.myserver.com/cgi-bin/
mailscript">
Имя: <input type="text" name="firstname" id="firstname" /><br />
Фамилия:<input type="text" name="lastname" id="lastname" /><br />
Телефон:<input type="text" name="phone" id="phone" />
</form>

88
Языки HTML и CSS
Следующий шаг заключается в установке размера поля ввода. Используя
атрибут size, можно указать ширину каждого поля. Можно также указать
максимальное число вводимых символов при помощи атрибута maxlength, как
показано в примере 5.4.
Пример 5.4. Модификация поля ввода атрибутами size и maxlength
<form method="get" action="http://www.myserver.com/cgi-bin/
mailscript">
Имя: <input type="text" name="firstname" id="firstname"
size="30" maxlength="40" /><br />
Фамилия:<input type="text" name="lastname" id="lastname"
size="25" maxlength="40" /><br />
Телефон:<input type="text" name="phone" id="phone" size="15"
maxlength="0" />
</form>
Если значение атрибута maxlength равняется 0, число вводимых символов не
ограничено; если указано конкретное целое число, количество вводимых
символов будет ограничено данным значением. На рисунке 5.2 показаны поля
ввода с измененными размерами, которые шире, чем поля ввода на рисунке 5.1.
Имя:! 1
Фамилия
Телефон:
|
Рис. 5.2. Изменение размеров полей ввода
и ограничение длины вводимых символов
Другим полем, функционирующим подобно полю ввода, является поле
password. Оно работает абсолютно так же во всех аспектах, за исключением
того, что введенные символы отображаются в поле с использованием звездочек,
как показано на рисунке 5.3.
Пароль:<input type="password" name="password" id="password"
size="15" />
Пароль: '"
Рис. 5.3. Поле eeodapassword отображает
введенные символы в виде звездочек

Урок 5. Создание форм
89
Добавление флажков и переключателей
Флажки являются прекрасным способом получения информации от посетителя
сайта, позволяя делать выбор из предопределенного набора вариантов.
Преимущество флажков заключается в том, что посетители могут выбирать больше
одного варианта, и их лучше всего использовать, когда существует возможность
выбора нескольких ответов. Для создания флажков используется элемент input
с атрибутом type, значение которого устанавливается в checkbox, как показано
в примере 5.5.
Пример 5.5. Добавление флажков на форму
<р>Пожалуйста, выберите Ваш
<input type="checkbox" name=
/>
<input type="checkbox" name=
<input type="checkbox" name=
игрькЬг />
<input type="checkbox" name=
<input type="checkbox" name=
/>Кинофильмы<Ьг />
<input type="checkbox" name=
лодным пивом<Ьг />
<input type="checkbox" name=
собаками<Ьг />
<input type="checkbox" name=
музыки<Ьг />
<input type="checkbox" name=
друзьями и отдых с ними
любимый вид отдыха:</р>
"reading" id="reading" />Чтение<Ьг
"sports" id="sports" />Спорт<Ьг />
"games id="games" /^Компьютерные
"tv" id="tv" />Телевидение<Ьг />
"movies" id="movies"
"beer" id="beer" />Наслаждение xo-
"dogs" id="dogs" />Игры с
"music" id="music" />Прослушивание
"friends" id="friends" />Встречи с
После этого пользователи могут выбирать подходящие варианты, как показано
на рисунке 5.4.
Пожалуйста, выберите Ваш любимый вид отдыха:
Е Чтение
□ Спорт
□ Компьютерные игры
□ Телевидение
□ Кинофильмы
ЕНаслаждение холодным пивом
□ Игры с собаками
□Прослушивание музыки
□Встречи с друзьями и отдых с ними
Рис. 5.4. Пользователи могут выбирать несколько вариантов из списка флажков

90
Языки HTML и CSS
Обратите внимание, что значения атрибутов name и id логически соответствуют
ассоциированному варианту, и каждый вариант также содержит атрибут value.
Это необходимо для функционирования флажков.
Переключатели похожи на флажки с точки зрения возможностей,
предоставляемых ими для выбора вариантов из предопределенного набора. Однако в случае с
переключателями, посетитель может выбрать только один вариант, а не один или
более. Это достигается указанием одного и того же значения для атрибута name
(в данном случае, gender) и использованием атрибута value для
идентификации вариантов, как показано в примере 5.6. В переключателях необходимо
использовать атрибут value, иначе возможность уникального выбора варианта не
будет функционировать.
Пример 5.6. Добавление переключателей на форму
<form method="get" action="http://www.myserver.com/cgi-bin/
mailscript">
<п2>Пол:</п2>
<input type="radio" value="female" name="gender" id="female"
/>Женский<Ъг />
<input type="radio" value="male" name="gender" id="male"
/>Мужской<Ьг />
<input type="radio" value="undisclosed" name="gender"
id="Неуказанный" />Предпочли скрыть
</form>
На рисунке 5.5 показан ряд переключателей, определенных в примере 5.6.
Пол:
О Женский
О Мужской
©Предпочли
скрыть
Рис. 5.5. Выбор варианта с помощью переключателей
Флажки и переключатели можно использовать в любой комбинации,
соответствующей назначению формы. Важно помнить, что флажки можно использовать
для выбора нескольких вариантов, а переключатели ограничены выбором только
одного варианта.

Урок 5. Создание форм
91
Заранее выбранные элементы
В некоторых случаях, при использовании переключателей или флажков
желательно заранее выбрать определенные элементы. Если форма в основном
предназначена, например, для спортсменок, можно отобразить флажки или
переключатели с заранее выбранными вариантами, используя атрибут checked, как
показано в примере 5.7. Заранее выбранный элемент будет отмечен «галочкой»
или точкой.
I
Пример 5.7. Добавление переключателей на форму
<form method="get" action="http://www.myserver.com/cgi-bin/
mailscript">
<р>Пожалуйста, выберите Ваш любимый вид отдыха:</р>
<input type="checkbox" name="reading" id="reading" />Чтение<Ьг
/>
<input type="checkbox" name="sports" id="sports"
checked="checked" />Спорт<Ьг />
<input type="checkbox" name="games id="games" />Компьютерные
игрькЬг />
<р>Пожалуйста, укажите Ваш пол:</р>
<input type="radio" value="female" name="gender" id="female"
checked="checked" />Женский<Ьг />
<input type="radio" value="male" name="gender" id="male"
/>Мужской<Ьг />
<input type="radio" value="undisclosed" name="gender"
id="Неуказанный" />Предпочитаю не указывать
</form>
На рисунке 5.6 показаны заранее выбранные варианты.
Пожалуйста, выберите Баш любимый вид отдыха:
□ Чтение
0 Спорт
□ Компьютерные игры
Пожалуйста, укажите Баш пол:
® Женский
О Мужской
О Предпочитаю не указывать
Рис. 5.6. Заранее выбранные флажки и переключатель

92
Языки HTML и CSS
Использование меню формы
Существует два типа меню: открывающееся меню и список. Оба меню
чрезвычайно полезны и могут быть видоизменены различными способами для решения
многих задач.
Одним из наиболее популярных способов представления вариантов на формах
является всем известное открывающееся меню. Меню такого рода особенно
полезны, когда существует множество вариантов, и они обычно отображаются в
стандартных меню для штатов, стран, ценообразования и так далее.
Открывающиеся меню создаются комбинированием вариантов при помощи
элементов select и option, как показано в примере 5.8.
Пример 5.8. Открывающееся меню формы
<form method="get" action="http://www.myserver.com/cgi-bin/
mailscript">
<р>Штат (Соединенные штаты. Западный регион):</р>
<select>
<option value="Arizona">Аризона</option>
<option value="California">Kaлифopния</option>
<option value= "Colorado">KojiopaflO</option>
<option value="Nevada">Невада</option>
<option value="Texas">Texac</option>
<option value="Utah">Юта</option>
</select>
</form>
На рисунке 5.7 показано открывающееся меню.
В открывающееся меню можно добавлять другие возможности, включая
заранее выбранные варианты. Как и в случае с атрибутом checked для флажков,
предварительный выбор вариантов может способствовать удобному
использованию формы, предоставляя более индивидуальный подход. Чтобы заранее
выбрать определенный вариант в меню формы, используется атрибут
selected:
<option value="Nevada" selected="selected">HeBafla</option>
В данном случае, вариант Nevada будет выбран по умолчанию в открывающемся
меню формы, как показано на рисунке 5.8.

урок 5. Создание форм
93
W Глава 5 Mozilla
0е Edit View fio Bookmarks Tools Window H.elp
Штат (Соединенные штаты. Западный регион)
1*Р.И.3.9.Й°_ Jv
'Аризона
| Калифорния
|Невада ^
Техас
Юта
Ш \£- Done
1
ЕЕ®
]H&-afl°!
Рис. 5.7. Выбор варианта из открывающегося меню формы
Рис. 5.8. Использование атрибута select
для определения элемента по умолчанию в открывающемся списке
Можно также создавать список. Список формируется таким же образом, как и
открывающееся меню, однако к открывающему тегу select добавляется атрибут
size с целочисленным значением, соответствующим количеству вариантов:
<select size="6">
Атрибут selected можно добавить к любому варианту, который должен быть
выбран по умолчанию. Дополнительная возможность списка - выбор нескольких
вариантов.
Для этого необходимо просто добавить атрибут multiple к открывающему тегу
select:
<select size="6" multiple="multiple">
Теперь меню превратилось в список, позволяя посетителю выбирать несколько
вариантов, как показано на рисунке 5.9.

94
Языки HTML и CSS
Калифорния '
Колорадо
Рис. 5.9. Список с несколькими выбранными вариантами
Использование текстовых областей
В некоторых случаях, предпочтительнее использовать область для обратной
связи или поле, являющееся более гибким, чем обычное поле ввода, которое
позволяет вводить всего лишь одну строку текста. В таких случаях текстовые области
являются отличным решением.
Текстовые области создаются с использованием элемента textarea и атрибутов
rows и cols, определяющих видимое поле. В отличие от таблиц, строки и
столбцы текстовой области определяют ее размеры. Строки определяют
количество строк текста, отображаемых в текстовой области, а столбцы определяют
ширину области, как показано в примере 5.9.
Пример 5.9. Создание текстовой области
<form method="get" action="http://www.myserver.com/cgi-bin/
mailscript">
<р>Пожалуйста, позвольте узнать, есть ли у Вас какие-либо
особенные пожелания:</р>
<textarea rows="10" cols="25">
</textarea>
</form>
Высота результирующей текстовой области будет составлять 10 строк, а
ширина - 25 символов, как показано на рисунке 5.10. Я вставила текст в эту область,
чтобы вы могли посмотреть, как выглядит текстовая область, когда посетитель
вводит в нее текст.
Можно также немного настроить текстовые области при помощи языка HTML.
Во-первых, можно добавить атрибут name, который будет предоставлять
информацию скрипту, отвечающему за отправку формы, и уточнять назначение
текстовой области.

урок 5. Создание форм
95
Eile Edit View So Bookmarks lools Bndow Help
Пожалуйста, позвольте узнать, есть лн у Вас какие-либо особенные
пожелания:
Да, пожалуйста, убедитесь в
том, что в комнате не
накурено. Также нам
хотелось бы, чтобы нас
поселили в наиболее тихой
части отеля.
Большое спасибо, Нолли.
3& \&' | Done | П'-Ф-й'
Рис. 5.10. Текстовые области позволяют посетителям
легко вводить дополнительные комментарии без ограничений,
присущих полям ввода, флажкам, переключателям или меню
Кроме того, можно добавить атрибут id, если хотите получить возможность
присоединения скриптов к текстовой области, как показано в примере 5.10.
Пример 5.10. Текстовая область с атрибутами name и id
<form method="get" action="http://www.myserver.com/cgi-bin/
mailscript">
<р>Пожалуйста, позвольте узнать, есть ли у вас какие-либо
особенные пожелания:</р>
<textarea rows="10" cols="25" name="requests" id="requestbox">
</textarea>
</form>
Кроме этого, в качестве небольшой дополнительной настройки текстовой
области можно ввести текст в ее разметку:
<textarea rows="10" cols="25" name="requests" id="requestbox">
Введите здесь свои комментарии.
</textarea>
Теперь в текстовой области посетители будут видеть введенный текст. Щелкнув
на текстовой области, они смогут удалить текущий текст и ввести собственный,
как показано на рисунке 5.11.

96
Языки HTML и CSS
Глава 5 - Mozilla
Eile Edit View £o Bookmarks loo's Window (Help
BEi
Пожалуйста, позвольте узнать, есть лн у вас какие-либо особенные
пожелания
Введите здесь свои
комментарии.
Х& Done
С
Рис. 5.11. Текстовая область со вспомогательной
информацией для посетителей сайта
Кнопки Reset (Сбросить) и Submit (Отправить)
Элементы управления, выполняющие функции reset и submit, встроены
непосредственно в язык HTML, поэтому вам не придется выполнять огромную работу
по реализации данных функций. До определенной степени даже можно
настроить кнопки, не прибегая к помощи изображений или стиля.
При щелчке на кнопке reset (Сбросить) происходит очистка формы. Кнопка
submit (Отправить) отправляет данные формы на сервер для последующей
обработки, используя значения атрибутов method и action элемента form.
В примере 5.11 показано, как добавлять на форму кнопки reset (Сбросить) и
submit (Отправить).
Пример 5.11. Создание кнопок reset (Сбросить) и submit (Отправить)
<form method="get" action="http://www.myserver.com/cgi-bin/
mailscript">
<input type="reset" value="reset" />
<input type="submit" value="submit" />
</form>
На рисунке 5.12 показано, как значение атрибута value отображается на кнопках.

I reset I [ submit |
Рис. 5.12. Кнопки reset (Сбросить)
и submit (Отправить) создаются автоматически
Поскольку значения, отображаемые на кнопках формы, можно модифицировать,
можно немного настроить внешний вид кнопок, чтобы их названия говорили
сами за себя, как показано на рисунке 5.13.
[ Сбросить ] | Отправить |
Рис. 5.13. Настройка кнопок reset (Сбросить) и submit (Отправить)
Использование графической кнопки Submit (Отправить)
Если вы хотите, чтобы внешний вид кнопки сочетался с визуальным дизайном
страницы, можно создать изображение и использовать его для процесса
отправки данных. Небольшая проблема заключается в том, что этот метод нельзя
применить для кнопки reset (Сбросить), поскольку для ее функционирования
придется использовать язык JavaScript. Но в языке HTML уже заложена возможность
использования нестандартной кнопки для отправки данных формы.
В примере 5.12 была создана графическая кнопка submit (Отправить) для формы
и вставлена на форму при помощи элемента input с дополнительными
атрибутами для изображения.
Пример 5.12. Использование графической кнопки submit (Отправить)
<form method="get" action="http://www.myserver.com/cgi-bin/
mailscript">
<input type="image" src="submit-button.gif" width="75"
height="25" а]^="Отправить!" value="submit" />
</form>
Обратите внимание, что значением атрибута type является image. Также для
кнопки указывается путь к изображению, ее ширина и высота (атрибуты width и
height), значение (атрибут value) и альтернативный текст. Помните, что это -
изображение, поэтому для него необходимо указать альтернативный текст.
На рисунке 5.14 показана стилизованная графическая кнопка, на которую
наведен указатель мыши. Обратите внимание, что указатель мыши принимает вид
Руки, как это происходит с любой другой ссылкой, и отображается
альтернативный текст.

98
Языки HTML и CSS
^*3
Рис. 5.14. Реализация графической кнопки submit (Отправить)
Квантовый скачок
В большинстве современных дизайнов Web-страниц изображения
используются для кнопок submit (Отправить) в связке с языком CSS. Как вы уже
заметили, хотя элементы управления форм, описанные ранее в этой главе,
являются эффективными и простыми с точки зрения реализации, их вид
оставляет желать лучшего. Мы исправим эту ситуацию, как только займемся
применением стилей к элементам формы далее в этой книге.
Обеспечение доступности форм
с использованием элемента label
Из-за своей чрезвычайно интерактивной природы, от форм требуется немного
больше доступности, чем от других HTML-элементов. По большей части это
происходит потому, что все элементы, рассмотренные в этой главе,
взаимодействуют с элементами управления формы, которые являются компонентами,
встроенными в браузеры и вызываемыми соответствующим кодом на языке HTML.
Человек с нормальным зрением не испытывает никаких трудностей при работе с
формами. Но для тех, кто вынужден читать форму, а не смотреть на нее, контекст
может быть быстро утерян.
Элемент label позволяет присоединять информацию к конкретному элементу
управления. Этот элемент и его атрибут for позволяют описывать используемый
элемент управления формы более подробно, как показано в примере 5.13.
Пример 5.13. Добавление контекста при помощи элемента label
<form method="get" action="http://www.myserver.com/cgi-bin/
mailscript">
<label for="firstname">MMH:</labelxinput type="text"
name="firstname" id="firstname" /><br />
<label for="reading"><input type="checkbox" name="reading"
id="reading" />Чтение<Ьг />
<label for="requaestbox">Kaкие-либо особенные пожелания?</1аЬе1>
<br> <textarea name="comments" id="requestsbox" cols="25" rows="5">
</form>

. Создание
Как уже упоминалось ранее, использование атрибута id для элемента input
является важной составляющей обеспечения доступности, и теперь понятно почему.
Обратите внимание, что элемент label всегда располагается перед
описываемым элементом управления. В каждом случае, когда описывается
элемент управления формы, значение атрибута for должно точно соот-
ьр ветствовать значению атрибута id описываемого элемента управления.
Ж< Это позволит читателям жрана предоставлять более подробную инфор-
W мацию об элементе управления.
Другим важным моментом является то, что использование меток бля
кнопок submit (Отправить) и reset (Сбросить) не обязательно. Все
благодаря тому, что читатели экрана считывают текст, отображаемый на
кнопках, автоматически предоставляя необходимый контекст.
Группирование полей формы
Другим способом улучшения доступности формы является группирование ее
информации. В главе 4 «Создание таблиц» демонстрировалось несколько
способов группирования элементов таблицы для обеспечения лучшего
понимания. В данном случае применяются те же понятия, хотя используются другие
элементы.
В случае с формами, области формы можно разбить на определенные наборы
полей при помощи элемента f ieldset. Если форма состоит из трех
контекстуальных частей, например контактной информации, увлечений, а также
кнопок Reset (Сбросить) или Submit (Отправить), в каждой части можно
создавать поля. После этого можно использовать элемент legend для добавления
заглавия к каждой части, предоставляя дополнительный контекст, как
показано в примере 5.14.
Пример 5.14. Разделение формы на логические поля
с использованием элемента f ieldset
<form method="get" action="http://www.myserver.com/cgi-bin/
mailscript">
<fieldset>
<legend>KoHTaKTHaH MH<|>opMauHH</legend>
Имя: <input type="text" name="firstname" id="firstname"
size="31" maxlength="40" /xbr />
Фамилия: <input type="text" name="lastname" id="lastname"
size="25" maxlength="40" /xbr />
Телефон: <input type="text" name="phone" id="phone" size="15"
maxlength="0" /xbr />
</fieldset>
<fieldset>

100
Языки HTML и CSS
<1едепЗ>Любимая деятельность^/legend>
<input type="checkbox" name="reading" id="reading" />Чтение<Ьг />
<input type="checkbox" name="sports" id="sports"
checked="checked" />Спорт<Ьг />
<input type="checkbox" name="games id="games" ^Компьютерные
игры<Ьг />
</fieldset>
<fieldset>
<legend>Oткaжитecь или согласитесь с вашими oTBeTaMH</legend>
<input type="reset" value="сбросить" />
<input type="submit" value="отправить" />
</fieldset>
</form>
Если загрузить приведенный пример в браузере, вы увидите, что каждый элемент
f ieldset окружен линией, а текст элемента legend отображается в верхней
части этой линии.
Несложно заметить, что подобное группирование элементов управления
внутри формы может быть полезно для логического размещения элементов
и представления содержимого, что крайне существенно для иеобучаемых
и слепых людей.
При помощи элементов f ieldset и legend можно оказать гораздо большую
помощь людям, которые иначе не смогли бы ясно представить форму, как
показано на рисунке 5.15.
—Ко нтактн аяинформация
Имя: j
Фамилия: \ !
Телефон: [
— Любимая деятельность
□ Чтение
0 Спорт
□ Компьютерные игры
—Откажитесь или согласитесь с вашими ответами
| сбросить ] | отправить ]
Рис. 5.15. Использование элементов £ieldset
и 1 egend для группирования и идентификации полей формы

Урок 5. Создание форм
Квантовый скачок
Помните, что стандартное представление языка HTML в браузере таким и
является - стандартным. Можно изменить любое стандартное представление
языка HTML, воспользовавшись языком CSS. Таким образом, в предыдущем
примере к элементам f ieldset можно было применить стили, чтобы
получить различные цвета, использовать различные стили границ и увеличить
пространство между частями.
Применить стиль можно и к тексту элемента legend, чтобы его шрифт, цвет,
размер и все остальное соответствовали общему дизайну страницы. Однако,
для сохранения целостности элементов f ieldset и legend разумно не
отклоняться слишком далеко от стандартных настроек (например, совсем
удалить границы вокруг элемента fieldset), чтобы удостовериться, что
специальные возможности остаются доступными.
Группирование элементов меню
Еще один способ внесения ясности в формы заключается в группировании
элементов меню. Это можно сделать с помощью элемента optgroup. Вместе с
элементом optgroup используется атрибут label, как в открывающем теге
элемента, так и для всех отдельных элементов данной группы, как показано в
примере 5.15.
Пример 5.15. Использование элемента optgroup
для вариантов группы в меню формы
<select name="regions" size="14">
<optgroup label="Западный регион">
<option value="Arizona" label="Arizona">ApM30Ha</option>
<option value="California" label="California">Ka.ra^opHMH</op-tion>
<option value="Colorado" label = "Colorado">F^opaflo</option>
<option value="Nevada" label="Nevada">HeBafla</option>
<option value="Texas" label="Texas">Texac</option>
<option value="Utah" label="Utah">K)Ta</option>
</optgroup>
<optgroup label="Восточный регион">
<option value="Connecticut" label="Connecticut">KoHHeKTMKyT
</option>
<option value="Maine" label="Maine">M3ftH</option>
<option value="New_Hampshire" label=" New_Hampshire">Ныо-
Гемпшир </option>
<option value="New_Jersey" label="New_Jersey">Hbra-№epcM</op-tion>
<option value="New_York" label="New_York">Hbro-flopK</option>
<option value="Vermont" label="Vermont">BepMOHT</option>
</optgroup>
</select>

102
Языки HTML и CSS
На рисунке 5.16 показаны результаты.
Западный регион Л|
Аризона
Калифорния
Колорадо
Невада
Техас
Юта
Восточный регион |
Коннектикут
Мзйн
Нью-Гемпшир
Нью-Джерси ; ;J
Нью-Йорк
Вермонт v:=
Рис. 5.16. Группирование элементов меню форм
в логические разделы
Настройка и улучшение форм
В этой главе мы познакомились со всем, что необходимо знать для создания
эффективных, полезных и доступных форм. Повторюсь, что пока эти формы не
слишком привлекательны, однако мы принарядим их, когда начнем изучение
вопросов использования языка CSS.
Пока же хочется выполнить два важных шага. Первый шаг заключается в
построении готовой формы от начала до конца с использованием необходимого
количества полей ввода, текстовых областей, флажков, переключателей и
списков меню.
После этого, конечно, возникает вопрос, как эта форма будет обрабатываться.
Обработка форм может быть как простой, так и достаточно сложной, в
зависимости от поставленной задачи. Обработка форм может выполняться на
различных типах серверов, поэтому технологии будут отличаться - будут отличаться и
возможности (и насколько сильно их можно использовать) технологий по
обработке форм. К счастью, существует множество бесплатных ресурсов,
помогающих понять и реализовать формы более эффективно.
Квантовый скачок
Чтобы подробнее узнать о различных аспектах процесса обработки форм,
обратитесь к документу «Web Authoring FAQ» компании Web Design Group по
адресу: http://www.htmlhelp.com/faq/html/forms.html.
Список множества удаленных узлов, подходящих для ряда задач по обработке
форм, можно получить в разделе «The CGI Resource», который находится по
адресу: http://cgi.resourceindex.com/Remotely_Hosted/Form_Processing/.

Примеры скриптов, написанных на языке РНР и используемых для обработки
форм, можно найти по адресу: http://php.resourceindex.com/Complete_Scripts/
Form_Processing/.
Полезная статья по реализации обработки форм на платформе Microsoft .NET
находится по адресу: http7/www.ondotnet.com/pub/a/dotnet/2003/01/06/formsauthp1.html.
Теперь вы правильно сформированы...
Мне никогда не нравилось оставлять читателей без полной информации,
необходимой для использования всех возможностей форм. Однако сделать это
практически невозможно, поскольку формы можно использовать для эффективного
решения множества различных задач - и, как вы уже заметили, с помощью
широкого диапазона технологий.
На самом деле, в мире профессиональных Web-разработок, существуют целые
подразделения, в которых отдельные разработчики тратят большую часть своего
времени на разработку приложений и баз данных, необходимых для
функционирования страниц с формами и динамических Web-страниц. Результаты таких
сложных разработок можно увидеть на многих знакомых сайтах. Для всего, что
связано с электронной коммерцией, например сайт Amazon.com, требуется
сложная разработка для обеспечения правильной обработки заявок, информации о
кредитной карте и направлениях отправки.
Хорошим примером повсеместного использования форм являются порталы.
Компании Yahoo!, Excite и даже America online - все они широко используют формы
для управления членством, параметрами персонализации и так далее.
Еще одним отличным примером использования сложных форм и управления
данными является предоставление банком онлайновых услуг. Не знаю, как вы, но в
наши дни я без сомнения окажусь в затруднительном положении без доступа к
моим счетам из любой точки земного шара. Это действительно помогает слегка
ненормальным людям, например мне, оставаться на вершине практической
стороны жизни.
Никогда не пользовались онлайновыми банковскими услугами? Проверьте и
посмотрите, предоставляет ли ваш банк такие возможности. Мой банк,
Wells Fargo, обслуживающий западную часть Соединенных Штатов,
владеет отличным Web-сайтом по адресу http://wellsfargo.com/, и его
разработчики даже работают над его соответствием стандартам и
обеспечением доступности.
Итак, получили достаточно информации о формах? Отлично! Настало время
перейти к фреймам и узнать об их значимости в современном дизайне. Я также
укажу на их многие недостатки и расскажу, почему большинство людей совсем не
используют фреймы для дизайна сайтов.

УРОК 6.
Работа с фреймами
В наши дни, использование фреймов для создания страниц - это большая
редкость. Этому есть множество объяснений, включая следующие забавные факты:
• Фреймы модифицируют интерфейс браузера, что приводит к противоречию
при отображении результатов операционными системами и отдельными
браузерами.
• Для слепых пользователей и пользователей с нарушениями двигательной
функции фреймы тяжелы в использовании. Для программного обеспечения,
предназначенного для чтения экранов, возникают определенные трудности
при обработке измененного интерфейса. Пользователи с нарушениями
двигательной функции также испытывают трудности при перемещении между
фреймами.
• В старых браузерах было сложно создавать закладки на страницы,
использующие фреймы. В самых современных браузерах возможность создания
закладок была улучшена, однако пользователь вынужден знать, где найти эту
возможность в интерфейсе браузера.
• Для фреймов требуется больше серверных и клиентских ресурсов по двум
причинам: во-первых, одна страница дизайнов, в основе которых лежат
фреймы, состоит из нескольких документов, поэтому сервер вынужден
передавать все эти страницы всякий раз, когда отображается страница с
фреймами. Во-вторых, браузерам и операционной системе пользователя приходится
выполнять больше функций, чтобы управлять ими.
• Поскольку для каждой страницы с фреймами необходимо создавать несколько
документов, управление фреймами становится тяжелой, неприятной задачей
при попытке организовать, обновить или модифицировать сайт,
построенный на фреймах.
Итак, если фреймы являются совсем ненужной вещью, зачем же их изучать на
Земле? У меня есть два весьма специфических аргумента, которые вы должны
узнать:
1 Фреймы - это уникальная часть языка HTML. Я хочу, чтобы, увидев фреймы,
вы знали, что это такое, и чтобы они были частью вашего инструментария,
если когда-нибудь в них возникнет необходимость.
2 Подчас фреймы могут быть абсолютно правильным выбором для решения
определенной задачи. Скажем, необходимо разработать приложение, в котором
данные непосредственно загружаются в другое место текущего интерфейса.
Фреймы позволяют реализовать такой тип функциональности; если вам это
понадобится, вы будете знать, как это сделать.

Урок 6. Работа с фреймами
105
В заключение, хотя встроенные фреймы и отличаются от обычных фреймов, тем
не менее, они используются. В определенный момент времени вы, вероятно,
захотите воспользоваться их уникальными возможностями.
Сила тройки
Я часто вспоминаю способ построения страницы с фреймами, думая «тройками».
Чтобы создать одну страницу с фреймами, потребуется, как минимум, три
документа. Более того, при этом используется три уникальных элемента языка HTML,
которые больше нигде не используются.
Фреймы контролируются основным документом, называемым набором фреймов.
Документ с набором фреймов не отображается в браузере, однако с его помощью
происходит настройка всех элементов управления результирующей страницы.
Помимо документа с набором фреймов, необходимо, по крайней мере, два HTML-
документа с содержимым. Эти документы будут отображаться в областях
фреймов, созданных с использованием набора фреймов, как показано на рисунке 6.1.
Щ Fiame Example - Mozilla
А File £dil View Go Eookmarks Jools Window Help
Lsaaa
About the Compare
Company Clients
Contact Company
Welcome to The Company! We specialize in a
variety of high quality services Our clients
encompass just about everyone who is anyone
IB левом фрейме
отображается один
HTML-документ
Сам документ с набором
фреймов не отображается,
однако он определяет,
как должен выглядеть
интерфейс фреймов
Рис. 6.1. Пример страницы с фреймами
В правом фрейме
отображается один
HTML-документ
Конечно, с помощью набора фреймов можно создать любое количество
фреймов. Однако для каждого фрейма необходимо иметь соответствующую HTML-
страницу с содержимым.
Как видите, число документов, необходимых для сложного сайта, использующего
фреймы, может начать увеличиваться - что, как отмечалось ранее, повлечет за
собой потребность в дополнительных ресурсах сервера и операционной системы
пользователя, не говоря уже о дополнительных проблемах, связанных с
управлением документами.

106
Языки HTML и CSS
Создание набора фреймов
Для начала, хотелось бы сфокусироваться на изучении метода создания
документов с наборами фреймов. Эти документы явно отличаются от HTML-страниц,
которые уже были рассмотрены в этой книге. Для новичков, в документах с набором
фреймов используется другое объявление DOCTYPE, как показано в примере 6.1.
Это самая первая часть уникальной разметки страницы с фреймами.
Пример 6.1. Объявление DOCTYPE для набора фреймов в языке XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-frameset.dtd">
Теперь начинается самое интересное! Элементы head и body из обычной, уже
известной вам, HTML-структуры, добавляться не будут; вместо этого будут
добавлены элементы head и frameset.
Раздел head можно использовать точно так же, как и в любом другом документе -
для элементов title, script или style - однако элемент body будет
отсутствовать, поскольку его место во всех документах с фреймами занимает элемент
frameset. Элемент frameset (и его соответствующие атрибуты, с которыми мы
познакомимся далее) - это вторая часть уникальной разметки страницы с
фреймами, как показано в примере 6.2.
Пример 6.2. Структура документа с набором фреймов
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Frameset Document</title>
</head>
<frameset>
</frameset>
</html>
Третьим уникальным элементом является элемент frame, определяющий, какие
HTML-страницы будут размещаться в соответствующих фреймах на создаваемой
странице, как показано в примере 6.3. Число элементов frame зависит
непосредственно от числа фреймов на странице.
Пример 6.3. Набор фреймов с двумя минимально необходимыми элементами frame
<frameset>
<frame />
<frame />
</frameset>

Урок 6. Работа с фреймами
107
Добавление столбцов
Наборы фреймов поддерживают столбцы и строки. В этой части мы добавим
столбцы в набор фреймов. Начнем с создания страницы, состоящей из двух
фреймов, расположенных вертикально.
Атрибут cols элемента frameset может принимать значения трех типов:
• Числовое значение в пикселах, например, cols="200". В результате получим
столбец, шириной 200 пикселов.
• Значение, выраженное в процентах, например cols="75%". В результате
получим столбец, ширина которого будет составлять 75% от доступного
пространства окна браузера.
• Динамическое значение, представляемое звездочкой, например, cols="*".
Это означает, что ширина столбца будет изменяться автоматически, чтобы
заполнять все доступное пространство окна браузера.
В примере 6.4 показан документ с набором фреймов, используемый для создания
страницы, состоящей из двух столбцов, вид которой мы и хотим получить.
Обратите внимание, что также были добавлены элементы frame.
Для создания страницы с фреймами необходимо, чтобы каждый столбец (или
строка, с чем мы познакомимся в следующей части) был заполнен
соответствующей обычной HTML-страницей. В демонстрационных целях для этих примеров я
создала две очень простые страницы, доступные для вашего использования.
В эти страницы, конечно, следует добавить реальное содержимое.
Пример 6.4. Создание страницы с фреймами, состоящей из двух столбцов
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Frameset Document</title>
</head>
<frameset cols="200, *">
<frame src="lightgray.html" />
<frame src="darkgray.html" />
</frameset>
</html>

108
Языки HTML и CSS
В результате ширина левого светло-серого столбца всегда будет равна 200
пикселам, а ширина правого, темно-серого столбца будет изменяться динамически, как
показано на рисунке 6.2.
Frameset Document - Mozilla
ж File Edit View Go fiookmaiks look Window ЦФ
.BJj
Рис. 6.2. Ширина левого столбца будет постоянно равна 200 пикселам,
тогда как ширина правого столбца будет изменяться динамически
при изменении ширины окна браузера
Конечно, столбцов может быть много - любое количество, которое пожелаете.
В этом случае нужно просто добавить больше значений, разделенных запятой
(и больше элементов frame для соответствия). Более того, никто не запрещает
комбинировать значения столбцов. Рассмотрим пример 6.5, всего в котором
создаются четыре столбца, как показано на рисунке 6.3.
Пример 6.5. Страница с фреймами, состоящая из четырех столбцов
<frameset cols="25%, *, 100, 25%">
<frame src="lightgray.html" />
<frame src="darkgray.html" />
<frame src="lightgray.html" />
<frame src="darkgray.html" />
</frameset>
Frameset Document - Mozilla
File £dit View Go Bookmatks Jools Window .Help
иШ
Рис. 6.3. Страница с фреймами, состоящая из четырех столбцов;
левый и правый столбцы занимают по 25 % от пространства окна браузера,
ширина левого центрального столбца является динамической, а ширина правого
центрального столбца является фиксированной и составляет 100 пикселов

Урок 6. Работа с фреймами
109
Работа со строками
Используя атрибут rows, можно создавать строки точно таким же образом, как
создаются столбцы. В примере 6.6 определяется страница с фреймами,
состоящая из двух строк: верхняя строка занимает 25% доступного пространства окна
браузера, а высота нижней строки изменяется динамически в соответствии с
доступным пространством окна браузера.
Пример 6.6. Страница с фреймами, состоящая га двух строк
<frameset rows="25%,*">
<frame src="lightgray.html" />
<frame src="darkgray.html" />
</frameset>
На рисунке 6.4 показаны результирующие строки.
Рб Frameset Document - Mozilla
^ File Edit View Go Bookma.ks look
» '• - .t ,,*,,,, .*
i -_
1 -
•-: . -
Dont
Window
Help
.
. • Jr %,■%
•
■■£!£_'d
- ./.и
■ *':
=3£±& J
Рис. 6.4. Строки на странице с фреймами
Теперь вы понимаете, что порядок следования элементов frame на
странице должен соответствовать порядку описания столбцов и строк.
Фрейм, расположенный первым в стеке, сопоставляется с первой
составляющей значения атрибута col s или rows.
Как и в случае со столбцами, количество строк может быть любым и допускается
комбинирование типов значений.
О
Хотите немного позабавиться с фреймами? Созданная в 1996 году
(это говорит о том, как давно были распространены сайты, построенные
на фреймах, - а также о том, как давно почти полностью прекратилось
использование фреймов для наиболее профессиональных сайтов),
страница Crazy Netscape Navigator Frame Tricks Page представляет
собой прекрасное развлечение. Страница находится по адресу
http://www.geocities.com/Athens/3024/neatframes.httn.

110
Языки HTML и CSS
Комбинирование столбцов и строк
Более сложный подход к дизайну страниц с использованием фреймов
подразумевает комбинирование столбцов и строк для получения желаемого эффекта.
Это достигается при помощи вложенных элементов frameset, как показано в
примере 6.7.
Пример 6.7. Комбинирование столбцов и строк
<frameset rows="100,*">
<frame src="top.html" />
<frameset cols="200, *">
<frame src="nav.html" />
<frame src="main.html" />
</frameset>
</frameset>
В результате, над двумя столбцами будет располагаться строка, как показано на
рисунке 6.5.
Frameset: Howe and Colt - Mozil a
^ File £dtt ^iew £o £ookmaiks lools Window Help
l-aB^Bpi
Рис. 6.5. Комбинирование строк и столбцов
Теперь можете попробовать множество других комбинаций. Повторюсь, что мы
здесь использовали просто макеты страниц, однако понятно, что в верхней
строке этого дизайна можно разместить заголовок сайта, в левом столбце -
навигацию, а в правом - содержимое.

Урок 6. Работа с фреймами
111
Элементы управления границами,
изменением размеров и скроллингом
Управлять поведением страниц с фреймами можно при помощи ряда атрибутов.
К ним относятся атрибуты для управления границами, изменением размеров
фреймов и скроллингом внутри фреймов:
• Атрибуты marginheight и marginwidth позволяют указывать значение в
пикселах для управления высотой и шириной границ фрейма.
• Атрибут noresize фиксирует положение фрейма таким образом, что
пользователь не сможет передвинуть границы фрейма.
• Атрибут scrolling позволяет управлять отображением полос прокрутки
внутри фрейма. Это важно в том случае, когда размер фрейма зафиксирован,
а содержимое фрейма выходит за пределы его области. Для атрибута
scrolling существуют три допустимых значения: yes (полосы прокрутки
отображаются все время), по (полосы прокрутки не отображаются никогда)
и auto (полосы прокрутки отображаются только при необходимости).
В примере 6.8 демонстрируется документ с набором фреймов, в котором
применяются элементы управления границами, изменением размеров и скроллингом.
Пример 6.8. Управление границами, изменением размеров и прокруткой во фреймах
<frameset cols="200,*">
<frame src="menu.html" marginheight="5" marginwidth="5" nore-
size="noresize" scrolling="yes" />
<frame src="main.html" marginheight="9" marginwidth="9" nore-
size="noresize" scrolling="yes" />
</frameset>
На рисунке 6.6 показаны результаты.
Fiame With Numeious Controls - Microsoft Internet Explorer >r<i^pinI3l
| File Edit' View Favorites;* Tools Help <■- {j '^^Я
About the Company —
Company Clients —
J d
Welcome to The Company!
We specialize in a variety of
high quality services. Our clients
encompass iust about everyone Zj
£) III |@) My Computer ^
Рис. 6.6. Обратите внимание на отображаемые
полосы прокрутки в каждом фрейме

112
Языки HTML и CSS
Именование и указание целевых фреймов
Перед тем, как реализовать навигацию внутри фреймов, фреймам сначала
следует присвоить названия. Затем в ссылках нужно указать целевые фреймы,
используя атрибут target. Существует также и другой метод позиционирования,
который мы рассмотрим, известный, как волшебные целевые имена (magic target name).
Именное позиционирование осуществляется при помощи атрибута name и
значения, описывающего фрейм. Обычно это значение описывает функцию
фрейма. Следовательно, фрейм для навигации может быть назван именем nav, фрейм
с содержимым - content, и так далее.
В примере 6.9 представлен документ с набором фреймов, всем фреймам которого
присвоены корректные названия.
Пример 6.9. Именование фреймов
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Frames with Names</title>
</head>
<frameset cols="200, *">
<frame src="menu.html" marginheight="5" marginwidth="5"
size="noresize" scrolling="auto" name="menu" />
<frame src="main.html" marginheight="9" marginwidth="9"
size="noresize" scrolling="auto" name="content" />
</frameset>
</html>
Документ описывает страницу с фреймами, имеющую область меню и область
содержимого. Теперь, когда отдельным фреймам присвоены названия, можно
позиционировать любые ссылки, используя язык HTML для корректного
поведения ссылок.
Если вы хотите щелкнуть на ссылке во фрейме меню, чтобы соответствующая
связанная страница загрузилась во фрейм с именем content, используйте в
ссылке атрибут target, значение которого должно соответствовать названию
целевого фрейма, как показано в примере 6.10.
Пример 6.10. Указание целевых фреймов при помощи атрибутов target и name
<ul>
<li> <a href="about.html" target="content">About the Company
</ax/li>
nore-
nore-

Урок 6. Работа с фреймами
113
<li> <a href="clients.html" target="content">Company Clients
</a></li>
<li> <a href="contact.html" target="content">Contact Company
</a></li>
</ul>
Теперь каждый раз при щелчке на любой из ссылок - about.html, clients.html или
contact.html - соответствующие документы будут загружаться во фрейм с
именем content.
Волшебные целевые имена
Волшебные целевые имена - это четыре предопределенных имени языка HTML,
определяющие особое поведение браузера при активации ссылки:
• target="_blank" - целевое имя _blank приводит к открытию связанного
документа в совершенно новом окне браузера;
• target = "_self" - связанный документ будет загружен в том же окне, где
находится исходная ссылка;
• target="_parent" - загружает связанный документ в родительский набор
фреймов ссылки;
• target="_top" - этот атрибут используется для загрузки ссылки в полном
окне, перекрывая все существующие фреймы.
Если вы хотите избавиться от фреймов и чтобы в окне браузера отобразился
полный документ без фреймов, не используйте значение атрибута name в
качестве цели; вместо этого используйте волшебное целевое имя _top:
<lixa href="contact .html" target="_top">Contact
Company< / ax /1 i >
В результате страница contact.html полностью перекроет не только документ с
набором фреймов, но и все соответствующие фреймы, как показано на рисунке 6.7.
ж ftle £dit View £о Bookmarks look Window ИФ
Contact
This page will be set up with a contact form.
Рис. 6.7. При использовании волшебного целевого имени связывание
со страницей contact.html выполнено таким образом, что,
загружаемая в исходное окно страница, полностью перекрывает набор фреймов

114
Языки HTML и CSS
Не пытайтесь загрузить сайт другого человека во фреймы. Эта задача
считается сомнительной и, вероятно, незаконной. Также будьте
осторожны при выборе имен для объектов, избегайте чередований букв в
разных регистрах и никогда не используйте символы, например символ
подчеркивания, который уже зарезервирован для волшебного целевого имени.
Наконец, использование волшебного целевого имени _Ыапк приводит к
открытию нового браузера, что для многих людей кажется ненадежным.
Фреймы без границ
Если вы хотите, чтобы на сайте не отображались границы фреймов, от них
можно избавиться. Выполняя правила, создать фреймы, не имеющие границ,
не составит труда. В тег frame нужно просто добавить атрибут и значение
frameborder="0", как показано в примере 6.11.
Пример 6.11. Использование фреймов, не имеющих границ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Borderless Frames</title>
</head>
<frameset cols="200,*">
<frame frameborder="0" sre="menu.html" marginheight="5" margin-
width="5" noresize="noresize" scrolling="auto" />
<frame frameborder="0" src="main.html" marginheight="9" margin-
width="9" noresize="noresize" name="content" scrolling="auto" />
</frameset>
</html>
Внешний вид фреймов, не имеющих границ, можно увидеть на рисунке 6.8.
Bordeiless Fiames - Mozilla
File Edit View £o Bookmarks Tools Window Help
About the Company
Company Clients
Contact Company
Welcome to The
Company! We
specialize in a variety of
high quality services
Our clients encompass
just about everyone
who is anyone
-ЗЕНвГ1^
Рис. 6.8. Посмотрите-ка, а границ-то нет!

Урок 6. Работа с фреймами
115
Конечно, этот метод работает только в современных браузерах, поскольку
изначально у браузеров Netscape и Internet Explorer существовали собственные способы,
позволяющие избавляться от границ фреймов.
В браузерах Netscape до версии 6 избавиться от границ фреймов можно в
следующих случаях:
• атрибуту border присваивается числовое значение, в пикселах, равное О;
• атрибуту f ramespacing не присваивается значение.
Ранние версии браузера Internet Explorer позволяли избавиться от границ фреймов
в следующих случаях:
• атрибуту f rameborder присваивается числовое значение, в пикселах, равное О;
• атрибуту f ramespacing присваивается числовое значение ширины, в
пикселах, равное О.
В каждом браузере либо отличаются атрибуты, управляющие толщиной границы,
либо для управления промежутками используются различные значения. Все это
может сбить с толку, но если собрать перечисленные атрибуты вместе, можно
будет легко создавать фреймы, не имеющие границ, при этом оба браузера будут
без труда понимать такую разметку. Для применения данного подхода можно
использовать любой из двух вариантов синтаксиса:
<frameset frameborder="0" framespacing="0" border="0">
или
<frameset frameborder="no" framespacing="0" border="0">
В примере 6.12 показано, как может выглядеть приведенный ранее пример с
использованием неверного синтаксиса.
Пример 6.12. Поддержка фреймов, не имеющих границ, в старых браузерах
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Borderless Frames</title>
</head>
<frameset frameborder="0" framespacing="0" border="0"
cols="200,*">
<frame src="menu.html" marginheight="5" marginwidth="5" nore-
size="noresize" scrolling="auto" />
<frame src="main.html" marginheight="9" marginwidth="9" nore-
size="noresize" scrolling="auto" />
</frameset>
</html>

116 Языки HTML и CSS
Вообще-то я не рекомендую нарушать корректность документа, но в
данном случае необходимо взвесить все «за» и «против»: если фактически
необходима обратная совместимость с определенными аспектами языка
HTML, иногда приходится нарушать правила. К счастью, старые браузеры
становятся менее популярными, поэтому их поддержка нужна все меньше
и меньше.
Создание доступных фреймов
при помоши элемента noframes
Одним из наиважнейших вопросов при разработке дизайнов с использованием
фреймов, как упоминалось ранее, является гарантия того, что люди, не имеющие
возможности использовать фреймы, например слепые или с нарушениями
двигательной функции, могли получить доступ к важной информации Web-сайта.
Один из способов добиться доступности на сайте с фреймами - воспользоваться
элементом noframes. Этот элемент размещается внутри элемента frameset.
Важная информация может находиться под тем же адресом URL, что и страница
с набором фреймов, а полностью доступный сайт может быть сформирован из
тех же страниц, которые используются для сайта с фреймами, как показано в
примере 6.13 и на рисунке 6.9.
Пример 6.13. Создание доступных фреймов при помощи элемента noframes
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Frames with NOFRAMES Element</title>
</head>
<frameset cols="200, *">
<frame src="menu.html" marginheight="5" marginwidth="5" nore-
size="noresize" scrolling="auto" />
<frame src="main.html" name="right" marginheight="9" margin-
width="9" noresize="noresize" scrolling="auto" />
<noframes>
<body>
<p>Welcome, We're happy to provide this non-frames access to
our Web site. If you prefer to view our site using frames,
please upgrade your browser to a recent one that fully supports
frames. Otherwise, please visit out <a
href="index_noframes.html"> non-framed</a> version of this
site.</p>
</body>
</noframes>

Урок 6. Работа с фреймами
117
</frameset>
</html>
Готовы к отрицательным эмоциям?
Отлично!
На рисунке приведен результат отображения страницы в браузере Mosaic 1.0,
очень старом графическом браузере. В нем, конечно же, нет никакой поддержки
фреймов, однако простое использование элемента nof rames гарантирует, что я
могу получить информацию, равно как и слепые люди или люди с нарушениями
двигательной функции.
v, NCSA Mosaic foi MS Window:
File Edit Options Navigate Annotate
ШБ)РТ»11Ш]|»1а11ШШ1|1]
jlLzJ
Help
Welcome. We're happy to provide this'hon-fremes
access to our Web site. If you prefer to view our
site using frames, please upgrade your browser to
a recent one that fully supports frames.
Otherwise, please visit our non-framed version of
this site.
|NUMf
Рис. 6.9. Старые браузеры и программное обеспечение,
предназначенное для людей с ограниченными возможностями,
могут интерпретировать информацию, которая содержится
в элементе по frames, не имея встроенной поддержки фреймов
Поскольку в элементе noframes можно отформатировать весь документ,
страницу index.html можно использовать в качестве домашней страницы сайта.
На этой странице можно создать ссылки на внутренние страницы, которые
используются в дизайне с фреймами.
щ
Важно запомнить, что документы с набором фреймов не поддерживают
элемент body, правда, с одним исключением: если используется элемент
noframes, элемент body используется для создания информации раздела
body для версии страницы, не использующей фреймов. В остальных
случаях, никогда не используйте элемент body в наборе фреймов; вместо
этого используйте элемент frameset.
Удивительные встроенные фреймы
Впервые представленные в браузере Internet Explorer 3.0, встроенные или плавающие
фреймы (iframes) были официально приняты в языке HTML 4.O. Это хорошая
новость, поскольку при надлежащем применении они очень эффективны. Плохие
новости заключаются в том, что встроенные фреймы не поддерживаются

118 Языки HTML и CSS
браузером Netscape 4.61 и многими другими браузерами. В браузере Netscape
версии 6.0 и выше такая поддержка реализована.
Встроенные фреймы работают немного иначе, чем стандартные фреймы. Во-
первых, для фрейма не создается отдельный набор фреймов. Информация,
касающаяся встроенного фрейма, размещается непосредственно на любой
обычной странице.
Встроенные фреймы чрезвычайно удобны с точки зрения возможности
обновления определенных окон, размещенных в основном окне браузера. Они часто
используются для управления Web-рекламой, которая обычно поставляется с другого
сервера и регулярно обновляется. Это означает, что основная HTML-страница
никогда не изменяется - изменяется только страница на удаленном сервере.
Встроенные фреймы не ограничены отображением только HTML-страниц.
Из встроенного фрейма можно ссылаться на любой тип источника
информации, включая изображения и объекты мультимедиа.
Встроенные фреймы могут быть размещены в любом месте страницы. В
отличие от стандартных фреймов, для них не нужно создавать набор фреймов.
Аналогично стандартным фреймам, встроенным фреймам для функционирования
необходима дополнительная страница - в данном случае, text.html, - как
показано в примере 6.14.
Пример 6.14. Встроенные фреймы
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Inline Frames</title>
</head>
<body>
<iframe width="350 height="200 src="text.html" scrolling="auto"
frameborder="1">
</iframe>
</body>
</html
Браузер отобразит встроенный фрейм в соответствии с указанными значениями
атрибутов. В данном примере, ширина фрейма составляет 350 пикселов, высота -
200 пикселов, с автоматическим отображением полос прокрутки и толщиной
границы, равной 1, чтобы лучше представить результаты.

Урок 6. Работа с фреймами
119
Мне нравится сравнивать встроенные фреймы с изображениями или
объектами. Они все функционируют очень похожим образом: браузер
рисует область, а затем вставляет объект — в данном случае, другой
HTML-файл - в нарисованную область.
На рисунке 6.10 показаны результаты.
. Inline Frames - Mozilla
шш
^ File Edit View Gio Eookmarks Jools Window (Help
vulputate porta From euismod nulla non mauns
Integer et massa non nulla tnsbque porta. Nullarn
scelerisque Aliquarn dolor purus, imperdiet quis,
auctor et, nonummy eleifend, ante Suspendisse
lectus. Integer eu ligula. Etiarn ut wisi
Nullarn laoreet Pellentesque dm nulla, eleifend a,
consectetuer et, convallis vel, turpis Nulla facilisi
Suspendisse non mi Nam pharetra diam
Pellentesque at mauns Sed sit amet est vel nulla
j
Done
Рис. 6.10. Встроенный фрейм в браузере Mozilla
У фреймов существуют проблемы с обратной совместимостью. Все
современные браузеры реализуют поддержку фреймов, однако старые
браузеры могут не поддерживать их. Обычно в таких случаях, элемент
i frame полностью игнорируется. Для встроенных фреймов, однако, не
существует метода, подобного методу с использованием элемента
no frames. Таким образом, хотя зачастую использование встроенных
фреймов является удобным, их применение необходимо ограничить
случаями, когда не требуется поддержка старых Web-браузеров.
Вы познакомились с фреймами!
Даже если сайты с фреймами не популярны в наши дни, что можно сказать после
прочтения этой главы, их важно понимать, поскольку фреймы функционируют
совершенно по-другому, нежели обычные HTML-страницы.
Можно не выбирать фреймы для применения на сайте, но было бы неплохо
попрактиковаться в использовании и прочувствовать, как и где их можно применить.
Никогда не знаешь наперед - может однажды вам понадобится именно это решение.

120
Языки HTML и CSS
И, конечно же, встроенные фреймы применяются для множества различных
целей и широко используются в современном дизайне. Важно понимать разницу
между фреймами и встроенными фреймами и свободно владеть обоими подходами.
В заключение, язык CSS может использоваться не только для стилизации
информации, находящейся на сайтах с фреймами или во встроенных фреймах, но
также и для создания подобных эффектов. Подробнее об этом мы узнаем в
следующих главах.
К данному моменту времени мы узнали многое о разметке, и, говоря о языке
CSS, настало время перейти к его изучению и узнать, каким образом с помощью
языка CSS можно добавить привлекательные, полезные эффекты к
структурным элементам, с которыми мы работали на протяжении предыдущих глав.

УРОК 7.
Использование языка CSS
Таблицы каскадных стилей приобрели популярность в конце 1996 года. Не
смотря на относительно долгое существование этой технологии, ее практическое
применение для Web-дизайна ограничивалось управлением шрифтами и цветом,
по крайней мере, до недавнего времени. Данное ограничение возникло из-за
отсутствия совместимой поддержки таблиц стилей браузерами. Поскольку не все
браузеры одинаково обрабатывали инструкции языка CSS (если вообще
обрабатывали), дизайнеры не могли в полной мере воспользоваться реальными
преимуществами таблиц стилей. Вместо этого, ответственность за отображение
информации возлагалась на язык HTML.
Теперь, когда поддержка языка CSS реализована гораздо лучше, и, благодаря
этому, можно воспользоваться множеством ценных возможностей языка, Web-
дизайнеры переходят от использования языка HTML, как средства стилизации и
создания макетов страниц, к настоящему дизайну с применением языка CSS.
Почему это так важно? Причин тому - множество:
• Раздельное хранение представления и документа позволяет стилизовать этот
документ для различных устройств, включая, монитор принтер, проектор и
даже портативные устройства.
• Раздельное хранение представления и документа означает уменьшение
размера документа, что, в свою очередь, ускоряет загрузку и отображение
страницы, доставляя удовольствие посетителям.
• Язык CSS позволяет управлять как одним документом, так и миллионами
документов. Для внесения изменения потребуется модифицировать
необходимый стиль в одном CSS-файле, и это изменение автоматически отразится на
всех связанных документах. В языке HTML это сделать невозможно.
• CSS-документы кэшируются. Это означает, что они загружаются в память
браузера только один раз. При перемещении по сайту браузеру никогда не
приходится заново интерпретировать стили. В результате мы получаем более
плавные переходы от страницы к странице и более быструю загрузку страниц,
что всегда является конечной целью.
• Отделив представление от структуры и содержимого, легко добиться
доступности документа. Документы, в которых не используются сложные таблицы и
большое количество элементов языка HTML, отвечающих за представление, по
сути являются более доступными, чем те документы, у которых
перечисленные свойства присутствуют.
Очевидно, что язык CSS предоставляет множество возможностей. В этой главе
мы узнаем, как эффективно и гибко использовать язык CSS для дизайнов.

122
Языки HTML и CSS
Упрошенная теория языка CSS
Перед началом использования языка CSS необходимо узнать некоторые важные
моменты, касающиеся самого языка и его эффективного применения. Я
постараюсь сделать это быстро и безболезненно, поскольку знаю, что вам не терпится
испытать его в действии.
Правила языка CSS
Правила языка CSS состоят из селектора и, по крайней мере, одного объявления.
Селектор - это код элемента языка HTML, к которому будет применено правило
стиля. В этой книге мы сконцентрируемся на наиболее распространенных
селекторах, но, став более квалифицированным специалистом в области применения
языка CSS, вы сможете использовать более дюжины типов селекторов.
Объявление состоит, по крайней мере, из одного CSS-свойства и соответствующего
значения. При помощи CSS-свойств определяются стили:
hi {color: red;}
Селектор hi отвечает за заголовки hi языка HTML, а объявление состоит из
свойства color и значения red. Проще говоря, это правило изменяет цвет
текста элементов hi на красный цвет. Обратите внимание, что синтаксис правила
стиля отличается от синтаксиса языка HTML. Объявления заключаются в
фигурные скобки, за каждым названием свойства следует двоеточие, а после
каждого свойства со значением ставится точка с запятой. В правиле можно
использовать любое количество свойств.
Применение языка CSS
Существует шесть типов таблиц стилей:
• Стиль браузера - это стандартная таблица стилей, используемая браузером.
Если никакие правила стиля не объявлены, применяются эти стандартные стили.
• Стиль пользователя - пользователь может написать свою таблицу стилей и
переопределить любые стили, созданные вами, изменив настройки браузера.
Такой подход используется редко, но может оказаться полезным для людей с
ограниченными возможностями, например с плохим зрением. В данном
случае пользователь создаст стили с высококонтрастными шрифтами больших
размеров, которые переопределят ваши стили.
• Встроенный стиль - стиль, который определяется непосредственно в
элементе и применяется с использованием атрибута style. Такой подход полезен
для стилей, единовременно применяемых к одному элементу, однако он не
считается идеальным.
• Внедренный стиль - этот стиль управляет представлением одного документа и
размещается внутри элемента style HTML-документа.

урок 7. Использование языка CSS
123
• Связанный стиль - это таблица стилей, которая связана с HTML-документом
при помощи элемента link, размещенного в разделе документа head. Любой
документ, связанный с данным типом таблицы стилей, получает все стили,
определенные в ней, в чем и заключается преимущество управления языка CSS.
• Импортированный стиль - этот тип похож на связанные стили, однако
позволяет импортировать стили в связанную таблицу стилей или непосредственно
в документ. Он полезен для реализации обходных путей и для управления
множеством документов.
Мы познакомимся с примерами использования перечисленных таблиц стилей по
мере изучения материала главы.
Каскад
Люди часто интересуются, почему стили называются каскадными. Каскад - это
иерархия применения - красивое название для системы применения правил.
Если внимательно посмотреть на пять перечисленных типов таблиц стилей,
станут очевидными различные способы применения стиля к одному и тому же
документу.
Что же получится в результате, если у нас будет встроенный стиль, внедренная
таблица стилей и связанная таблица стилей? Каскад определяет способ
применения правил. В случае с типами таблиц стилей, пользовательский стиль
переопределяет все остальные стили; встроенный стиль превосходит внедренный,
связанный и импортированный стили; внедренный стиль имеет преимущественное
значение перед встроенным стилем; связанные и импортированные стили
рассматриваются, как равные по значимости, и применяются везде, где не были
применены другие типы таблиц стилей. Стиль браузера используется только в
том случае, когда для данного элемента не было предоставлено ни одного стиля.
Каскад также относится к порядку применения нескольких таблиц стилей. Если
существуют три связанные таблицы стилей, применена будет та из них, которая
интерпретируется браузером при наличии конфликтов между ними.
Наследование
Наследование означает, что стили наследуются от родительских элементов.
Рассмотрим следующий пример:
<body>
<hl>My header</hl>
<p>Subsequent Text</p>
</body>
Оба элемента hi и р считаются потомками элемента body. Стили, заданные для
элемента body, будут унаследованы потомками, если не будет применено другое
правило, переопределяющее унаследованный стиль. В языке CSS наследуются
почти все свойства, кроме свойств, относящихся к границам и к отступам.

124
Языки HTML и CSS
Специфичность
Наконец, если между таблицами стилей существуют конфликты, которые
невозможно решить при помощи каскада, у языка CSS есть алгоритм, разрешающий
такие конфликты. Алгоритм основан на специфичности правила. Алгоритм
немного сложный для обсуждения в этой книге, но о нем следует упомянуть.
Понятно, что две страницы текста не могут полностью раскрыть ни одну из этих
тем, поэтому, если вы хотите узнать больше, обязательно обратитесь к части
«Дополнительные источники».
Добавление встроенного стиля
Ладно, довольно теории - приступаем к работе! В этой части мы узнаем, как
применять встроенный стиль. Встроенные стили используются редко, поскольку они
задают стили только для одного конкретного элемента. Такой подход
препятствует использованию преимуществ управления языка CSS.
Более того, встроенный стиль можно сравнить с элементами языка HTML,
отвечающими за представление, поскольку стиль записывается непосредственно в
документе, а не отделяется от него, что лишает нас возможности использовать
важнейшие преимущества языка CSS. Я использую встроенные стили в основном
для ситуаций, когда необходимо быстро исправить проблему для одного
требуемого элемента, или в редких случаях, когда на всем сайте существует только этот
стиль для одного уникального элемента.
Рассмотрим следующий элемент:
<hl>welcome!</hl>
Если бы этот заголовок был частью готового HTML-документа и мы просмотрели
его в браузере, результаты были бы такими же, как на рисунке 7.1.
Welcome!
Рис. 7.1. Стандартный размер элемента hi,
определяемый стилем браузера
Допустим, что нам не нравится стандартный цвет и размер шрифта. Можно
добавить CSS-правила непосредственно к этому элементу, воспользовавшись
атрибутом style:
<hl style="color: gray; font-size: 24px;">Welcome!</hl>
Теперь у нас будет заголовок серого цвета с размером шрифта, равным 24
пикселам, как показано на рисунке 7.2.

Урок 7. Использование языка CSS
125
Welcome!
Рис. 7.2. Переопределение цвета и размера
с использованием встроенного стиля
Использование внедренного стиля
Внедренный стиль управляет только тем документом, в который он был
внедрен. Как и встроенные стили, этот подход не позволяет реализовать
возможность применения стилей сразу ко всему сайту. Однако существуют
ситуации, в которых удобно использовать именно внедренный стиль. Первая
ситуация, когда данный документ является единственным документом на сайте,
использующим специфические стили. Другая ситуация относится к процессу
разработки. Мне нравится использовать внедренный стиль при работе над
дизайном, поскольку в этом случае все находится в одном документе. Мне не
приходится переключаться между приложениями или окнами, чтобы
выполнить задачу. Так как правила стилей останутся прежними, я могу просто
вырезать готовые стили из внедренной таблицы и связать их с документом, с чем
мы сейчас и познакомимся.
Внедренный стиль добавляется в раздел документа head с использованием
элемента style и обязательного атрибута type, как показано в примере 7.1.
Пример 7.1. Фрагмент HTML-документа с описанием внедренного стиля
<head>
<title>Working with style</title>
<style type="text/css">
body {background-color: black; color:white;}
hi {font-size: 24px;}
p {font-size: 12px;}
</style>
</head>
<body>
<hl>Welcome!</hl>
<p>Paragraph one.</p>
<p>Paragraph two.</p>
</body>
На рисунке 7.3 показаны результаты.

126
Языки HTML и CSS
Welcome!
Paragraph one.
Paragraph t wo.
Рис. 7.3. Обратите внимание, что цвет элемента body
наследуется всеми его потомками
Создание связанной таблицы стилей
Чтобы воспользоваться преимуществами языка CSS, большую часть времени мы
будем использовать связанные таблицы стилей. Связанная таблица стилей - это
отдельный файл с расширением .CSS, в котором размещаются все CSS-правила
(но без тегов языка HTML). Любой HTML-файл, к которому нужно применить
стили, описанные в этой таблице, можно связать с ней, используя элемент link в
разделе документа head.
В примере 7.2 показана таблица стилей, готовая для связывания. Я указала ряд
правил стилей и сохранила файл под именем styles.ess в моей локальной папке.
Пример 7.2. Таблица стилей, готовая для связывания
body {
background-color: #999;
color: black;
}
hi {
P I
font-family: Verdana;
font-size: 24px,-
color: #ccc;
}
font-family: Georgia;
font-size: 12px;
color: white;
}
В примере 7.3 приведен готовый HTML-документ, связанный с необходимой
таблицей стилей, которая размещается в том же каталоге, что и документ.
Пример 7.3. HTML-страница для таблицы стилей
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtml-transitional.dtd">

урок 7. Использование языка CSS
127
^html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang=
"en">
^head>
^title>Working with style</title>
<link rel="stylesheet" type="text/css" href="styles.ess"
nvedia="all" />
^/head>
<:body>
^hl>Welcome!</hl>
<p>Paragraph one.</p>
<p>Paragraph two.</p>
<:/body>
</html>
Результаты приведены на рисунке 7.4.
Рис. 7.4. Результаты применения связанной таблицы стилей
Конечно, с данной таблицей стилей можно связать любое количество
документов, используя элемент link.
Для элемента link используется несколько атрибутов, перечисленных ниже:
• rel - атрибут связи, который описывает связь ссылки. В данном случае, связь
осуществляется с основной таблицей стилей, поэтому используется значение
stylesheet.
• type - как и для элемента style внедренного стиля, необходимо определить
тип языка и используемый формат - в данном случае, text/ess.
• href - знакомый атрибут ссылки. В данном случае, было указано только имя
файла, поскольку оба документа находятся в одном каталоге. Таблицы стилей
можно размещать в другом каталоге; просто проверяйте корректность
значения атрибута href. Можно также использовать абсолютное связывание для
непосредственной связи с таблицей стилей.

128
Языки HTML и CSS
• media - атрибут media позволяет определять различные стили для
различных устройств вывода. Если создать отдельную таблицу стилей для данного
документа, предназначенную для вывода информации на портативных
устройствах, в элементе link использовалась бы следующая информация:
media="handheld". Подобным образом, атрибут media= "print"
предполагает использование таблицы стилей только для печати. В данном случае,
атрибуту media присвоено значение screen. По умолчанию, значением
атрибута media является all, поэтому, если необходимо применить одни и те
же стили ко всем устройствам вывода, используйте это значение или просто
не указывайте атрибут media.
Как уже отмечалось, с документом можно связать любое количество таблиц стилей.
Импортирование таблиц стилей
Импортированные таблицы стилей очень похожи на связанные таблицы стилей,
так как для импортируемых стилей создается отдельный документ. После этого,
эти таблицы можно либо импортировать в основную таблицу стилей, либо
импортировать непосредственно в документ.
Непосредственное импортирование в документ
При импортировании в документ на самом деле используются два типа таблиц
стилей: отдельная импортируемая таблица стилей (я назвала файл именем
import.css) и встроенная таблица стилей в документе. Выполнить
импортирование при помощи элемента link невозможно; поэтому вместо элемента link
используется директива ©import языка CSS, как показано в примере 7.4.
Пример 7.4. Импортирование стиля из внедренной таблицы
<head>
<head>
<title>working with style</title>
<style type="text/css">
©import ur1(import.ess);
</style>
</head>
Таблица стилей import.css будет импортирована непосредственно в документ.
Представьте себе, что элемент style содержит все правила стилей из файла
import.css - это как раз то, что происходит. Поэтому теперь стиль фактически
внедрен в этот файл.
Этот способ можно использовать для любого количества документов, но
обычно этот метод используется в основном для обходных решений. Ряд браузеров,

Урок 7. Использование языка CSS
129
в частности, браузер Netscape версии 4, не поддерживают директиву ©import,
но при этом они поддерживают элемент link. Поскольку в браузере Netscape 4.x
реализована ограниченная поддержка языка CSS, применять стили необходимо
с особой осторожностью. Выделение стилей, не поддерживаемых браузером, в
связанные таблицы стилей, а поддерживаемых - в импортированные таблицы
стилей, позволит пользователям браузера Netscape увидеть некоторые стили, но
не все. Данный метод очень эффективен для обходного решения, когда
необходимо поддерживать браузеры Netscape версии 4.
Другое обходное решение с использованием директивы ©import заключается в
размещении всех стилей в импортированной таблице. Любой браузер, не
поддерживающий директиву ©import, просто не сможет прочитать стили, и браузер
отобразит документ без стилей.
Квантовый скачок: кратковременное отображение нестилизованного
содержимого (Flash of Unstyled Content - FUOC)
Если используется метод с директивой ©import, а раздел документа head не
содержит элементов link или script, браузер Internet Explorer будет часто
сначала отображать нестилизованное содержимое, а затем перерисовывать
страницу уже с применением стиля. Это раздражающая ошибка, но ее легко
избежать, добавив элементы link или script в раздел документа head.
Дополнительную информацию по проблеме FUOC можно получить по адресу
http://www.bluerobot.com/web/css/fouc.asp.
В большинстве случаев вы не будете использовать директиву ©import во
внедренной таблице, пока для этого не появится особая причина.
Импортирование стиля в связанную таблицу стилей
Другое применение директивы ©import и истинная причина, по которой эта
Директива существует, заключаются в возможности разбивать стили на модули и
в их последующем импортировании в основную таблицу стилей. Рассмотрим
пример на рисунке 7.5.
modi .ess
mod2.css
mod3.css
styles.css
—>-
—>-
->-
index.html
—>
Рис. 7.5. Импортирование стилей в основную таблицу
5-1356

130
Языки HTML и CSS
Представьте, что каждый модульный файл (modl.css, mod2.css и mod3.css)
содержит специфические стили для какой-либо возможности или функции сайта.
Например, могут существовать стили для управления рекламой, стили для таблиц
и стили для форм. Все эти стили можно оформить в виде отдельных модульных
файлов, а затем импортировать в файл styles.ess, который связан со страницей
index.html. Основная причина использования данного метода заключается в том,
что изменения в модули можно вносить независимо от других модулей, а также
можно легко избавляться от стилей, когда они больше не нужны. Этот метод
наиболее эффективен для очень больших сайтов с множеством стилей.
Квантовый скачок: обходные пути в языке CSS
Хотя язык CSS теперь используется повсеместно, иногда приходится
применять обходные пути для обеспечения кросс-браузерной совместимости. Для
обходных путей можно использовать описанный метод модулярного импорта.
В этом случае, как только обходной путь становится ненужным, можно просто
удалить импортируемый файл и соответствующую директиву ©import,
полностью избавившись от обходного пути и очистив таблицу стилей. Более
подробную информацию по обходным путям в языке CSS можно прочитать в
моей статье «Strategies for Long-Term CSS Hack Management» на сайте InformIT no
адресу http://www.informit.com/articles/article.asp?p=170511.
Комментирование и форматирование кода на языке CSS
Возможность добавлять комментарии в HTML-файлы для описания разделов,
сокрытия разметки и содержимого от браузера или добавления указаний для
коллег, работающих над документом, существует и в языке CSS. И точно так же, как
код на языке HTML можно записывать с отступами или применять другое
индивидуальное форматирование, это можно делать и в коде на языке CSS.
Комментирование кода на языке CSS
Комментарии языка CSS отличаются от комментариев языка HTML.
Комментарии языка CSS начинаются с прямого слэша и звездочки, а закрываются
звездочкой, за которой следует прямой слэш. Любое содержимое, расположенное в этой
области, не интерпретируется браузером, как показано в примере 7.5.
Пример 7.5. Комментирование кода на языке CSS _
/* global styles */
body {
background-color: orange;
font-family: Arial, Helvetica, sans-serif;
color: white;
}

Урок 7. Использование языка CSS
131
/* layout styles */
#nav {
position: absolute;
top: 0;
left: 0;
width: 150px;
}
/* hide this style and comment temporarily
.warning {
color: red;
}
John: please ungide the warning style when you're ready to
launch */
Все, что выделено наклонным шрифтом, браузером не интерпретируется, а
стили, находящиеся за пределами комментариев, интерпретируются.
Комментирование может помочь разбить таблицы стилей на логические группы, чтобы
ускорить поиск необходимых стилей. Кроме того, можно временно скрыть стили,
которые в данный момент не нужны, а также оставить пояснения для других
людей, работающих над текущей таблицей стилей.
Иногда, код языка CSS, используемый для определения внедренной таблицы,
заключается в комментарии языка HTML, как показано в примере 7.6.
Пример 7.6. Комментарии языка HTML для скрытия CSS-кода
<head>
<title>working with style</title>
<style type="text/ess">
<! —
Body {
background-color: #999;
color: black;
}
hi {
font-family: Verdana;
font-size: 24px;
color: #ccc;
}
P (
font-family: Georgia;
font-size: 12px;
color: white;
}

132
Языки HTML и CSS
— >
</style>
</head>
В данном случае комментарии языка HTML используются для сокрытия CSS-кода
от старых браузеров, не поддерживающих язык CSS. Многие из этих браузеров
попытаются отобразить CSS-правила в своем окне. Подобное использование
комментариев языка CSS широко распространено в наши дни, хотя для
современных браузеров этот метод является ненужным.
Форматирование кода на языке CSS
Возможно, вы обратили внимание, что в этой главе были использованы два
подхода по форматированию кода (с моей стороны это подло, не так ли?). В первом
подходе за селектором на одной строке размещается объявление:
body {background-color: #999; color: black;}
Во втором подходе правило разбивается на строки:
body {
background-color: #999;
color: black;
}
Оба подхода абсолютно корректны; выбор зависит от индивидуальных
предпочтений. Многие CSS-дизайнеры, считающие каждый бит и байт документа,
предпочитают первый подход. Другие приводят аргументы, что разбиение правил на
строки облегчает поиск необходимых стилей. В любом случае, поскольку
требуемый синтаксис не нарушен, используемый вид форматирования таблицы стилей
является персональным выбором.
Настало время использовать воображение!
Если после знакомства с материалом данной главы вы считаете, что работать с
разметкой и языком CSS скучно, ваше разочарование вполне обосновано.
Крайне необходимо уделять внимание сложным моментам, и я уверяю вас, что вы уже
прошли это, уловив смысл сложных понятий.
Но, несомненно, вы хотите применить приобретенные знания и получить
представление, как использовать язык CSS для улучшения внешнего вида объектов.
Как никак, это то, что я обещала, не так ли?
К счастью, следующая глава позволит немного позабавиться: вы будете
использовать свое воображение.
Мы будем использовать изображения и цвет, чтобы нарядить документы, а также
исследовать возможности языка CSS для работы с изображениями и цветом в
дизайнах.

УРОК 8.
Работа с цветом и изображениями
с использованием языка CSS
Управление цветом - это та область, в которой язык CSS долгое время остается
нашим хорошим другом. Поскольку цвет определяется комбинацией аппаратных
возможностей компьютера, операционной системы и браузера, мы смогли
воспользоваться языком CSS в самом начале жизни таблиц стилей. В этой главе мы
узнаем, как применять цвет к фону страниц и элементов и даже как оживлять
таблицы при помощи цвета.
Доступных вариантов цвета в языке CSS гораздо больше, чем в языке HTML.
В языке CSS определять цвет можно несколькими способами: шестнадцатерич-
ное значение, сокращенное шестнадцатеричное значение, значение RGB,
процентное значение, а также выбирать из 17 названий цветов, поддерживаемых
языком CSS 2.1.
Язык CSS также предоставляет необычайные возможности управления
изображениями. Фактически, возможность использовать изображения в качестве фона
любого элемента, позволяет современным Web-дизайнерам создавать красивые
дизайны без ограничений, накладываемых таблицами. В этой главе мы узнаем,
как применять изображения к фону и элементам, а также познакомимся с
методами использования изображений для ряда визуальных методик.
В языке CSS для изображений существует огромный выбор параметров. Можно
управлять способом заполнения изображением (или вообще не использовать
заполнение) определенной области, фиксировать положение изображения на
фоне элемента, прокручивать изображение или зафиксировать изображение,
чтобы текст прокручивался над ним, - множество вариантов. Мы попробуем все
эти методики в действии и получим реальное представление не только о том,
какие способы использования изображений в языке CSS недоступны в языке
HTML, но и какие существуют возможности по управлению, которые вы оцените
по достоинству.
Совсем недавно, мы уделяли внимание структурированию содержимого с
использованием языка HTML, добавлению изображения и мультимедиа и работе с
таблицами, фреймами и формами. Все, что мы делали до этого момента, формировало
холст. Теперь у нас появился шанс разбрызгать краски и вдохнуть жизнь в этот
холст, оживив внешне неприметные документы.
Цветные рисунки-примеры в этой книге преобразованы к полутоновым
цветам. Однако, старайтесь применять описанные правила к разным
диапазонам цветов, чтобы получить подходящие результаты.

134
Языки HTML и CSS
Цвет и язык CSS
Для корректного использования цвета в языке CSS следует знать о различных
способах определения цветов. Хотя цвета можно применять при помощи ряда
свойств, существуют специфические варианты значений, на которых хочется
остановиться поподробнее.
Шестнадцатеричное значение цвета
Шестнадцатеричная (hex) система счисления с основанием 16 широко
используется в компьютерной технике, поскольку 8 бит (1 байт памяти) могут
представлять отдельное число или букву. В этой системе счисления используются цифры
от 0 до 9 и буквы от а до f в любой комбинации, состоящей из шести разрядов
(и начинающейся с символа решетки), для представления смешения красного,
зеленого и синего цветов (#RRGGBB).
#FFFFFF = 255, 255, 255 = white
Любая шестнадцатеричная комбинация в языках HTML и CSS может представлять
цвет, как показано в примере 8.1.
Пример 8.1. Использование шестнадцатеричного значения цвета в стиле
body {color: #FFCC99; background-color: #808080;}
a {color: #66CC33;}
Если применить указанные стили к документу, цвет фона станет серым, цвет
текста - желто-оранжевым, а цвет ссылки - ярко-зеленым.
Сокращенное шестнадцатеричное значение цвета
Сокращенное шестнадцатеричное значение позволяет сократить любое
шестнадцатеричное значение цвета, имеющее парные составляющие. Это означает, что
цифры в каждой составляющей - RR, GG и ВВ - должны совпадать, например,
#00ССЗЗ или #888888. В сокращенном шестнадцатеричном значении мы из
каждой пары берем одну цифру и в результате получаем #0СЗ и #888. В случае со
значением #808080, цифры составляющих не являются парными, поэтому значение
нельзя записать сокращенно, как показано в примере 8.2.
Пример 8.2. Сокращенное шестнадцатеричное значение цвета
body {color: #FC9; background-color: #808080;}
a {color: #6C3;}
Сокращенные шестнадцатеричные значения можно использовать в любом
CSS-документе, но не в элементах языка HTML, отвечающих за
представление документа.

Урок 8. Работа с цветом и изображениями с использованием языка CSS 135
Значения RGB
Едце одним способом представления цвета в языке CSS является использование
фактических RGB-значений. Определить нужные значения можно в программе для
редактирования изображений, например Photoshop, как показано на рисунке 8.1.
Рис. 8.1. Поиск RGB-значений для серого цвета в программе Photoshop
В данном случае цвет будет представлен с использованием следующего
синтаксиса:
color: rgb(128, 128, 128);
Процентные значения RGB
Можно также использовать процентное соотношение красного, зеленого и
синего цветов. Значение 0% - это черный цвет, а 100% - это белый цвет. Поэтому,
если задать цвет следующим образом:
color: rgb(50%, 100%, 30%);
будет применен ярко-зеленый цвет.
Названия цветов
Для описания цвета можно использовать 17 названий цветов. Вот эти названия:
aqua (зеленовато-голубой), black (черный), fuchsia (розовый), gray (серый), green
(зеленый), lime (светло-зеленый), maroon (темно-красный), navy (темно-синий),
olive (оливковый), purple (фиолетовый), red (красный), silver (серебристый), teal
(бирюзовый), white (белый), yellow (желтый) и orange (оранжевый) (название
цвета orange появилось только в языке CSS 2.1):
color: orange;

136
Языки HTML и CSS
Возможно, вы спросите, какой тип значений цветов следует использовать.
Честно? Все! Вероятно, чаще всего вы будете использовать комбинации ключевых
слов, сокращенных шестнадцатеричных и просто шестнадцатеричных значений.
В новую версию языка CSS 3.0 было добавлено множество дополнительных
цветов, но на момент написания книги они были недоступны для широкого,
5, корректного использования.
Задание цвета фона
Задавать цвет фона чрезвычайно просто и весьма полезно. Цвет можно
использовать для фона страницы и фона любого элемента.
1Лвет и фон документа
Задание цвета фона документа осуществляется путем выбора элемента body и
использования свойства background-color и соответствующего значения цвета:
body {background-color: #999;}
Для всего раздела документа body мы выбрали темно-серый цвет фона. При
просмотре в браузере цвет фона будет полностью серым, как показано на рисунке 8.2.
Welcome!
Paragraph one, with a link
v
Paragraph twor-
Puc. 8.2. Применение цвета к фону документа
Необходимо всегда определять цвет фона, даже если вы планируете
использовать для дизайна изображения или другие фоны элементов. Дело в
том, что цвета интерпретируются браузерами очень быстро и
отображаются раньше всех изображений, тем самым создавая более изящное
визуальное впечатление для посетителей.
Цвет и фон элемента
При помощи языка CSS можно задавать цвет фона для отдельного элемента. Для
этого необходимо просто выбрать элемент и создать правило. Мы проделаем это
для элемента hi, что аналогично таблице стилей для простого документа:

Урок 8. Работа с цветом и изображениями с использованием языка CSS 137
body {background-color: #999;}
hi {background-color: #ccc;}
На рисунке 8.3 показан элемент hi с установленным цветом фона.
Welcome!
Paragraph one, withalmk. .■
Paragraph two.
Рис. 8.3. Установка цвета для фона элемента hi
Давайте продолжим и добавим также правила для цвета фона элемента абзаца и
якорного элемента, как показано в примере 8.3.
Пример 8.3. Установленные цвета фона документа и элементов
body (background-color: #999;)
hi (background-color: #ccc;)
p (background-color: #fff;
a (background-color: #ccc;)
На рисунке 8.4 показаны результаты применения цвета фона.
Welcome!
и ar .ra- h one, with a I'm!--.
aragraph two.
Рис. 8.4. Цвета фона применены к фонам документа
и элементов; обратите внимание, что цвета фона элементов
растягиваются на всю ширину элементов
Использование цвета фона для украшения таблиц
В этой части мы узнаем, как немного украсить таблицы при помощи цветов фона.
До сих пор мы использовали селекторы элементов, которые относятся
непосредственно к определенному элементу языка HTML, например, hi, p и а. В этой части
мы добавим так называемый селектор класса (class selector).

138
Языки HTML и CSS
Селекторы класса - это пользовательские селекторы, название для которых мы
выбираем сами; перед этим названием ставится точка, например .classname.
Классы применяются к элементу языка HTML с использованием атрибута class,
значение которого соответствует названию класса:
<tr class="classname"> ... </tr>
Обычно название класса описывает его назначение, а не представление.
Поэтому, если вы собираетесь применять цвет фона к каждой второй строке таблицы,
в качестве названия класса лучше выбрать .alternaterow, а не .gray. В этом
случае, если вы захотите изменить цвет, вам не придется изменять название
класса во всех документах, что оказалось бы препятствием для использования
преимуществ управления языка CSS.
В примере 8.4 демонстрируется модифицированная таблица, с которой мы
работали в главе 4 «Создание таблиц». Обратите внимание, что в разметку
таблицы было внесено единственное изменение: удалены все атрибуты элемента
table, кроме атрибута cellspacing. Этот атрибут пришлось оставить,
поскольку в языке CSS не существует эффективных способов управления
атрибутом cellspacing.
Также была добавлена внедренная таблица стилей, содержащая стили для
атрибутов width, border, padding элемента table, а также селекторы элементов и
селектор класса для стилизации таблицы при помощи цветов фона элементов.
Пример 8.4. Стилизация таблицы при помощи селекторов элементов
и селектора класса
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/ xhtml-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>working with style</title>
<style type="text/ess">
body {color:white;}
caption {background-color: #999; border: lpx solid black;}
table background-color: #ccc; border: lpx solid black; padding:
5px; width: 90%;}
th {background-color: #333; border:}
tr {background-color: #999;}
td {background-color: #ccc; border: lpx solid black}
.highlight {background-color: #fff; color: orange;}
</style>
<head>
<body>

Урок 8. Работа с цветом и изображениями с использованием языка CSS 139
<table cellspacing="5">
<caption>Comparing weather and time zone</caption>
<tr>
<th>Location</th>
<th>Tucson, Arizona</th>
<th>Las Vegas, Nevada</th>
</tr>
<tr>
<th>Weather</th>
<td>Warm to Hot</td>
<td>Warm to Hot</td>
</tr>
<tr>
<th>Time Zone</th>
<td>No Daylight Savings</td>
<td class="highlight">Mountain Standard Time</td>
</tr>
</table>
</body>
</html>
На рисунке 8.5 приведены результаты.
^^^^^^^н
нм^и
Location
Weather
^^HIIH ■■!■■
Time Zone
■■Й
^^^^^^^^^^^H
I^^H^H
Tucson, Arizona
■■■■■I
^^^^^^^ш
■■■■■
■^В^^^П
Las Vegas, Nevada Щ
■■■■■■■■
^^И^^И^^щ
■■■■
Рис. 8.5. Стилизация таблицы при помощи
селекторов элементов и селектора класса
Обратите внимание, что были добавлены границы, чтобы еще больше
улучшить внешний вид таблицы. Подробнее узнать о стилизации границ
можно в главе 11 «Поля, границы и отступы».
Узнав побольше, вы сможете делать множество вещей для улучшения документов
с помощью языка CSS. Только что мы превратили простую неприметную таблицу
в нечто более стилизованное.
Присоединение фонового изображения
К документу или любому элементу можно присоединить фоновое изображение
точно так же, как мы делали это с цветом фона. Впрочем, в языке CSS существует

140
Языки HTML и CSS
множество способов управления фоном, что позволяет использовать богатый
выбор вариантов при применении визуального дизайна к сайту. Можно создавать
слои изображений и многочисленные спецэффекты, комбинируя фон страницы
и фоны элементов.
Обычно, фоновые изображения - это либо маленькие элементы мозаики, при
повторении создающие узор обоев, либо горизонтальные или вертикальные
изображения с участками цветовых, образных и даже типографских
особенностей. В Интернете доступно большое количество уже разработанных фоновых
изображений, одно из которых показано на рисунке 8.6, или же создайте свое
собственное.
Рис. 8.6. Фоновая текстура, используемая
для создания эффекта обоев, которую я нашла
по адресу http://www.grsites.com/textures/
Сначала, давайте присоединим фоновое изображение к документу. Это
выполняется при помощи селектора body, для которого создается правило с
использованием свойства background-image. Значение этого свойства содержит путь и
имя файла изображения:
body {background-image: url(gray.jpg);}
На рисунке 8.7 показаны результаты заполнения страницы фоновым
изображением при просмотре в Web-браузере. Обратите внимание, что
изображение заполнило всю видимую область, тем самым создав захватывающий
внешний вид.
Заполнение фона изображением - это нормальное поведение браузера.
Язык HTML не позволяет управлять заполнением. Скоро вы увидите, что
язык CSS предоставляет гораздо больше возможностей по управлению
сроновыми изображениями.

Урок 8. Работа с цветом и изображениями с использованием языка CSS 141
Щ working with style - Mozilla
_L_L
.^ы
Done
НЩйч/
Рис. 8.7. Заполнение фона раздела документа body
Изображения также можно добавлять к элементам. Если вы хотите, чтобы
предыдущее изображение отображалось на фоне заголовков, можно создать
следующее правило:
hi, h2, h3, h4, h5, h6 {background-image: url(gray.jpg);}
В данном случае, в качестве фона для всех заголовков будет использоваться
элемент мозаики.
Квантовый скачок: группирование селекторов
Правило, которое я только что написала, перечислив все селекторы заголовков
через запятую, представляет собой способ группирования селекторов с одним и
тем же правилом. В этом случае, я могу сгруппировать любые селекторы с
одинаковыми правилами, перечислив названия селекторов через запятую:
hi, p, .footertext {color: teal;}
К содержимому элементов hi, p и классу f ootertext будет применен
бирюзовый цвет. Можно продолжить создание дополнительных правил для
несовпадающих стилей.
hi {font-size: 24px,-}
Если оба этих правила разместить в одной таблице стилей, будут применены
оба стиля. В результате, шрифт элемента hi станет бирюзового цвета с
размером, равным 24 пикселям.

142
Языки HTML и CSS
Управление заполнением фона
Язык CSS позволяет управлять способом заполнения фона. Это осуществляется
при помощи свойства background-repeat и подходящего значения.
Заполнение вдоль горизонтальной оси
Горизонтальная ось, или ось х, позволяет заполнить фон только по
горизонтальной оси элемента:
body {background-image: url(gray.jpg); background-repeat:
repeat-x;}
На рисунке 8.8 показаны результаты.
working with style - Mozilla
хИ
Done
Рис. 8.8. Управление горизонтальным заполнением
при помощи свойства background-repeat
Заполнение вдоль вертикальной оси
Подобным образом, можно выполнить заполнение только вдоль
вертикальной оси. Для этого используется свойство background-repeat со значением
repeat-y:
body {background-image: url(gray.jpg); background-repeat:
repeat-y;}
На рисунке 8.9 показано, что фон был заполнен только вдоль вертикальной оси.

Урок 8. Работа с цветом и изображениями с использованием языка CSS 143
Hoiking with style - Mozilla
■ю&;
Done
Рис. 8.9. Заполнение фона вдоль вертикальной оси
Можно отключить заполнение фона изображением, воспользовавшись
значением no-repeat:
body {background-image: url(gray.jpg); background-repeat:
no-repeat;}
В результате, в левом верхнем углу окна браузера будет отображен элемент
мозаики без заполнения фона.
Квантовый скачок: другие доступные свойства
У свойства background-repeat доступны еще два значения. Первое
значение - repeat. Использование этого значение приводит к заполнению фона,
как по горизонтали, так и по вертикали, что является стандартным
поведением для фона; возможно, вы не будете использовать это значение кроме
случаев, когда предыдущее правило специально переписывается. Многие свойства
языка CSS предоставляют значение по умолчанию, используемое именно для
этой цели.
Второе доступное значение - inherit. Это значение доступно почти для всех
свойств, и поскольку большая часть свойств наследуется, оно просто
усиливает тот факт, что свойство будет унаследовано его потомками. Скорее всего, вы
не будете слишком часто использовать значение inherit, а только в случаях,
когда необходимо специально отменить другое правило или когда значение
применяется к свойству, которое обычно не наследуется, но поддерживает это
значение, например background-position.

144
Языки HTML и CSS
Размещение фонового изображения
Помимо заполнения, фоновое изображение можно разместить в документе или
любом желаемом элементе. Чтобы разместить фоновое изображение, сначала
необходимо установить свойство background-repeat в значение no-repeat.
Затем, для размещения изображения можно использовать любое из значений,
представленных в таблице 8.1.
Табл. 8.1. Значения свойства background-position
Тип значения
Процент
Длина
Ключевые
слова
Пример
background-position: 0% 0%;
background-position: 100% 100%;
background-position: 14% 80%;
background-position: 20px 20px;
background-position: top left;
background-position: left top;
background-position: top center;
background-position: center top;
background-position: right top;
background-position: top right;
background-position: left;
background-position: left center;
background-position: center left;
background-position: center;
background-position: center center;
background-position: right;
Размещение
Левый верхний угол
Правый нижний угол
14% от края, 80% вниз
20 пикселов слева, 20 вниз
0% 0%
50% 0%
100% 0%
0% 50%
50% 50%

Урок 8. Работа с цветом и изображениями с использованием языка CSS 145
Тип значения
Пример
background-position: right center;
background-position: center right;
background-position: bottom left;
background-position: left bottom;
background-position: bottom;
background-position: bottom center;
background-position: center bottom;
background-position: right bottom;
background-position: bottom right;
Размещение
100% 50%
0% 100%
50% 100%
100% 100%
Следует запомнить, что для значений, выраженных в процентах и длине, первое
значение - это значение по горизонтали, а второе - значение по вертикали.
В случае с ключевыми словами, поведение объекта описывается в таблице.
Атрибут background-position позволяет комбинировать значения,
выраженные в процентах и длине, но не ключевые слова. Таким образом,
можно использовать значение 100% 20рх, но не 100% left.
Если указано только одно значение, выраженное в процентах или длине, то
оно применяется к положению по горизонтали, а положение по вертикали
по умолчанию устанавливается в 50%.
В примере 8.5 показана таблица стилей с примерами для каждого типа значения.
Пример 8.5. Размещение фонового изображения
с использованием процентов, длины и ключевых слов
hi {background-image: url(tile.gif); background- repeat:
no-repeat; background-position: 0% 0%;}
h2 {background-image: url(tile.gif); background- repeat:
no-repeat; background-position: lOOpx 4px;}
h3 {background-image: url(tile.gif); background- repeat:
no-repeat; background-position: bottom right;}

146
Языки HTML и CSS
Чтобы обеспечить корректное функционирование значений атрибута
background-position, я определила не только изображение, но и установила
значение атрибута background-repeat в no-repeat. На рисунке 8.10 показано
окончательное размещение фоновых изображений.
woiking with style - Mozilla '
...»1
l sing percentages
Using a pisll value.
Using Keywords
Dene '
1--jM*I
=3BHsf|^
Рис. 8.10. Маленькое изображение с серой окантовкой
размещено на фоне элементов заголовка
Фиксация или прокрутка фоновых изображений
Фоновое изображение можно зафиксировать в области просмотра браузера, или
разрешить его прокрутку вместе с документом. Для этого воспользуемся
свойством background-attachment и значениями fixed или scroll.
Обычно это свойство используется для всего раздела документа body или для
областей с содержимым внутри документа. Однако, как вы заметили, свойство
background-attachment можно использовать в любом элементе, где это
имеет смысл.
Рассмотрим следующее правило:
body {background-image: url(arrows.gif); background-position:
right; background-repeat: no-repeat; background-attachment:
scroll;}
В данном правиле присоединено фоновое изображение, оно размещено в правом
углу, отключая при этом заполнение и делая возможной прокрутку фона. На
самом деле это правило воспроизводит стандартное поведение браузера,
разрешающее прокрутку фона вместе с содержимым, как показано на рисунке 8.11.
Теперь, если записать то же правило со значением fixed для атрибута
background-attachment, результаты будут совершенно другими, как показано на
рисунке 8.12.

Урок 8. Работа с цветом и изображениями с использованием языка CSS 147
Щ working with style - Mozilla
Чг
Ш-ГаГх!
XTTlVIIlg WilliHACU ill III—
scrolling backgrounds +
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
Nam scelerisque iaculis risus. Donee a sem sed sem
hendrerit accumsan. Cum sociis natoque penatibus et
magms dis parturient montes, nascetur ridiculus mus.
Maecenas id neque sit amet nunc euismod facilisis
Phasellus gravida arcu sed augue Mauris velit
Suspendisse quam velit, tincidunt ut, dapibus ut, laoreet id,
erat. Suspendisse potenti. Quisque ut ipsum et turpis *-
vehicula placerat. Vivamus ut sem eu dolor venenatis
dapibus. Vivamus blandit condimentum magna
Pellentesque suscipit pellentesque dolor Curabitur nunc.
Aenean placerat, lacus sit amet dapibus convallis, quam
|=Ж=!вй*|/
Рис. 8.11. Если прокрутка фонового изображения разрешена, изображение прокручивается
вместе с элементом, к которому оно присоединено - в данном случае, элементом body
working with style - Mozilla
Ml
Phasellus gravida arcu sed augue. Mauris velit
Suspendisse quam velit, tincidunt ut, dapibus ut, laoreet id,
erat. Suspendisse potenti. Quisque ut ipsum et turpis
vehicula placerat. Vivamus ut sem eu dolor venenatis
dapibus. Vivamus blandit condimentum magna.
Pellentesque suscipit pellentesque dolor. Curabitur nunc.
Aenean placerat, lacus sit amet dapibus convallis, quam
tortor porttitor dui, id ultrices orci leo vel purus. j*-
Suspendisse nonleo sed lorem hendrerit imperdiet. Nullam
sit amet wisi a sem accumsan eleifend In dignissim. Proin
purus. In vestibulum. Quisque pharetra porta augue
Suspendisse nisi neque, cursus et, laoreet eget, vulputate
at, mi. Nam sed felis Sed ut tellus Aliquam ac justo
Integer adipiscing. Morbi at mass a sit amet dui dignissim
tincidunt.
Hb^iJ*
/
Рис. 8.12. He важно, в какую сторону прокручивается документ - в данном случае,
фоновое изображение остается зафиксированным

148 Языки HTML и CSS
Используя прокрутку фоновых изображений, можно получить интересные
эффекты. Конечно, вы должны попробовать это сами, чтобы увидеть, как на самом
деле работает прокрутка в браузере. Поэкспериментируйте с различными
вариантами: например, установите значение атрибута background-repeat в repeat
или разместите изображение в другом месте и попробуйте использовать оба
значения fixed и scroll, чтобы сравнить, как работает каждый из них.
Некоторые консультанты по доступности утверждают, что текст,
прокручивающийся над фоном, гораздо сложнее различать. Мне это хорошо
известно: я довопьно легко ощущаю движение, и если я попытаюсь
прокрутить текст над текстурированным сроном, то почувствую легкое
головокружение. Поэтому, используйте этот метод с осторожностью!
Создание прозрачного цвета фона
При обсуждении цветов фона не был затронут один момент - значение
transparent свойства background-col or. Конечно, в моем безумии есть своя
логика: я сначала хотела рассмотреть фоновые изображения, чтобы вы смогли
ощутить всю значимость этого очень важного свойства языка CSS.
В примере 8.6 описывается использованная ранее таблица, но на этот раз
фоновое изображение присоединено к элементу body. Обратите внимание, что я
также изменила класс .highlight, чтобы присвоить значение transparent
свойству background-color.
Пример 8.6. Установка прозрачного цвета фона
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/ xhtml-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>working with style</title>
<style type="text/css">
body {background-image: url(gray.jpg); color:white;}
caption {color: black; border: lpx solid black;}
table background-color: #ccc; border: lpx solid black; padding:
5px; width: 90%;}
th {background-color: #333;}
tr {background-color: #999;}
td {background-color: #ccc; border: lpx solid black}
.highlight {background-color: transparent; color: orange;}
</style>
<head>
<body>

Урок 8. Работа с цветом и изображениями с использованием языка CSS 149
<table cellspacing="5">
<caption>Comparing weather and time zones</caption>
<tr>
<th>Location</th>
<th>Tucson, Arizona</th>
<th>Las Vegas, Nevada</th>
</tr>
<tr>
< th>Wea ther</th>
<td>Warm to Hot</td>
<td>Warm to Hot</td>
</tr>
<tr>
<th>Time Zone</th>
<td>No Daylight Savings</td>
<td class="highlight">Mountain Standard Time</td>
</tr>
</table>
</body>
</html>
Несложно заметить, что это позволяет фоновому изображению, находящемуся
позади элемента, отображаться сквозь его фон, как показано на рисунке 8.13.
woiking with style - Mozilla
Гг^ xj
, Comparing weather and time zones
■ Location 1 Tucson, Arizona 1 Las Vegas, Nevada 1
Щ Weather
■Time Zone
,', -■:.-
'
Done
HnHrfH.
Рис. 8.13. Значение transparent позволяет фоновому изображению
отображаться сквозь фон элемента - в данном случае, фоновое изображение
отображается сквозь ячейку таблицы, к которой применен класс . highlight
Сокращение языка CSS для свойств фона
Другая интересная особенность языка CSS заключается в том, что определенные
свойства имеют сокращенный эквивалент. Это справедливо только для
небольшого количества свойств; свойство background - одно из них.

150
Языки HTML и CSS
Сокращенные свойства объединяют значения всех связанных с ними свойств.
Для свойства background это означает, что свойства color, image, repeat и
attachment можно объединить в одно правило, воспользовавшись свойством
background.
Для сравнения, в примере 8.7 описаны стили для всех свойств background.
Пример 8.7. Стили фона без сокращений
body {
background-color: white;
background-image: url(images/lemon-slice.gif);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: right bottom;
}
Сокращенная версия выглядит так:
body {background: white url(images/lemon-siice.gif) no-repeat
scroll right bottom;}
Я создала HTML-страницу с текстом на шуточном языке и применила стили фона,
воспользовавшись сокращенной версией, как показано на рисунке 8.14.
working with style - Mozilla
* I
M*I
I Lorem ipsum dolor sit amet, consectetuer adipiscing elit Nam ac orci vel dui mollis
sagitos. Mauris scelerisque arcu ut turpis. Phasellus etpurus nee ligula adipiscing
bibendum. Phasellus accumsan elit sed massa. Aliquam mi nulla, mollis nee,
ullamcorper non, tristique quis, leo. Donee ligula nibh, vehicula id, tempor nee, semper
j non, nibh. Aliquam iaculis. Phasellus at nunc. Aenean vitae justo at sem convallis
I faucibus. Nullam malesuada teHus sed massa. Curabiturpellentesque. Mauris sodales
eleifendpede.
:=жН^!|Ы
Рис. 8.14. Применение свойств фона при помощи сокращений языка CSS

Урок 8. Работа с цветом и изображениями с использованием языка CSS 151
Конечно же, использование как несокращенной, так и сокращенной версии
приводит к одному и тому же результату.
Квантовый скачок: когда использовать сокращения
Сокращения языка CSS чрезвычайно полезны, когда необходимо сохранить
размер файла. Сокращения также упрощают общее управление кодом на
языке CSS. Я стараюсь использовать их везде, где это возможно, за исключением
нескольких случаев.
Однако я слышала, что люди (особенно те, кто работает в профессиональных
командах Web-разработчиков) указывают на сложность работы новичков с
сокращениями. Некоторые руководители групп создают свои CSS-файлы, всегда
используя полный формат, поскольку этот формат позволяет сократить
количество ошибок и избежать путаницы, когда в команде разработчиков
существуют различные уровни квалификации.
Стало веселее?
Будем надеяться, что теперь вам стало немного веселее, поскольку появилась
возможность использовать цвет и изображения для украшения страниц.
Как вы заметили, язык CSS предоставляет множество вариантов управления
цветом, что достаточно серьезно. Еще более гибким является способ управления
изображениями для создания дизайнов при помощи языка CSS, полностью
отделив их от внутристрочных изображений.
Сайт CSS Zen Garden (http://www.csszengarden.com/) - это фантастическое место,
в котором нигде не используются внутристрочные изображения. На этом сайте все
потрясающие изображения размещаются на фоне элементов, а управление
изображениями осуществляется при помощи методики, описанной в данной главе.
Далее, мы узнаем, как эффективно стилизовать текст.

УРОК 9.
Стилизация текста
Теперь, когда мы получили представление о возможностях языка CSS, настало
время заняться стилизацией текста. Исторически сложилось, что язык CSS
больше использовался для стилизации текста, чем для всего остального, в
основном благодаря хорошей поддержке большинства стилей, относящихся к тексту,
существовавших в языке CSS 1.0. С тех пор появились дополнительные свойства,
которые предоставляют еще большие возможности для управления текстом в
Web-документах. Основные принципы стилизации текста в языке CSS возникли
из традиционного типографского дела, хотя ограничения, связанные как с
языком CSS, так и с поддержкой браузеров, предотвратили определенный рост в
области шрифтов для Интернета.
Предупреждаю с самого начала: работа со шрифтами может оказаться сложным
занятием. Во-первых, необходимо понять, что с точки зрения доступности
шрифтов для отображения текста в Интернете, все зависит от операционной
системы и установленных шрифтов. Рхли определенный шрифт не установлен на
машине, человек не сможет увидеть этот шрифт. Такое же ограничение
существовало и для элементов языка HTML, отвечающих за представление документа, и с
тех пор изменилось не многое. Кроме этого, у браузеров проявляется
существенный изъян при изменении размера шрифта, из-за чего изменение размера
шрифта становится настоящей головной болью. Мы практически бессильны в
решении данных проблем, однако можно узнать, как управлять ими. Поэтому
отнеситесь терпеливо к рассмотрению подробностей, хорошо?
Хорошая новость заключается в том, что у нас есть возможность выбирать
некоторые шрифты, а язык CSS расширяет возможности использования шрифтов,
позволяя добавлять цвет, изменять начертание, высоту, интервал - все свойства,
придающие визуальную привлекательность выбранным шрифтам. Когда вы
станете более опытным в использовании языка CSS, вы узнаете, как комбинировать
графику и текст для получения все более и более сложных текстовых дизайнов.
В спецификации языка CSS свойства для управления аспектами типографского
дела собраны в двух основных категориях. Первая категория включает свойства,
относящиеся к шрифту, которые отвечают за выбор шрифта и его дальнейшее
отображение. Во вторую категорию включены свойства, относящиеся к тексту,
позволяющие управлять текстом, обычно, без необходимости изменения самого
шрифта. Некоторые свойства шрифта произошли из более общей визуальной
категории стилей, и могут быть использованы (но не ограничены им) для текста.
В этой главе мы узнаем о шрифте и стилях текста, а также о дополнительных
свойствах стиля, влияющих на текст, но не обязательно используемых только для
текста. Также мы познакомимся с дополнительными типами селекторов,
которые еще не были представлены в предыдущих главах.

Урок 9. Стилизация текста
153
Выбор шрифтов
Выбор шрифтов для дизайна документа может привести в замешательство
людей, плохо знакомых с дизайном или типографским делом. К счастью, можно
воспользоваться несколькими практическими способами.
Традиционно, шрифты разбиты на группы, называемые категориями шрифтов
или, как в языке CSS, семействами шрифтов. Шрифты сгруппированы по сходным
характеристикам. В языке CSS существует пять общих категорий:
• Serif - Буквы шрифта с засечками украшены завитушками, называемыми, как
можно догадаться, засечками. Считается, что шрифты этой категории
отлично подходят для текста элемента body, особенно при печати, а также для
заголовков и другого текста, например заглавий. Шрифты с засечками, с
которыми вы, вероятно, знакомы, включают в себя шрифты Times и Georgia - оба
этих шрифта широко используются в Интернете.
• Sans-serif - Термин sans-serif означает «без засечек» и описывает, буквально,
шрифт без завитушек. Вместо этого, у шрифтов без засечек закругленные,
более широкие буквы. В основном считается, что эти шрифты отлично подходят
для заголовков при печати, но многие думают, что они являются лучшим
выбором для текста элемента body, отображаемого на экране. Однако это
утверждение не всегда верно, особенно когда дело касается текста очень
маленького размера или курсива. К известным шрифтам этой категории
относятся Arial, Helvetica, Verdana.
• Monospace - Моноширинные шрифты - это шрифты, все буквы которых
имеют одинаковую ширину. Они обычно используются для описания примеров
программного кода. Совсем недавно эти шрифты были популярны в дизайне,
придавая страницам очень «грязный» вид. Однако в основном использование
моноширинных шрифтов ограничивается примерами кода. В
вычислительной технике наиболее распространенным моноширинным шрифтом является
шрифт Courier.
• Fantasy - Фантастические шрифты, также известные как декоративные
шрифты, - это шрифты с необычным внешним видом. Вид шрифтов
замысловатый, поэтому их полезно использовать для заголовков или небольших
областей текста, но они не совсем подходят для текста элемента body,
поскольку украшения затрудняют чтение текста. В языке CSS фантастические
шрифты будут использоваться редко, если вообще будут, поскольку их очень
много и они не устанавливаются на большинстве компьютеров. Примером
является шрифт Western.
• Cursive - Курсивные шрифты известны также под названием рукописные
шрифты. Они имитируют курсивную рукопись и насыщены завитушками.
Как и в случае с фантастическими шрифтами, в языке CSS рукописные
шрифты применяются редко. Многие дизайнеры используют фантастические

154
Языки HTML и CSS
и рукописные шрифты в изображениях, которые затем становятся
декоративными типографическими элементами дизайна. Известным рукописным
шрифтом является шрифт Lucida Handwriting, как показано на рисунке 9.1.
±_!_ : : г
This is the Times font (seiif)
This is the Arial font (san-serif) j
This is the Courier font (monospace)
j This is the CMler JW (fantasyj
i Thl>yifrtfoe/Li&oul<&H(M%dM,4riX'ti№
1 [ __J
8 Dona • j |=3K=j Л Jj
Pmc. 9. i. Использован встроенный язык CSS для стилизации
каждой строки текста указанным шрифтом
Шрифты, установленные почти в каждой операционной системе, включают:
Arial, Helvetica, Verdana, Time, Georgia и Courier. Шрифты Tahoma, Trebuchet и Lucida
широко распространены, поскольку они поставляются со всеми версиями
операционной системы Windows, а изначально они включались в пакет Web Font Pack
корпорации Microsoft - бесплатный набор шрифтов, распространявшийся
корпорацией Microsoft в начале развития Интернета.
Если вы - новичок, то со шрифтами лучше всего придерживаться очень простой
схемы. Можно воспользоваться одной из перечисленных схем:
• Выбрать один шрифт, распространенный шрифт с засечками или без засечек,
и использовать его для всего. Изменяйте размер, начертание, цвет и другие
стили для привлечения внимания.
• Выберите два шрифта, распространенный без засечек и распространенный с
засечками. Используйте шрифт с засечками для всех заголовков, заглавий и
другого текста; шрифт без засечек используйте для элемента body. (Такая
схема очень распространена в Интернете.)
• Выберите два шрифта, распространенный с засечками и распространенный
без засечек. Используйте шрифт без засечек для всех заголовков, заглавий и
другого текста; шрифт с засечками используйте для элемента body. (Данная
схема также очень распространена в Интернете, и использовалась в печатном
мире; посмотрите на любую газету или книгу и вы, вероятно, обратите
внимание на использование данной схемы.)

Урок 9. Стилизация текста
155
Набравшись опыта в использовании шрифтов, вы, вероятно, захотите
применять более творческие подходы, но, что характерно, если придерживаться одной
из описанных схем, это позволит придать документу более профессиональный и
согласующийся вид.
Применение семейств шрифтов к тексту
Получив представление о доступных вариантах выбора, настало время
продолжить движение и применить семейства шрифтов к тексту. Для этого выбирается
желаемый текст, к которому применяется свойство font-family с
определенным значением.
Значением для свойства font-family может являться одиночное название
шрифта, ключевое слово семейства шрифтов или ряд названий шрифтов, за
которыми следует ключевое слово семейства шрифтов.
Одиночные названия шрифтов
Выбирайте этот подход только в том случае, если вы абсолютно уверены, что у
посетителей установлен указанный шрифт.
body {font-family: Arial;}
Эта инструкция назначает шрифт Arial шрифтом по умолчанию для всех
документов. Проблема заключается в том, что если на машине пользователя не
установлен шрифт Arial, браузер использует шрифт по умолчанию - обычно это
шрифт Times, и в результате страница будет выглядеть совершенно иначе, чем
предполагалось.
Ключевые слова семейства шрифтов
Ключевые слова семейств шрифтов в языке CSS соответствуют названиям
семейств, описанных в предыдущей части: serif, sans-serif, monospace, fantasy
и cursive.
hi {font-family: fantasy;}
Ко всем заголовкам hi будет применен фантастический шрифт по умолчанию,
установленный на машине пользователя. При использовании ключевых слов
проблема заключается в том, что нельзя управлять тем, какой шрифт будет
использоваться для отображения. В результате ключевые слова обычно
используются в качестве запасного варианта. Поэтому, если вы выбрали одиночное
название шрифта, за выбранным шрифтом можно добавить соответствующее
ключевое слово:
hi {font-family: Arial, sans-serif;}

156
Языки HTML и CSS
В невероятном случае, когда шрифт Arial не установлен на машине пользователя,
будет использован шрифт без засечек, используемый по умолчанию на машине
пользователя.
Несколько названий
Подход, предоставляющий больше возможностей управления, заключается в
использовании нескольких названий из семейства. Это означает выбор названий
шрифтов из одного семейства и их перечисление в определенном порядке:
body {font-family: Arial, Helvetica, Verdana, sans-serif;}
Браузер попытается найти первый шрифт в списке; если этот шрифт на машине
пользователя не существует, будет применен второй или третий шрифт. Помимо
этого, обратите внимание, что добавлено ключевое имя семейства.
В примере 9.1 создана таблица стилей для демонстрации использования свойства
font-family.
Пример 9.1. Применение шрифтов к элементам страницы
body {font-family: Georgia, Times, serif;}
hi, h2 {font-family: Arial, Helvetica, sans-serif;}
Обратите внимание, что описан шрифт для элемента body, но не для абзацев.
Этот шрифт будет использован по умолчанию для любого текста, размещенного в
разделе документа body.
В этом примере абзацы просто наследуют семейство шрифтов от элемента
body. Обратите также внимание, что сгруппированы селекторы hi и h2,
поскольку для них будет использован один и тот же шрифт. На рисунке 9.2
показаны результаты.
Конечно, пока еще не определены другие размеры или стили. В результате,
применяются стили браузера, поэтому стандартный размер для элементов hi и h2, и
абзацев будет определяться браузером, пока не будут созданы дополнительные
правила для управления этими стилями.

Урок 9. Стилизация текста
157
working with style - Mozrila
The Black Cat
By Edgar Allen Рое
I married early, and was happy to find in my wife a disposition not uncongenial
with my own. Observing my partiality for domestic pets, she lost no opportunity
of procuring those of the most agreeable kind. We had birds, gold fish, a fine dog,
rabbits, a small monkey, and a cat.
This latter was a remarkably large and beautiful animal, entirely black, and
sagacious to an astonishing degree. In speaking of his intelligence, my wife, who at
heart was not a little tinctured with superstition, made frequent allusion to the
ancient popular notion, which regarded all black cats as witches in disguise. Not
that she was ever serious upon this point - and I mention the matter at all for no
better reason than that it happens, just now, to be remembered.
Pluto - this was the cat's name - was my favorite pet and playmate. I alone fed
him, and he attended me wherever I went about the house. It was even with
difficulty that I could prevent him from following me through the streets.
Done | HHgfl
Рис. 9.2. Шрифт без засечек используется для заголовков,
а шрифт с засечками используется для раздела документа body
Изменение размера шрифтов
В этой части мы узнаем, как изменять размер шрифтов при помощи свойства
font-size и абсолютного или относительного значения, значения длины или
значения, выраженного в процентах.
Ключевые слова абсолютных и относительных значений
Ключевые слова абсолютных значений задают размеры шрифта, основываясь на
способе расчета размера браузером. Доступны следующие ключевые слова:
xx-small, x-small, small, medium, large, x-large, xx-large. В следующем примере
я применила ключевое слово абсолютного значения к тексту абзаца:
Р {font-size: medium,-}
Размер medium обычно соответствует размеру по умолчанию, используемому
браузером для этого элемента. На рисунке 9.3 показано применение всех
ключевых слов к стандартному тексту браузера.

158
Языки HTML и CSS
зк-ямл х пши small medium lai ge X-lai'ge ХХ~13Г&Q ■,
Рис. 9.3. Изменение размера шрифта в браузере
при помощи ключевого слова абсолютного значенья
Если ключевые слова абсолютных значений зависят от расчетов браузером
размеров шрифтов, ключевые слова относительных значений - larger и smaller -
связаны с размером родительского элемента. Таким образом, если размеру шрифта
для элемента body присвоить значение medium, можно использовать ключевое
слово относительного значения larger для изменения значения размера на large,
или ключевое слово smaller - для изменения значения размера на small. Просто
запомните, что ключевые слова относительных значений связаны с
предопределенными размерами, заданными ключевым словом, значениями длины или
значениями, выраженными в процентах.
Значения длины
Значения длины используются для многих свойств. Они включают три
относительных и пять абсолютных значений. К относительным значениям относятся
em, ex и рх; к абсолютным значениям относятся pt, pc, in, mm и cm. Абсолютные
значения не следует использовать для отображения на экране, хотя они полезны
при создании таблиц стилей для печати документа.
Наиболее распространенными значениями длины для текста в Интернете
являются пикселы и единицы размера шрифта (em), поскольку, с технической точки
зрения, оба эти значения масштабируемы, что подходит для экрана. Однако есть одна
существенная проблема: браузер Internet Explorer для операционной системы
Windows корпорации Microsoft не масштабирует пикселы. Это ужасное упущение,
которое привело к огромным проблемам в основном из-за того, что пользователям
с плохим зрением нужно предоставить масштабируемые размеры шрифтов.
Сравните значения слева со значениями справа, показанные на рисунке 9.4, где
увеличен размер текста браузера (выбрав в браузере IE команду меню Вид ♦ Размер
текста (View ♦ Text Size)) со стандартного значения medium до значения larger.
^«л em 1.5 em
i2pxi6px22px
i2Pt22 pt
0.5 em i em 1.5 em
i2Pxi6px22px
i2Pt22pt
Рис. 9.4. Сравнениеразмеров шрифтов в браузере Internet Explorer 6.0

Урок 9. Стилизация текста
159
Обратите внимание, что текст, размеры которого заданы в единицах размера
шрифта, масштабируется, а в пикселах и пунктах - нет. Пикселы должны
масштабироваться - что и происходит в браузерах с корректной поддержкой
изменений размеров шрифтов. Текст, размер которого выражен в пунктах (которые я
не рекомендую использовать для экрана), остается неизменным, поскольку
пункты являются абсолютными значениями, - это значит, что они никогда не будут
масштабироваться. В результате, многие Web-дизайнеры выступают за
использование единиц размера шрифта, а не пикселов. Однако обратите внимание на
крошечный текст слева. Это также может привести к серьезным проблемам, если
браузер пользователя настроен на использование шрифта, размер которого
меньше значения medium.
Проценты
Процентные значения, используемые для изменения размера шрифтов, всегда
выражаются относительно другого значения, например ключевого слова или
значения длины. Поэтому, если задать размер шрифта элемента body равным
значению 1ет, а размер шрифта элемента hi - 150%, получим, что размер
шрифта элемента hi будет больше размера шрифта элемента body,
относительно стандартных значений браузера:
body{font-size: lem;}
hi {font-size: 150%;}
Процентные значения крайне полезны для преодоления ограничений браузера
при изменении размеров шрифтов. Причина в том, что процентные значения
также масштабируемы. В результате, многие обходные решения пиксельной
проблемы в браузере IE реализованы при помощи совместного использования
единиц размера шрифта и процентов. Но до сих пор многие дизайнеры
предпочитают работать с пикселами из-за их совместимого отображения, жертвуя при
этом доступностью.
Чтобы набить руку, в этой книге вы будете использовать множество ва-
%;. риантов изменения размера шрифтов. За дополнительной информацией о
Ж проблемах, связанных с изменением размеров шрифтов, обратитесь к
J статье Оувена Бригза (Owen Briggs) «Text Sizing» no адресу
http://www.thenoodleincident.com/tutorials/box_lesson/font/index.html.
Жирность и стиль шрифта
Фьюить! Слишком много деталей для простой книги. Но я была вынуждена
сделать это, чтобы быть с вами справедливой и убедиться, что вы получили прочные
знания. Теперь давайте перейдем к самому представлению!
Помимо семейства и размера, шрифты могут иметь жирность и стиль. Жирность
шрифта относится к тому, насколько жирным (или нежирным) является шрифт.

160
Языки HTML и CSS
Стиль шрифта относится к различным начертаниям, которые могут
существовать в определенном семействе.
Жирность шрифта
Определение жирности шрифта осуществляется при помощи свойства font-
weight и ассоциированного с ним значения. Значения для выражения жирности
шрифта включают в себя: число (100-900, где 100 - самый тонкий шрифт,
900 - самый жирный и 400 - обычный), ключевое слово normal (соответствующее
значению жирности, равному 400), ключевое слово bold (эквивалентно значению
жирности, равному 700), ключевое слово bolder (определяет следующее большее
значение жирности) и ключевое слово lighter (определяет следующее меньшее
значение жирности).
В примере 9.2 демонстрируется таблица стилей, в которой применяется
несколько значений жирности.
Пример 9.2. Стили, описывающие семейство шрифта, размер и жирность
body {font-family: Georgia, Times, serif; font-size: lem;
font-weight: normal;}
hl,h2 {font-family: Arial, Helvetica, sans-serif;}
hi {font-size: 150%; font-weight: bold;}
h2 {font-size: 130%; font-weight: lighter;}
.accent {font-weight: 700;}
На рисунке 9.5 показан текст с примененными стилями, который использовался
ранее в этой главе.
working with style - Mozilla
ШЕ
The Black Cat
By Edgar Allen Рое
I married early, and was happy to find in my wife a disposition not uncongenial with
my own. Observing my partiality for domestic pets, she lost no opportunity of
procuring those of the most agreeable kind. We had birds, gold fish, a fine dog,
rabbits, a small monkey, and a cat.
1=тЖ7\
Рис. 9.5. Использование жирности для элемента body,
заголовков и класса accen t
Поддержка числовых значений от 100 до 900 для свойства font-weight
реализована недостаточно хорошо. Лучше всего использовать только те
значения, которые соответствуют известной жирности шрифта -
например, 400 для обычного шрифта, 700 — для жирного шрифта.

Урок 9. Стилизация текста
161
Стиль шрифта
Стили шрифта позволяют изменить начертание. Для определения начертания
шрифта, используется свойство font-style со значением normal, italic или oblique.
Значение normal используется только в том случае, когда текст определенно
должен отображаться с нормальной жирностью. В остальных случаях, это значение
является значением по умолчанию и его незачем использовать.
Наклонное начертание - это скошенное начертание, подходящее для
электронного текста. Значение oblique действительно полезно, только когда шрифт с
наклонным начертанием установлен на компьютере пользователя, что не
применимо к большинству шрифтов, с которыми вы будете работать. Если для шрифта
не существует наклонного начертания, для отображения текста будет
использован курсив.
Значение italic используется для выделения текста курсивом. Практическое
значение? Почти во всех случаях наилучшим значением для свойства font-style будет
italic, как показано в примере 9.3.
Пример 9.3. Стили, описывающие семейство шрифта, размер, жирность и стиль
body {font-family: Georgia, Times, serif; font-size: lem,-
font-weight: normal;}
hl,h2 {font-family: Arial, Helvetica, sans-serif;}
hi {font-size: 150%; font-weight: bold,-}
h2 {font-size: 130%; font-weight: lighter; font-style: italic;}
.accent {font-weight: 700;}
На рисунке 9.6 показано использование курсива для заголовка элемента h2.
The Black Cat
By Edgar Allen Рое
I married early, and was happy to find in my wife a disposition not uncongenial with
my own. Observing my partiality for domestic pets, she lost no opportunity of
procuring those of the most agreeable kind. We had birds, gold fish, a fine dog,
rabbits, a small monkey, and a cat.
Done ~ ' -| !=3£Цв1Т7
Рис. 9.6. Применение стиля шрифта к элементу h2
6-1356

162
Языки HTML и CSS
Раскрашивание текста
Это простая часть! Цвет текста определяется свойством color, в названии
которого нет префикса font или text.
Для раскрашивания текста просто используется свойство color с подходящим
значением цвета. Можно обратиться к главе 8 «Работа с цветом и изображениями
с использованием языка CSS», в которой я много раз применяла свойство color и
рассматривала значения цветов.
Для того чтобы немного раскрасить текст необходимо добавить свойство color к
существующим стилям, как показано в примере 9.4.
Пример 9.4. Раскрашивание текста
body {font-family: Georgia, Times, serif; font-size: lem;
font-weight: normal; color: black;}
hl,h2 {font-family: Arial, Helvetica, sans-serif;}
hi {font-size: 150%; font-weight: bold; color: #999;}
h2 {font-size: 130%; font-weight: lighter; font-style: italic-
color: #333;}
.accent {font-weight: 700; color: red;}
На рисунке 9.7 показано, как изменился цвет заголовков.
walking with style - Mazilla
•i_L
ШШ
The Black Cat
I married early, and was happy to find in my wife a disposition not
uncongenial with my own. Observing my partiality for domestic pets, she lost
no opportunity of procuring those of the most agreeable kind. We had birds,
gold fish, a fine dog, rabbits, a small monkey, and a cat.
1=зМуП^
Рис. 9.7. Применение цвета к селекторам body, hi, h2 и class
Конечно, невозможно увидеть контрастный красный цвет, примененный к
классу accent, из-за характера данной книги, однако вы можете написать свои стили
и воспользоваться браузером, чтобы проверить их в действии.
Выравнивание текста
Во времена, когда язык HTML использовался для представления документа,
выравнивание текста осуществлялось при помощи атрибута align и соответствующего

Урок 9. Стилизация текста
163
значения. В языке CSS применяется такой же подход, конечно, без участия языка
HTML, с использованием свойства text-align. Значения остались прежними и они
наверняка знакомы всем, кто когда-либо использовал текстовый процессор.
• left - левое выравнивание, известное как «рваный» правый край, выравнивает
текст по левому краю, при этом разрывы строк располагаются справа. Это
стандартное поведение для всех браузеров и является предпочтением для
текста элемента body, text-align: text ;
■ center - центрирует текст. Отцентрированный текст полезен для стилизации
заголовков, заглавий и другого особого текста. Очень тяжело читать большие
объемы отцентрированного текста, поэтому для текста элемента body такое
выравнивание является не самым лучшим выбором, text-align: center ;
■ right — весь текст выравнивается по правому краю, оставляя «рваный» левый
край, text-align: right;
• justify - выравнивание по ширине означает одновременное выравнивание
текста как по левому, так и по правому краю. Осуществляется путем подсчета
слов и промежутков, доступных в строке. Такое выравнивание широко
распространено в печатных газетах и журналах. Позволяет создавать весьма
унифицированный, привлекательный вид, однако большинство людей избегают
его использования, поскольку промежутки между словами могут быть очень
большими, что затрудняет чтение, text-align: justify;
На рисунке 9.8 приведено сравнение различных вариантов выравнивания
для абзаца.
This latter was а
remarkably large an
beautiful animal.
entirely black, and
sagacious to an
astonishing degree.
This latter was a
remarkably large and
beautiful animal,
entirely black, and
sagacious to an
astonishing degree.
This latter was a
remarkably large and
beautiful animal,
entirely black, and
sagacious to an
astonishing degree.
This latter was a
remarkably large and
beautiful animal,
entirely black, and
sagacious to an
astonishing degree.
Рис. 9.8. Текст выровнен no правому краю, по центру, полевому краю и по ширине
Оформление текста
^ помощью языка CSS можно «оформить» текст - то есть, добавить или удалить
°пределенное декоративное значение. Это осуществляется при помощи свойства
text-decoration и следующих значений:
• попе - в основном используется для удаления стандартного подчеркивания у
ссылок. За более подробной информацией обратитесь к главе 10 «Эффекты
ссылок, списки и навигация».
6*

164
Языки HTML и CSS
• underline - подчеркивает выбранный текст. Специалисты по вопросам
удобства использования стараются избегать текста с подчеркиванием,
поскольку его можно перепутать со ссылками.
• over 1 ine - размещает линию над выбранным текстом.
• 1 ine - through — перечеркивает выбранный текст.
• blink - да, вы правильно прочитали. Это значение заставляет текст мигать.
Эта возможность с самого начала была представлена (и использовалась до
потери пульса) в браузере Netscape. Поддерживается всеми современными
браузерами, кроме браузера Internet Explorer.
В примере 9.5 для оформления текста используются встроенные CSS-стили.
Пример 9.5. Оформление текста при помощи языка CSS
<р style="text-decoration: underline;">This text is
underlined</p>
<p style="text-decoration: overline;">This text is an
overline</p>
<p style="text-decoration: line-through;">This text is
1ine-through</p>
<p style="text-decoration: blink;">This text is blinks</p>
На рисунке 9.9 показаны результаты, за исключением мигания.
woiking with style - Mozilla
This text is underlined
This text has an overline
W-10 trjtt hat? л ktt--'lr'*4b4i
This text blinks
Done
Л
Рис. 9.9. Оформление текста с использованием языка CSS - чтобы
увидеть мигание, выполните приведенный пример в браузере
Установка отступа текста
Еще одно полезное текстовое свойство - свойство text-indent. Это свойство
позволяет установить отступ первой строки текста при помощи языка CSS,

Урок 9. Стилизация текста
165
вместо использования пустых изображений или нескольких символов
неразрывного пробела в языке HTML.
Можно использовать любое фиксированное значение длины (что было описано
ранее в этой главе).
р {text-indent: 45px;}
Б результате, отступ первой строки каждого абзаца составит 45 пикселов, как
показано на рисунке 9.10.
Щ woiking with style - Mozilla . ' < г„ у ,у_. «i ^
■*xi
The Black Cat
В d rAll P
I married early, and was happy to find in my wife a disposition not
uncongenial with my own. Observing my partiality for domestic pets, she lost
no opportunity of procuring those of the most agreeable kind. We had birds,
gold fish, a fine dog, rabbits, a small monkey, and a cat.
This latter was a remarkably large and beautiful animal, entirely black,
and sagacious to an astonishing degree. In speaking of his intelligence, my wife,
who at heart was not a little tinctured with superstition, made frequent allusion
to the ancient popular notion, which regarded all black cats as witches in
disguise.
Pluto - this was the cat's name - was my favorite pet and playmate. I
alone fed him, and he attended me wherever I went about the house. It was
even with difficulty that I could prevent him from following me through the
streets.
l-aHrf4'/
Рис. 9.10. Отступ первых строк абзацев составляет 45 пикселов
Можно также использовать процентные значения, относительно элемента-
контейнера (за более подробной информацией обратитесь к главе 12
«Позиционирование, плавающее размещение и Z-индекс»).
Р {text-indent: 40%;}
В результате будут получены огромные отступы для первых строк абзацев. Такой
эффект время от времени можно использовать для получения необычного
внешнего вида страницы, как показано на рисунке 9.11.

166
Языки HTML и CSS
working with style - Mozilla
jj File Edit View Go Eiookmaiks Tools V/indow Help
\^m
The Black Cat
E rAH P
I married early, and was happy to find in my
wife a disposition not uncongenial with my own. Observing my partiality for
domestic pets, she lost no opportunity of procuring those of the most agreeable
kind. We had birds, gold fish, a fine dog, rabbits, a small monkey, and a cat.
I This latter was a remarkably large and
beautiful animal, entirely black, and sagacious to an astonishing degree. In
speaking of his intelligence, my wife, who at heart was not a little tinctured with
superstition, made frequent allusion to the ancient popular notion, which
| regarded all black cats as witches in disguise.
j Pluto - this was the cat's name - was my
favorite pet and playmate. I alone fed him, and he attended me wherever I
went about the house. It was even with difficulty that I could prevent him from
following me through the streets.
Л
Рис. 9.11. Установка отступов с использованием процентных значений
Можно использовать отрицательные значения длины для втяжки текста, как
показано на рисунке 9.12.
working with style - Mozilla
I married early, and was happy to find in my wife a disposition
not uncongenial with my own. Observing my partiality for
domestic pets, she lost no opportunity of procuring those of
the most agreeable kind. We had birds, gold fish, a fine dog,
rabbits, a small monkey, and a cat.
W*^
Рис. 9.12. Втяжка текста путем установки краев
и применениясвойства text-indent: -20рх
Преобразование регистра и изменение шрифта текста
Можно стилизовать регистр текста и изменить его шрифт с использованием двух
свойств.

Урок 9. Стилизация текста
167
Для преобразования регистра используется свойство text-transform и одно
из значений: capitalize, uppercase, lowercase, none. Для изменения
шрифта текста используется свойство font-variant и значение small-caps
или normal (значение по умолчанию).
Б примере 9.6 показан документ, в котором используются преобразование
регистра и изменения шрифта.
Пример 9.6. Преобразование регистра и изменение шрифта текста
при помощи языка CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>working with style</title>
<style type="text/ess">
body {font-family: Georgia, Times, serif; color: black;}
hi {font-family: Arial, Helvetica, sans-serif; font-size: 24px;
font-variant: small-caps;}
h2 {font-family: Georgia, Times, serif; color: #999; font-size:
18px; font-style: italic; text-transform: lowercase;}
.accent {font-weight: 700; color: red; text-transform:
uppercase;}
p {font-size: 16px; text-transform: capitalize;}
</style>
</head>
<body>
<hl>The Black Cat</hl>
<h2>By Edgar Allen Poe</h2>
<p> I married early, and was happy to find in my wife a
disposition not uncongenial with my own. Observing my
partiality for domestic pets, she lost no opportunity of
procuring those of the <span class="accent">most</span>
agreeable kind. We had birds, gold fish, a fine dog, rabbits, a
small monkey, and a cat.</p>
<p>This latter was a <span class="accent"> remarkably</span>
large and beautiful animal, entirely black, and sagacious to an
astonishing degree. In speaking of his intelligence, my wife,
who at heart was not a little tinctured with superstition, made
frequent allusion to the ancient popular notion, which regarded
all black cats as witches in disguise.</p>
<p>Pluto - this was the cat's name - was my <span
class="accent">favorite</span> pet and playmate. I alone fed
him, and he attended me wherever I went about the house. It was
even with difficulty that I could prevent him from following me
through the streets.</p>

168
Языки HTML и CSS
</body>
</html>
Результаты применения свойств text-transform и font-variant можно
увидеть на рисунке 9.13.
font-variant: small-caps;
text-decoration: uppercase;
text-decoration: lowercase; text-decoration: capitalize:
working with style - Mozilla
\
The Black Cat
by erfgar alien рое
I Married Early,A«crWas Happy To Find M My Wife A Disposition
Not UnconeeHiaT With My Own. Observing My Partiality Fo/
DomesJtkrPets, She Lost No Opportunity Of Procuring Thosfe Of The
MOST Agreeable Kind. We Had Bjj?ds, Gold Fish, A Fine фв, Rabbits,
A Small Monkey, And A Cat.
This Latter Was A REMARKABLY Large And Beautiful Animal,
Entirely Black, And Sagacious To An Astonishing Degree. In Speaking
Of His Intelligence, My Wife, Who At Heart Was Not A Little
Tinctured With Superstition, Made Frequent AllusioiyTo The Ancient
Popular Notion, Which Regarded All Black Cats As w/tches In
Disguise.
Pluto - This Was The Cat's Name - Was My FAVO'RITE Pet And
Playmate. I Alone Fed Him, And He Attended Me Wherever I Went
About The House. It Was Even With Difficulty That I Could Prevent
Him From Following Me Through The Streets.
Done
Л
Рис. 9.13. Преобразование регистра и изменение шрифта текста
Браузеры, в которых реализована полная поддержка преобразований регистра и
изменений шрифта текста, будут применять стили независимо от того, какой
регистр использовался при создании текста. Конечно, нам хочется, чтобы
текстовое содержимое нормально воспринималось в документе. В данном случае, всегда
можно изменить стили, что не приведет к повторному созданию документа.

Урок 9. Стилизация текста 169
Поддержка свойств text-transform и font-variant у браузеров в
целом реализована неплохо, но у современных браузеров существует
одна известная проблема: свойство font-variant: small-caps;
не работает в определенных старых версиях популярного браузера
Safari от компании Apple. Стиль просто не будет применен, а будут
выбраны только те стили, поддержка которых реализована в
браузере Safari.
Установка интервалов между строками
Интервал между строками, известный в типографском деле как междустрочный
пробел, - это расстояние между строками в разделе текста. Язык CSS
позволяет управлять этим значением при помощи свойства line-height и
значением длины, а также числового или процентного значения, как показано
в примере 9.7.
Пример 9.7. Добавление междустрочного интервала в абзацы с использованием
значенья длины, а также числового и процентного значения
<р style="line-height: 20px;"> I married early, and was happy
to find in my wife a disposition not uncongenial with my
own.</p>
<p style="line-height: 2;"> Observing my partiality for
domestic pets, she lost no opportunity of procuring those of
the <span class="accent">most</span> agreeable kind. We had
birds, gold fish, a fine dog, rabbits, a small monkey, and a
cat.</p>
<p style="line-height: 65%;"> This latter was a <span
class="accent"> remarkably</span> large and beautiful animal,
entirely black, and sagacious to an astonishing degree. </p>
В готовом документе установлен размер шрифта элемента body равный 14
пикселам, а затем применено свойство line-height в виде встроенного стиля к
каждому абзацу, который необходимо модифицировать, как показано на
рисунке 9.14.
Обычно, чтобы добиться наилучшей читабельности текста, следует
придерживаться стандартного значения свойства line-height для шрифта.

170
Языки HTML и CSS
woiking with style - Mozilla
Опш
I married early, and was happy to find in my wife a disposition
not uncongenial with my own.
Observing my partiality for domestic pets, she lost no
opportunity of procuring those of the most agreeable kind. We
had birds, gold fish, a fine dog, rabbits, a small monkey, and a
cat.
This latter was aremarkably large.and beautiful animal, entirely
black, ana sagacious to an astonishing aegree.
Done
Ш A
Рис. 9.14. Различные междустрочные интервалы
могут создавать интересные эффекты
Установка интервала между буквами и словами
Еще одним аспектом типографского дела, который поддерживается языком CSS,
является установка интервала между буквами и словами, что осуществляется при
помощи свойств letter-spacing и word-spacing соответственно. Значение
каждого из свойств выражается длиной, как показано в примере 9.8.
Пример 9.8. Установка интервалов между буквами и словами
<р style="letter-spacing: Юрх;"> I married early, and was
happy to find in my wife a disposition not uncongenial with my
own.</p>
<p style="word-spacing: 0.5em;"> Observing my partiality for
domestic pets, she lost no opportunity of procuring those of
the <span class="accent">most</span> agreeable kind. We had
birds, gold fish, a fine dog, rabbits, a small monkey, and a
cat.</p>
В первом абзаце интервал между буквами будет равен 10 пикселам, а во втором
абзаце интервал между словами будет равен 0,5 единицы размера шрифта, как
показано на рисунке 9.15.
Согласитесь, результаты выглядят необычно. Хотя такие стили обычно не
используются в консервативных документах, мы можем получить представление о
реализации сложных элементов дизайна с применением подобных стилей.

Урок 9. Стилизация текста 171
I married early, and
was happy to find in
my wife a disposition
not uncongenial with
my own.
Observing my partiality for domestic pets, she
lost no opportunity of procuring those of the
most agreeable kind. We had birds, gold fish, a
fine dog, rabbits, a small monkey, and a cat.
Done af Л
Рис. 9.15. Интервалы между буквами и словами
Модификация первой буквы и первой строки текста
Можно стилизовать первую букву (буквицу) и первую строку текста,
воспользовавшись селекторами псевдоэлементов. Вы не видели этого раньше, поэтому
посмотрите:
:first-line
:first-letter
Эти селекторы присоединяются к элементу, который вы желаете стилизовать,
как показано в примере 9.9.
Пример 9.9. Использование селекторов псевдоэлементов для стилизации текста
р:first-line {font-weight: bold; color: #333}
p:first-letter {font-style: italic; color: #999}
На рисунке 9.16 продемонстрированы результаты применения этих стилей
к тексту.
woiking with style - Mozilla

172
Языки HTML и CSS
woiking with style - Mozilla
L2CI
The Black Cat
By Edgar Allen Рое
married early, and was happy to find in my wife a disposition not uncongenial with
my own. Observing my partiality for domestic pets, she lost no opportunity of procuring those of the
most agreeable kind. We had birds, gold fish, a fine dog, rabbits, a small monkey, and a cat.
his latter was a remarkably large and beautiful animal, entirely black, and
sagacious to an astonishing degree. In speaking of his intelligence, my wife, who at heart was not a
little tinctured with superstition, made frequent allusion to the ancient popular notion, which
regarded all black cats as witches in disguise. Mot that she was ever serious upon this point - and I
mention the matter at all for no better reason than that it happens, just now, to be remembered.
luto - this was the cat's name - was my favorite pet and playmate. I alone fed him,
and he attended me wherever I went about the house. It was even with difficulty that I could prevent
him from following me through the streets.
Done
Рис. 9.16. Использование селекторов псевдоэлементов
для стилизации первой строки и первой буквы текста
Использование сокращений для стилей шрифта
Для стилей шрифта, как и для фона, существует сокращенное свойство. В него
включены некоторые свойства шрифта и свойство line-height, но не
включены никакие из текстовых свойств. Более того, при использовании сокращений
для шрифта необходимо внимательно следить за очередностью значений.
Сокращенным свойством является свойство font, а порядок следования его
значений следующий: font-style, font-variant, font-weight,
font-size/line-height, font-family.
p {font: italic small-caps bold 14px/15px Arial, Helvetica,
sans-serif;}
В результате, для абзацев будет использоваться курсив, с малыми прописными
буквами, жирный, с размером шрифта 14 пикселов и междустрочным
интервалом 15 пикселов (обратите внимание на использование слэша между этими
значениями - это единственный случай, когда этот символ применяется в языке
CSS), а шрифтом будет являться шрифт Arial, Helvetica или шрифт семейства
sans-serif, используемый по умолчанию.

Урок 9. Стилизация текста
173
Если вы хотите выбросить какие-то значения, просто сохраните очередность
оставшихся значений:
р {font: bold 14px Arial, sans-serif;}
В результате для отображения текста будет использован шрифт Arial,
размером 14 пикселов и полужирным начертанием. Использовать сокращение можно в
любой момент; просто имейте в виду, что в случае со шрифтами необходимо
соблюдать очередность значений, иначе существует вероятность, что таблицы
стилей не будут функционировать.
Квантовый скачок: неподдерживаемые или плохо поддерживаемые
свойства шрифтов и текста
В текущей спецификации для шрифтов и текста существует несколько стилей,
поддержка которых реализована плохо или вообще не реализована. Мне бы
хотелось обратить на них ваше внимание, поскольку эти свойства
действительно крутые. В конечном счете поддержка данных свойств будет более
распространена.
Свойство font-size-adjust позволяет задать корректировочное
значение, чтобы все шрифты выглядели относительно одинаково с точки зрения
размеров. Это было бы очень удобно, поскольку у различных шрифтов
различные собственные размеры: безусловно, вы замечали, что шрифт Times с
размером 12 пикселов выглядит меньше, чем шрифт Arial с таким же
размером. Как только вы начнете работать с несколькими шрифтами, вероятно, у
вас появится желание сделать их визуально более одинаковыми. Установив
значение свойства font-size-adjust, размеры шрифтов будут
нормализованы, благодаря чему все шрифты стиля будут выглядеть согласованно. Вы
поймете, почему это было бы полезно.
Свойство font-stretch позволяет сжимать или растягивать текст. Свойство
полезно в том случае, когда хочется получить интересные эффекты.
Наконец, свойство text-shadow позволяет создавать для текста эффект
отбрасывания тени. Разве не круто использовать такую возможность?
Свойство позволяет указывать значения цвета и смещения, что избавит от
необходимости использования изображений в тех случаях, когда нужно
просто добавить эффект отбрасывания тени к тексту.
Теперь используйте воображение!
Я просто уверена, что теперь вы довольны! У вас есть достаточный объем знаний
для работы с изображениями, цветом и текстом, чтобы создавать действительно
прекрасные страницы или сайты.

174
Языки HTML и CSS
Конечно, мы рассмотрели далеко не все возможности языка CSS. В следующей
главе мы познакомимся со способами использования ссылок в современном Web-
дизайне. Когда-то мы были ограничены в возможностях для стилизации ссылок,
но теперь мы можем использовать множество стилей, включая разные цвета для
всех состояний, даже для состояния, когда указатель мыши наведен на ссылку.
Мы также познакомимся со списками и узнаем, как совместное использование
списков и ссылок стало основой для создания современной навигации -
вертикальной и горизонтальной, позволяя создавать удивительные интерактивные
интерфейсы с минимальным использованием или даже вообще без
использования изображений.

УРОК 10.
Эффекты ссылок, списки и навигация
Как известно из главы 2 «Добавление текста и ссылок», ссылка - это именно то
что превращает Интернет в среду. Способность перемещаться от страницы к
странице и от сайта к сайту по своему усмотрению, создала возможность
привлекать внимание к Web-сайтам, что, в свою очередь, позволило Интернету
развиваться такими быстрыми темпами.
Язык CSS использовался для стилизации ссылок со времени своего появления.
Фактически, стилизация ссылок, как и стилизация текста, до настоящего
времени является наиболее распространенным применением языка CSS. Конечно,
когда мы узнаем больше о возможностях языка CSS и как использовать эти
возможности для управления большей частью (если не полностью) визуального
представления, этот факт станет чем-то обыденным. Хотя, на данный момент,
стилизация ссылок с использованием языка CSS остается одним из наиболее широко
распространенных применений этой технологии.
С использованием языка CSS можно создавать красивые эффекты для ссылок,
включая эффекты для состояния, когда указатель мыши наведен на ссылку, что
до момента появления языка CSS приходилось реализовывать при помощи языка
JavaScript и различных изображений или при помощи Java-апплетов. При помощи
цвета и изображений можно гораздо более эффективно воспроизвести эффекты,
для создания которых требовались колоссальные усилия, и получить больше
возможностей по их управлению, не думая ни о чем, кроме чистой разметки и
использования необходимых стилей. Это позволяет создавать красивые дизайны,
которые хорошо отображаются в старых браузерах, хотя и без некоторых
возможностей, и которые полностью доступны для людей с ограниченными
возможностями.
Списки помогают организовать содержимое, а с помощью языка CSS над
списками можно выполнять множество действий. Кроме стилизации текста
списка, язык CSS можно использовать для изменения стиля отображаемых чисел
или маркеров, а также для их замены на изображение или же полностью
отказаться от них.
Весьма захватывающая возможность появляется при объединении списков и
ссылок. В результате мы получаем средства для навигации.
В этой главе мы узнаем о шрифте и стилях текста, а также о дополнительных
свойствах стиля, влияющих на текст, но не обязательно используемых только для
текста. Также мы познакомимся с дополнительными типами селекторов,
которые еще не были представлены. Какая, все-таки, разница между панелью
навигации и списком ссылок? Расположив списки и ссылки вертикально в боковом
столбце или горизонтально вдоль верха страницы, при помощи языка CSS
можно манипулировать для создания панелей навигации с богатыми возможностями
без лишних проблем.

176 Языки HTML и CSS
В этой главе мы начнем работу с создания простых стилей для ссылок, а затем
рассмотрим многочисленные стили ссылок. После этого мы узнаем, как
управлять списками при помощи языка CSS. Наконец, мы используем ссылки и списки
для создания вертикальной и горизонтальной панелей навигации. Кроме этого,
мы познакомимся как с новыми свойствами языка CSS, так и с рядом типов
селекторов, с которыми еще не работали.
Работа с состояниями ссылок
Начнем с самого важного! Несколько состояний ссылок считаются
стандартными для всех браузеров:
• 1 ink - это состояние ссылки до ее активации.
• visited - состояние, в которое переходит ссылка после ее активации.
• hover - состояние, когда указатель мыши наведен на ссылку.
• active - состояние, возникающее при щелчке на ссылке для ее активации.
Существует еще одно состояние - focus. Оно становится активным в
тот момент, когда элемент способен получать вводимые с клавиатуры
символы, например, как в случае с формой. Обычно это состояние не
используется для ссылок, но о нем все равно стоит знать.
В языке CSS состояния link и visited относятся к категории псевдоклассов,
а состояния hover и active - к категории динамических псевдоклассов. Не сложно
понять, почему состояния hover и active считаются динамическими: для их
активации пользователь должен выполнить какие-то действия. Состояния 1 ink и
visited активны до и после взаимодействия со ссылкой.
Вспомните из материала главы 9 «Стилизация текста», селекторы псевдо
элементов : first-letter и : first-line. Перед всеми псевдоселекторами ставится
двоеточие. Поэтому, для стилей ссылок доступны следующие селекторы: : 1 ink,
:visited, :hover и :active.
В примере 10.1 описываются некоторые общие стили для документа, а также
стили для всех состояний ссылки.
Пример 10.1. Стилизация ссылок с использованием селекторов псевдоклассов
и динамических псевдоклассов
body {font: 14px Georgia, Times, serif; color: white;
background-color: black;}
hi {font: 22px Arial, Helvetica, sans-serif; color: #ccc;
background-color: black; text-trans form: lowercase,-}
h2 {font: italic 20px Georgia, Times, serif; color: #ccc,-
background-color: black; text-transform: lowercase;}

Урок 10. Эффекты ссылок, списки и навигация
177
a {color: orange;}
a:link {color: orange;}
a:visited {color: yellow;}
a:hover {color: fuchsia;}
a:active {color: red;}
Обратите внимание, что описан стиль и для якорного элемента. Поскольку а - это
селектор элемента, его можно использовать для установки первоначальных
настроек, которые будут унаследованы. Псевдоклассы не наследуются по логическим
соображениям: самое главное - иметь возможность внесения изменений в стили
для каждого состояния. Однако для разных состояний могут использоваться общие
стили. В таком случае общие стили описываются для якорного элемента, а
независимые стили описываются в селекторах для каждого состояния.
На рисунке 10.1 показан документ с примененными стилями. Обратите
внимание, что указатель мыши наведен на ссылку для демонстрации изменений.
woiking with style - Mozilla
33
The Black Cat
by edgar alien рое
I married early, and was happy to find in my wife a disposition not uncongenial
with my own. Observing my partiality for domestic pets, she lost no opportunity
of procuring those of the most agreeable kind. We had birds, gold fish, a fine
http7Mt).prinh3ll com/
I
Рис. 10.1. Просмотр состояний 1 ink и hover в контексте документа
Чтобы эффекты ссылок функционировали правильно, описание их стилей
необходимо располагать в следующем порядке: link, visited, hover,
active. Другой порядок может привести к несоответствующему
поведению. Просто запомните этот порядок, как слово LVHA, или, как
популярную символику, используемую в промышленности, LoVe/HAte.
На рисунке 10.2 увеличен размер текста ссылок, чтобы более четко
продемонстрировать внешний вид каждого из состояний.
Рис. 10.2. Состояния link, visited, hover и active

178
Языки HTML и CSS
Скорее всего, вы не поймете, для какого состояния используется какой цвет, пока
не загрузите пример в браузере, но в любом случае на рисунке отчетливо видны
изменения - особенно обратите внимание на рамку вокруг активированной ссылки.
Модификация стилей ссылки
Все просто, не правда ли? Теперь мы немного углубимся и внесем изменения во
внешний вид ссылок. Обычно большинство изменений касается состояния
hover, но стилизовать можно и все остальные состояния.
Популярным подходом является использование цвета фона для состояния
hover, как показано в примере 10.2.
Пример 10.2. Добавление цвета фона к состоянию hover
a {color: orange;}
a:link {color: orange,-}
a:visited {color: yellow;}
a-.hover {color: fuchsia; background-color: white;}
a.-active {color: red;}
Когда указатель мыши проходит над ссылкой, цвет фона ссылки становится
белым, как показано на рисунке 10.3.
Рис. 10.3. Изменение цвета фона в состоянии hover
Можно также изменить жирность текста, сделав его полужирным, или изменить
его начертание и сделать курсивом, как показано в примере 10.3.
Пример 10.3. Добавление цвета фона к состоянию hover
a {color: orange;}
a:link {color: orange;}
a:visited {color: yellow;}
a:hover {color: fuchsia; font-style: italic;}
a-.active {color: red;}
Многие специалисты по удобству использования советуют избегать
кардинальных изменений в стилях состояний ссылки, поскольку это сбивает с
толку. Некоторые крайне строгие эксперты даже пропагандируют отказ
от стилизации ссылок и предлагают использовать стандартные цвета
ссылок и подчеркивание. Тем не менее, большинство дизайнеров не
согласны с более строгим подходом и предпочитают использовать стили ссылки
для улучшения дизайна. Основная проблема - найти способ сообщить
посетителю, что ссылка на самом деле является ссылкой.

Урок 10. Эффекты ссылок, списки и навигация
179
Когда указатель мыши проходит над ссылкой, текст ссылки отображается
курсивом, как показано на рисунке 10.4.
Рис. 10.4. Изменение начертания текста
на курсив в состоянии hover
Вероятно, самой распространенной модификацией является удаление
подчеркивания ссылки. Это можно выполнить для всех состояний, воспользовавшись
объявлением text-decoration: none;.
a {color: orange; text-decoration: none;}
Как отмечалось ранее, общие стили для всех состояний должны размещаться в
якорном элементе, чтобы можно было воспользоваться наследованием. Нет
необходимости добавлять это объявление ко всем псевдоселекторам, поскольку
они унаследуют правило автоматически, как показано на рисунке 10-5.
Рис. 10.5. Посмотрите-ка - подчеркивание исчезло!
Правила также можно комбинировать. Некоторым дизайнерам нравится
использовать подчеркивание только для состояния hover. Для этого в селектор : hover
добавляется объявление text-decoration: underline;, перекрывающее
унаследованное значение якорного элемента благодаря свойству специфичности
селекторов (за дополнительной информацией по специфичности обратитесь к
главе 7 «Использование языка CSS»).
happy happy happy
nappy
■ А-..JhX"'
Рис. 10.6. Состояния link, visited, hover и active
с подчеркиванием в состоянии hover
Несколько стилей ссылок
с использованием селекторов класса
Еще одна фантастическая особенность языка CSS - это возможность определять
в документе несколько стилей ссылок. Эта особенность крайне полезна, когда на
странице существуют области с совершенно другими свойствами, чем у
остальных областей. Отличный пример: область навигации с голубым фоном и область

180
Языки HTML и CSS
содержимого с белым фоном. Если использовать ссылки белого цвета на голубом
фоне, совершенно очевидно, что они не подойдут для области с белым фоном,
поскольку такие ссылки не будут видны.
Создать несколько стилей ссылок можно разными путями, включая создание
отдельных классов. Можно использовать основные стили ссылок для стандартной
области и области содержимого, а для области навигации можно создать
отдельный класс, как показано в примере 10.4.
Пример 10.4. Использование классов для создания нескольких стилей ссылок
/* default link styles, appropriate for content area -
стандартные стили ссылок, подходящие для области содержимого */
a {color: orange; text-decoration: none;}
a:link {color: orange;}
a:visited {color: yellow;}
a:hover {color: fuchsia;}
a:active {color: red;}
/* classed link styles, appropriate for navigation area - стили
ссылок в виде класса, подходящие для области навигации */
a.nav {color: white; text-decoration: none;}
a.nav:link {color: white;}
a.nav:visited {color: yellow;}
a.nav:hover {color: orange;}
a.nav:active {color: fuschia;}
Чтобы применить класс к ссылкам, к элементу ссылки необходимо добавить
атрибут class="nav":
<а class="nav" href="http://www.molly.com/">Molly.Com</a>
Был создан HTML-файл с двумя разделами, представляющими область
содержимого и область навигации, и применен класс к ссылке в области навигации, как
показано на рисунке 10.7.
Рис. 10.7. Применение нескольких стилей ссылок при помощи классов
Стилизация ссылок с использованием селекторов потомков
Конечно, использование множества классов означает не только написание
большого количества CSS-правил, но и добавление множества атрибутов class в
HTML-документ. Если необходимо стилизовать большой объем содержимого и вы

Урок 10. Эффекты ссылок, списки и навигация 181
полагаетесь на классы, в результате получится то, что промышленные
специалисты называют «везде классы» (class-it is) - чрезмерное использование классов.
Подобной ситуации можно избежать, если воспользоваться другими видами
селекторов.
Элементы можно уникально идентифицировать при помощи ID-селектора. Эти
селекторы начинаются со знака решетки, за которым следует уникальное имя -
очень похоже на то, что мы делали при создании класса:
#id-name
Существует важное отличие между селекторами класса и ID-
селекторами. Селекторы класса можно использовать в документе любое
количество раз, а ID-селекторы - только один раз. Поэтому, ID-селекторы
особенно полезны при идентификации уникальных разделов документа,
например области навигации, содержимого, верхнего и нижнего
колонтитулов. Эта технология будет широко применяться в следующих главах,
особенно в той главе, где рассматриваются CSS-макеты.
После того, как раздел документа идентифицирован, можно воспользоваться
селекторами потомков. Эти селекторы выбирают элементы, основываясь на
определенном родительском элементе. Сначала указывается имя родителя, затем
пробел и селектор элемента, для которого вы хотите определить стили: #nav a.
Данное объявление выбирает все якорные элементы, являющиеся потомками
родительского элемента с идентификатором nav. В примере 10.5
демонстрируется использование этого метода в контексте нескольких ссылок.
Пример 10.5. Несколько ссылок с ID-селекторами и селекторами потомков
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/ xhtml-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>working with style</title>
<style type="text/ess">
body {font: 14px Georgia, Times, serif; color: white;
background-color: black,-}
hi {font: 22px Arial, Helvetica, sans-serif; color: orange;
text-decoration: underline;}
h2 {font: italic 20px Georgia, Times, serif; color: #ccc,-
background-color: black; text-transform: lowercase,-}
/*link defaults*/
a {color: orange; text-decoration: none,-}
a-, link {color-, orange;}
a:visited {color: yellow,-}
a:hover {color: fuchsia; text-decoration: underline,-}
a:active {color: red;}
w

182
Языки HTML и CSS
/*link styles for all descendant links of the example2
division*/
#example2 {background-color: white; color.-black;}
#example2 a {color: lime;}
#example2 a:link {color: lime,-}
#example2 a:visited (color: red;}
#example2 a:hover {color: aqua; text-decoration: underline;}
#example2 a:active {color: fuchsia;}
</style>
</head>
<body>
<div id="examplel">
<p> I married early, and was happy to find in my wife a
disposition not uncongenial with my own. Observing my partiality for
domestic pets, she lost no opportunity of procuring those of
the <a href="http://www.prengall.com/">most</a> agreeable kind.
We had birds, gold fish, a fine dog, rabbits, a small monkey,
and a cat.</p>
</div>
<div id="example2">
<p>This latter was a <a href="http://www.prengall.com/"> re-
markably</a> large and beautiful animal, entirely black, and
sagacious to an astonishing degree. In speaking of his
intelligence, my wife, who at heart was not a little tinctured with
superstition, made frequent allusion to the ancient popular
notion, which regarded all black cats as witches in disguise. Not
that she was ever serious upon this point - and I mention the
matter at all for no better reason than that it happens, just
now, to be remembered.</p>
</div>
</body>
</html>
В данном случае, в документе существует два раздела с уникальными
идентификаторами. Поскольку для раздела examplel не определено никаких стилей ссылок,
для отображения этих ссылок будут использованы стандартные стили. Но
определены стили ссылок специально для раздела example2, поэтому эти стили будут
применены ко всем ссылкам, являющимся потомками данного раздела, как
показано на рисунке 10.8.

Урок 10. Эффекты ссылок, списки и навигация
1ВЗ
I married early, and was happy to find in my wife a disposition not uncongenial with
my own. Observing my partiality for domestic pets, she lost no opportunity of
procuring those of the most agreeable kind. We had birds, gold fish, a fine dog, rabbits
a small monkey, and a cat.
This latter was a large and beautiful animal, entirely black, and sagacious
to an astonishing degre^jfo speaking of his intelligence, my wife, who at heart was not
i little tinctured with superstition, made frequent allusion to the ancient popular
notion, which regarded all black cats as witches in disguise. Not that she was ever
serious upon this point - and I mention the matter at all for no better reason than that
it happens, just now, to be remembered.
Рис. 10.8. Применение нескольких ссылок с использованием селекторов потомков,
упрощающих как таблицы стилей на языке CSS, так и разметку,
позволяя избегать чрезмерного использования классов
Стилизация упорядоченных списков
Перейдя к спискам, мы начнем работу со стилизации упорядоченного списка. Мы
модифицируем тип маркера, а затем вообще заменим маркер изображением.
У нас есть некоторый текст, нестилизованный упорядоченный список и
определены стили фона, как показано на рисунке 10.9.
Directions To The Party!
i. From the corner of Broadway and 5th Avenue, take a right onto 5th.
2. Follow 5th North about three miles until you come to the Oak Road intersection
3. Take a right on Oak Road. Stay on Oak about five miles.
4. You'll see an intersection at Oak and Vine. Stay on Oak two more blocks.
5. Take a left onto Broome Street. We're three houses in on the right.
Рис. 10.9. Стилизованная страница с упорядоченным списком
Если вы хотите использовать альтернативный маркер, можно воспользоваться
свойством list-style-type и соответствующим значением. Существует
множество значений (большинство из которых отвечают за отображение чисел в
других языках), но в упорядоченных списках наиболее часто используются
значения leading-zero (в этом случае нумерация начинается с нуля) и lower-
roman или upper-roman (в данном случае для отображения используются
римские цифры в нижнем или верхнем регистре, соответственно). Просто добавьте
желаемое значение в существующую таблицу стилей:
ol {list-style-type: lower-roman;}
В результате, порядковые номера элементов списка будут отображены с
использованием строчных римских цифр, как показано на рисунке 10.10.

1В4
Языки HTML и CSS
Directions To The Party! i /
i. From the corner of Broadway and 5th Avenue, take a right onto 5th. V,
ii. Follow 5th North about three miles until you come to the Oak Road intersection,
iii. Take a right on Oak Road. Stay on Oak about five miles. /.
iv. You'll see an intersection at Oakand Vine. Stay on Oak two more blocks. n
v. Take a left onto Broome Street. We're three houses in on the right.
Рис. 10.10. Стилизация упорядоченного списка при помощи строчных римских цифр
Если вы хотите заменить числа изображениями, создайте изображения для всех
нужных чисел и примените классы к каждому элементу списка, чтобы получить
результаты, как показано в примере 10.6.
Пример 10.6. Использование классов для применения изображений
к упорядоченному списку
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/ xhtml-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>working with style</title>
<style type="text/css">
body {font: 14px Georgia, Times, serif; color: black;
background-image: url(balloons.gif); background-position:
right top; background-repeat: no-repeat;}
hi {font: 22px Arial, Helvetica, sans-serif; color: orange;
text-decoration: underline; text-transform: capitalize;}
h2 {font: italic 20px Georgia, Times, serif; color: red;
text-transform: lowercase;}
.listl {list-style-image: url(l.gif);}
.Iist2 {list-style-image: url(2.gif);}
.list3 {list-style-image: url(3.gif);}
</style>
</head>
<body>
<hl>Directions to the Party!</hl>
<ol>
<li class=nlistln>From the corner of Broadway and 5th Avenue,
take a right onto 5th.</li>
<li class=nlist2n>Follow 5th North about three miles until you
come to the Oak Road intersection.</li>
<li class="list3n>Take a right on Oak Road. Stay on Oak about
five miles.</li>
</ol>
</body>
</html>

Урок 10. Эффекты ссылок, списки и навигация
1В5
В этом примере показан не только существенный CSS-код, но и все правила,
которые я создала для остальных стилей страницы, как показано на рисунке 10.11.
Directions To The Party!
'■ From the corner of Broadway and 5th Avenue, take a right onto 5th
*• Follow 5th North about three miles until you come to the Oak Road intersection
J- Take a right on Oak Road. Stay on Oak about five miles, t. ,
■w
Рис. 10.11. Добавление графических изображений с числами
к элементам списка с использованием классов
Можно также изменить положение упорядоченных и неупорядоченных
списков. Мы займемся этим в следующем разделе.
Стилизация неупорядоченных списков
Как и в случае с упорядоченными списками, можно изменить вид маркера,
заменить его изображением, а также модифицировать позицию маркера
относительно текста.
Маркеры неупорядоченного списка можно стилизовать с использованием трех
ключевых слов: disc, circle или square, как показано в примере 10.7.
Пример 10.7. Встроенные стили демонстрируют использование
трех ключевых слов для стилизации маркеров неупорядоченных списков
<h2>What to Bring:</h2>
<ul>
<li style="list-style-type: disc;">A beverage of choice.</li>
<li style="list-style-type: circle;">Munchies.</li>
<li style="list-style-type:Bguare;">Music and movies.</li>
</ul>
На рисунке 10.12 показаны красивые результаты.

1В6
Языки HTML и CSS
what to bring:
• A beverage of choice.
о Munchies.
■ Music and movies.
Рис. 10.12. Демонстрация результатов использования ключевых слов disc, circle
и square - обратите внимание, что в некоторых браузерах вид маркеров может быть
немного другим, однако общие возможности сохраняются
Если вы хотите заменить маркер собственным изображением, создайте
изображение и добавьте его при помощи свойства list-style-image, как показано в
примере 10.8.
Пример 10.8. Просмотр исходного кода завершенного документа,
в котором используются маркеры-изображения
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/ xhtml-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>working with style</title>
<style type="text/ess">
body {font: 14px Georgia, Times, serif; color: black;
background-image: url(balloons.gif); background-position: right
top; background-repeat: no-repeat;}
hi {font: italic 20px Georgia, Times, serif; color: red;
text-transform: lowercase;}
ul {list-style-image: url(bullet.gif);}
</style>
</head>
<body>
<hl>What to Bring:</hl>
<ul>
<li>A beverage of choice.</li>
<li>Munchies.</li>
<li>Music and movies.</li>
</ul>
</body>
</html>
Здесь не нужны классы; требуется всего одно изображение. Это изображение
заменит маркер, как показано на рисунке 10.13.

Урок 10. Эффекты ссылок, списки и навигация
1В7
what to bring:
ki A beverage of choice.
О Munchies.
v Music and movies.
II 4
Рис. 10.13. Использование изображений вместо текстовых маркеров
для изменения внешнего вида буллитов
Можно использовать еще одно свойство списка list-style-position, которое
может принимать значение outside или inside. Значение outside размещает
маркер за пределами блока, поэтому при переносе строки к новой строке
добавляется отступ - обычное поведение списка. При использовании значения
inside, отступ к новой строке не добавляется, как показано на рисунке 10.14.
♦ A beverage
of choice.
♦ A beverage
of choice.
Рис. 10.14. В верхнем варианте для свойства list-style-position
используется значение outside, а в нижнем - значение inside
Сокращения языка CSS для стилей списка
Еще одним свойством-сокращением является свойство list-style. Оно
объединяет в себе свойства списка и позволяет создавать их с использованием
сокращенной формы записи, как показано в примере 10.9.
Пример 10.9. Использование свойства-сокращения list-style
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/ xhtml-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>working with style</title>
<style type="text/css">

1ВВ
Языки HTML и CSS
body {font: 14px Georgia, Times, serif; color: black;
background-image: url(balloons.gif); background-position:
right top,- background-repeat: no-repeat;}
hi {font: italic 20px Georgia, Times, serif; color: red;
text-transform: lowercase;}
ul {list-style: url(arrow.gif) inside;}
</style>
</head>
<body>
<hl>What to Bring:</hl>
<ul>
<li>A beverage <br /> of choice.</li>
<li>Munchies.</li>
<li>Music <br /> and movies.</li>
</ul>
</body>
</html>
В данном случае был стилизован элемент ul с использованием изображения и
изменения положения. Если вы не хотите использовать изображение, его можно
заменить на ключевое слово. Обратите внимание, что специально вставлены
разрывы строк, чтобы продемонстрировать влияние значения inside, как
показано на рисунке 10.15.
what to bring:
**- A beverage
of choice.
**- Munchies.
*- Music
and movies.
Г7^\
^/}j
s/1
' //
* b
Рис. 10.15. Стилизация списка с использованием
свойства-сокращения list-s tyl e
Вертикальная панель навигации
на основе списка с использованием цвета
При объединении ссылок и списков для создания панели навигации, ситуация
становится действительно захватывающей. Мы начнем со стилизации простого
списка и избавимся от маркеров, воспользовавшись свойством list-style-
type и значением попе. Это объявление удалит все маркеры, оставив список
ссылок, как показано в примере 10.10.

Урок 10. Эффекты ссылок, списки и навигация
189
Пример 10.10. Стилизация списка ссылок
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/ xhtml-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>working with style</title>
<style type="text/ess">
body {font: 14px Georgia, Times, serif; color: black;}
ul {list-style-type: none;}
a {color: orange; text-decoration: none;}
a:link {color: orange;}
a:visited {color: yellow;}
a:hover {color: fuchsia; text-decoration: underline;}
/*font-style: italic; font-weight: bold; background-color: aqua,-*/
a:active {color: red;}
</style>
</head>
<body>
<ul>
<li><a href="home.html">Home</ax/li>
<lixa href ="products.html">Products</ax/li>
<li><a href="services.html">Services</a></li>
<lixa href="about.html">About Us</ax/li>
<lixa href ="contact.html">Contact</ax/li>
</ul>
</body>
</html>
На рисунке 10.16 показан список стилизованных ссылок без маркеров.
Ноте
Products
Services
About Us
Contact
Рис. 10.16. Простая вертикальная навигация
на основе списка со стилизованными ссылками
Да, это не слишком красиво. Подождите! Все станет на свои места.
Воспользовавшись набором стилей, включающим эффекты границ и отступы (за
дополнительной информацией обратитесь к главе 11 «Поля, границы и отступы»), в
простую панель навигации можно добавить множество вещей. Можно также
использовать цвета фона и изображения, чтобы сделать список визуально более
интересным, как показано в примере 10.11.

190
Языки HTML и CSS
Пример 10.11. Добавление стилей к списку
body {font: 14px Georgia, Times, serif; color: black;}
ul {list-style-type: none; padding: 0; width: lOOpx;
background-image: url(swirls.gif); border: 2px solid orange;}
li {padding-left: 5px; padding-bottom: 5px; border-bottom:
lpx solid orange;}
a {color: orange; text-decoration: none;}
a:link {color: orange;}
a:visited {color: yellow;}
a:hover {color: fuchsia;}
a:active {color: red;}
Да, определенно, этот список стал выглядеть более интересно, как показано на
рисунке 10.17.
Ноте
Products
Services
About I
Conta.
cfr
Рис. 10.17. Теперь выглядит, как панель навигации
По мере использования различных стилей для навигации, вы обнаружите
■* отличия в способах обработки браузерами стилизованных списков.
Например, браузеры Mozilla и Mozilla Firefox тщательно интерпретируют
отступы и ширину, а браузер IE стремится быть более прощающим.
Вертикальная панель навигации
на основе списка с эффектами изображения
Воспользовавшись фоновым изображением и селектором :hover, можно создать
список навигации, в котором у каждого элемента будет привлекательный фон.
Для впечатляющих результатов нужно добавить контрастное фоновое
изображение для состояния hover, как показано в примере 10.12.
Пример 10.12. Использование фоновых изображений
для создания сложных эффектов навигации
body {font: bold 15px Georgia, Times, serif; color: black;}
a {color: white; text-decoration: none; display: block;}
a:link {color: white;}
a:visited {color: yellow;}
a:hover {color: white; background-image: url(linkgover.gif);}
a:active {color: red;}

Урок 10. Эффекты ссылок, списки и навигация 191
#nav, #nav a, #nav li {width: lOOpx; margin: 0; padding: 0;
list-style-type: none;}
li {background-image: url (linkback.gif) ,- border-bottom: 3px
solid white;}
Обратите внимание, что установлено фоновое изображение как для элемента
списка, так и для состояния hover. В результате будет получена панель
навигации с роскошным дизайном и профессиональными визуальными эффектами, как
показано на рисунке 10.18.
1^ working with style - Mozila
у.::'
Т^ГТДЯД
^«•^i.iaixf
> i
Рис. 10.18. Добавление фоновых изображений к элементам списка
и состоянию hover для создания насыщенных графикой эффектов,
которые раньше было невозможно создать без использования языка JavaScript
Значение свойства display якорного элемента с inline (в тексте)
изменено на block (за элементом добавляется разрыв строки). Это
необходимо, чтобы ширина якорного элемента соответствовала ширине
элемента списка. Благодаря этому, фоновое изображение состояния
hover будет отображаться корректно во всех браузерах.
Горизонтальная панель навигации
на основе списка с использованием цвета
В последнем разделе мы использовали объявление display: block;, чтобы
превратить якорный элемент из встроенного элемента в блочный. Воспользовавшись
объявлением display: inline;, можно сделать так, чтобы списки являлись
встроенными, то есть отображались горизонтально, как показано в примере 10.13.
Пример 10.13. Разметка и CSS-cmwiu для горизонтальной панели навигации
на основе списка с использованием цветовых эффектов
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/ xhtml-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>working with style</title>

192
Языки HTML и CSS
<style type="text/ess">
body {font: 14px Georgia, Times, serif; color: black;}
ulttnavlist {margin-left: 0; padding-left: 0,- white-space:
nowrap,-}
ttnavlist li (display: inline; list-style-type: none;}
ttnavlist a {padding: 3px lOpx;}
ttnavlist a:link, ttnavlist a:visited {color: white;
background-color: orange; text-decoration: none;}
ttnavlist a:hover {color: orange; background-color: yellow;
text-decoration: none,-}
</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<lixa href ="home.html">Home</a></li>
<lixa href ="products.html">Products</a></li>
<li><a href ="services.html">Services</ax/li>
<lixa href= "about.html">About Us</ax/li>
<lixa href="contact.html">Contact</ax/li>
</ul>
</div>
</body>
</html>
В результате будет получена очень красивая горизонтальная панель навигации,
как показано на рисунке 10.19.
Рис. 10.19. Использование списка и цветовых эффектов
для получения горизонтальной панели навигации на основе списка
Горизонтальная панель навигации
на основе списка с изображениями
Точно такое же переключение фоновых изображений, которое использовалось
в вертикальных списках, можно применить и для горизонтальных списков. Я
немного изменила предыдущую таблицу стилей, добавив фоновые изображения
к состояниям link и hover. Затем я использовала полужирный шрифт белого
цвета для состояний link и hover, чтобы добиться хорошего контраста при
переключении изображений, когда указатель мыши наведен на ссылку, как
показано в примере 10.14.

Урок 10. Эффекты ссылок, списки и навигация
193
Пример 10.14. Панель навигации на основе списка
с использованием фоновых изображений
body {font: 14px Georgia, Times, serif; color: black;}
ulttnavlist {margin-left: 0,- padding-left: 0; white-space:
nowrap;}
ttnavlist li {display: inline; list-style-type: none,-}
#navlist a {padding: 3px lOpx;}
#navlist a: link, ttnavlist a:visited {color: white,-
background-image: url (linkback.gif) ,- text-decoration: none;}
#navlist a-.hover {color: white; background-image:
url (linkhover.gif) ,- text-decoration: none,-}
На рисунке 10.20 представлена элегантная схема навигации.
Ь "
Рис. 10.20. Горизонтальная панель навигации на основе списка
с использованием переключения изображений
Квантовый скачок: состояние hover и браузер Internet Explorer
Используя списки для создания панелей навигации, особенно горизонтальные
списки, вы обнаружите, что существуют поразительные отличия в способе
обработки стилей браузером Internet Explorer в сравнении с браузерами Mozilla,
Firefox, Opera и Safari. К сожалению, браузер Internet Explorer не обновлялся
годами, и в версии 6.0 для операционной системы Windows отсутствует
существенная поддержка языка CSS. В результате, приходится создавать обходные
стили, чтобы гарантировать, что ваша работа будет отлично выглядеть в
максимально возможном диапазоне браузеров (которые описанные здесь).
Существенная проблема браузера IE заключается в том, что селектор :hover
поддерживается только для якорного элемента, хотя остальные браузеры
поддерживают этот селектор для любого элемента. Если бы эта поддержка была
реализована в браузере IE, было бы меньше путаницы и неразберихи при
работе с навигацией на основе списков - не говоря уже о большом количестве
дополнительных возможностей для динамической стилизации списков без
необходимости использования языка JavaScript. Чтобы больше узнать о
динамической навигации на основе списков, например ниспадающей или
плавающей навигации, не работающей в браузере IE, обратитесь к статье «CSS Edge»
Эрика Мейера (Eric Meyer) по адресу http://www.meyerweb.com/eric/css/edge/.
7-1Э56

194 Языки HTML и CSS
Роскошные ссылки, списки и навигация
Необходимо обратить внимание, что методы, используемые в этой главе,
особенно метод применения списков для навигации, являются относительно новой
концепцией в Web-дизайне. Абсолютный факт, что язык CSS позволяет изменять
представление элемента, сводит к минимуму использование изображений для
эффектов.
Узнайте все о CSS-списках на сайте Listamatic - учебное пособие и галерея
лучших навигаций с использованием языка CSS - по адресу
http://css.maxdesign.com.au/listamatic/.
Если вы заинтересуетесь программой, позволяющей создавать некоторые из
этих списков онлайн, посетите страницу List-O-Matic, расположенную по
адресу http://www.accessify.conVtools-and-wizards/Iist-o-matic/list-o-matic.asp.
В следующей главе мы подробнее остановимся на управлении краями и
отступами, что важно для получения контроля над визуальными элементами страницы.
Это поможет нам продолжить изучение более сложных аспектов языка CSS:
разработка макетов страниц.

урок п.
Поля, границы и отступы
Одной из потрясающих возможностей языка CSS является стилизация полей,
границ и отступов. И дело даже не в том, что мы можем стилизовать подобные
детали, а в гибкости, которую мы получаем при использовании стилей.
Считается, что в визуальной модели языка CSS у всех элементов существуют
поля, границы и отступы. Такое возможно благодаря тому, что каждый элемент
формирует блок. Существуют два типа блоков: отдельные блоки (относящиеся
к элементам блочного уровня) и строчные блоки (относящиеся к внутри-
строчным блокам). На рисунке 11.1 показана разница между ними.
Рис. 11.1. Изучение блоков визуальной модели языка CSS
Светло-серый цвет использован для фона, чтобы визуально выделить отдельные
и строчные блоки. Заголовок h2 является отдельным блоком. Ширина блока
равна ширине доступного пространства браузера (шириной блока можно
управлять при помощи свойства width), а с правого края блока размещается разрыв
строки. Строчный блок представлен ссылкой и размещен на одной строке с
окружающим его текстом. Несложно заметить, что его края находятся в
непосредственной близости от содержимого.
Воспользовавшись визуальной моделью языка CSS, известной как блочная модель,
можно применять стили к различным частям блока. Я продемонстрирую
блочную модель в следующем разделе главы, чтобы стало понятным, как эта модель
работает, однако сейчас важно понять, что стилизовать можно не только все
стороны данного блока, но и отдельные стороны.
Поля предоставляют возможность управления полями блока с использованием
как положительных, так и отрицательных значений. Границы позволяют
стилизовать границу блока с использованием предопределенных стилей, а отступы
позволяют добавлять в блок отступы (очень похоже на атрибут cellpaddmg
элемента table). Возможность стилизовать перечисленные аспекты любого
элемента - это одна из причин, по которым язык CSS, с точки зрения
возможности применения стилей к страницам и гибкого управления, является гораздо
более мощным, чем все прежние доступные технологии.

196
Языки HTML и CSS
Исследование блочной модели
Блочная модель - это стандартизированная часть технологии, используемой
в браузерах. Консорциум W3C наблюдает за реализацией стандартов в браузерах,
и поэтому разработал блочную модель, представленную на рисунке 11.2.
Поле (прозрачное)
г
Граница
Отступ
Содержимое
~1
J
— — — Край поля
■ Край границы
Край отступа
Край содержимого
Рис. 11.2. Блочная модель, разработанная консорциумом W3C
Сравните этот рисунок с рисунком 11.1 и мысленно представьте на выделенном
фоне каждого блока все перечисленные части: поля, границы, отступы и область
содержимого. Понимание данного соответствия окажет огромную помощь как
при изучении данной главы, так и последующих глав.
Квантовый скачок: блочная модель в CSS-лизайне
На протяжении всех оставшихся глав мы будем работать с аспектами
блочной модели. Поскольку язык CSS в большинстве своем используется для
визуальной стилизации, понимание блочной модели и способа ее
интерпретации или неправильной интерпретации браузерами становится ключевым
моментом при изучении и, в свою очередь, применении языка CSS к
страницам. В главе 12 «Позиционирование, плавающее размещение и Z-индекс» мы
узнаем, что блочная модель касается не только стилизации полей, границ и
отступов, но и использования языка CSS в качестве инструмента
позиционирования для создания макетов.

Урок 11. Поля, границы и отступы 197
Использование полей
Стилизация полей чаще всего используется для управления расстоянием между
элементами. Обратите внимание, что по умолчанию вокруг содержимого, при
отображении в Web-браузерах, существует определенное пространство, как
показано на рисунке 11.1. Этим пространством можно управлять, изменяя значения
полей элемента body, как показано в примере 11.1.
Пример 11.1. Установка значений полей для элемента body
body {font: 14px Verdana, Arial, Helvetica, sans-serif; color:
white; background-color: black; margin-top: 0; margin-left: 0;
border: 2px solid white;}
hi {font-size: 24px; color: orange;}
h2 {font: italic 20px Georgia, Times, serif; color: #999;
text-indent: 15px;}
Заметьте, что после О значение длины, например рх или ет, не
указывается, поскольку для значения О длина не требуется; это подразумеваемое
значение.
После установки значения верхнего и левого полей элемента body в 0, все
содержимое элемента body сместится вместе с его дочерними элементами, как
показано на рисунке 11.3.
Рис. 11.3. Задание нулевых значений для верхнего и левого полей элемента
body - обратите внимание, что белая граница вокруг элемента body
прижата к верхней и левой стороне области просмотра
Посмотрите на рисунок 11.3 и обратите внимание, что все дочерние элементы
прижаты к левой стороне, кроме элемента h2, у которого значение свойства
text-indent равняется 15 пикселам. Однако у элемента абзаца и элемента hi,
которые являются дочерними элементами элемента body, значения полей не
заданы, поэтому они прижаты к левой и верхней стороне. Или нет? Что это за
расстояние между элементом hi и внешней границей элемента body? Хотя

198
Языки HTML и CSS
очевидно, что элемент body прижат к верхней стороне окна просмотра, этого не
скажешь об элементе hi. Чтобы первый элемент был прижат к верхней границе
родительского элемента, в браузерах Mozilla предполагается, что значение
свойства margin-top для первого элемента должно быть равным 0. В браузере Internet
Explorer данное предположение игнорируется и в результате элемент hi, как и
остальные элементы, прижимается к верхней и левой стороне элемента body.
В примере 11.2 приведены стили, которые созданы для демонстрации
использования полей для элементов, включая обнуление значения поля для элемента hi.
Пример 11.2. Установка ряда полей и значений для демонстрации их использования
body {font: 14px Verdana, Arial, Helvetica, sans-serif; color:
white; background-color: black; margin-top: 0; margin-right: 0;
margin-bottom: 0; margin-left: 0; border: 2px solid white;}
hi {font-size: 24px; color: orange; margin-top: 0;
margin-right: lOOpx; border: 2px solid white;}
h2 {font: italic 20px Georgia, Times, serif; color: #999;
text-indent: 15px;}
p (margin-left: lOOpx; margin-top: 5px; margin-bottom: 0;
border: 2px solid yellow;}
На рисунке 11.4 показано, как применяются поля. Отображение некоторых
границ включено для визуализации полей. Подробнее о границах мы узнаем далее
в этой главе.
Рис. 11.4. Использование полей для ряда элементов,
вклкгчая элементы body, hi и элементы абзаца

Урок 11. Поля, границы и отступы
199
Использование отрицательных значений
при указании полей
При указании полей можно использовать отрицательные значения. Этот способ
полезен для решения определенных дизайнерских задач, но его следует
использовать с осторожностью, поскольку браузеры обрабатывают отрицательные
значения полей по-разному.
В основном, отрицательные значения полей используются для выполнения
коррекции внешнего вида дизайна, создания обходных путей при
центрировании текучих дизайнов в макете или для вынесения определенных элементов за
пределы блока, в котором они находятся, как показано в примере 11.3.
Пример 11.3. Использование отрицательных значений полей
для вынесения содержимого за пределы элемента-контейнера
body {font: 14px Verdana, Arial, Helvetica, sans-serif; color:
white; background-color: black; margin-top: 30px; margin-right:
30px; margin-bottom: 30px; margin-left: 130px; border: 2px
solid white;}
p {margin-left: -65px; margin-top: 5px; margin-bottom: 0;}
Теперь поля абзаца смещены относительно левого поля элемента body, как
показано на рисунке 11.5.
р wofking with style - MoziUa •* * . -
I married early, and was happy to find In my wife a disposition not uncongenial with my own,
Observd j my partiality for domestic pets, she lost no opportunity of procuring those of the most
agreeabk kind. We had birds, gold fish, a fine dog, rabbits, a small monkey, and a cat.
This latU ■ was a remarkably large and beautiful animal, entirely black, and sagacious to an
astonisri lg degree. In speaking of his Intelligence, my wife, who at heart was not a tittle tinctured
with sup rstltion, made frequent allusion to the ancient popular notion, which regarded all black
cats as »itches In disguise. Not that she was ever senous upon this point - and I mention the
matter a all for no better reason than that It happens, just now, to be remembered.
Pluto - tt is was the cat's name - was my favorite pet and playmate. I alone fed him, and he
attended me wherever I went about the house. It was even with difficulty that I could prevent him
from foil ■•' " ■■" ■—-■■-
Рис. 11.5. Использование отрицательных
значений полей для вынесения содержимого за пределы
блока-контейнера - в данном случае, элемента body

200
Языки HTML и CSS
Квантовый скачок: решения с использованием отрицательных
значений полей для дизайнеров
Если вы заинтересовались использованием отрицательных значений полей
для решения известных дизайнерских задач, в Интернете существует
несколько отличных статей. Статья Райана Брила (Ryan Brill) «Creating
Liquid Layouts with Negative Margins» - прочитайте ее сейчас или
отложите, пока не познакомитесь со следующими двумя главами (статья находится
по адресу http://www.alisapart.com/articles/negativemargins/). При помощи
отрицательных значений полей также можно центрировать элементы, что
описывается в статье Роба Чанданайз (Rob Chandanais) по адресу
http://www.bluerobot.com/web/css/center2.html. Как и в случае с множеством
других проблем языка CSS, способы реализации свойства браузерами
отличаются. Отрицательные значения полей попадают в эту категорию,
поскольку эти значения интерпретируются по-разному различными
браузерами. Поэтому, используйте отрицательные значения с осторожностью -
хороший практический совет: если существует более простой способ для
достижения цели, используйте его.
Свойство-сокрашение margin
У свойств полей существует сокращенный эквивалент - свойство margin.
Обратите внимание, что свойства-сокращения языка CSS имеют собственные
причуды, например порядок значений. Свойство margin - не исключение.
При использовании свойства margin значения полей задаются именно в этом
порядке: верх, право, низ, лево. Популярная символика, используемая в
индустрии, - «TRouBLe». В примере 11.3 установлены все «полноформатные»
свойства для элемента body:
body {margin-top: ЗОрх; margin-right: ЗОрх; margin-bottom:
ЗОрх; margin-left: 130px;}
Хотя «полноформатные» свойства необязательно указывать в определенном для
полей порядке, полагаю, вам будет полезно увидеть, как этот «полноформатный»
стиль преобразуется в сокращенную запись:
body {margin: ЗОрх ЗОрх ЗОрх 130рх;}
Обратите внимание, что значения не разделяются запятыми и все значения будут
применены в порядке TRBL.
Постойте, есть еще кое-что. Сокращенную форму записи можно сократить еще
больше, основываясь на том факте, что если не указано значение для какой-либо
стороны, автоматически будет использовано значение для противоположной
стороны:
body {margin: ЗОрх 20рх;}

Урок 11. Поля, границы и отступы
201
Б результате значения полей сверху и снизу будут равны 30 пикселам, а справа
и слева - 20 пикселам. Но что произойдет, если указать три значения?
body {margin: ЗОрх 20рх 70рх;}
Значение левого поля будет взято из значения правого поля, поэтому в
результате получим: значение верхнего поля - 30 пикселов, правого - 20 пикселов,
нижнего - 70 пикселов, левого - 20 пикселов.
Если значения всех полей одинаковы, просто укажите это значение:
body {margin: ЮОрх; }
В результате значения всех полей элемента body будут равны 100 пикселам.
Можно также использовать значения, выраженные в процентах:
body {margin: 2 0%;}
В результате значения всех полей элемента body будут равны 20%. Наконец,
запомните, что для значения 0 не нужно указывать длину или проценты:
body {margin: 0 ЗОрх 20рх 0;}
Стилизация границ
В предыдущих главах использованы границы, чтобы помочь вам наглядно
представить концепции языка CSS. В этой части мы рассмотрим подробности
стилизации границ.
Стилизация границ включает в себя стилизацию сторон, толщины, начертания и
цвета. Для этого используются различные свойства границы: border-width,
border-style и border-color. Сторона границы указывается между двумя
составляющими названия свойства: border-left-color, border-right-style
и border-top-width. Более изящный подход по использованию свойств
границы описан в части «Свойство-сокращение border» этой главы.
Толщина границы
Толщину границы можно указать с использованием значений длины,
например пикселов или единиц размеров шрифта или ключевых слов thin, medium
или thick:
border-bottom-width: 2рх;
border-left-width: thick,-
Начертание границы
А вот это действительно забавно. В настоящее время восемь значений отвечают
за необычное начертание границы, а два дополнительных значения
используются для свойства border-style, как показано в таблице 11.1.

202
Языки HTML и CSS
Табл. 11.1. Начертания границ в языке CSS
Стиль
dotted
dashed
solid
double
groove
ridge
inset
outset
hidden
none
Эффект
Ряд точек
Ряд штрихов
Сплошная линия
Две сплошные линии
Углубление на холсте
Выступ на холсте
Врезанный вид
Рельефный вид
Скрытая граница, которую можно отобразить при помощи скрипта
Граница никогда не будет видна
А вот пример использования свойства начертания границы и соответствующего
значения:
border-right-style: dotted
1Лвет границы
Цвета можно задавать при помощи любых доступных значений:
шестнадцатеричных, сокращенных шестнадцатеричных, RGB-значений, RGB-процентов
и поддерживаемых названий цветов:
border-top-color: #808080;
А теперь все вместе!
В примере 11.4 продемонстрировано использование различных комбинаций
свойств границы.
Пример 11.4. Комбинирование стилей свойств границы
body {font: 14px Verdana, Arial, Helvetica, sans-serif; color:
white,- background-color: black; margin-top: 0;}
hi {font-size: 24px,- color: orange; border-left-width: 3px;
border-left-color: red; border-left-style: dotted;

Урок 11. Поля, границы и отступы
203
border-bottom-width: thick; border-bottom-color: lime-
border-bottom- style : insert;}
h2 {font: italic 20px Georgia, Times, serif; color: #999;
text-indent: 15px; border-bottom: thin; border-bottom-
style :dotted; border-color: fuschia;}
p {border-left-widht: medium; border-left-style: solid;
border-left-color: blue;}
Результаты использования всех стилей границы показаны на рисунке 11.6.
■.«*2LZ?i£2r ■"J.J.'ilijajjj
^ working with style - Microsoft Internet Explorer.
File Edit View Favorites Tools Help
The Black Cat
By Edgar Allen Poe
II married early, and was happy to find in my wife a disposition not uncongenial with my own.
Observing my partiality for domestic pets, she lost no opportunity of procuring those of the
most agreeable kind. We had birds, gold fish, a fine dog, rabbits, a small monkey, and a cat.
This latter was a remarkably large and beautiful animal, entirely black, and sagacious to an
astonishing degree. In speaking of his intelligence, my wife, who at heart was not a little
tinctured with superstition, made frequent allusion to the ancient popular notion, which
regarded all black cats as witches in disguise. Not that she was ever serious upon this point -
and I mention the matter at all for no better reason than that it happens, just now, to be
remembered. i
jPluto - this was the cat's name - was my favorite pet and playmate. I alone fed him, and he
[attended me wherever I went about the house. It was even with difficulty that I could prevent
.him from following me through the streets.
Рис. 11.6. Применение границ для определенных сторон
и использование значений толщины, начертания и цвета
Свойство-сокрашение border
Свойство-сокращение border - это наиболее расширенное сокращение,
используемое для отдельного свойства. Существует несколько вариантов сокращений.
Сокращенная форма записи для стороны, толщины,
начертания и цвета
У каждой категории сокращений существует соответствующая сокращенная
форма записи, как показано ниже:
border-right, border-left, border-top, border-bottom
border-width
border-style

204 Языки HTML и CSS
border-color
Поэтому можно записать так:
border-right: lpx dotted red;
Правая граница элемента с указанным свойством будет обладать следующими
характеристиками: толщина 1 пиксел, пунктирная, красного цвета.
Свойство border
Это свойство-сокращение устанавливает толщину, начертание и цвет для всех
четырех сторон границы выбранного элемента:
border: thick ridge white,-
Результаты показаны на рисунке 11.7.
Рис. 11.7. Использование свойства-сокращения border
В отличие от полей (и отступов) в самом свойстве border нельзя
указать различную толщину для сторон. Если вы хотите стилизовать одну
сторону границы совершенно иначе, чем три остальные стороны, просто
добавьте еще одно правило, воспользовавшись «полнсформатным»
свойством, например border-right-width.
Использование отступов
Отступы позволяют стилизовать промежуток между содержимым и его границей.
Обратите внимание, что в предыдущих примерах этой главы элементы были
прижаты к своим границам и полям. Отступы помогают решить эту проблему.
Отступ можно добавить к любой отдельной стороне, используя значения длины,
например пикселы или проценты. Существуют следующие отдельные свойства
отступа: padding-top, padding-right, padding-bottom и padding-left.
Использование каждого из этих свойств продемонстрировано в примере 11.5.
Пример 11.5. Использование свойств отступа для добавления пустого пространства
body {font: 14px Verdana, Arial, Helvetica, sans-serif; color:
white; background-color: black; margin-top: lOpx;}
hi {font-size: 24px; color: orange; border-bottom: 2px dotted
lime; padding-bottom: lOpx;}

Урок 11. Поля, границы и отступы
205
h2 {font: italic 20px Georgia, Times, serif; color: #ccc-
text-indent: 15px;}
p {border: thin solid orange; padding-top: 15px; padding-right:
30px; padding-bottom: 0; padding-left: 30px;}
Обратите внимание, как отступ отделяет текст элемента hi от границы,
а также на отступы сверху, справа, снизу и слева элемента абзаца, как
показано на рисунке 11.8.
woiking with style ■ Mozilla
The Black Cat
By Edgar Allen Рое
I married early, and was happy to find In
my wife a disposition not uncongenial
with my own. Observing my partiality for
domestic pets, she lost no opportunity
of procuring those of the most agreeable
kind. We had birds, gold fish, a fine dog,
. and a cat
а.Ч •ДЁЯЕжчШуАН RUli&i i
:jxj
Рис. 11.8. Использование отступа
для добавления пустого пространства
Свойство-сокращение padding
Для задания отступов можно также применять сокращенную форму записи,
используя свойство padding. Сокращенная форма записи для задания отступов
очень сильно похожа на сокращенную форму записи для заданий полей.
Это означает, что важен порядок указания значений, иначе вы очень быстро
столкнетесь с проблемой (TRouBLe)! Для функционирования механизма
сокращенной записи необходимо размещать значения в следующем порядке: верхняя
сторона, правая сторона, нижняя сторона, левая сторона:
р {padding: 15px ЗОрх 25рх 0;}
Данное правило установит следующие отступы для абзаца: 15 пикселов сверху,
30 пикселов справа, 25 пикселов снизу и 0 пикселов слева, как показано на
рисунке 11.9.

206
Языки HTML и CSS
Рис. 11.9. Использование свойства-сокращения padding
для управления отступами абзаца
Можно также использовать комбинации из двух и трех значений - принцип
применения значений точно такой, как для свойства-сокращения margin,
описанного ранее в этой главе. Наконец, если указано всего лишь одно значение, оно будет
применено ко всем четырем сторонам блока элемента.
Получение большего контроля...
Безусловно, начало изучения блочной модели и понимание принципов работы
элементов языка CSS переносит вас еще дальше по пути к получению большего
контроля над дизайнами.
Я хочу вам напомнить о важности корректной структуры документа. Из-за
технологии переключения режимов браузера в соответствии с объявлениями
DOCTYPE, необходимо убедиться, что используется корректное объявление
DOCTYPE, позволяющее избежать проблем с блочной моделью в браузере IE 6.O.
Если вы использовали методы, описанные в данной книге, вам об этом не нужно
беспокоиться. Понятно? В моем помешательстве на самом деле есть логика.
В следующей главе мы познакомимся с чашей Грааля языка CSS:
позиционированием. Вы готовы? Тогда поехали!

УРОК 12.
Позиционирование, плавающее
размещение и Z-инлекс
Если вы с пользой провели время, добавляя на страницы цвета, фоны, текстовые
стили и поля, то веселье только началось. Мы углубим наши знания (которые к
данному моменту уже должны быть достаточно твердыми), чтобы использовать
наиболее важные аспекты языка CSS, применяемые на протяжении последних
нескольких лет.
Комбинация технологий, с которыми мы познакомимся в этой главе, формирует
основу, необходимую для создания великолепных CSS-макетов, а не макетов на
основе таблиц, так часто обсуждаемых в этой книге. К счастью, в современных
браузерах поддержка языка CSS выполнена достаточно неплохо - и у нас
накоплено достаточно знаний для применения обходных путей. Все это позволяет
применять описываемые методики для создания потрясающих страниц.
Позиционирование относится к схеме языка CSS, которая позволяет использовать
элементы для создания блоков и перемещать эти блоки относительно документа
или браузера. Мы узнаем, что это за схемы и как их применять.
Плавающее размещение относится к методике языка CSS, которая позволяет
располагать элемент справа или слева. Текст документа может обтекать данный
элемент. Вероятнее всего, вы знакомы с этим на примере изображений.
Плавающее изображение можно выровнять по правому краю и текст будет обтекать
изображение. Добавьте небольшой отступ и получите отличный внешний вид.
Применение плавающего размещения связано с использованием плавающих
элементов div, позволяющих употреблять плавающие блоки для навигации или,
что даже более рискованно, для создания нескольких столбцов, которые можно
использовать, с позиционированием или без него, в дизайне различных макетов.
Z-индекс служит способом размещения блоков элементов вдоль оси z. Пока
было рассказано только про оси х и у - ось х отвечает за горизонтальное
размещение, а ось у - за вертикальное. Ось z представляет третье измерение.
Представьте это следующим образом: вы держите перед собой колоду карт.
Порядок, в котором располагаются карты от самой ближней и до самой дальней, -
отличная аналогия с z-индексом. Используя z-индекс, можно буквально
накладывать элементы друг на друга и смещать их. Это полезная возможность для
создания макетов и эффектов, однако, обычно z-индекс используется совместно с
языком JavaScript. Мы немножко поиграем с ним, поскольку это интересный аспект
языка CSS. Хорошо, тогда - представление продолжается!

208
Языки HTML и CSS
Введение в позиционирование
К этому времени вы уже знаете, что я в определенной степени интересуюсь
подробностями. Я считаю очень важным изучать предмет на уровне вопросов
«почему?» и «как?». Поэтому перед тем, как рассказать вам о способах
позиционирования элементов, хотелось бы ввести новую терминологию и ключевые понятия,
которые важны для работы с позиционированием. Конечно, вам не терпится
приступить к позиционированию элементов и работе с макетами, но потерпите
немного. Уверяю вас, что в моей нелогичности есть порядок.
Во-первых, важно запомнить, что CSS-позиционирование является частью языка
CSS, а не отдельной технологией. Многие люди считают позиционирование
отдельной концепцией, называя ее CSS-P или как-то по-другому, однако это не
отдельная часть языка CSS.
Фактически, позиционирование - это сердце языка CSS - та часть, которая
предоставляет максимальные возможности по управлению внешним видом
страницы. Мнение насчет разделения позиционирования и языка CSS является
ошибочным, оно, в основном, возникло из-за плохой реализации поддержки
позиционирования, и поэтому позиционирование практически не использовалось
вплоть до нескольких последних лет.
К счастью, мы уже прошли это и можем начать серьезное рассмотрение
позиционирования. Остались ли еще проблемы в браузерах? Будьте уверены, что они
есть, и я буду рассказывать о некоторых из них в этой и следующей главах.
Я помогу вам быстро уловить смысл тех моментов, на которые люди потратили
годы, пытаясь понять их. Я буду использовать несколько терминов для описания
позиций и их назначения. Самым большим препятствием для многих людей,
желающих использовать язык CSS в качестве средства для создания макетов
страниц, является терминология - иногда она сбивает с толку, вводит в заблуждение
или совершенно непонятна.
Схема позиционирования языка CSS позволяет использовать четыре типа
позиционирования:
• Абсолютное (Absolute).
• Относительное (Relative).
• Статическое (Static).
• Фиксированное (Fixed).
Для позиционирования блока можно воспользоваться свойствами top, bottom,
left и right с определенными значениями.

Урок 12. Позиционирование, плавающее размещение и Z-индекс
209
В этой главе мы подробно рассмотрим, как работает каждый из этих типов
позиционирования. Однако для начала немножко поговорим о нормальном потоке,
блоках-контейнерах и окне просмотра браузера. Полагаю, это немного скучно, но,
не смотря на это, данные вопросы необходимо обсудить.
Нормальный поток
Термин нормальный поток обозначает обычное поведение браузера.
Несомненно, вы заметили, что по умолчанию все содержимое выравнивается по левой
стороне браузера, пока это поведение не будет изменено при помощи языка
HTML или CSS. Рассмотрим пример 12.1.
Пример 12.1. Нестилизованное содержимое, позволяющее наглядно представить
нормальный поток в браузере
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>working with style</title>
</head>
<body>
<hl>The Black Cat</hl>
<h2>By Edgar Allen Poe</h2>
<p> I married early, and was <a href=
"http://www.poemuseum.org/">happy to find</a> in my wife a
disposition not uncongenial with my own. Observing my
partiality for domestic pets, she lost no opportunity of procuring
those of the most agreeable kind. We had birds, gold fish, a
fine dog, rabbits, a small monkey, and a cat.</p>
<p>This latter was a <a href="http://www.poemuseum.org/"> re-
markably</a> large and beautiful animal, entirely black, and
sagacious to an astonishing degree. In speaking of his
intelligence, my wife, who at heart was not a little tinctured with
superstition, made frequent allusion to the ancient popular
notion, which regarded all black cats as witches in disguise. Not
that she was ever serious upon this point - and I mention the
matter at all for no better reason than that it happens, just
now, to be remembered.</p>
</body>
</html>

210
Языки HTML и CSS
Поскольку у вас уже есть представление о блочной модели, вы теперь можете
заметить, как все блочные элементы (заголовки и абзацы) размещаются друг над
другом и выравниваются по левой стороне.
Встроенные элементы (ссылки) не отрываются от потока. Если изменить
размеры окна браузера, они просто займут свою новую позицию, не разрывая при
этом строку.
На рисунке 12.1 показан документ в окне браузера, а на рисунке 12.2 показан тот
же документ, но уже в браузере с измененными размерами окна. Обратите
внимание, как текст заполняет доступное пространство, при этом он всегда
выравнивается по левой стороне.
Посмотрев на эти примеры, попробуйте сами: откройте простой документ, не
содержащий таблиц или CSS-позиционирования, установите и измените размеры
окна браузера. То, что вы увидите, - это нормальный поток элементов в браузере.
%Э woiking with style - Mozilla Fiiefox
File Edil View Go Bookmarks .Tools Help
1эШ
The Black Cat
By Edgar Allen Рое
I married early, and was happy to find in my wife a disposition not uncongenial with my own.
Observing my partiality for domestic pets, she lost no opportunity of procuring those of the most
agreeable kind. We had birds, gold fish, a fine dog, rabbits, a small monkey, and a cat.
This latter was a remarkably large and beautiful animal, entirely black, and sagacious to an
astonishing degree, bi speaking of his intelligence, my wife, who at heart was not a little tinctured
with superstition, made frequent allusion to the ancient popular notion, which regarded all black
cats as witches in disguise. Not that she was ever serious upon this point - and I mention the
matter at all for no better reason than that it happens, just now, to be remembered.
Рис. 12.1. Нестилизоватшй документ в нормальном потоке

Урок 12. Позиционирование, плавающее размещение и Z-индекс
211
File £dit View Во Bookmarks Tools
I married early, and was happy to j^J
find in my wife a disposition not
uncongenial with my own.
Observing my partiality for
domestic pets, she lost no , \
opportunity of procuring those of
the most agreeable kind. We had
birds, gold fish, a fine dog,
rabbits, a small monkey, and a
cat. ж\
Рис. 12.2. Изменение размеров окна браузера
все равно приводит к выравниванию текста полевой стороне
Блоки-контейнеры
Еще одним важным понятием при работе с CSS-позиционированием является
блок-контейнер. Блок-контейнер - это любой родительский блок для элемента,
который вы пытаетесь позиционировать. Рассмотрим пример 12.2.
Пример 12.2. Понятие блоков-контейнеров
<div id="content">
<hl>The Black Cat</hl>
<h2>By Edgar Allen Poe</h2>
<p> I married early, and was <a href="http:// www.poemuseum.
org/">happy to find</a> in my wife a disposition not
uncongenial with my own. Observing my partiality for domestic pets,
she lost no opportunity of procuring those of the most
agreeable kind. We had birds, gold fish, a fine dog, rabbits, a
small monkey, and a cat.</p>
<p>This latter was a <a href="http://www.poemuseum.org/"> re-
markably</a> large and beautiful animal, entirely black, and
sagacious to an astonishing degree. In speaking of his
intelligence, my wife, who at heart was not a little tinctured with
superstition, made frequent allusion to the ancient popular
notion, which regarded all black cats as witches in disguise. Not
that she was ever serious upon this point - and I mention the
matter at all for no better reason than that it happens, just
now, to be remembered.</p>
</div>

212 Языки HTML и CSS
Как видно из примера, все содержимое размещено в элементе div, значение
свойства id которого установлено в content (блестяще?). Все блоки, расположенные
в элементе div с идентификатором content, теперь содержатсяв элементе div.
Предположим, что мы разместили контейнер вокруг элемента с
идентификатором content:
<div id="main">
<div id="content">
</div>
</div>
Элемент div с идентификатором content теперь содержится в элементе div
с идентификатором main, который стал блоком-контейнером для элемента div
с идентификатором content.
Думаю, пока все достаточно просто. Однако, если вы не можете это представить,
вспомните лакированные китайские шкатулки, которые вкладываются друг в
друга. В большой шкатулке находится средняя шкатулка, а в средней шкатулке
находится маленькая шкатулка. Таким образом, блоком-контейнером для маленькой
шкатулки является средняя шкатулка, для которой блоком-контейнером является
большая шкатулка.
Важно понимать эту концепцию, поскольку при использовании
позиционирования блок-контейнер элемента может существенно влиять на то, как на самом деле
позиционируется элемент или элементы, содержащиеся в нем.
На мгновение вернемся к примеру 12.1. В примере нет очевидного блока-
контейнера, не так ли? Вы удивитесь, если я скажу, что в этом документе все-таки
есть блок-контейнер? И вот почему: если блок-контейнер не указан, блоком-
контейнером является корневой элемент. Мы знаем, что корневой элемент - это
элемент html, который и является блоком-контейнером.
Квантовый скачок:
Почему В том случае, когда не указаны другие блоки-контейнеры, блоком-
контейнером является элемент html? С точки зрения позиционирования, это
происходит потому, что существуют стандартные стили браузера для
множества элементов, включая элемент html. Дополнительную информацию можно
найти в главе 7 «Использование языка CSS». У каждого браузера существует
стандартная таблица стилей, благодаря которой даже без применения стилей
будет выполнена визуальная стилизация. Вот почему заголовки, абзацы,
ссылки и другие элементы отображаются при помощи определенного шрифта, его
размера и жирности. Работая с позиционированием, кажется, что позиция
определенных блоков устанавливается относительно сторон браузера (также
называемых «хромом»). На самом деле, позиционирование определенных
блоков, находящихся за пределами контейнера, происходит благодаря
стандартным стилям, описанным для элемента html.

Урок 12. Позиционирование, плавающее размещение и Z-индекс
213
Для рисунка 12.3 просто стилизован элемент html, заданием для него границы
шириной в 2 пиксела. Обратите внимание, как различные браузеры
интерпретируют элемент html.
amtmwt • ' _joj.x|
£йе' £d* View ^o goolunarks lools b
The Black Cat
By Edgar Allen Рое
I married early, and was happy to
End in my wife a disposition not
uncongenial with my own. Observing
rny partiality for domestic pets, she
Ы
L.J File Edit View Navigation Bookrr. e? X
^Л'>'.|; v.(»i 'л1?' * Ooera
Backup mail, rules, Shop for Kitchen!
witn superstition, made trequent auusion
to the ancient popular notion, which
regarded all black cats as witches in
disguise. Not that she was ever serious
upon this point - and I mention the
matter at all for no better reason than
that it happens, just now, to be
remembered.
j Ffe , Edit View Fevontes 1 **
The Black Cat
By Edgar Allen Рое
I married early, and was happy to
End in my wife a disposition not
uncongenial with my own.
Observing my partiality for
Рис. 12.3. Слева направо: браузеры Firefox, Opera и Internet Explorer 6.0- обратите
внимание, как браузеры Firefox и Opera интерпретируют элемент html и что его
стилизованные границы принадлежат документу, тогда как в браузере IE нижняя
и левая части элемента включают области браузера, например полосы прокрутки
Нельзя сказать, что реализация браузера IE является неправильной, хотя и кажется
странной, поскольку в спецификациях точно не указано, как браузеры должны
реализовывать блоки-контейнеры. Существует море причин для понимания
необходимости использования позиционирования, а также его применения.
Окно просмотра браузера
Окно просмотра браузера - это окно браузера, в котором отображается содержимое
документа. Это достаточно простое понятие, однако, повторюсь, это понятие
отличается от понятия блоков-контейнеров.
При позиционировании, в некоторых случаях, блоки элементов
позиционируются относительно окна просмотра, а не относительно нормального потока или
блоков-контейнеров. Поэтому, необходимо иметь общее представление об окне
просмотра, как показано на рисунке 12.4.
Поведение браузера, при котором полосы прокрутки включаются в окно
просмотра, когда содержимое длиннее или шире доступного
пространства окна просмотра, считается стандартным. В этом смысле
браузеры ведут себя по-разному, отчасти из-за нестрогих принципов,
описывающих идеальное поведение браузеров. В результате, возникнет
несогласованность при просмотре дизайна пользователями, независимо от
используемого метода.

214
Языки HTML и CSS
walking with style - Mazilla Fiiefott ,
File £dit View (3o bookmarks Jools Help
Qj | U file:///C7Documents^20and%2 jj j|Gl
О
Ц> -
Bookmarks
Search. j
В Personal Toolbar
Q CSS 2.1 Qui
Q HTML 4 01
В I Search and Dire
(J Netscape Se.
Q AltaVisla
[j Ask Jeeves
fj Google
[j GoTo
Q HotBot
|j LookSmart
[ Lycos
o|
A
—I
d
Г
Done
The Black Cat
By Edgar Allen Рое
I married early, and was happy to find in my wife a disposition
not uncongenial with my own. Observing my partiality for
domestic pets, she lost no opportunity of procuring those of the
most agreeable kind. We had birds.Jgold fish, a fine dog,
rabbits, a small monkey, and a cat
This latter was a remarkably large and beautiful animal, entirely
black, and sagacious to an astonishing degree. Ь speaking of his _»j
Рис. 12.4. Браузер Firefox с боковой панелью, меню и строкой состояния;
окно просмотра - это только то окно, в котором отображается документ
Абсолютное позиционирование:
относительно корневого элемента
Достаточно терминологии. Настало время повеселиться и воспользоваться
позиционированием! Абсолютное позиционирование подразумевает
позиционирование блока элемента относительно его блока-контейнера. Когда для какого-либо
элемента применяется абсолютное позиционирование, этот элемент полностью
выпадает из нормального потока. Проще говоря, это означает, что любой
позиционируемый блок всегда будет позиционирован относительно его явного
контейнера или относительно корневого элемента html (но не окна просмотра),
независимо от остального содержимого страницы.
Ну, хорошо! Теперь вы поймете, почему вначале было потрачено время для
изучения терминологии. В примере 12.3 заголовок и абзац были размещены внутри
блока-контейнера, а затем позиция блока была смещена на 100 пикселов слева
и на 50 пикселов сверху.
Пример 12.3. Абсолютное позиционирование блока относительно корневого элемента
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

Урок 12. Позиционирование, плавающее размещение и Z-индеке
215
<title>working with style</title>
<style type="text/css">
icontent {
position: absolute;
left: lOOpx;
top: 50px;
border: lpx solid red;
}
</style>
</head>
<body>
div id="content">
<p> I married early, and was <a href="http://www.poemu-
seum.org/">happy to find</a> in my wife a disposition not
uncongenial with my own. Observing my partiality for domestic
pets, she lost no opportunity of procuring those of the most
agreeable kind. We had birds, gold fish, a fine dog, rabbits, a
small monkey, and a cat.</p>
</div>
</body>
</html>
Поскольку больше никаких блоков не определено явно, блок будет
позиционирован относительно корневого элемента html. Снимок экрана окна браузера, без
«хрома», был загружен в программу Photoshop, и теперь можно наглядно
представить абсолютное позиционирование блока относительно блока-контейнера, как
показано на рисунке 12.5. На рисунке 12.6 показан тот же блок, но уже вместе
с другими элементами страницы.
Л
Ц
■ 1 г,
!
0 150
1,i.1,111
100, , , ИБО 1200 1250 1300 1350 1400 1450
The Black Cat
[ married early, and was happy to find in mv wife a disposition
not uncongenial with my own. Observing my partiality for
domestic pets, she lost no opportunity of procuring those of
the most agreeable kind. We had birds, gold fish, a fine dog,
rabbits, a small monkey, and a cat.
1500
Рис. 12.5. Абсолютное позиционирование
элемента dive идентификатором content

216
Языки HTML и CSS
I© woiking with style - Mozilla Fiiefox
file Edit View Go Bookmarks Tools Help
•*V *s»C
The Black Cat
This latter was a remarkably large and beautiful animal, entirely black, and
sagacious to ariastQnishirip.jit.grae-Jn^nftakmgj^lmunteffigau^my wife,
who at heart w,
allusion to the г
witches in disg;
mention the ma
to be remembe ^rnsrne^ early, and was happy to find in my wife
a disposition not uncongenial with my own
Observing my partiality for domestic pets, she lost^ I alone
no opportunity of procuring those of the most
with difficulty tragreeable kind. We had birds, gold fish, a fine
dog, rabbits, a small monkey, and a cat.
Done
Pluto - this was
fed him, and he
lent
:s as
• and I
just now,
^as even
ie streets
Л
Рис. 12.6. Абсолютное позиционирование блока с заданной шириной - содержимое
размещается в блоке, позиция которого не изменяется, не смотря на другие
элементы документа. При этом, блок отображается безупречно - это
означает, что он удален из нормального потока
Абсолютное позиционирование:
относительно другого блока
Возвращаясь к предыдущему примеру, в котором описан блок-контейнер для
блока с содержимым, мы можем продвинуться дальше и узнать, как блок с
абсолютным позиционированием размещается только относительно его блока-
контейнера, как показано на примере 12.4.
Пример 12.4. Абсолютное позиционирование блока относительно блока-контейнера
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>working with style</title>
<style type="text/css">
#main {
position: absolute;
left: 50px;
top: 20px;
border: lpx solid green;
}

Урок 12. Позиционирование, плавающее размещение и Z-индекс 217
ttcontent {
position: absolute;
left: ЮОрх;
top: 50px;
width: ЗООрх;
border: lpx solid red;
background-color: #ccc;
}
ul,li,a {
list-style-type: none;
display: inline;
text-decoration: none;
}
</style>
</head>
<body>
<div id="main">
<div id="nav">
<ul>
<lixa href = "home.html">Home</ax/li>
<li><a href ="products .html">Products</ax/li>
<lixa href ="services .html">Services</ax/li>
<lixa href="about .html">About As</ax/li>
<lixa href="contact.html">Contact</ax/li>
</ul>
</div>
<div id="content">
<hl>The Black Cat</hl>
<p> I married early, and was <a href="http://www.poemu-
seum.org/">happy to find</a> in my wife a disposition not
uncongenial with my own. Observing my partiality for domestic
pets, she lost no opportunity of procuring those of the most
agreeable kind. We had birds, gold fish, a fine dog, rabbits, a
small monkey, and a cat.</p>
</div>
</div>
</body>
</html>
В этом примере блок-контейнер с идентификатором main абсолютно
позиционирован на 50 пикселов слева и 20 пикселов сверху. Блок навигации совсем не
позиционируется, но он содержится внутри блока с идентификатором main и
поэтому отображается в своем блоке как обычно. Были добавлены несколько
стилей, чтобы продемонстрировать все это вместе. Наконец, для элемента div с
идентификатором content используется абсолютное позиционирование.
Посмотрим, что у нас получилось, на рисунке 12.7.

218
Языки HTML и CSS
i
ol
0 -
П
0 -
0]
П
5 -
0]
Fl
0 -
0]
zl
5 -
0]
3~z
ISO
ilrlilililih
0
r
K.
50 1100
if ih 1,1 ill 111,! ill
^\
*J Home Pre
r
С
150 |200 |250 1300 1350 1400 1450 1500
Li.i.1,1,1 '.I, i,l и il ihli hi il,l il 11, l il ,1 ih l il.lil 11 ,l ,m,
ducts Services About Us Contact
-\
У
The Black Cat
I married early, and was happy to find in my wife
a disposition not uncongenial with my own
Observing my partiality for domestic pets, she losl
no opportunity of procuring those ofthe most
agreeable kind. We had birds, gold fish, a fine
dog, rabbits, a small monkey, and a cat.
..—Л ....
4
Рис 12.7. Абсолютное позиционирование элемента div
с идентификатором content относительно блока-контейнера
Обратите внимание на две окружности на рисунке. Первая окружность
обозначает начальную точку блока-контейнера с идентификатором main. Вторая
окружность обозначает начальную точку блока с идентификатором content.
Обратите внимание на позиционирование блока с идентификатором content
относительно блока-контейнера: 100 пикселов от левой стороны блока-
контейнера и 50 пикселов от верхней стороны блока-контейнера.
Теперь блок расположен в 150 пиксела слева и 70 пиксела сверху. И это понятно,
поскольку он был позиционирован относительно позиции блока-контейнера,
а не элемента html или окна просмотра браузера.
Для блока-контейнера не обязательно использовать абсолютное
позиционирование. Описанная схема позиционирования остается прежней,
независимо от типа позиционирования: блок с абсолютным позиционированием
всегда позиционируется относительно его блока-контейнера, и он всегда
выпадает из нормального потока, без всяких исключений.
Относительное позиционирование
Как отмечалось ранее, терминология, используемая в CSS-позиционировании,
немного смутная. Относительное позиционирование поначалу часто приводит в
замешательство, поскольку возникает вопрос: относительно чего? Большинство
людей автоматически - и достаточно логично - считают, что позиция будет
определяться относительно другого элемента.

Урок 12. Позиционирование, плавающее размещение и Z-индекс
219
Но это не так (вы знали это). Блоки с относительным позиционированием
позиционируются относительно нормального потока. Это означает, что они не
выпадают из нормального потока, как блоки с абсолютным позиционированием.
В этом примере удалены все поля, с помощью универсального селектора (*);
таким образом мы избавимся от всех пустых пространств, что позволит нам
увидеть точное измерение относительного позиционирования, как показано в
примере 12.5.
Пример 12.5. Относительное позиционирование
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>working with style</title>
<style type="text/ess">
* {margin: 0;}
ttcontent {
position: relative;
left: 45px;
top: lOpx;
width: 400px;
border: lpx solid red;
}
</style>
</head>
<body>
<hl>The Black Cat</hl>
<p> I married early, and was <a href="http://
www.poemuseum.org/">happy to find</a> in my wife a disposition
not uncongenial with my own. Observing my partiality for
domestic pets, she lost no opportunity of procuring those of the
most agreeable kind. We had birds, gold fish, a fine dog,
rabbits, a small monkey, and a cat.</p>
<div id="content">
<p>This latter was a <a href="http://www.poemuseurn.org/"> re-
markably</a> large and beautiful animal, entirely black, and
sagacious to an astonishing degree. In speaking of his
intelligence, my wife, who at heart was not a little tinctured with
superstition, made frequent allusion to the ancient popular
notion, which regarded all black cats as witches in disguise. Not
that she was ever serious upon this point - and I mention the
matter at all for no better reason than that it happens, just
now, to be remembered.</p>
</div>
<p>Pluto - this was the cat's name - was my <a
href="http://www.poemuseum.org/">favorite</a> pet and playmate.
I alone fed him. and he attended me wherever I went about the

220
Языки HTML и CSS
house. It was even with difficulty that I could prevent him
from following me through the streets.</p>
</body>
</html>
На рисунке 12.8 показано, что элемент div с идентификатором content
размещен относительно нормального потока документа, а не других блоков.
The Black Cat
uncoi
no opp'
S2M
marrit d early, and was happy to find in my wife a disposition not
ing :nial with my own. Observing my partiality for domestic pets, she lost
>rtunity of procuring those of the most agreeable kind. We had birds,
a fine dog, rabbits, a small monkey, and a cat.
fish,
Pluto
fed him
with difii
ISO
1.1.1.iii
TToo Iil5 I2B0 1250 1555 |3§5 pfoo HsC
1 ' ■ 1 ■ 1 1 ■' ■'■'■' ■ 1 ■ 1111111111111111111111111111111111111111111
This latter was a remarkably large and beautiful animal, entirely
black, and sagacious to an astonishing degree. In speaking of his
intelligence, my wife, who at heart was not a little tinctured with
superstition, made frequent allusion to the ancient popular notion,
which regarded all black cats as witches in disguise. Not that she
was ever serious upon this point - and I mention the matter at all
for no better reason than that it happens, just now, to be
remembejred. _^ r .___ ,i.„.i
and he attended me wherever I went about the house. It was even
iculry that I could prevent him from following me through the streets.
Рис. 12.8. Блок с относительным позиционированием - обратите внимание,
что смещения указываются относительно нормального потока,
а не относительно другого элемента
Итак, смещение блока сверху, от блока предыдущего элемента, составляет
10 пикселов, а от левого края потока - 45 пикселов. Именно в этом месте
начинается текст, поскольку он также включен в нормальный поток. Обратите
внимание, что позиционирование не прерывает поток; последующее содержимое
отображается обычным образом как перед, так и после блока с относительным
позиционированием.
Относительное позиционирование используется в том случае, когда
нормальный поток не должен нарушаться. Абсолютное
позиционирование лучше всего использовать для элементов с крайне необычным
размещением. Часто эти два типа позиционирования применяются
совместно, например элемент div с относительным позиционированием и
элемент div с абсолютным позиционированием, расположенный внутри
первого элемента, или наоборот. Мы познакомимся с этим более
подробно в главе 13 «CSS-макеты».

Урок 12. Позиционирование, плавающее размещение и Z-индеке 221
Фиксированное позиционирование
Фиксированное позиционирование - это замечательная часть языка CSS. Знайте,
что если я начинаю раздел подобным образом, значит я сообщаю вам сначала
хорошие новости, чтобы смягчить удар. Даже не смотря на замечателыгость
фиксированного позиционирования, этот тип не поддерживается в браузере
Internet Explorer и, по существу, может использоваться только в браузерах Mozilla,
Opera, Safari, а также в других браузерах, поддерживающих этот тип
позиционирования. Фу!
Фиксированное позиционирование позволяет закрепить блок в любом месте
страницы. В отличие от абсолютного позиционирования, фиксированные
элементы позиционируются относительно окна просмотра (вы знали, что оно
просто обязано быть упомянуто где-то в этой главе). Посмотрим на пример 12.6.
Пример 12.6. Фиксированное позиционирование
<style type="text/css">
#nav {
position: fixed;
left: Opx;
top: Opx;
background: iccc;
width: 100%;
}
ul,li,a {
list-style-type: none;
display: inline;
text-decoration: none;
padding-left: 3px;
padding-right: 3px;
}
</style> ^^
Давайте посмотрим, что же получилось. Установив значения позиции элемента
div с идентификатором nav слева и сверху в 0, добавив серый фон и задав
ширину, равную 100%, мы сделали панель навигации очень похожей на стандартное
меню браузера, как показано на рисунке 12.9.
Хотя у браузера IE 6.0 отсутствует поддержка фиксированной схемы, это
вовсе не означает, что ее вообще нельзя использовать. В результате
будет создан блок в определенной позиции, однако он будет прокручиваться
вместе с остальным содержимым вместо того, чтобы оставаться в
первоначальной позиции.

222
Языки HTML и CSS
О working with style - МогШа Firefox
File- Edit -View ^Go .Bookmarks Jools Help
Home Products Services About Us Contact
The Black Cat
I married early, and was happy to find in my wife a
disposition not uncongenial with my own. Observing my
partiality for domestic pets, she lost no opportunity of
procuring those of the most agreeable kind. We had birds,
gold fish, a fine dog, rabbits, a small monkey, and a cat
Рис. 12.9. Фиксированное позиционирование панели навигации
В браузерах, поддерживающих фиксированное позиционирование, положение
этого меню останется прежним, не зависимо от перемещения других элементов.
Итак, если я прокручу содержимое, оно исчезнет позади меню, как показано на
рисунке 12.10.
■© working with style - Mozilla Firefox
fjle Edit View Go .Bookmarks Tpols ИФ
лЫ
Home Products Services About Us Contact <
1UC JLfKIVlY V^idl
I married early, and was happy to find in my wife a
disposition not uncongenial with my own. Observing my
Рис. 12.10. Содержимое прокручивается позади панели навигации
с фиксированным позиционированием
Теперь понятно, чем плохо отсутствие поддержки фиксированного
позиционирования в браузере IE - такой полезной схемы позиционирования.
Статическое позиционирование - это четвертый тип позиционирования.
В данном случае блок просто позиционируется в нормальном потоке,
и поэтому этот тип позиционирования используется редко.
Использование статического позиционирования похоже на использование свойства и
значения text-align: left;. Это стандартное поведение браузера,
поэтому этот тип используется только для переопределения
предыдущего правила. В результате, статическое позиционирование используется
достаточно редко.

Плавающие элементы
Как отмечалось во вступлении к главе, плавающее размещение - это не схема
позиционирования. Иногда его путают с позиционированием, поскольку
плавающее размещение может использоваться как отдельно, так и с
позиционированными блоками для создания макетов.
Причина, по которой плавающее размещение было введено в язык CSS,
совершенно не касалась макета, как такового. Необходимо было получить
возможность для плавающего размещения элементов, особенно изображений, а также
для обтекания содержимым этого изображения, как показано на рисунке 12.7.
Пример 12.7. Плавающее размещение изображения
<style type="text/ess">
img {
float: right;
padding: 15px;
}
</style>
На рисунке 12.11 показаны результаты. Стили добавлены были, чтобы оживить
внешний вид.
working with style - Mozilla Fneiox
чД*>*'Л,'.л<
File Edit View Go Bookmarks look Help
By Edgar Allen Рое
I married early, and was in my wife a
disposition not uncongenial with my own. Observing my
partiality for domestic pets, she lost no opportunity of
procuring those of the most agreeable kind. We had
birds, gold fish, a fine dog, rabbits, a small monkey, and
a cat.
This latter was a large and beautiful animal,
entirely black, and sagacious to an astonishing degree. In
speaking of his intelligence, my wife, who at heart was
not a little tinctured with superstition, made frequent
allusion to the ancient popular notion, which regarded all
black cats as witches in disguise. Not that she was ever
serious upon this point - and I mention the matter at all
for no better reason than that it happens, just now, to be
remembered.
Pluto - this was the cat's name - was my pet and
playmate. I alone fed him, and he attended me wherever I went about the house. It
was even with difficulty that I could prevent him from following me through the
streets.
Рис. 12.11. Плавающее размещение изображения позволяет тексту
обтекать изображение, создавая замысловатый внешний вид

224
Языки HTML и CSS
Плавающее размещение можно использовать не только для элемента img, но и
для остальных элементов. Таким образом, если навигация реализована с
использованием элемента div и вы хотите использовать плавающее размещение для
данного элемента, это легко сделать, как показано в примере 12.8.
Пример 12.8. Плавающее размещение элемента div
#nav {
float: right;
border: lpx solid red;
padding-right: 2 Opx;
padding-top: lOpx;
padding-left: lOpx;
margin-left: lOpx;
}
На рисунке 12.12 показано, как элемент div с идентификатором nav и
содержащиеся в нем элементы, размещаются с правой стороны, как и изображение из
предыдущего примера. Выполнив это, вы, фактически, создали систему
навигации с плавающим размещением, которую можно стилизовать по собственному
усмотрению.
лш
О working with style - Mozilla Firefox
File Edit View £o gookmaiks Tools "Help"
By Edgar АПеп Рое
I married early, and was in my wife a disposition
not uncongenial with my own. Observing my partiality for
domestic pets, she lost no opportunity of procuring those of
the most agreeable kind. We had birds, gold fish, a fine dog,
rabbits, a small monkey, and a cat.
This latter was a large and beautiful animal, entirely black, and sagacious
to an astonishing degree. In speaking of his intelligence, my wife, who at heart was not
a little tinctured with superstition, made frequent allusion to the ancient popular notion,
which regarded all black cats as witches in disguise. Not that she was ever serious upon
this point - and I mention the matter at all for no better reason than that it happens,
just now, to be remembered.
Pluto - this was the cat's name - was my pet and playmate. I alone fed him,
and he attended me wherever I went about the house. It was even with difficulty that I
could prevent him from following me through the streets.
Рис. 12.12. Плавающее размещение блока - для элемента div
с идентификатором nav использовано
плавающее размещение, как и для изображения
Теперь достаточно просто представить, как можно использовать плавающее
размещение для макетирования частей документа.

Урок 12. Позиционирование, плавающее размещение и Z-индекс
225
Очищенное плавающее размещение
Очистка плавающего размещения служит для того, чтобы размещение элемента
оставалось плавающим, однако его не окружали другие элементы. Свойство
clear принимает следующие значения: left, right или both. Добавив
свойство со значением clear: right; к разделу документа, навигация с плавающим
размещением останется на прежнем месте, однако текст слева от нее
отображаться не будет, как показано на рисунке 12.13.
File Edit View £o Bookmarks look Help
~| !
■
I
m
m
I 1
By Edgar Allen Рое
I married early, and was in my wife a disposition not uncongenial with my own.
Observing my partiality for domestic pets, she lost no opportunity of procuring those of the most
agreeable kind. We had birds, gold fish, a fine dog, rabbits, a small monkey, and a cat.
This latter was a large and beautiful animal, entirely black, and sagacious to an
astonishing degree. In speaking of his intelligence, my wife, who at heart was not a little tinctured
with superstition, made frequent allusion to the ancient popular notion, which regarded all black cats
as witches in disguise. Not that she was ever serious upon this point - and I mention the matter at
all for no better reason than that it happens, just now, to be remembered.
Pluto - this was the cat's name - was my pet and playmate. I alone fed him, and he
attended me wherever I went about the house. It was even with difficulty that I could prevent him
from following me through the streets.
Рис. 12.13. Очистка плавающего размещения позволяет
плавающему элементу оставаться на первоначальном месте,
но при этом последующее содержимое располагается ниже элемента
В примере 12.9 создаются два блока с плавающим размещением.
Пример 12.9. Стилизация двух блоков с плавающим размещением,
один из которых размещается слева, а второй — справа
#nav {float: right; border; lpx solid red; padding-right: 20px;
padding-top: lOpx; margin-left: lOpx;}
#nav2 {float: left; border; lpx solid red; padding-right: 20px;
padding-top: lOpx; margin-right: lOpx; }
На рисунке 12.14 показано, что произойдет в случае некорректного
использования свойства clear для содержимого.
В-1356

226
Языки HTML и CSS
£te ti't Vcv Go Вог^И Jooli beo
. By Edgar Allen Рое .
m •
. I married early, and was in my wife .
, a disposition not uncongenial with my own. „
Observing my partiality for domestic pets, she lost
no opportunity of procuring those of the most
agreeable kind. We had birds, gold fish, a fine dog, rabbits, a small monkey, and a cat.
This latter was a large and beautiful animal, entirely black, and sagacious to an
astonishing degree. In speaking of his intelligence, my wife, who at heart was not a little tinctured
with superstition, made frequent allusion to the ancient popular notion, which regarded all black cats 1
as witches in disguise. Not that she was ever serious upon this point - and I mention the matter at
all for no better reason than that it happens, just now, to be remembered.
Pluto - this was the cat's name - was my pet and playmate I alone fed him, and he
attended me wherever I went about the house, It was even with difficulty that I could prevent him
from following me through the streets.
Рис. 12.14. Без надлежащего использования свойства clear,
содержимое отображается в нормальном потоке
между блоками с плавающим размещением
Свойство clear добавлено к обоим стилям, описывающим содержимое, как
показано на рисунке 12.15.
By Edgar Alien Рое
I married early, and was in my wife a disposition not uncongenial with my own.
Observing my partiality for domestic pets, she lost no opportunity of procuring those of the most
agreeable kind. We had birds, gold fish, a fine dog, rabbits, a small monkey, and a cat.
Рис. 12.15. Очищение левого и правого блоков с плавающим размещением
Интересно, да? Вот так создаются столбцы. Мы будем работать со столбцами,
созданными с использованием плавающего размещения, в главе 13.

Урок 12. Позиционирование, плавающее размещение и Z-индекс
227
Z-индекс
Z-индекс создает ось в пространстве, с помощью которой можно «складывать»
и перекрывать элементы. Эту возможность удобно использовать при
позиционировании, поскольку с ее помощью можно определять, какие блоки при
изменении размеров окна браузера выйдут на передний план, а какие - на задний.
Использование z-индекса по большей своей части относится к языку DHTML,
в котором скрипты взаимодействуют с блоками элементов для динамических
целей, например для создания анимации или игр.
В примере 12.10 представлены три блока с абсолютным позиционированием,
каждый из которых перекрывает остальные, и стилизованы они таким образом,
чтобы был понятен порядок наложения.
Пример 12.10. Z-индекс и позиционированные блоки
#boxl {
position: absolute;
top: Юрх;
left: Юрх;
background: #000;
width: ЗООрх;
height: 200px;
z-index: 1;
}
#box2 {
position: absolute;
top: 20px;
left: 20px;
background: #999;
width: ЗООрх;
height: 200px,-
z-index: 2;
}
#box3 {
position: absolute;
top: 30px;
left: 30px;
background: #ccc;
width: ЗООрх;
height: 200px;
z-index: 3;
}
Обратите внимание, чем выше значение z-индекса, тем «ближе» в стеке
располагается блок. Итак, блок со значением свойства z- index равным 3 является
ближайшим блоком в стеке по отношению к вам, как показано на рисунке 12.16.

228
Языки HTML и CSS
©walking with style - Mozilla Fiiefox
FileS Edit View Go Bookmarks Tools
ШШШ
Рис. 12.16. Z-индекс и порядок наложения - чем выше целочисленное значение,
тем ближе в стеке располагается элемент по отношению к вам
Как профессионал...
Если вы потратили время на изучение концепций, представленных в этой главе,
пожалуйста, не волнуйтесь. Это одни из наиболее сложных, запутанных и
многообещающих аспектов языка CSS.
Если вы испытываете определенные сложности, я не смогу вам помочь иначе,
чем сказать, что этому необходимо уделить время. Никто не изучает этот
материал ночью - а если вы изучили его, хорошо, значит вы готовы к основному
времени!
Чтобы освоить использование позиционирования, необходимо постоянно
практиковаться и экспериментировать; это простая часть природы зверя CSS.
Конечно, результаты превосходят ожидания. В следующей главе мы соберем все
вместе - по крайней мере, концептуально - когда начнем изучение макетов.
А после этого необходимо практиковаться, практиковаться и еще раз
практиковаться, чтобы действительно отточить свои навыки до уровня профессионала.

УРОК 13.
CSS-макеты
Несколько лет назад люди нашли способ решения всех проблем, возникающих при
использовании макетов на основе таблиц, который заключается в применении
языка CSS для управления визуальным представлением дизайнов. В этой главе у
нас появится шанс поработать с основными типами CSS-макетов, обычно
используемыми для получения ряда дизайнов. Некоторые из этих макетов построены на
основе схем позиционирования, которые были рассмотрены в главе 12
«Позиционирование, плавающее размещение и z-индекс». В некоторых макетах применяется
плавающее размещение, которое, если помните, не является схемой
позиционирования, однако позволяет создавать колоночные макеты. Распространено также и
комбинированное использование плавающего размещения и позиционирования,
и в этой главе мы познакомимся с подобными примерами.
Чтобы упростить понимание материала, я собираюсь научить вас
создавать описанные дизайны в наиболее простом виде. Это означает, что я не
включаю ряд популярных обходных решений, которые, возможно,
понадобится использовать для поддержки определенных версий браузеров. Без
применения обходных решений данные дизайны будут отлично
функционировать в браузерах, перечисленных в таблице 13.1.
Табл. 13.1. Браузеры с поддержкой CSS-макетов, представленных в этой главе
Браузер
Intenet Explorer
Mozilla
Netscape
Firefox
Opera
Safari
Операционная система
Windows
Все доступные
Все доступные
Все доступные
Все доступные
Macintosh
Версия
6.0
1.ЛГ +
6.ЛГ +
Все
6.Х +
1.ЛГ +
Во всех используемых современных браузерах проблем с отображением
представленных макетов не будет. Необходимость в применении обходных решений
возникает в том случае, когда приходится поддерживать версии браузеров,
которых нет в этом списке, в частности, версии 5.0 и 5.5 браузера Internet Explorer для
операционной системы Windows, все версии браузера IE для операционной
системы Macintosh, а также все версии браузера Netscape до версии 6.0; необходимые

230
Языки HTML и CSS
свойства языка CSS во всех указанных версиях браузеров реализованы
неправильно или частично.
Три столбца с обрамляюшими меню
фиксированной ширины
Одним из наиболее распространенных макетов для Web-сайтов является трехколо-
ночный макет с обрамляющими столбцами определенной фиксированной
ширины и с внутренним столбцом плавающей ширины, как показано на рисунке 13.1.
Столбец
фиксированной
ширины
Ширина столбца уменьшается
или увеличивается при изменении
размеров окна браузера или
разрешения экрана
Столбец
фиксированной
ширины
Рис. 13.1. Трехколопочный макет с обрамляющими столбцами
фиксированной ширины и с центральным столбцом плавающей ширины
Для создания такого макета используется абсолютное позиционирование для
размещения левого и правого столбцов. Затем явно указывается ширина
столбцов в пиксела (именно так достигается фиксированная ширина). Хитрость здесь
в том, что ширина центрального столбца не указывается, благодаря чему она
остается плавающей и увеличивается или уменьшается в соответствии с доступным
пространством, как показано в примере 13.1.
Пример 13.1. Трехколопочный макет с обрамляющими столбцами
фиксированной ширины и с центральным столбцом плавающей ширины
<style type="text/css">
#nav {position: absolute; left: lOpx; top: 50px; width: 200px;}
♦content {margin-left: 200px; margin-right: 200px; margin-top:
Юрх;}

Урок 13. CSS-макеты
231
#sidebar {position: absolute; right: 10px,- top: 10px; width:
200px;}
</style>
Обратите внимание, что в ID-селекторе #content для элемента div указаны
значения левого и правого полей. Эти числовые значения должны быть
скорректированы для соответствия отступам или границам, которые вы сами добавите к
столбцам. Верхнее поле используется просто для зрительного баланса и никакая
ширина для него не указывается. На рисунке 13.2 показан макет страницы,
созданный с использованием данной методики, с дополнительными стилями для
текста, промежутков и изображения. На рисунке 13.3 показана та же страница,
но уже после изменения размеров окна браузера, - на рисунке видно, как
содержимое заполняет все доступное пространство.
C/woiking with style - Mozilla Fiiefox
Hie *£dit Щей £о lookmarks IqoIs Help
■ ■ofxl
I married early, and was happy to
find in my wife a disposition not
uncongenial with my own Observing
my partiality for domestic pets, she
lost no opportunity of procuring
those of the agreeable kind
We had birds, gold fish, a fine dog
rabbits, a small monkey, and a cat.
This latter was a large
and beautiful animal entirely black,
and sagacious to an astonishing
degree. In speaking of his
intelligence, my wife, who at heart
was not a litt e tinctured with
superstition, made frequent allusion
to the ancient popular notion, which
regarded all black cats as witches in
disguise. Not that she was ever
serious upon this point - and I
mention the matter at all for no
better reason than that it happens,
just now, to be remembered
Pluto - this was the cat"s name - was
my pet and playmate I
alone fed him, and he attended me
wherever I went about the house. It
was even with difficulty that I could
prevent him from following me
through the streets
Best known for his poems and
short fiction, Edgar Allan Рое,
born in Boston, Jan. 19, 1809,
died Oct 7, 1849 in Baltimore,
deserves more credit than any
other writer for the
transformation of the short
tory from anecdote to art.
He virtually created the
detective story and perfected
the psychological thriller He
also produced some of the
most influential literary
criticism of h s time ~
important theoretical
statements on poetry and the
short story — and has had a
worldwide influence on
literature.
Рис. 13.2. Обрамляющие столбцы фиксированной ширины
и центральный столбец плавающей ширины

232
Языки HTML и CSS
The Black Cat
By Edgar Allen Рое
I married early, and was happy to find in my wife a disposition not uncongenial with my own. Observing my
partiality for domestic pets, she lost no opportunity of procuring those of the ni;:f agreeable kind. We had
birds, gold fish, a fine dog, rabbits, a small monkey, and a cat.
Рис. 13.3. Здесь показано, как текст заполняет доступное пространство
окна браузера после изменения его размеров
s\ Если вы хотите зафиксировать ширину центрального столбца, просто
укажите ее явно. Но в этом случае, при изменении размеров окна браузера,
столбцы будут перекрываться.
Три столбца с шапкой и нижним колонтитулом
Еще одним распространенным ма.кетом является трехколоночный макет с
шапкой и нижним колонтитулом, как показано на рисунке 13.4.
Шапка
Боковая
панель
Содержимое
Боковая
панель
Нижний колонтитул
Рис. 13.4. Замысловатый трехколоночный макет
с шапкой и нижним колонтитулом
Для получения желаемых результатов в этом макете используется плавающее
размещение, а не позиционирование, как показано в примере 13.2.

Урок 13. CSS-макеты
233
Пример 13.2. Использование плавающего размещения в макете
<style type="text/css">
#masthead {width: 768px;}
#nav {float: left; width: 200px;}
#content {float: left; width: 368px;}
#sidebar {float: left; width: 200px;}
#footer {width: 768px; clear: both;}
</style>
Это макет с фиксированной шириной - ширина ни одного из его столбцов не
будет изменяться динамически. Обратите внимание, что свойство float для
всех столбцов просто установлено в значение left, а сами столбцы размещаются
друг за другом по горизонтали. Обратите также внимание, что для элемента div с
ID-селектором #footer используется свойство clear со значением both. Это
гарантирует, что нижний колонтитул полностью очистит столбцы с плавающим
размещением, как показано на рисунке 13.5.
working with style - Mozilla Fitefox
Эе £di( ifew £o jSa*maiks lods Иф
;x%\rz^zM*i
T e
ck
By Edgar Allen Рое
I married early, and was happy to fnd in m wife a
disposition not uncongenial with my own bserving my
part ality for domestic pets s e ost no opportun ty of
procuring those of the agreeable kind. We had birds
gold fish, a fine dog, rabbits, a small monkey and a cat
This latter was a targe and beautiful animal
entirely black, and sagacious to n astonishing degree In
speaking of h s intelli ence my wife, w о at heart was not a
little tinctured with superstition, made frequent all sion to
the ancient p pular notion which regarded all b ack cats as
witches n d sgu se Not that she was ever serious upon thi
p int - and I mention the matter at a I for no better reason
than that it happens, just now, to be re embered
Pluto this was the cat's name was my pet and
playmate I alone fed him, and he attended me wh rever I
went about the house It was even with difficulty that I could
prevent him from following me through the streets
t n nt i
th ubh
рое trivia
Best known for his poems a d
short fiction Edgar Allan Рое
born in Boston Jan 19 1809
died Oct 7 1849 in В It more,
d serve more credit than any
ot er writer for the
transformation of the short
st ry from anecdote to art
He virtu Ну created the
detective story and perfected
th psychological thriller Me
also produced some of the
m st nfluential lite ary
cnt cism of his time
mportant theoretical
tatements on poetry and th
short story -- and has had a
wo Idw de influence on
iterature
Рис. 13.5. Трехколоночный макет с фиксированной шириной,
с шапкой и нижним колонтитулом
Можно сделать версию этого макета с плавающей шириной, воспользовавшись
не фиксированными значениями, а значениями, выраженными в процентах, как
показано в примере 13.3.

234
Языки HTML и CSS
Пример 13.3. Использование значений, выраженных в процентах,
для создания версии с плавающей шириной
<style type="text/css">
#masthead {width: 100%;}
#nav {float: left; width: 20%;}
#content {float: left; width: 60%;}
#sidebar {float: left; width: 20%;}
#footer {width: 100%; clear: both;}
</style>
Отличная статья «Containing floats», написанная экспертом языка CSS
Эриком Мейером (Eric Meyer), описывает принципы работы с
использованием плавающего размещения; эту статью можно найти по адресу
http://www.complexspiral.com/publicatlons/containing-floats/.
Вложенный плавающий блок
В очень простом, но полезном макете применяется вложенный плавающий блок.
В этом макете плавающий блок размещается в основной области содержимого.
Этот блок можно использовать для навигации, изображений или для других
целей, как показано на рисунке 13.6.
Основное содержимое
Плавающий блок
Рис. 13.6. Блок с плавающим размещением в области содержимого

Урок 13. CSS-макеты
235
В примере 13.4 показано, как получить такой макет.
Пример 13.4. Макет с вложенным плавающим блоком
<style type="text/css">
#content {margin: lOpx; border: lpx solid orange;}
#content #nav {float: right; width: 150px; border: lpx solid
orange; margin-left: 5px,-}
</style>
Чтобы вы лучше представили этот макет, я установила поле и добавила границу
для содержимого. Для получения вложенности плавающего блока я использовала
дочерний селектор #nav ID-селектора #content, а затем расположила элемент
с идентификатором nav по правой стороне элемента с идентификатором
content. Значение свойства margin-left добавляет небольшой промежуток между
границей и текстом. При написании соответствующего кода на языке HTML (что
уже сделано в самом шаблоне) необходимо обязательно размесить элемент div с
идентификатором nav внутри элемента div с идентификатором content.
div id="content">
<div id="nav">
<ul>
<lixa href ="home.html">Home</a></li>
<li><a href ="poe3 .html">Forward</ax/li>
<lixa href ="poel.html">Back</ax/li>
<lixa href ="about .html">About</ax/li>
<lixa href ="Contact .html">Contact</ax/li>
</ul>
</div>
<hl>The Black Cat</hl>
<h2>By Edgar Allen Poe</h2>
<p> I married early, and was happy to find in my wife a
disposition not uncongenial with my own. Observing my partiality
for domestic pets, she lost no opportunity of procuring those
of the <a href="http://vig.prenhall.com/"> most </a> agreeable
kind. We had birds, gold fish, a fine dog, rabbits, a small
monkey, and a cat.</p>...
</div>
Как показано на рисунке 13.7, были использованы дополнительные стили
(которые применялись ранее) для получения декоративных аспектов дизайна.

236
Языки HTML и CSS
О working with style - Mozilla Firefox
file Edit View Go Ekrakmarks Iools Help4
The Black Cat
By Edgar Allen Рое
Home
Forward
Back
About
Contact
1
I married early, and was happy to find in my
wife a disposition not uncongenial with my
own. Observing my partiality for domestic pets, she lost no opportunity
of procuring those of the agreeable kind. We had birds, gold fish,
a fine dog, rabbits, a small monkey, and a cat.
This latter was a large and beautiful animal, entirely black,
and sagacious to an astonishing degree. In speaking of his intelligence,
my wife, who at heart was not a little tinctured with superstition, made
frequent allusion to the ancient popular notion, which regarded all
black cats as witches in disguise. Not that she was ever serious upon
this point - and I mention the matter at all for no better reason than
that it happens, just now, to be remembered.
Pluto - this was the cat's name - was my pet and playmate. I
alone fed him, and he attended me wherever I went about the house.
It was even with difficulty that I could prevent him from following me
through the streets.
Рис. 13.7. Макет с вложенным
плавающим блоком - простой, но весьма полезный
Макеты с выравниванием по центру
Чрезвычайно популярным методом создания макетов является метод
выравнивания по центру дизайна с фиксированной шириной по горизонтали. Это
означает, что дизайн будет всегда отцентрирован по горизонтали, а
промежутки с левой и правой стороны будут равномерно изменяться, как показано
на рисунке 13.8.

Урок 13. CSS-макеты 237
Область дизайна
всегда выровнена
по центру и имеет
фиксированную ширину
Рис. 13.8. Макет с фиксированной шириной, выровненный по центру
Создание такого дизайна требует дополнительных усилий из-за способов
центрирования элементов по горизонтали в языке CSS. Существует множество
вариантов выравнивания. Для центрирования по горизонтали я собираюсь
использовать подход с применением отрицательных значений полей. Хотя это и не
лучший способ, исходя из практики использования языка CSS, однако он лучше
всего поддерживается различными браузерами, как показано в примере 13.5.
Пример 13.5. Дизайн с фиксированной шириной и выравниванием по центру
<style type="text/css">
#container {position: absolute; left: 50%; width: 400px;
margin-left: -200px; border: lpx solid orange;}
icontent {margin-top: 75px;}
#nav {position: fixed; top: 0; width: 400px; border-top:
lpx solid orange; border-bottom: lpx solid orange;}
</style>
Сначала создается контейнер - элемент div с идентификатором content - для
которого будет использовано абсолютное позиционирование. Содержимое,
навигация и остальные компоненты дизайна, расположенные в центральной части
дизайна, размещаются в этом контейнере. Отрицательное значение поля
перемещает контейнер вправо, на середину позиционного смещения. На рисунке 13.9
показаны результаты. Ради забавы также была добавлена панель навигации с
фиксированной шириной и дополнительные стили.

238
Языки HTML и CSS
£ile £dit View Co.: „.Bookmarks Tools Help
Home Forward Back About Contact
T e lack С
у Edgar Allen Рое
I married early, and was happy to find in my wife a disposition not
uncongenial with my own. Observing my partiality for domestic
pets, she lost no opportunity of procuring those of the
agreeable kind. We had birds, gold fish, a fine dog, rabbits, a small
monkey, and a cat.
This latter was a large and beautiful animal,
entirely black, and sagacious to an astonishing degree. In speaking
of his intelligence, my wife, who at heart was not a little tinctured
with superstition, made frequent allusion to the ancient popular
notion, which regarded all black cats as witches in disguise. Not
that she was ever serious upon this point - and I mention the
matter at all for no better reason than that it happens, just now, to
be remembered.
Pluto - this was the cat's name - was my it pet and
playmate. I alone fed him, and he attended me wherever I went
about the house. It was even with difficulty that I could prevent
him from following me through the streets.
Рис. 13.9. Дизайн с фиксированной шириной
и выравниванием по центру - чрезвычайно популярный макет
Если вы хотите создать дизайн с выравниванием по центру, но с плавающей
шириной, используйте значения, выраженные в процентах, как показано в
примере 13.6.
Пример 13.6. Дизайн с плавающей шириной и выравниванием по центру
#container {position: absolute; left: 50%; margin-left: -200px;
border: lpx solid orange;}
icontent {margin-top: 75px;}
#nav {position: fixed; top: 0; border-top: lpx solid orange;
border-bottom: lpx solid orange;}
Смешанные макеты
Сейчас перед нами стоит задача - объединить методики для получения более
изысканных макетов. Хорошим примером является дизайн с фиксированной
шириной, выравниванием по центру, и состоящий из трех столбцов. Если вы
думаете, что мы будем использовать метод позиционирования для дизайнов с
I

Урок 13. CSS-макеты
239
фиксированной шириной и выравниванием по центру, а плавающее
размещение - для столбцов, то вы - лучший ученик в классе! В примере 13.7 показано,
как получить такой дизайн.
Пример 13.7. Смешанный макет с выравниванием по центру,
позиционированием и плавающим размещением
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>working with style</title>
<style type="text/ess">
#container {position: absolute; left: 50%; margin-left: -ЗООрх;
width: бООрх; margin-top: lOpx;}
#masthead {width: бООрх;}
#nav {float: left; width: 150px;}
#content {float: left; width: 290px; margin-right: 5px;
margin-left: 5px,-}
#sidebar {float: right; width: 140px; margin-right: lOpx;}
#footer {clear: both; width: бООрх;}
</style>
<link rel="stylesheet" type="text/ess" href="layout.ess">
</head>
<body>
<div id="container">
<div id="masthead">
<hl>Readings from Edgar Allen Poe</hl>
</div>
<div id="nav">
<ul>
<li><a href="home.html">Home</ax/li>
<lixa href="poe3 .html">Forward</ax/li>
<lixa href ="poel .html">Back</ax/li>
< 1 ixa href = "about. html" >About</ax/1 i>
<lixa href ="Contact .html">Contact</ax/li>
</ul>
</div>
<div id="content">
<hl>The Black Cat</hl>
<h2>By Edgar Allen Poe</h2>
<p> I married early, and was happy to find in my wife a
disposition not uncongenial with my own. Observing my partiality for
domestic pets, she lost no opportunity of procuring those of
the <a href="http://vig.prenhall.com/"> most </a> agreeable
kind. We had birds, gold fish, a fine dog, rabbits, a small
monkey, and a cat.</p>
<p>This latter was a <a href="http://www.prengall.com/"> remarka-
bly</a> large and beautiful animal, entirely black, and sagacious
to an astonishing degree. In speaking of his intelligence.

240
Языки HTML и CSS
my wife, who at heart was not a little tinctured with
superstition, made frequent allusion to the ancient popular notion, which
regarded all black cats as witches in disguise. Not that she was
ever serious upon this point - and I mention the matter at all
for no better reason than that it happens, just now, to be
remembered. </p>
<p>Pluto - this was the cat's name - was my <a
href="http://www.prenhall.com/">favorite</a> pet and playmate.
I alone fed him, and he attended me wherever I went about the
house. It was even with difficulty that I could prevent him
from following me through the streets.</p>
</div>
<div id="sidebar">
<h2>poe trivia</h2>
<p>Best known for his poems and short fiction, Edgar Allan Рое,
born in Boston, Jan. 19, 1809, died Oct. 7, 1849 in Baltimore,
deserves more credit than any other writer for the
transformation of the short story from anecdote to art.</p>
<p>He virtually created the detective story and perfected the
psychological thriller. He also produced some of the most
influential literary criticism of his time - important theoretic-
cal statements on poetry and the short story - and has had a
worldwide influence on literature.</p>
</div>
<div id="footer">
<p class="footertext">All text content is in the public domain.
Images &copy; 2004</p>
</div>
</div>
</body>
</html>
Хотелось бы обратить ваше внимание на несколько вещей: во-первых, для
демонстрации основ метода был использован внедренный стиль, а для других стилей
была использована связанная таблица стилей. Во-вторых, все элементы div
размещены внутри элемента div с идентификатором container. Это позволяет
выровнять по центру дизайн, в основе которого лежит плавающее размещение,
как показано на рисунке 13.10.

Урок 13- CSS-макеты
241
Readings from Edgar Allen Poe
* Home;
* Forward
о Dack
о About
* Contact
I
The Black Cat
By Edgar Allen Poe
I married early, and was happy to find in my
wife a disposition not uncongenial with my own.
Observing my partiality for domestic pets, she
lost no opportunity of procuring those of the
mar;', agreeable kind. We had birds, gold fish, a
fine dog, rabbits, a small monkey, and a cat.
This latter was a remarkably large and beautiful
animal, entirely black, and sagacious to an
astonishing degree. In speaking of his
intelligence, my wife, who at heart was not a
little tinctured with superstition, made Frequent
allusion to the ancient popular notion, which
regarded all black cats as witches in disguise.
Not that she was ever serious upon this point -
and I mention the matter at all for no better
reason than that it happens, just now, to be
remembered.
Pluto ■ this was the cat's name - was my
iv;vnr=i.e pet and playmate. I alone Fed him, and
he attended me wherever I went about the
house. It was even with difficulty that I could
prevent him from following me through the
streets.
poe trivia
Best known For his
poems and short fiction,
Edgar Allan Poe, born in
Boston, Jan. 19, 1609,
died Oct. 7, 1649 "m
Baltimore, deserves
more credit than any
other writer for the
transformation of the
short story from
anecdote to art.
He virtually created the
detective story and
perfected the
psychological thriller. He
also produced some of
the most influential
literary criticism of his
time — important
theoretical statements
on poetry and the short
story — and has had a
worldwide influence on
literature.
All text content is in the public domain. Images © 2004
Рис. 13.10. Смешанный CSS-макет
Повторяйте за мной...
Помните, я сказала, что для понимания концепций макетов, описанных в данной
главе, может потребоваться время. Это действительно так, поскольку
необходимо освоить огромное количество технической информации, и единственный
способ получить твердые знания - очень сильно испачкать руки кодом.
На данном этапе я рекомендую загрузить все примеры с сайта и
поэкспериментировать с ними. Делайте ошибки - и продолжайте! Это важная составляющая
процесса обучения. Кроме того, ничто не может сравниться с тем моментом,
когда вы наконец решили проблему, изводившую вас днями.
Не имеет значения, что конкретно вас интересует в языках HTML и CSS, я
надеюсь, эта книга помогла вам понять, как современные Web-дизайнеры и Web-
разработчики решают чрезвычайно сложные задачи. В этой книге просто
невозможно рассмотреть множество других вопросов (хорошая информационная
архитектура, удобство использования). Я работала над тем, чтобы в процессе изу
чения материала обращать ваше внимание на полезные подсказки и хитрости,
однако я буду искренне рада, если вы посетите сайты, указанные в данной книге,
и углубите свои знания.
Если вы решаете проблемы, связанные с применением языка CSS, во сне, значит
вы действительно начали думать, как Web-дизайнер.
9-1356

ПРИЛОЖЕНИЕ А.
Аннотированный справочник
по языку XHTML 1.0
В данном приложении описаны все элементы определения XHTML 1.0 Transitional DTD.
Обратите внимание, что многие из этих элементов по своей сути отвечают за
представление документа и были удалены из определения Strict DTD. Для каждого
элемента приведены замечания и рекомендации по использованию.
Разъяснение типов элементов: Отображение
Блочный (block): Элемент блочного уровня, по умолчанию создает блочный
прямоугольник. Все последующие элементы будут размещены на новой строке.
Встроенный (inline): Встроенный элемент, создает прямоугольник в строке и не
разрывает ее.
Структурный (structural): Элемент, который используется для формирования
структуры документа или для структурирования других элементов в
определенной части документа, например, table, head и т. д.
Обратите внимание, что тип отображения элемента можно изменить
при помощи свойства display языка CSS. Терминология, используемая
здесь, предназначена для описания основного стандартного поведения
элемента. У некоторых элементов существует несколько типов
отображения, например структурный и блочный. В таких случаях приводится
основной тип отображения.
Разъяснение типов элементов: пустой и непустой
Пустой (empty): Элемент, не содержащий данных, но являющийся инструкцией
для браузера для выполнения какого-либо действия, например разрыва строки
или отображения изображения. В языке XHTML пустые элементы завершаются
слэшем, как, например, <br />.
Непустой (non-empty): Элемент, содержащий данные. В языке XHTML все непустые
элементы должны быть закрыты, как показано в следующем примере:
<p>This is a paragraph, it contains data and is therefore
non-empty.</p>
Элемент: а
Описание: Используется для выполнения связывания с внешними документами
или для внутристраничных ссылок.
Тип элемента: Встроенный, непустой.

Приложение А. Аннотированный справочник по языку XHTML 1.0
243
Пример:
<а href="http://www.pearson.com/">Go to the Pearson Web Site</a>
<a name="referencel">Go to Reference One</a>
Советы: Для данного элемента советы отсутствуют. Внутри одного элемента
anchor нельзя использовать другой элемент anchor.
Элемент: abbr
Описание: Обозначает аббревиатуры И особенно полезен для поддержания
доступности.
Тип элемента: Встроенный, непустой.
Пример:
<abbr title="department">dept.</abbr>
Советы: Элемент поддерживается современными браузерами и часто
используется вместо элемента acronym, из-за недостаточной поддержки последнего.
Элемент: acronym
Описание: Обозначает акронимы и особенно полезен для поддержания
доступности.
Тип элемента: Встроенный, непустой.
Пример:
<acronym title="Hypertext Markup Language">HTML</a>
Советы: Поддержка элемента, в лучшем случае, неполная. В настоящий момент
элемент удален из спецификации XHTML 2.O. В результате, во всех случаях для
аббревиатур и акронимов лучше всего использовать элемент abbr.
Элемент: address
Описание: Обозначает адрес.
Тип элемента: Встроенный, непустой.
Пример:
<address>1600 Pennsylvania Avenue</address>
Советы: Поддержка элемента очень широкая. Обычно браузеры отображают
текст элемента address курсивом.
Элемент: applet
Описание: Обозначает апплет.

244
Языки HTML и CSS
Тип элемента: Блочный, непустой.
Пример:
<applet code="nervoustext.class"
width="300" height="60">
<param name="text" value="Java Comes Alive" />
</applet>
Советы: Элемент исключен в пользу элемента object, но может быть
использован в языке XHTML 1.0.
Элемент: area
Описание: Обозначает область ввода карты ссылок.
Тип элемента: Структурный (тар), пустой.
Пример:
<area shape="circle" href="http://molly.com/" coords="0,10,8" />
Советы: Элемент поддерживается современными браузерами.
Элемент: b
Описание: Презентационный элемент, обозначающий полужирный текст.
Тип элемента: Встроенный, непустой.
Пример:
<b>This sentence will appear in bold text</b>
Советы: Элемент поддерживается множеством браузеров, но считается
презентационным; вместо этого элемента должен использоваться элемент strong.
Элемент: base
Описание: Определяет основную URI-информацию для относительных путей в
документе. Также используется для определения основной цели для связанных
фреймов внутри документа. Размещается в элементе head.
Тип элемента: Структурный (head), пустой.
Примеры:
<base href="http://molly.com/" />
<base target="_top" />
Советы: Очень широкая поддержка для данного элемента.

Приложение А. Аннотированный справочник по языку XHTML 1.0 245
Элемент: basef ont
Описание: Обозначает основной шрифт.
Тип элемента: Структурный (head), пустой.
Пример:
<basefont color="#ff0000" size="4" face="Arial" />
Советы: Элемент не рекомендуется, поэтому его не следует использовать в языке
XHTML 1.0 Strict, хотя его можно использовать в языке XHTML 1.0.
Элемент: bdo
Описание: Обозначает двунаправленный текст. В основном используется для
интернационализации, для обозначения текста, отображаемого в обратном
направлении.
Тип элемента: Встроенный, непустой.
Пример:
<bdo lang="he" dir="rtl">I would enter Hebrew characters here
and they would appear right to left.</bdo>
Советы: Элемент поддерживается современными браузерами. В языке CSS также
есть свойства для стилизации двунаправленного текста.
Элемент: big
Описание: Презентационный элемент, используемый для форматирования
текста стилем большого размера.
Тип элемента: Встроенный, непустой.
Пример:
<big>This text will appear bigger than default body text</big>
Советы: Существует широкая поддержка элемента, но его использование должно
быть ограничено, поскольку он является презентационным элементом и язык
CSS предоставляет альтернативу.
Элемент: blockquote
Описание: Используется для цитат.
Тип элемента: Блочный, непустой.
Пример:
<blockquote>"To be or not to be, that is the
question."</blockquote>

246
Языки HTML и CSS
Советы: Существует широкая поддержка элемента. Элемент часто используется
для представления, поскольку браузеры при форматировании цитат добавляют
поля, однако такого использования следует избегать. Вместо этого, для установки
полей и отступов для любого элемента используйте язык CSS.
Элемент: body
Описание: Обозначает часть любого XHTML-документа без фреймов, в которой
размещается содержимое для отображения.
Тип элемента: Структурный (body), непустой.
Пример:
<body>All content for the page goes here </body>
Советы: Не известно.
Элемент: br
Описание: Вставляет разрыв строки.
Тип элемента: Блочный, пустой.
Пример:
То break my line<br />
A break is fine.
Советы: В некоторых старых браузерах замыкающий слэш, расположенный
сразу за последним символом пустых элементов, может приводить к проблемам при
отображении. Эту проблему решает пробел между последним символом элемента
и замыкающим слэшем.
Элемент: button
Описание: Позволяет включать в формы кнопки-изображения.
Тип элемента: Встроенный, непустой.
Пример:
<button type="submit" id="button" value="clicked">
<img src="images/submit.gif" width="50" height="30"
alt="submit" />
</button>
Советы: Элемент поддерживается множеством браузеров, за исключением
браузеров Netscape 4.x.

Приложение А. Аннотированный справочник по языку XHTML 1.0 247
Элемент: caption
Описание: Объявляет заглавия таблиц. Чрезвычайно полезен для реализации
доступности.
Тип элемента: Структурный (table), непустой.
Пример:
<caption>This is the Table's purpose</caption>
Советы: Элемент поддерживается множеством браузеров, но в разных версиях и
типах браузеров отображается по-разному.
Элемент: center
Описание: Презентационный элемент, используемый для центрирования на
странице текста или другого содержимого.
Тип элемента: Блочный, непустой.
Пример:
<center>This text will now be centered on the page</center>
Советы: Это презентационный элемент, поэтому следует избегать его
использования, применяя язык CSS.
Элемент: cite
Описание: Обозначает цитату или ссылку на другой источник.
Тип элемента: Встроенный, непустой.
Пример:
Не said <cite>"Don't cry honey, it's only spilt
milk!"</cite>but she kept crying anyway.
Советы: Поддерживается множеством браузеров. Этот элемент следует
использовать для встроенных выдержек, цитат и ссылок. Большинство браузеров для
отображения содержимого элемента используют курсив, однако при помощи
языка CSS это поведение можно изменить на свое усмотрение.
Элемент: code
Описание: Обозначает примеры кода.
Тип элемента: Встроенный, непустой.
Пример:
The <code>code</code> element is used to denote code items that
appear inline.

248
Языки HTML и CSS
Советы: Поддерживается практически всеми браузерами. Содержимое элемента в
большинстве браузеров отображается с использованием моноширинного шрифта.
Элемент: col
Описание: Определяет и управляет отображением столбца в группе столбцов;
полезен при реализации доступности таблиц.
Тип элемента: Встроенный, пустой.
Пример:
<col span="2" align="right" />
Советы: Во многих браузерах этот элемент является ненадежным, и поскольку
чаще всего он используется для представления, современная практика советует
использовать хорошо структурированную таблицу и язык CSS для согласующихся
результатов.
Элемент: colgroup
Описание: Обозначает группу столбцов таблицы.
Тип элемента: Встроенный, непустой.
Пример:
<table>
<colgroup align="center" span="2"x/colgroup>
<colgroup valign="bottom"></colgroup>
<tr>
<td>column one, spans two columns, is centered.</td>
<td>column two, part of the two column span, is centered</td>
<td>column three, aligned to the bottom</td>
</tr>
</table>
Советы: Во многих браузерах этот элемент является ненадежным и чаще всего
используется для группирования столбцов в презентационных целях. Для
согласующихся результатов такое представление лучше всего реализовать с
использованием языка CSS.
Элемент: dd
Описание: Создает описание списка определений.
Тип элемента: Блочный, непустой.
Пример:
<dl>
<dt>XHTML</dt>

Приложение А. Аннотированный справочник по языку XHTML 1.0
249
<dd>Extensible Hypertext Markup Language</dd>
</dl>
Советы: Поддерживается очень большим количеством браузеров, но, к
сожалению, используется редко.
Элемент: del
Описание: Обозначает удаленный текст, обычно из предыдущей версии одного и
того же документа или в отредактированном документе.
Тип элемента: Встроенный, непустой.
Пример:
<del>This text is to be deleted</del>
Советы: Не поддерживается браузерами Netscape 4.x. В браузерах с поддержкой
данного элемента, содержимое элемента обычно отображается перечеркнутым.
Элемент: df n
Описание: Описывает термин, используемый в документе впервые.
Тип элемента: Встроенный, непустой.
Пример:
<dfn>XHTML</dfn> is the Extensible Hypertext Markup Language.
Советы: Не поддерживается браузерами Netscape 4.x. Хорошо поддерживается
остальными браузерами. Содержимое элемента обычно отображается курсивом.
Элемент: dir
Описание: Определяет список каталогов.
Тип элемента: Блочный, непустой.
Пример:
<dir>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</dir>
Советы: Поддерживается множеством браузером. Это устаревший элемент и
следует избегать его использования, заменяя элементом ul.
Элемент: div
Описание: Обозначает раздел документа. Используется в основном для
идентификации разделов документа, которые в последствии можно позиционировать и
стилизовать при помощи языка CSS.

250
Языки HTML и CSS
Тип элемента: Блочный, непустой.
Пример:
<div id="content">
This section will contain the document's primary content.
</div>
Советы: Поддерживается практически всеми браузерами. Это один из основных
элементов, используемых для эффективной стилизации разделов страницы.
Элемент: dl
Описание: Обозначает список определений терминов.
Тип элемента: Блочный, непустой.
Пример:
<dl>
<dt>XHTML</dt>
<dd>Extensible Hypertext Markup Language</dd>
</dl>
Советы: Поддерживается практически всеми браузерами.
Элемент: dt
Описание: Обозначает определяемый термин.
Тип элемента: Блочный, непустой.
Пример: обратитесь к примеру для элемента dl.
Советы: Поддерживается практически всеми браузерами.
Элемент: em
Описание: Структурный, непустой, встроенный элемент, используемый для
обозначения текста, которому придается особое значение.
Тип элемента: Встроенный, непустой.
Пример:
<em>This text is marked up as emphasized text.</em>
Советы: Поддерживается очень большим количеством браузером. Хотя браузеры
обычно отображают акцентированный текст курсивом, это всего лишь
соглашение. Элемент em не считается презентационным элементом.
Элемент: fieldset
Описание: Предоставляет способ группирования связанных заголовков формы и
элементов управления. Используется для доступности.

Приложение А. Аннотированный справочник по языку XHTML 1.0
251
Тип элемента: Блочный, непустой.
Пример:
<form>
<fieldset>
<input type="text" id="firstname" value="firstname" />
<input type="text" id="lastname" value="lastname" />
</fieldset>
</form>
Советы: Не поддерживается браузерами Netscape 4.x. Поддерживается
современными браузерами. Большинство браузеров отображают вокруг содержимого
элемента f ieldset рамку.
Элемент: font
Описание: Позволяет автору документа добавлять шрифты в документ.
Тип элемента: Встроенный, непустой.
Пример:
<font face="Arial" color="blue" size="2">This will appear as
Arial blue text one size smaller than the default text</font>
Советы: Это устаревший элемент, и хотя он допустим в языке XHTML 1.0
Transitional, следует избегать его использования.
Элемент: form
Описание: Обозначает форму.
Тип элемента: Блочный, непустой.
Пример:
<form>
<input type="text" id="firstname" value="firstname" />
<input type="text" id="lastname" value="lastname" />
</form>
Советы: Обычно, необходимо указывать скрипт, который отвечает за обработку
введенных данных. Эти скрипты сильно отличаются друг от друга;
проконсультируйтесь со своим поставщиком услуг насчет того, нужно ли предоставлять
дополнительную информацию для скриптов, характерных для вашей среды.
Элемент: frame
Описание: Обозначает фрейм в документе набора фреймов. Может
использоваться только вместе с определением DTD набора фреймов, заменяет элемент
body в документе такого типа.

252
Языки HTML и CSS
Тип элемента: Структурный (frames), пустой.
Пример:
<frame src="framel.html" id="framel" scrolling="no" />
Советы: Поддерживается всеми современными браузерами. Элемент должен
быть использован в наборе фреймов вместе с определением DOCTYPE для набора
фреймов.
Элемент: frameset
Описание: Определяет набор фреймов - элемент управления сайтом,
построенным на фреймах.
Тип элемента: Структурный (frames), непустой.
Пример:
<frameset cols="30%,100%" scrolling="auto">
<frame src="nav.html">
<frame src="content.html" />
<frame src="frame3.html" />
</frameset>
Советы: Поддерживается всеми современными браузерами. Элемент доступен
только в определении DOCTYPE для набора фреймов.
Элемент: hl-h6
Описание: Используется для заголовков, уровни 1-6.
Тип элемента: Блочный, непустой.
Пример:
<hl>Welcome to the site that does it all!</hl>
Советы: Поддерживается практически всеми браузерами. Заголовки должны
быть использованы семантически для хорошо структурированных документов, а
не для управления размером заголовка. Элемент hi считается наиважнейшим
заголовком на странице, приравниваемым по значению к заголовку главы.
Многие профессиональные авторы пропагандируют использование только одного
элемента hi в документе, однако это не обязательное правило.
Элемент: head
Описание: Обозначает головную часть документа. Это обязательный элемент для
всех документов, создаваемых с использованием языка XHTML, и он должен
включать в себя элемент title. Головная часть документа используется для
определения заголовка страницы и может быть использована для элементов meta,
link, style и script.

Приложение А. Аннотированный справочник по языку XHTML 1.0
253
Тип элемента: Структурный (документ), непустой.
Пример:
<head>
<title>The title element must always appear within a head
element</title>
</head>
Советы: Старые браузеры будут отображать код стилей или скриптов, если код
не включен в комментарии, однако сейчас это случается довольно редко.
Элемент: hr
Описание: Отображает горизонтальную линию.
Тип элемента: Блочный, пустой.
Пример:
I want to separate my text with a rule, so I'll place a
horizontal rule element after.
<hr />
Советы: Поддерживается практически всеми браузерами. Многие специалисты по
разметке советуют избегать использования горизонтальных линий, а вместо этого
применять язык CSS для стилизации нижней границы выбранного элемента; этот
подход является более гибким и позволяет управлять внешним видом линии.
Элемент: html
Описание: Считается корневым элементом всех документов, создаваемых с
использованием языков HTML и XHTML. Это злемент-«предок» - все элементы HTML-
и XHTML-документов являются потомками корневого элемента.
Тип элемента: Структурный (документ), непустой.
Пример:
<html xmlns="http://www.w3/org/1999/xhtml">
<head>
<titlex/title>
</head>
<body>
</body>
</html>
Советы: Поддерживается всеми браузерами. В языке XHTML открывающий тег
должен всегда содержать атрибут xmlns (пространство имен XML). Некоторые
HTML-редакторы не включают этот атрибут, что приводит к ситуации, когда
корректно оформленные документы не проходят проверку на корректность.

254 Языки HTML и CSS
Элемент: i
Описание: Презентационный элемент, используемый для создания курсивного
текста.
Тип элемента: Встроенный, непустой.
Пример:
<i>This text will appear as italicized.</i>
Советы: Этот документ доступен в определениях DTD для языков XHTML
Transitional и XHTML Strict. Однако пуристы рекомендуют избегать его использования,
поскольку существует элемент em, который считается структурным, а не
презентационным элементом.
Элемент: i frame
Описание: Создает встроенный фрейм.
Тип элемента: Блочный, непустой.
Пример:
<iframe src="about.html" width="100" height="100" id="message">
</iframe>
Советы: Элемент iframe поддерживается всеми современными браузерами, за
исключением браузеров Netscape до версии 7.0.
Элемент: img
Описание: Вызывает изображение.
Тип элемента: Встроенный, пустой.
Пример:
<img src="images/molly.gif" width="150" height="200"
alt="picture of Molly" />
Советы: Элемент поддерживается всеми браузерами, но ожидается, что в языке
XHTML 2.0 он станет устаревшим, а ему на смену придет элемент object,
используемый для всех объектов в этом языке.
Элемент: input
Описание: Используется в формах и обозначает элемент управления, например
поле ввода.
Тип элемента: Встроенный, пустой.
Пример:
<input type="text" id="firstname" value="firstname" />
Советы: Этот элемент поддерживается всеми браузерами.

Приложение А. Аннотированный справочник по языку XHTML 1.0
255
Элемент: ins
Описание: Обозначает текст, вставленный в документ.
Тип элемента: Встроенный, непустой.
Пример:
<ins>Inserted text here.</ins>
Советы: Этот элемент поддерживается всеми современными браузерами.
Поддержка полностью отсутствует у браузера Netscape 4.x. Обычно отображается в
виде подчеркнутого текста.
Элемент: isindex
Описание: Используется Web-авторами для предоставления строки ввода для
поиска индекса. Также, идентифицирует документ, как часть индекса, по которому
осуществляется поиск.
Тип элемента: Блочный, пустой.
Пример:
<isindex />
Советы: Этот элемент поддерживается практически всеми браузерами. Является
устаревшим в языке XHTML, поэтому его нельзя использовать в документах с
определением Strict DTD. Преимущественно используется в качестве формы для
программного обеспечения поисковой системы. В браузере обычно
отображается текст «This is a searchable index. Enter search keywords:», за которым следует
поле ввода для поиска.
Элемент: kbd
Описание: Определяет текст, который читатель должен вести с клавиатуры.
Тип элемента: Встроенный, непустой.
Пример:
Please type the following into your practice document:
<kbd>Hello, World!</kbd>
Советы: Этот элемент поддерживается практически всеми браузерами и обычно
текст отображается при помощи моноширинного шрифта.
Элемент: label
Описание: Позволяет авторам присваивать метки элементам управления формы.
Особенно полезно для реализации доступности.
Тип элемента: Встроенный, непустой.

256
Языки HTML и CSS
Пример:
<label for="fullname"><input type="text" id="fullname" /></label>
Советы: Элемент поддерживается всеми современными браузерами, а также
браузером Netscape 4.x.
Элемент: legend
Описание: Определяет заголовок для группы элементов формы.
Тип элемента: Блочный, непустой.
Пример:
<form>
<fieldset>
<legend>Personal Info</legend>
<input type="text" id="firstname" value="firstname" />
<input type="text" id="lastname" value="lastname" />
</fieldset>
</form>
Советы: Этот элемент недоступен в браузере Netscape 4.x, однако он
поддерживается большинством современных браузеров.
Элемент: li
Описание: Обозначает отдельный элемент упорядоченного или
неупорядоченного списка.
Тип элемента: Блочный, непустой.
Пример:
<ul>
<li>By default, unordered list items display with a
bullet.</li>
</ul>
Советы: Для этого элемента проблемы, связанные с поддержкой, не известны.
Элемент: link
Описание: Ссылки на связанные файлы, например на внешнюю таблицу стилей,
в разделе документа head.
Тип элемента: Структурный (head), непустой.
Пример:
<link href="my.css" rel="stylesheet" type="text/css" />

Приложение А. Аннотированный справочник по языку XHTML 1.0
257
Советы: Элемент поддерживается всеми браузерами, в которых реализована
хотя бы минимальная поддержка языка CSS.
Элемент: тар
Описание: Обозначает карту ссылок.
Тип элемента: Блочный, непустой.
Пример:
<тар пате="тар2">
<area shape="rect" href="http://www.molly.com/"
cords="0/0,10,20" />
<area shape="circle" href="http://www.pearson.com/"
cords="0/10,8" />
<area shape="poly" href="http://www.google.com/"
cords="10,0,20,10,0,10" />
</map>
<img src="images/map.gif" usemap="#map2" />
Советы: Поддерживается всеми современными браузерами.
Элемент: menu
Описание: Создает список меню с одним столбцом.
Тип элемента: Блочный, непустой.
Пример:
<menu>
<li>option one</li>
<li>option two</li>
<li>option three</li>
</menu>
Советы: Этот элемент поддерживается многими браузерами, однако он является
устаревшим - ему на смену пришел элемент ul.
Элемент: meta
Описание: Управляет различными метаданными в HTML- и XHTML-документах.
Тип элемента: Структурный (head), пустой.
Пример:
<meta name="description" content="Enter your description here" />
Советы: Этот элемент всегда размещается в элементе документа head.

258 Языки HTML и CSS
Элемент: nof rames
Описание: Используется только в документах с набором фреймов. Его
назначение - предоставить авторам документов возможность добавлять раздел в набор
фреймов, который будет отображаться в браузерах, не имеющих поддержки
фреймов, или который будут использовать люди для доступа к сайтам на основе
фреймов, применяя средства специальных возможностей.
Тип элемента: Блочный, непустой.
Пример:
<frameset cols="30%,100%" scrolling="auto">
<frame src="nav.html">
<frame src="content.html" />
<frame src="frame3.html" />
<noframes>
It appears your browser does not support frames. Please use this
<a href="noframes.html">version</a> for access to the content.
</noframes>
</frameset>
Советы: Этот элемент поддерживается практически всеми браузерами и должен
использоваться во всех документах с набором фреймов, помогая людям, которые
не могут воспользоваться фреймами.
Элемент: noscript
Описание: Определяет альтернативное содержание для браузеров без
поддержки язык JavaSscript.
Тип элемента: Блочный, непустой.
Пример:
<script src="scripts/myscript.js" type="text/javascript"> </script>
<noscript>
Your browser either does not support JavaScript, or you have it
disabled, thank you.
</noscript>
Советы: Этот элемент поддерживается практически всеми браузерами и должен
использоваться для предоставления информации, касающейся поддержки
скриптов, тем людям, у которых нет подходящего браузера или которые
отключили поддержку языка JavaScript по какой-либо причине.
Элемент: object
Описание: Определяет любой внешний объект. В настоящее время используется
в основном для Flash-роликов, видео, аудио и Java-апплетов, однако в языке
XHTML 2.0 этот элемент будет применяться повсеместно, включая изображения.

Приложение А. Аннотированный справочник по языку XHTML 1.0
259
Тип элемента: Особый (может быть блочным или встроенным, в зависимости от
контекста), непустой.
Пример:
<object codebase="http://www.molly.com/java/classes"
classid="FunApplet.class" width="50" height="100">Applet</object>
Советы: Этот элемент следует использовать везде, где это возможно, вместо
элемента applet, который является устаревшим. Элемент embed, который
является собственностью браузеров и не описан ни в одной из спецификаций, должен
быть заменен элементом object или, если необходимо реализовать обратную
совместимость, использоваться вместе с элементом object.
Элемент: ol
Описание: Обозначает упорядоченный список. Без стилизации, стандартным
поведением браузеров является использование числа 1 для первого элемента
списка. Это поведение можно изменить при помощи свойств языка CSS
(обратитесь к Приложению В «Аннотированный справочник по языку CSS 2.1»).
Тип элемента: Блочный, непустой.
Пример:
<ol>
<li>This is the first item in the list</li>
<li>This is the second item in the list</li>
</ol>
Советы: Элемент поддерживается всеми браузерами и должен использоваться во
всех логичных случаях, когда необходимо применять последовательный список.
Элемент: optgroup
Описание: Позволяет сгруппировать варианты в меню выбора формы.
Тип элемента: Блочный, непустой.
Пример:
<form>
<select id="browsers">
<option>Name your favorite web browser</option>
<optgroup label="standards-compliant">
<option>Mozilla</option>
<option>Firefox</option>
<option>Safari</option>
<option>Opera</option>
</optgroup>
<optgroup label="needs-updating">
<option>Internet Explorer</option>
<option>AOL</option>

260
Языки HTML и CSS
</optgroup>
</select>
</form>
Советы: Этот элемент поддерживается только современными браузерами,
например IE 6.0, Mozilla и Mozilla Firefox. Очень полезен для реализации доступности и
общего понимания, поэтому его рекомендуется использовать. Если браузер не
поддерживает этот элемент, список вариантов будет все равно отображаться и
корректно функционировать.
Элемент: option
Описание: Описывает отдельные варианты меню формы.
Тип элемента: Блочный, непустой.
Пример: обратитесь к примеру для элемента optgroup.
Советы: Этот элемент поддерживается всеми браузерами.
Элемент: р
Описание: Обозначает абзац текста.
Тип элемента: Блочный, непустой.
Пример:
<p>This is a paragraph of text.</p>
Советы: Этот элемент поддерживается всеми известными браузерами.
Элемент: param
Описание: Указывает значения для апплетов или объектов.
Тип элемента: Структурный (object), пустой.
Пример:
<object codebase="http://www.molly.com/java/classes"
classid="FunApplet.class" width="50" height="100">
<param name="FunStuff" value="lgh" />
Fun Stuff Java Applet</object>
Советы: Этот элемент поддерживается многими браузерами и часто является
обязательным для корректного функционирования выбранного объекта.
Элемент: pre
Описание: Чрезвычайно полезный элемент, обозначающий часть, в которой
весь текст, все символы окончания строки и пробелы будут интерпретированы
браузером.

Приложение А. Аннотированный справочник по языку XHTML 1.0
261
Тип элемента: Блочный, непустой.
Пример:
<рге>
This text will
appear with all the spaces
and carriage returns intact.
</pre>
Советы: Элемент поддерживается практически всеми браузерами. Чаще всего
используется для отображения длинных отрывков кода. Содержимое элемента
отображается при помощи моноширинного шрифта почти во всех браузерах.
Элемент: q
Описание: Определяет короткие встроенные цитаты.
Тип элемента: Встроенный, непустой.
Пример:
<q>Don't put all your eggs in one basket.</q>
Советы: Все современные браузеры поддерживают элемент q, однако способы
отображения текста у них отличаются. В некоторых браузерах добавляются
символы кавычек; в других - никаких изменений не происходит. Для изменения
внешнего вида элемента можно использовать язык CSS.
Элемент: s
Описание: Отображает перечеркнутый текст.
Тип элемента: Встроенный, непустой.
Пример:
<q>Don't put all your <s>eggs</s> hopes in one basket.</q>
Советы: Элемент поддерживается множеством браузеров, но является
устаревшим, поскольку таблицы стилей предоставляют гораздо большие возможности
по управлению.
Элемент: samp
Описание: Отображает результаты выполнения скриптов или других программ.
Тип элемента: Встроенный, непустой.
Пример:
<p>Enter the following text into your code: <samp>Hello,
World! < / sampx /p>

262
Языки HTML и CSS
Советы: Элемент поддерживается множеством браузеров и полезен для
встроенного отображения результатов выполнения примера, поскольку большая часть
браузеров отображает текст при помощи моноширинного шрифта.
Элемент: script
Описание: Встраивает или связывает документ со скриптами, обычно
написанными на языке JavaScript.
Тип элемента: Структурный (head), непустой.
Пример:
<script type="text/javascript">(javascript code here)</script>
<script href="myscript.js"></script>
Советы: Элемент поддерживается практически всеми браузерами.
Элемент: select
Описание: Создает открывающееся меню на форме.
Тип элемента: Блочный, непустой.
Пример:
<form>
<select name="browsers">
<option>Your favorite browser:</option>
<option>IE</option>
<option>Mozilla / Firefox</option>
<option>Opera</option>
<option>Safari</option>
</select>
</form>
Советы: Элемент поддерживается практически всеми браузерами.
Элемент: small
Описание: Презентационный элемент для отображения текста шрифтом, размер
которого меньше стандартного размера текста браузера.
Тип элемента: Встроенный, непустой.
Пример:
What do you know - <small>this text will appear smaller</small>
than the surrounding text.
Советы: Вместо элемента small используйте язык CSS, чтобы получить больше
возможностей управления размером текста.

Приложение А. Аннотированный справочник по языку XHTML 1.0
263
Элемент: span
Описание: Встроенный общий контейнер для текста.
Тип элемента: Встроенный, непустой.
Пример:
In this paragraph <span style="color: blue; font-weight:
bold;">I've styled this text</span> differently than the
surrounding text.
Советы: Элемент поддерживается множеством браузеров и в основном используется
для применения встроенного стиля. Элемент span находится под пристальным
взглядом пуристов разметки, которые считают, что другие элементы, например q,
cite или code, лучше подходят для разметки текста, имеющего особый смысл.
Элемент: strike
Описание: Создает перечеркнутый текст (как и элемент s).
Тип элемента: Встроенный, непустой.
Пример:
Don't put all your <strike>eggs</strike> dreams in one basket.
Советы: Этот элемент поддерживается множеством браузеров, однако
предпочтительнее использовать язык CSS для применения стилей, перечеркивающих текст.
Элемент: strong
Описание: Структурный элемент, обозначающий акцентируемую часть текста.
Тип элемента: Встроенный, непустой.
Пример:
I want to <strong>shout out the good news</strong> for everyone
to hear!
Советы: Поддерживается множеством браузеров. Элемент strong
предпочтительно использовать вместо элемента Ь. По умолчанию, обычно эти два элемента
отображают текст шрифтом полужирного начертания.
Элемент: style
Описание: Обозначает раздел встроенного стиля.
Тип элемента: Структурный (head), непустой.
Пример:
<style type="text/ess">

264
Языки HTML и CSS
hi {font-family: Arial, font-size: 1.5em; color: #000;}
</style>
Советы: Этот элемент поддерживается всеми браузерами, у которых реализована
хотя бы минимальная поддержка языка CSS. Хотя в определенных ситуациях
встроенные стили могут быть весьма полезны, рекомендуется использовать
внешние стили для лучшего управления документами.
Элемент: sub
Описание: Описывает текст в нижнем индексе.
Тип элемента: Встроенный, непустой.
Пример:
What do you know - <sub>this text will appear as
subscript</sub> that is, lower than the surrounding text.
Советы: Поддерживается практически всеми браузерами.
Элемент: sup
Описание: Описывает текст в верхнем индексе.
Тип элемента: Встроенный, непустой.
Пример:
On the 24<sup>th</sup> of June, my niece got married to the
nicest guy!
Советы: Поддерживается практически всеми браузерами.
Элемент: table
Описание:
Тип элемента: Блочный, непустой.
Пример:
<table>
<tr>
<th>Table header</th>
<td>Table cell</td>
<td>Another table cell</td>
</tr>
</table>
Советы: Поддерживается всеми браузерами. Элемент table в идеале
используется в качестве структурного элемента - то есть для описания табличных данных,
- а не в качестве инструмента для создания макетов. Для управления всеми
аспектами табличного представления можно использовать язык CSS.

Приложение А. Аннотированный справочник по языку XHTML 1.0 265
Элемент: tbody
Описание: Группирует строки таблиц. Полезен для обеспечения доступности
таблиц.
Тип элемента: Структурный (table), непустой.
Пример:
<table>
<tr>
<th>Table header</th>
<td>Table cell</td>
<td>Another table cell</td>
</tr>
<tbody id="row2">
<tr>
<th>Table header</th>
<td>Table cell</td>
<td>Another table cell</td>
</tr>
<tbody>
</table>
Советы: Этот элемент доступен только в современных браузерах. Его полезно
использовать при разделении таблицы на части, чтобы сделать ее более понятной.
Элемент: td
Описание: Включает содержимое столбца таблицы.
Тип элемента: Структурный (table), непустой.
Пример: обратитесь к примерам для элементов table и tbody.
Советы: Этот элемент поддерживается всеми браузерами.
Элемент: textarea
Описание: Создает многострочные поля ввода на формах.
Тип элемента: Блочный, непустой.
Пример:
<form>
<textarea name="feedback rows="2" cols="25">This text will
appear within the text area</textarea>
</form>
Советы: Этот элемент поддерживается всеми браузерами.

266
Языки HTML и CSS
Элемент: tf oot
Описание: Описывает строку нижнего колонтитула таблицы.
Тип элемента: Структурный (table), непустой.
Пример:
<tfoot>
<tr>
<th>Table header</th>
<td>Table cell</td>
<td>Another table cell</td>
</tr>
</tfoot>
Советы: Этот элемент доступен в современных браузерах и используется для
расширенной доступности.
Элемент: th
Описание: Заголовок таблицы для столбцов данных.
Тип элемента: Структурный (table), непустой.
Пример: обратитесь к примерам для элементов table и tbody.
Советы: Поддерживается всеми браузерами. Этот элемент необходим при
создании структурированных таблиц данных. По умолчанию содержимое элемента
отображается шрифтом с полужирным начертанием и выравниванием по центру,
однако это можно легко изменить при помощи языка CSS.
Элемент: thead
Описание: Определяет головную часть многострочной таблицы.
Тип элемента: Структурный (table), непустой.
Пример:
<thead>
<tr>
<th>Table header</th>
<td>Table cell</td>
<td>Another table cell</td>
</tr>
</thead>
Советы: Поддерживается только современными браузерами. Используется для
улучшения доступности и понимания многострочных таблиц.

Приложение А. Аннотированный справочник по языку XHTML 1.0 267
Элемент: title
Описание: Обозначает заголовок страницы, который отображается в строке
заголовка браузера.
Тип элемента: Структурный (head), непустой.
Пример:
<title>Welcome to Molly.Com!</title>
Советы: Поддерживается всеми браузерами. Чтобы документ прошел проверку
на корректность, этот элемент должен размещаться в разделе документа head.
Элемент: tr
Описание: Создает строку таблицы.
Тип элемента: Структурный (table), непустой.
Пример: обратитесь к примерам для элементов table и tbody.
Советы: Поддерживается всеми браузерами.
Элемент: tt
Описание: Создает телетайпный текст.
Тип элемента: Встроенный, непустой.
Пример:
In this sentence <tt>these words represent teletype text</tt>.
Советы: Поддерживается практически всеми браузерами. Обычно отображается
моноширинным шрифтом и считается презентационным элементом, поскольку
этот визуальный стиль можно легко воспроизвести при помощи языка CSS.
Элемент: и
Описание: Презентационный элемент, используемый для подчеркивания текста.
Тип элемента: Встроенный, непустой.
Пример:
In this sentence, <u>these words are underlined</u>.
Советы: Поддерживается всеми браузерами, хотя предпочтительнее
использовать язык CSS. Многие эксперты протестуют против использования
подчеркивания, поскольку люди путают подчеркнутый текст со связанным текстом.

268
Языки HTML и CSS
Элемент: ul
Описание: Создает неупорядоченный список.
Тип элемента: Блочный, непустой.
Пример:
<ul>
<li>List item one</li>
<li>List item two</li>
<ul>
Советы: Поддерживается всеми браузерами. Элементы неупорядоченных
списков отображаются с маркерами, используемыми по умолчанию, хотя это можно
изменить при помощи языка CSS.
Элемент: var
Описание: Обозначает переменную.
Тип элемента: Встроенный, непустой.
Пример:
Locate for the <var>book.php</var> file before continuing.
Советы: Этот элемент используется редко, но поддерживается практически
всеми браузерами.

ПРИЛОЖЕНИЕ В.
Аннотированный справочник
по языку CSS 2.1
В этом приложении собрана информация о селекторах и свойствах, доступных
в языке CSS 2.1. Селекторы сначала определяются и описываются, затем
приводится пример и полезные советы по использованию. Что касается свойств, то
каждое свойство сначала определяется и описывается, при этом указывается
его классификация среды. Затем приводится пример и полезные советы по
использованию.
Селекторы, псевдоклассы и псевдоэлементы
Следующие типы селекторов, псевдоклассы и псевдоэлементы доступны для
использования в языке CSS 2.1.
Селектор: Селектор сестринских элементов
Описание: Выбирает сестринский элемент (смежный непосредственно с первым
определенным селектором с общими предками).
Пример:
hi + р {
text-indent: 0;
}
Советы: Этот селектор недоступен для использования в браузере Internet Explorer
и поэтому он используется в основном для улучшения стилей в браузерах,
поддерживающих данный тип селектора, или для реализации обходных решений.
Селектор: Селектор атрибута
Описание: Выбирает элемент на основе его атрибутов.
Пример:
acronym [title] {
color: red;
}
Советы: Этот селектор недоступен для использования в браузере Internet Explorer
и поэтому он используется в основном для улучшения стилей в браузерах,
поддерживающих данный тип селектора, или для реализации обходных решений.
Селектор: Селектор дочерних элементов
Описание: Выбирает дочерние элементы для указанного элемента.

270
Языки HTML и CSS
Пример:
#content > р {
padding: Юрх;
}
Советы: Этот селектор недоступен для использования в браузере Internet Explorer
и поэтому он используется в основном для улучшения стилей в браузерах,
поддерживающих данный тип селектора, или для реализации обходных решений.
Селектор: Селектор класса
Описание: Позволяет создавать пользовательский класс. В языке HTML или
XHTML вызывается с использованием атрибута class для выбранного элемента.
Пример:
.notation {
font-size: xx-small;
}
Советы: Этот селектор поддерживается практически всеми браузерами, и
поэтому используется слишком часто. Избежать чрезмерного использования
возможно путем упрощения кода на языке CSS при помощи селекторов потомков.
Селектор: Селектор потомка
Описание: Выбирает все элементы-потомки родительского элемента.
Пример:
#content p {
font-family: Arial, Helvetica, sans-serif;
}
Советы: Этот селектор поддерживается практически всеми браузерами и его
следует использовать всегда, когда это возможно, чтобы свести к минимуму
зависимость от селекторов класса.
Селектор: ID-селектор
Описание: Позволяет создавать селектор с уникальным идентификатором. В
коде на языке HTML или XHTML вызывается при помощи атрибута id выбранного
элемента. В документе может использоваться только один раз.
Пример:
#content {
margin-left: 25px;
margin-right: 25px;
}

Приложение В. Аннотированный справочник по языку CSS 2.1
271
Советы: Этот селектор поддерживается практически всеми браузерами и
обычно применяется для описания частей документа, используемых для макета.
Он также используется для связи элементов со скриптами в языке DHTML.
Селектор: Универсальный селектор
Описание: Выбирает все элементы.
Пример:
* {
border: lpx dashed blue;
}
Советы: Этот селектор крайне полезен при выявлении ошибок, однако его не
следует использовать для решения обычных задач. В версиях браузера Internet Explorer
существуют определенные проблемы с поведением универсального селектора.
Селектор: Селектор (типа) элемента
Описание: Селектор, соответствующий типу элемента.
Пример:
hi {
font-size: 22рх;
}
Советы: Поддерживается практически всеми браузерами - это наиболее часто
используемый селектор.
Селектор: Динамический псевдокласс : active
Описание: Выбирает элемент в момент его активации пользователем.
Пример:
a:active {
color: red;
}
Советы: Поддерживается практически всеми браузерами. Выполняя стилизацию
ссылок, необходимо придерживаться порядка LoVe/HAte - link, visited,
hover, active - иначе результаты могут оказаться несоответствующими.
Селектор: Псевдоэлемент rafter
Описание: Используется для размещения сгенерированного текста за
выбранным элементом.

272
Языки HTML и CSS
Пример:
a:after {
content: link;
}
Советы: Этот селектор недоступен для использования в браузере Internet Explorer
и поэтому используется в основном для улучшения стилей в браузерах,
поддерживающих данный тип селектора.
Селектор: Псевдоэлемент : before
Описание: Используется для размещения сгенерированного текста перед
выбранным элементом.
Пример:
a:before {
content: link;
}
Советы: Этот селектор недоступен для использования в браузере Internet Explorer
и поэтому используется в основном для улучшения стилей в браузерах,
поддерживающих данный тип селектора.
Селектор: Псевдокласс :firstchild
Описание: Используется для выбора только первого элемента-потомка.
Пример:
p;firstchild em {
font-weight: bold;
}
Советы: Этот селектор недоступен для использования в браузере Internet Explorer
и поэтому используется в основном для улучшения стилей в браузерах,
поддерживающих данный тип селектора.
Селектор: Псевдоэлемент : f irstletter
Описание: Используется для выбора только первой буквы содержимого элемента.
Пример:
ttcontent p:firstletter {
font-size: larger;
}
Советы: Поддерживается практически всеми современными браузерами. Этот
селектор полезен для создания буквиц без применения изображений.

Приложение В. Аннотированный справочник по языку CSS 2.1
273
Селектор: Псевдоэлемент rfirstline
Описание: Используется для выбора только первой строки содержимого элемента.
Пример:
#content p:firstline {
color: red;
}
Советы: Поддерживается практически всеми современными браузерами. Этот
селектор позволяет применить стиль к первой строки содержимого элемента.
Если длина строки изменилась из-за изменения размеров окна браузера, стиль
все равно будет применен к первой строке.
Селектор: Динамический псевдокласс : focus
Описание: Применяет стиль, когда элемент находится в фокусе (позволяет
вводить символы с клавиатуры, например в форме).
Пример:
input:focus {
border: lpx solid red;
}
Советы: Этот селектор недоступен для использования в браузере Internet Explorer
и поэтому используется в основном для улучшения стилей в браузерах,
поддерживающих данный тип селектора.
Селектор: Динамический псевдокласс : hover
Описание: Применяет стиль, когда указатель мыши или устройства
позиционирования наведен на элемент.
Пример:
#toggle:hover {
border: lpx solid green;
}
Советы: Этот селектор недоступен для использования в браузере Internet Explorer
кроме случая, когда он применяется к элементу. Поэтому данный тип селектора
используется в основном для улучшения стилей в браузерах, поддерживающих его.
Селектор: Псевдокласс : lang
Описание: Выбирает элемент в зависимости от его языка.
Пример:
p.-lang(de) {
quotes: '»' *«' '\2039' '\203A';
}
10-1356

274
Языки HTML и CSS
Советы: Несовместимая поддержка селектора. Этот селектор используется для
многоязычных документов и интернационализации.
Селектор: Псевдокласс ссылки :link
Описание: Выбирает ссылку в нормальном состоянии.
Пример:
a:link {
color: #ccc;
}
Советы: Этот селектор поддерживается практически всеми браузерами. Не
забывайте правило последовательности LoVe/HAte, чтобы избежать
несоответствующих результатов.
Селектор: Псевдокласс ссылки : visited
Описание: Выбирает посещенную ссылку.
Пример:
a:visited {
color: #333;
}
Советы: Этот селектор поддерживается практически всеми браузерами. Не
забывайте правило последовательности LoVe/HAte, чтобы избежать
несоответствующих результатов.
Свойства, доступные в языке CSS 2.1
Свойство: background
Тип(ы) среды: Визуальный
Описание: Свойство-сокращение для всех отдельных свойств фона.
Пример:
body: {
background: url(images/body-back.gif) #ccc 50% no-
repeat fixed;
}
Советы: Свойства-сокращения зачастую являются уникальными. В данном
случае, необходимо использовать последовательность: изображение, цвет, позиция,
заполнение и присоединение. Если вы не используете все свойства, необходимо
просто сохранить порядок остальных свойств.

Приложение В. Аннотированный справочник по языку CSS 2.1
275
Свойство: background-attachment
Описание: Используется для управления прокручиванием фона.
Тип(ы) среды: Визуальный
Пример:
body {
background-attachment: scroll;
}
Советы: Значение scroll означает прокручивание фона вместе с содержимым;
если используется значение fixed, при прокручивании содержимого фон
остается зафиксированным.
Свойство: background-color
Описание: Определяет цвет фона элемента.
Тип(ы) среды: Визуальный
Пример:
div#content {
background-color: #fff;
}
Советы: Используйте цвет фона вместе с фоновым изображением, при этом
выбирайте цвет, близкий к концевому эффекту изображения. Это поможет
избежать проблем, возникающих, когда фоновое изображение не загружается по
какой-либо причине.
Свойство: background-image
Описание: Указывает путь к изображению для фона элемента.
Тип(ы) среды: Визуальный
Пример:
div#nav {
background-image: url(images/nav.gif);
}
Советы: Иногда путь к изображению и имя файла заключаются в кавычки. Это
совсем необязательно; если не использовать кавычки, вы сможете сэкономить
несколько байтов данных.
Свойство: background-position
Описание: Позволяет управлять положением фонового изображения
относительно его элемента.

276
Языки HTML и CSS
Тип(ы) среды: Визуальный
Пример:
div#nav {
background-position: top left;
}
Советы: Можно определять положение фонового изображения при помощи
процентов или ключевых слов значений длины (top, right, center, bottom,
left). Если указано только одно значение, оно определяет только
горизонтальное положение. Если указаны оба значения, горизонтальное значение
указывается первым. Для определения положения можно использовать отрицательные
значения, выраженные в процентах.
Свойство: background-repeat
Описание: Описывает используемый способ заполнения фона или отключает
заполнение.
Тип(ы) среды: Визуальный
Пример:
div#content {
background-repeat: repeat-x;
}
Советы: Когда-то все фоновые изображения просто заполняли раздел документа
body. Теперь можно управлять заполнением элемента, использовать полное
заполнение элемента, использовать заполнение вдоль оси х или у, или вообще не
использовать заполнение.
Свойство: border
Описание: Свойство-сокращение, позволяющее применять толщину, стиль и
цвет ко всем четырем сторонам блока элемента.
Тип(ы) среды: Визуальный
Пример:
blockquote {
border: lpx dotted red;
}
Советы: Использование свойства border для отображения контуров элементов
может оказаться весьма полезным при обнаружении ошибок, а также является
красивым вариантом дизайна для представления элемента. При помощи данного свойства-
сокращения невозможно применить различные стили к четырем сторонам; в таком
случае необходимо использовать полную форму записи для каждой из сторон.

Приложение В. Аннотированный справочник по языку CSS 2.1
277
Свойство: border-collapse
Описание: Определяет модель отображения границ таблицы. Значение
separate позволяет отображать раздельные границы ячеек; значение collapse
устанавливает модель сплошного отображения границ.
Тип(ы) среды: Визуальный
Пример:
#table01 {
border-collapse: separate;
}
Советы: Выбранная модель отображения границ таблицы является полностью
эстетическим выбором.
Свойство: border-color
Описание: Устанавливает цвет границы для любого элемента. Может
использоваться вместо свойств border-top-color, border-right-color, border-
bottom-color и border-left-color.
Тип(ы) среды: Визуальный
Пример:
#sidebar {
border-color: red blue green yellow;
}
Советы: Если вы указываете больше одного цвета, необходимо перечислять
значения в соответствии с правилом TRouBLe: top, right, bottom, left. Если
указано только одно значение, оно применяется ко всем сторонам. Если указаны
два значения, первое значение применяется к верхней и нижней границам, а
второе - к левой и правой. Если указаны три значения, первое значение
применяется к верхней границе, второе - к левой и правой границам, а третье - к
нижней границе. Если указаны четыре значения, они применяются ко всем границам
в следующем порядке: верхняя, правая, нижняя и левая.
Свойство: border-spacing
Описание: Определяет расстояние между соседними ячейками таблицы.
Тип(ы) среды: Визуальный
Пример:
table {
border-spacing: 1.Oem;
}

278
Языки HTML и CSS
Советы: Если указано только одно значение, оно задает расстояние, как по
горизонтали, так и по вертикали. Если указаны два значения, первое значение задает
расстояние по горизонтали, а второе - расстояние по вертикали. Значения
длины не могут быть отрицательными.
Свойство: border-style
Описание: Устанавливает начертание границы элемента. Может использоваться
вместо свойств border-top-style, border-right-style, border-bottom-
style и border-left-style.
Тип(ы) среды: Визуальный
Пример:
#sidebar {
border-style: solid dotted dashed none;
}
Советы: Если вы указываете больше, чем одно начертание, необходимо
перечислять значения в соответствии с правилом TRouBLe: top, right, bottom,
left. Если указаны только одно значение, оно применяется ко всем сторонам.
Если указаны два значения, первое значение применяется к верхней и нижней
границам, а второе - к левой и правой. Если указаны три значения, первое
значение применяется к верхней границе, второе - к левой и правой границам, а
третье - к нижней границе. Если указано четыре значения, они применяются ко
всем границам в следующем порядке: верхняя, правая, нижняя и левая.
Свойство: border-top
Описание: Свойство-сокращение для стилизации толщиной, начертанием и
цветом верхней границы элемента.
Тип(ы) среды: Визуальный
Пример:
#sidebar {
border-top: 2px dashed green;
}
Советы: Все три значения использовать не обязательно. Можно указать,
например, только значение толщины, а для остальных значений использовать свойства
border-style и border-color.
Свойство: border-right
Описание: Свойство-сокращение для стилизации толщиной, начертанием и
цветом правой границы элемента.
Тип(ы) среды: Визуальный

Приложение В. Аннотированный справочник по языку CSS 2.1
279
Пример:
#sidebar {
border-right: 2px solid green;
}
Советы: Все три значения использовать не обязательно. Можно указать,
например, только значение толщины, а для остальных значений использовать свойства
border-style и border-color.
Свойство: border-bottom
Описание: Свойство-сокращение для стилизации толщиной, начертанием и
цветом нижней границы элемента.
Тип(ы) среды: Визуальный
Пример:
#sidebar {
border-bottom: 2px dashed green;
}
Советы: Все три значения использовать не обязательно. Можно указать,
например, только значение толщины, а для остальных значений использовать свойства
border-style и border-color.
Свойство: border-left
Описание: Свойство-сокращение для стилизации толщиной, начертанием и
цветом левой границы элемента.
Тип(ы) среды: Визуальный
Пример:
#sidebar {
border- bottom: 2px solid green;
}
Советы: Все три значения использовать не обязательно. Можно указать,
например, только значение толщины, а для остальных значений использовать свойства
border-style и border-color.
Свойство: border-top-color
Описание: Задает цвет верхней границы элемента.
Тип(ы) среды: Визуальный
Пример:
#nav {
border-top-color: #c30;
)

280
Языки HTML и CSS
Советы: Использование свойств-сокращений позволяет сделать код на языке CSS
более изящным. Используйте полную форму записи свойств border только в тех
случаях, когда это действительно необходимо.
Свойство: border-right-color
Описание: Задает цвет правой границы элемента.
Тип(ы) среды: Визуальный
Пример:
#nav {
border-right-color: red;
}
Советы: Использование свойств-сокращений позволяет сделать код на языке CSS
более изящным. Используйте полную форму записи свойств border только в тех
случаях, когда это действительно необходимо.
Свойство: border-bottom-color
Описание: Задает цвет нижней границы элемента.
Тип(ы) среды: Визуальный
Пример:
#nav {
border-bottom-color: #808080;
}
Советы: Использование свойств-сокращений позволяет сделать код на языке CSS
более изящным. Используйте полную форму записи свойств border только в тех
случаях, когда это действительно необходимо.
Свойство: border-left-color
Описание: Задает цвет левой границы элемента.
Тип(ы) среды: Визуальный
Пример:
#nav {
border-left-color: red;
}
Советы: Использование свойств-сокращений позволяет сделать код на языке CSS
более изящным. Используйте полную форму записи свойств border только в тех
случаях, когда это действительно необходимо.

Приложение В. Аннотированный справочник по языку CSS 2.1
281
Свойство: border-top-style
Описание: Задает начертание верхней границы элемента.
Тип(ы) среды: Визуальный
Пример:
blockquote {
border-top-style: dashed;
}
Советы: Использование свойств-сокращений позволяет сделать код на языке CSS
более изящным. Используйте полную форму записи свойств border только в тех
случаях, когда это действительно необходимо. Существуют следующие значения
свойства: dotted, dashed, solid, double, groove, ridge, inset и
outset. Также существуют значения none (ничего не отображается) и hidden.
Свойство: border-right-style
Описание: Определяет начертание правой границы элемента.
Тип(ы) среды: Визуальный
Пример:
blockquote {
border-right-style: groove;
}
Советы: Использование свойств-сокращений позволяет сделать код на языке CSS
более изящным. Используйте полную форму записи свойств border только в тех
случаях, когда это действительно необходимо. Существуют следующие значения
свойства: dotted, dashed, solid, double, groove, ridge, inset и
outset. Также существуют значения none (ничего не отображается) и hidden.
Свойство: border-bottom-style
Описание: Задает начертание нижней границы элемента.
Тип(ы) среды: Визуальный
Пример:
blockquote {
border-bottom-style: ridge;
}
Советы: Использование свойств-сокращений позволяет сделать код на языке CSS
более изящным. Используйте полную форму записи свойств border только в тех
случаях, когда это действительно необходимо. Существуют следующие значения
свойства: dotted, dashed, solid, double, groove, ridge, inset и
outset. Также существуют значения none (ничего не отображается) и hidden.

282
Языки HTML и CSS
Свойство: border-left-style
Описание: Задает начертание левой границы элемента.
Тип(ы) среды: Визуальный
Пример:
blockquote {
border-left-style: groove;
}
Советы: Использование свойств-сокращений позволяет сделать код на языке CSS
более изящным. Используйте полную форму записи свойств border только в тех
случаях, когда это действительно необходимо. Существуют следующие значения
свойства: dotted, dashed, solid, double, groove, ridge, inset и
outset. Также существуют значения none (ничего не отображается) и hidden.
Свойство: border-top-width
Описание: Задает толщину верхней границы элемента.
Тип(ы) среды: Визуальный
Пример:
ttcontent {
border-top-width: 2px;
}
Советы: Использование свойств-сокращений позволяет сделать код на языке CSS
более изящным. Используйте полную форму записи свойств border только в тех
случаях, когда это действительно необходимо.
Свойство: border-right-width
Описание: Определяет толщину правой границы элемента.
Тип(ы) среды: Визуальный
Пример:
ttcontent {
border-right-width: 4px;
}
Советы: Использование свойств-сокращений позволяет сделать код на языке CSS
более изящным. Используйте полную форму записи свойств border только в тех
случаях, когда это действительно необходимо.
Свойство: border-bottom-width
Описание: Определяет толщину нижней границы элемента.
Тип(ы) среды: Визуальный

Приложение В. Аннотированный справочник по языку CSS 2.1
283
Пример:
ttcontent {
border-bottom-width: 2рх;
}
Советы: Использование свойств-сокращений позволяет сделать код на языке CSS
более изящным. Используйте полную форму записи свойств border только в тех
случаях, когда это действительно необходимо.
Свойство: border-left-width
Описание: Задает толщину левой границы элемента.
Тип(ы) среды: Визуальный
Пример:
ttcontent {
border-left-width: 4рх;
}
Советы: Использование свойств-сокращений позволяет сделать код на языке CSS
более изящным. Используйте полную форму записи свойств border только в тех
случаях, когда это действительно необходимо.
Свойство: border-width
Описание: Свойство-сокращение, используемое для определения ширины
границы элемента.
Тип(ы) среды: Визуальный
Пример:
ttcontent {
border-width: 2рх 4рх 8рх Юрх;
}
Советы: Если вы указываете больше, чем одну толщину, необходимо
перечислять значения в соответствии с правилом TRouBLe: top, right, bottom, left.
Если указано только одно значение, оно применяется ко всем сторонам. Если
указаны два значения, первое значение применяется к верхней и нижней
границам, а второе - к левой и правой. Если указаны три значения, первое
значение применяется к верхней границе, второе - к левой и правой границам,
а третье - к нижней границе. Если указаны четыре значения, они применяются
ко всем границам в следующем порядке: верхняя, правая, нижняя и левая.
Свойство: bottom
Описание: Указывает смещение нижнего края позиционируемого блока.

284
Языки HTML и CSS
Тип(ы) среды: Значение
Пример:
ttcontent {
position: absolute;
bottom: 45px;
}
Советы: Используемая схема позиционирования влияет на способ вычисления
величины смещения. Для блоков с абсолютным позиционированием значение
вычисляется в соответствии с блоком-контейнером. Для блоков с относительным
позиционированием смещение вычисляется в соответствии с блоком элемента.
Свойство: caption-side
Описание: Используется для позиционирования блока заголовка в таблицах
с элементом caption.
Тип(ы) среды: Визуальный
Пример:
caption {
caption-side: bottom;
}
Советы: Недостаточная поддержка свойства современными браузерами
ограничивает его использование.
Свойство: clear
Описание: Используется для запрещения обтекания элементов с плавающим
размещением.
Тип(ы) среды: Визуальный
Пример:
#tipscolumn {
clear: both;
}
Советы: Доступные значения: left, right и both. Использование этого
свойства аналогично использованию атрибута clear языка HTML в разметке для
представления документа.
Свойство: clip
Описание: Определяет, какая часть блока будет видна.
Тип(ы) среды: Визуальный

Приложение В. Аннотированный справочник по языку CSS 2.1
285
Пример:
#dynamicbox {
clip: rect(15px, 20px, 15px, 25px);
}
Советы: Это свойство часто применяется для функционирования скриптов,
использующих объектную модель документа (DOM - Document Object Model), для
добавления динамического поведения к выбранному элементу.
Свойство: color
Описание: Определяет основной цвет текстового содержимого элемента.
Тип(ы) среды: Визуальный
Пример:
Р (
color: blue;
}
Советы: Известных проблем не существует. Это свойство широко используется
со времени появления языка CSS.
Свойство: content
Описание: Используется для сгенерированного содержимого вместе с
псевдоэлементами :bef ore и :af ter.
Тип(ы) среды: Все
Пример:
a:after {
content: "link";
}
Советы: Сгенерированное содержимое не поддерживается браузером IE 6.O.
В результате использование этого свойства в настоящее время, к сожалению,
достаточно ограничено.
Свойство: cursor
Описание: Определяет вид отображаемого указателя мыши.
Тип(ы) среды: Визуальный, интерактивный
Пример:
а {
cursor: pointer;
}

286
Языки HTML и CSS
Советы: Использование этого свойства очень полезно для предоставления
дополнительных подсказок об элементе в фокусе. Оно полезно для улучшения
доступности и удобства использования.
Свойство: direction
Описание: Указывает направление печати в блоках.
Тип(ы) среды: Визуальный
Пример:
Р (
direction: rtl;
}
Советы: Возможные значения: rtl (справа налево) и ltr (слева направо).
Это чрезвычайно важно при интернационализации и разработке
многоязычных документов.
Свойство: display
Описание: Задает тип отображения элемента.
Тип(ы) среды: Все
Пример:
ul, li {
display: inline;
}
Советы: Это свойство чрезвычайно полезно в современных дизайнах макетов и
навигации.
Свойство: empty-cells
Описание: Определяет, отображать или скрывать пустые ячейки таблицы.
Тип(ы) среды: Визуальный
Пример:
table {
empty-cells: show;
}
Советы: Это свойство используется вместе с моделью отображения раздельных
границ (обратитесь к свойству border-collapse).
Свойство: float
Описание: Позволяет элементу с плавающим размещением выравниваться по
левому или правому краю.

Приложение В. Аннотированный справочник по языку CSS 2.1
287
Тип(ы) среды: Визуальный
Пример:
#contentcolumn {
float: right;
}
Советы: Изначально свойство float было разработано для управления такими
элементами с плавающим размещением, как изображения.
Свойство: font
Описание: Свойство-сокращение для управления отображением шрифта.
Тип(ы) среды: Визуальный
Пример:
Р (
font: italic small-caps bold 100%/100% Arial, sans-serif;
}
Советы: Для свойства font необходимо перечислять значения в определенном
порядке: font-style, font-variant, font-weight, font-size/font-
height, font-family. Нет необходимости включать все свойства, однако
порядок существенен. Также необходимо указать, по крайней мере, размер
шрифта и его семейство.
Свойство: font-family
Описание: Задает семейство шрифта для текста элемента.
Тип(ы) среды: Визуальный
Пример:
Р (
font-family: Georgia, "Times New Roman", serif;
}
Советы: Разумно всегда включать общее название семейства используемых
шрифтов (serif, sans-serif, fantasy, monospace). Также обратите
внимание, что названия шрифтов разделяются запятыми, а кавычки используются
только в одном случае - для названий шрифтов, состоящих из нескольких слов.
Свойство: font-size
Описание: Определяет размер шрифта.
Тип(ы) среды: Визуальный

288
Языки HTML и CSS
Пример:
.notation {
font-size: small;
}
Советы: Можно использовать ключевые слова для абсолютных размеров
(от xx-small до xx-large), ключевые слова для относительных размеров
(larger, smaller), а также распространенные значения длины и значения,
выраженные в процентах.
Свойство: font-style
Описание: Задает начертание шрифта, обычно italic (курсив) и oblique (наклонный).
Тип(ы) среды: Визуальный
Пример:
.notation {
font-style: italic;
Советы: Используйте начертания шрифтов для вспомогательного текста,
например примечаний и заголовков. Курсивное и наклонное начертания плохо
подходят для текста большого объема.
Свойство: font-variant
Описание: Задает способ отображения прописных букв.
Тип(ы) среды: Визуальный
Пример:
hi .{
font-variant: small-caps;
}
Советы: Это свойство может оказаться весьма полезным для создания
привлекательных заголовков и акцентируемого текста. Свойство не предназначено для
основного текста. Если браузер не поддерживает это свойство, шрифт будет
отображаться обычным способом.
Свойство: font-weight
Описание: Задает жирность шрифта.
Тип(ы) среды: Визуальный
Пример:
.highlight {
font-weight: bold;
}

Приложение В. Аннотированный справочник по языку CSS 2.1 289
Советы: Поддержка браузерами числовых значений от 100 до 900 реализована
противоречиво, поэтому не следует полагаться на эти значения.
Свойство: height
Описание: Задает высоту содержимого элемента.
Тип(ы) среды: Визуальный
Пример:
#content {
height: 400рх;
}
Советы: Поддержка этого свойства реализована противоречиво, поэтому на него
не стоит полагаться. Обратите внимание, что свойство height не применяется к
незаменяемым внутристрочным элементам.
Свойство: letter-spacing
Описание: Указывает расстояние между символами текста.
Тип(ы) среды: Визуальный
Пример:
#content p {
letter-spacing: O.lem;
}
Советы: Дизайнеры, предпочитающие контролировать отображение текста,
высоко ценят это свойство, однако его поддержка отчасти противоречива. Если
браузер не может распознать свойство, используется расстояние по умолчанию.
Свойство: line-height
Описание: Определяет высоту данной строки текста.
Тип(ы) среды: Визуальный
Пример:
#content p {
line-height: 120%;
}
Советы: Обычно высота строки должна приближаться к размеру шрифта. Чем
меньше высота строки относительно шрифта, тем ближе будут размещаться
строки, и наоборот. Слишком большое или слишком малое расстояние в любом
из направлений может привести к проблемам с читабельностью.

290
Языки HTML и CSS
Свойство: list-style
Описание: Свойство-сокращение для управления видом маркеров, их
размещением, а также изображением для маркеров.
Тип(ы) среды: Визуальный
Пример:
ttcontent ul {
list-style: disc outside url(images/bullet.gif);
}
Советы: Если изображение недоступно, на его месте будет отображаться
стиль disc.
Свойство: list-style-image
Описание: Добавляет изображение к элементам списка.
Тип(ы) среды: Визуальный
Пример:
#nav ul {
list-style-image: url(images/nav-bullet.gif);
}
Советы: Если вы хотите задать вид маркера на случай невозможности загрузки
изображения, можно получить немного больше управления над отображением.
Если вы не добавите значение вида маркера и изображение не отобразится, будет
использован стандартный вид маркера для данного типа списка.
Свойство: list-style-position
Описание: Описывает размещение блока маркера в списке.
Тип(ы) среды: Визуальный
Пример:
#content ul {
list-style-position: inside,-
}
Советы: Значение inside размещает вторую строку текста элемента списка
непосредственно под маркером. Значение outside размещает вторую строку
текста элемента списка за переделами блока, формируя удобные и знакомые
отступы, которые встречаются в большинстве списков.
Свойство: list-style-type
Описание: Задает вид маркера списка.

Приложение В. Аннотированный справочник по языку CSS 2.1
291
Тип(ы) среды: Визуальный
Пример:
#content ol {
list-style-type: decimal-leading-zero;
}
Советы: Доступны следующие значения: disc, circle, square, decimal,
decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-
latin, upper-latin, armenian, georgian, none и inherit. Обратите
внимание, что значение none удаляет все маркеры, что полезно при создании
дизайна навигации на основе списков.
Свойство: margin
Описание: Свойство-сокращение для значений полей элемента.
Тип(ы) среды: Визуальный
Пример:
ttcontent {
margin: 10px 2 0px ЗОрх;
}
Советы: Значения необходимо перечислять в соответствии с правилом TRouBLe:
top, right, bottom, left. Если указано только одно значение, оно применяется
ко всем сторонам. Если указаны два значения, первое значение применяется к
верхней и нижней границам, а второе - к левой и правой. Если указано три
значения, первое значение применяется к верхней границе, второе - к левой и
правой границам, а третье - к нижней границе. Если указаны четыре значения, они
применяются ко всем границам в следующем порядке: верхняя, правая, нижняя и
левая. Значения полей не наследуются.
Свойство: margin-right
Описание: Задает значение для правого поля элемента.
Тип(ы) среды: Визуальный
Пример:
#nav {
margin-right: 20px;
}
Советы: Значения полей не наследуются.
Свойство: margin-left
Описание: Задает значение для левого поля элемента.

292
Языки HTML и CSS
Тип(ы) среды: Визуальный
Пример:
#nav {
margin-left: 2.Oem;
}
Советы: Значения полей не наследуются.
Свойство: margin-top
Описание: Задает значение для верхнего поля элемента.
Тип(ы) среды: Визуальный
Пример:
#nav {
margin-top: 10%;
}
Советы: Значения полей не наследуются.
Свойство: margin-bottom
Описание: Задает значение для нижнего поля элемента.
Тип(ы) среды: Визуальный
Пример:
#nav {
margin-bottom: 20рх;
}
Советы: Значения полей не наследуются.
Свойство: max-height
Описание: Задает максимальную высоту блока элемента.
Тип(ы) среды: Визуальный
Пример:
h2 {
max-height: 35px;
}
Советы: Нельзя использовать отрицательные значения. Это свойство не
применяется к незаменяемым внутристрочным элементам или таблицам.

Приложение В. Аннотированный справочник по языку CSS 2.1
293
Свойство: max-width
Описание: Задает максимальную ширину.
Тип(ы) среды: Визуальный
Пример:
Р (
max-width: 80%
}
Советы: Это свойство полезно использовать для ограничения длины строк
текста, чтобы строки не были слишком длинными. К сожалению, это свойство не
поддерживается в браузере Internet Explorer 6.0, что расстраивает дизайнеров,
которые хотят управлять отображением текста на данном уровне.
Свойство: min-height
Описание: Задает минимальную высоту блока элемента.
Тип(ы) среды: Визуальный
Пример:
h2 {
min-height: lOOpx;
}
Советы: Это свойство не применяется к незаменяемым внутристрочным
элементам или таблицам.
Свойство: min-width
Описание: Задает максимальную ширину для блока элемента.
Тип(ы) среды: Визуальный
Пример:
Р (
min-width: 80%
}
Советы: Это свойство полезно использовать для гарантии того, что ширина
строк текста будет по крайней мере равна минимальной ширине. К сожалению,
это свойство не поддерживается в браузере Internet Explorer 6.0, что расстраивает
дизайнеров, которые хотят управлять отображением текста на данном уровне.

294
Языки HTML и CSS
Свойство: outline
Описание: Свойство-сокращение, создающее динамическую окантовку для
элементов управления форм и объектов.
Тип(ы) среды: Визуальный, интерактивный
Пример:
img {
outline: red solid thick;
}
Советы: Все динамические свойства outline, в отличие от свойств border, не
занимают место (не являются частью блочной модели при расчете ширины или
высоты) и могут иметь не только прямоугольную форму. Поддержка этих свойств
сильно ограничена (браузер Safari 1.2 поддерживает свойства outline), и
поэтому в настоящее время они используются очень редко.
Свойство: outline-color
Описание: Определяет цвет окантовки для элементов управления форм и объектов.
Тип(ы) среды: Визуальный, интерактивный
Пример:
img {
outline-color: blue;
}
Советы: Все динамические свойства outline, в отличие от свойств border,
не занимают место (не являются частью блочной модели при расчете ширины
или высоты) и могут иметь не только прямоугольную форму. Для этого
свойства можно использовать все цвета, а также значение invert. Это значение
инвертирует цвет, что может оказаться полезным для обеспечения видимости
окантовки, когда элемент управления или объект находятся в фокусе.
Поддержка этих свойств сильно ограничена (браузер Safari 1.2 поддерживает
свойства outline) и поэтому в настоящее время они используются очень редко.
Свойство: outline-style
Описание: Определяет начертание окантовки для элементов управления форм и
объектов.
Тип(ы) среды: Визуальный, интерактивный
Пример:
img {
outline-style: groove;
}

Приложение В. Аннотированный справочник по языку CSS 2.1
295
Советы: Все динамические свойства outline, в отличие от свойств border, не
занимают место (не являются частью блочной модели при расчете ширины или
высоты) и могут иметь не только прямоугольную форму. Для этого свойства
можно использовать те же значения, что и для свойства border-style, за
исключением значения hidden. Поддержка этих свойств сильно ограничена
(браузер Safari 1.2 поддерживает свойства outline), и поэтому в настоящее время они
используются очень редко.
Свойство: outline-width
Описание: Определяет толщину окантовки для элементов управления форм и
объектов.
Тип(ы) среды: Визуальный, интерактивный
Пример:
input {
outline-width: 2рх,-
}
Советы: Все динамические свойства outline, в отличие от свойств border, не
занимают место (не являются частью блочной модели при расчете ширины или
высоты) и могут иметь не только прямоугольную форму. Для этого свойства
можно использовать те же значения, что и для свойства border-width.
Поддержка этих свойств сильно ограничена (браузер Safari 1.2 поддерживает
свойства outline), и поэтому в настоящее время они используются очень редко.
Свойство: overflow
Описание: Используется для управления содержимым, выходящим за пределы
блока элемента.
Тип(ы) среды: Визуальный, интерактивный
Пример:
#tipscolumn {
overflow: scroll;
}
Советы: Доступны следующие значения: visible - отображает содержимое за
пределами блока; hidden - скрывает все содержимое, находящееся за
пределами блока; scroll - включает полосы прокрутки для блока элемента с
содержимым; и auto - при необходимости автоматически включает полосы прокрутки.
Свойство: padding
Описание: Свойство-сокращение для определения отступов блока элемента.
Тип(ы) среды: Визуальный

296
Языки HTML и CSS
Пример:
#content {
padding: Юрх 20px 15px 0;
}
Советы: Значения необходимо перечислять в соответствии с правилом
TRouBLe: top, right, bottom, left. Если указано только одно значение, оно
применяется ко всем сторонам. Если указаны два значения, первое значение
применяется к верхней и нижней границам, а второе - к левой и правой. Если
указаны три значения, первое значение применяется к верхней границе,
второе - к левой и правой границам, а третье - к нижней границе. Если указаны
четыре значения, они применяются ко всем границам в следующем порядке:
верхняя, правая, нижняя и левая.
Свойство: padding-top
Описание: Задает отступ сверху блока элемента.
Тип(ы) среды: Визуальный
Пример:
#content>p {
padding-top: Юрх;
}
Советы: Отступы считаются частью блочной модели и значения должны
учитываться при вычислении ширины и высоты.
Свойство: padding-right
Описание: Задает отступ с правой стороны блока элемента.
Тип(ы) среды: Визуальный
Пример:
#content p {
padding-right: 10%;
}
Советы: Отступы считаются частью блочной модели и значения должны
учитываться при вычислении ширины и высоты.
Свойство: padding-bottom
Описание: Задает отступ снизу блока элемента.
Тип(ы) среды: Визуальный

Приложение В. Аннотированный справочник по языку CSS 2.1
297
Пример:
#content+p {
padding-bottom: 2.Oem;
}
Советы: Отступы считаются частью блочной модели и значения должны
учитываться при вычислении ширины и высоты.
Свойство: padding-left
Описание: Задает отступ с левой стороны блока элемента.
Тип(ы) среды: Визуальный
Пример:
#content {
padding-left: 16px;
}
Советы: Отступы считаются частью блочной модели и значения должны
учитываться при вычислении ширины и высоты.
Свойство: page-break-after
Описание: Выполняет разрыв страницы в соответствии с указанным значением.
Тип(ы) среды: Визуальный, страничный
Пример:
#content {
page-break-after: always;
}
Советы: Допустимые значения свойств page-break включают: auto (не
разрывать страницу), always (выполнять разрыв всегда), avoid (избегать разрыва
страницы для данного элемента), left (разорвать страницу и продолжить отображение
содержимого на левой странице) и right (разорвать страницу и продолжить
отображение содержимого на правой странице).
Свойство: page-break-before
Описание: Выполняет разрыв страницы в соответствии с указанным значением.
Тип(ы) среды: Визуальный, страничный
Пример:
п2 {
page-break-before: right;
}

298
Языки HTML и CSS
Советы: Допустимые значения свойств page-break включают: auto (не
разрывать страницу), always (выполнять разрыв всегда), avoid (избегать разрыва
страницы для данного элемента), left (разорвать страницу и продолжить отображение
содержимого на левой странице) и right (разорвать страницу и продолжить
отображение содержимого на правой странице).
Свойство: page-break-inside
Описание: Выполняет разрыв страницы в соответствии с указанным значением.
Тип(ы) среды: Визуальный, страничный
Пример:
п2 {
page-break-inside: avoid;
}
Советы: Допустимые значения свойств page-break включают: auto (не
разрывать страницу), always (выполнять разрыв всегда), avoid (избегать разрыва
страницы для данного элемента), left (разорвать страницу и продолжить отображение
содержимого на левой странице) и right (разорвать страницу и продолжить
отображение содержимого на правой странице).
Свойство: position
Описание: Определяет схему позиционирования: static, relative, absolute
или fixed.
Тип(ы) среды: Визуальный
Пример:
#topnav {
position: absolute;
top: 0;
left: 0;
}
Советы: Схема позиционирования fixed не поддерживается браузером Internet
Explorer. Схема позиционирования static соответствует нормальному потоку
браузера, используемому по умолчанию.
Свойство: quotes
Описание: Указывает вид кавычек для встроенных цитат.
Тип(ы) среды: Визуальный

Приложение В. Аннотированный справочник по языку CSS 2.1
299
Пример:
blockquote:before {
content: open-quote;
}
blockquote:after {
content: close-quote;
}
Советы: Это свойство обычно используется для генерируемого содержимого, как
показано в примере. Поскольку генерируемое содержимое недоступно в старых
браузерах и в браузере Internet Explorer 6.0, использование этого свойства
ограничено поддерживающими его средами, или же применяются обходные пути
для поддержки других браузеров.
Свойство: right
Описание: Указывает значение смещения правого поля при позиционировании.
Тип(ы) среды: Визуальный
Пример:
#topnav {
position: absolute;
right: 20px;
}
Советы: Используемая схема позиционирования влияет на способ вычисления
величины смещения. Для блоков с абсолютным позиционированием значение
вычисляется в соответствии с блоком-контейнером. Для блоков с относительным
позиционированием смещение вычисляется в соответствии с блоком элемента.
Свойство: table-layout
Описание: Управляет способом обработки таблиц браузерами.
Тип(ы) среды: Визуальный
Пример:
table {
table-layout: fixed;
}
Советы: Для обработки таблиц используется два алгоритма. Первый алгоритм -
fixed - считается более быстрым, поскольку ширина столбцов не зависит от
содержимого ячеек. Второй алгоритм - auto - зависит от ширины содержимого
ячеек и обычно является стандартным поведением для большинства браузеров.
Хотя свойство table-layout достаточно хорошо поддерживается браузерами,
результаты в различных браузерах отличаются довольно сильно, из-за чего люди

300
Языки HTML и CSS
отказываются от использования этого свойства и полагаются на стандартный
алгоритм браузера.
Свойство: text-indent
Описание: Задает отступ.
Тип(ы) среды: Визуальный
Пример:
Р {
text-indent: 5px;
}
Советы: Применение этого свойства позволяет придавать профессиональный
вид длинным абзацам текста. Для создания эффекта втяжки можно также
использовать отрицательные значения.
Свойство: text-trans form
Описание: Преобразует выбранный текст - каждое слово начинается с
прописной буквы, весь текст отображается прописными буквами или весь текст
отображается строчными буквами, - независимо от того, как текст был введен в
документ.
Тип(ы) среды: Визуальный
Пример:
h3 {
text-transform: uppercase;
}
Советы: Существует широко распространенная поддержка. Это свойство
полезно применять для поддержания согласованности при отображении заголовков и
других важных текстовых элементов.
Свойство: top
Описание: Указывает смещение верхнего края позиционируемого блока.
Тип(ы) среды: Визуальный
Пример:
#nav {
position: relative; top: 20px;
>

Приложение В. Аннотированный справочник по языку CSS 2.1
301
Советы: Используемая схема позиционирования влияет на способ вычисления
величины смещения. Для блоков с абсолютным позиционированием значение
вычисляется в соответствии с блоком-контейнером. Для блоков с относительным
позиционированием смещение вычисляется в соответствии с блоком элемента.
Свойство: unicode-bidi
Описание: Помогает управлять двунаправленным алгоритмом, используемым
для определения направления букв для заданного языка.
Тип(ы) среды: Визуальный
Пример:
р.hebrew {
direction: rtl;
unicode-bidi: embed;
}
Советы: Свойство unicode-bidi используется только теми авторами, кто
заинтересован в управлении двунаправленными алгоритмами в браузерах.
Свойство: vertical-align
Описание: Задает выравнивание по вертикали с использованием ключевых слов
baseline, sub, super, top, text-top, middle, bottom, text-bottom или
значения длины, или значения, выраженного в процентах.
Тип(ы) среды: Визуальный
Пример:
img {
vertical-align: baseline;
}
Советы: В браузерах Netscape 4.x это свойство работает только с изображениями.
Свойство: vi s ibi 1 i ty
Описание: Определяет, будет ли отображаться сгенерированный элементом
блок, или же он будет скрыт.
Тип(ы) среды: Визуальный
Пример:
#container {
visibility: hidden;
}

302
Языки HTML и CSS
Советы: Невидимые блоки влияют на макет. Если вы хотите полностью избежать
генерации блока, используйте свойство display со значением попе. Значение
collapse используется для таблиц.
Свойство: white-space
Описание: Определяет способ обработки пробелов элемента.
Тип(ы) среды: Визуальный
Пример:
td {
white-space: nowrap;
}
Советы: Доступны следующие значения: pre - функционирует точно так же, как
предварительно отформатированный текст; nowrap - подавляет разрывы строк;
pre-wrap - разрывает строки на новые строки в исходном документе; и рге-
line - сокращает последовательность пробелов.
Свойство: width
Описание: Задает ширину содержимого элемента.
Тип(ы) среды: Визуальный
Пример:
#content p {
width: 225px;
}
Советы: Это свойство не применяется к незаменяемым внутристрочным
элементам.
Свойство: word-spacing
Описание: Задает расстояние между словами.
Тип(ы) среды: Визуальный
Пример:
#content p {
word-spacing: l.Oem;
}
Советы: Для уменьшения расстояния между словами можно использовать
отрицательные значения.

Приложение В. Аннотированный справочник по языку CSS 2.1 303
Свойство: z-index
Описание: Используется вместе с позиционируемыми блоками для определения
порядка наложения.
Тип(ы) среды: Визуальный
Пример:
.boxtwo {
position: absolute;
top: Юрх;
left: Юрх;
z-index: 2;
}
Советы: Чем выше значение свойства, тем ближе к зрителю размещается блок
в стеке.

М. Хольишлаг
Языки HTML и CSS
Для создания Web-сайтов
Официальный учебный курс
Отдел распространения группы издательств «ТРИУМФ»:
^ «Издательство Триумф»
• «Лучшие книги»
i/ «Технический бестселлер»
%/ «Только для взрослых»
t/ «Технолоджи - 3000»
• «25 КАДР»
• «100 КНИГ»
Телефон: (495) 772-19-56, (495) 720-07-65. E-mail: opt@triumph.ru
Интернет-магазин: www.3st.ru
ОТДЕЛ КНИГА-ПОЧТОЙ:
125438, г.Москва, а/я 18 «Триумф».
E-mail: post@triumph.ru
Научный редактор Владислав Перелыгин
Перевод Александр Климович
Выпускающий редактор Ирина Колмыкова
Редактор-координатор Александра Куксова
Корректор Светлана Крючкова
Верстка Василина Баукова
Дизайн обложки Александра Чубарь
Подписано в печать с оригинал-макета 24.04.2007 г.
Формат 70 X100'/16. Печать офсетная. Печ.л. 19. Заказ № 1356.
Доп.тираж 3000 экз.
ООО «Издательство ТРИУМФ».
Россия, 125438, г. Москва, а/я 18.
Отпечатано в полном соответствии с качеством предоставленных
диапозитивов в ОАО «Можайский полиграфический комбинат»
143200, г. Можайск, ул. Мира, 93

ОФИЦИАЛЬНЫЙ
КУРС
Кратчайший путь
к овладению мастерством Web-дизайна
В
ы хотите создать собственный Web-сайт? Или обновить уже существующий? Или добавить к
сайту какое-нибудь новое эффектное содержимое? Или, быть может, вы просто хотите
усовершенствовать свои навыки Web-дизайнера и стать настоящим мастером?
Тогда - добро пожаловать! Эта книга - для
вас. Опираясь на свои знания и опыт работы
в Web, вы семимильными шагами двинетесь
к намеченной цели - и сами будете удивлены
скоростью, с которой вы овладеете наиболее
тонкими и эффективными инструментами
Web-дизайна. Вы познакомитесь с
многочисленными примерами кода HTML, XHTML и
CSS, разработанными специально для
быстрого освоения этих языков и их применения к
реальным проектам Web-сайтов.
Вам нужны для работы какие-то готовые,
шаблонные проекты Web-сайтов?
Модульный формат этой книги, снабженной
наглядными и мощными средствами навигации по
тексту, позволит вам почти мгновенно найти
нужный раздел. Никакие другие справочники
по HTML/CSS не охватывают такое огромное
количество материала, не представляют
материал в такой прекрасно структурированной
и наглядной форме. В книге есть все, что
необходимо для применения HTML, XHTML и
CSS в реальных проектах.
♦ Освойте технику создания Web-страниц,
которые будут корректно отображаться
практически в любом современном браузере.
♦ Научитесь создавать шаблоны, которые
упростят разработку любой страницы Web.
♦ Овладейте мастерством структурирования и
разметки текста, чтобы сделать его приятным
для чтения и удобным для обработки.
♦ Добавьте к своим Web-страницам рисунки,
файлы мультимедиа, сценарии - и сделайте свой
сайт динамичным.
♦ Уясните корректные методы создания HTML-
таблиц.
♦ Поместите на свои Web-страницы удобные и
эффективные формы, умеющие реагировать на
действия посетителя сайта.
♦ Используйте код CSS для полного контроля
над внешним видом и восприятием сайта.
♦ Изучите основные средства CSS для
управления цветом, рисунками, текстовыми стилями,
ссылками, списками, средствами навигации.
♦ Возьмите под свой контроль положение
полей, границ, отступов, плавающих элементов
дизайна и эффекты наложения компонентов.
♦ Разрабатывайте эффективные,
согласованные и легкоуправляемые CSS-макеты.
ISBN 978-5-89392-146-5
Книга содержит краткую справочную информацию
по каждому элементу языков HTML, XHTML и CSS.
9"785893»921465l
Л Addison-Wesley
Pearson Education
ТРИУМФ