CSS. Рецепты программирования

588 Pages·2007·27.748 MB·Russian

by  Кристофер Шмитт, [пер. с англ. яз. Т. Коротяевой]

Êðèñòîôåð Øìèòò

2-е издание

«Русская Редакция» «БХВ-Петербург»

2007
УДК 681.3.068
ББК 32.973.26-018.1
Ш73

Шмитт К.
Ш73 CSS. Рецепты программирования. 2-е изд: Пер. с англ. —
М.: Издательство «Русская Редакция»; СПб.: «БХВ-Петербург»,
2007. — 592 с.: ил.
ISBN 978-5-7502-0310-9 («Русская Редакция»)
ISBN 978-5-9775-0075-3 («БХВ-Петербург»)
Книга посвящена технологии Cascading Style Sheets (каскадные таблицы
стилей). В ней обсуждаются основы CSS, а также средства, обеспечивающие
наилучшие методы практической разработки: Web-типографика, изображения,
элементы страницы, списки, ссылки и навигация, формы, таблицы, макеты
страниц, печать Web-страниц, программистские трюки, а также проектирование
с помощью CSS.
Для Web-дизайнеров и разработчиков сайтов

УДК 681.3.068
ББК 32.973.26-018.1

Подготовлено к печати по лицензионному договору с O’Reilly Media, Inc.,
1005 Gravenstein Highway North, Sebastopol, CA 95472.
Nutshell Handbook и O’Reilly являются товарными знаками или охраняемыми товарными знаками
O’Reilly Media, Inc. в США и/или других странах. Все другие товарные знаки являются собственностью
соответствующих фирм.
Все названия компаний, организаций и продуктов, а также имена лиц, используемые в примерах, вы-
мышлены и не имеют никакого отношения к реальным компаниям, организациям, продуктам и лицам.

Кристофер Шмитт
Перевод с английского языка Татьяны Коротяевой
CSS. Рецепты программирования. 2-е изд.
Совместный проект издательства «Русская Редакция» и издательства «БХВ-Петербург»

Подписано в печать 23.03.07.
Формат 70×1001/16. Печать офсетная. Усл. печ. л. 47,73.
Тираж 3000 экз. Заказ №
"БХВ-Петербург", 194354, Санкт-Петербург, ул. Есенина, 5Б.
Санитарно-эпидемиологическое заключение на продукцию
№ 77.99.02.953.Д.006421.11.04 от 11.11.2004 г. выдано Федеральной службой
по надзору в сфере защиты прав потребителей и благополучия человека.
Отпечатано с готовых диапозитивов
в ГУП «Типография «Наука»
199034, Санкт-Петербург, 9 линия, 12

ISBN 978-0-596-52741-9 (англ.) © Оригинальное издание на английском языке, O’Reilly Media,
Inc., 2007, 2004
ISBN 978-5-7502-0310-9 («Русская Редакция»)
© Перевод на русский язык, издательство «БХВ-Петербург», 2007
ISBN 978-5-9775-0075-3 («БХВ-Петербург») © Оформление и подготовка к изданию, издательство
«БХВ-Петербург», издательство «Русская Редакция», 2007
Îãëàâëåíèå

Предисловие ........................................................................................................... 3

Для кого предназначена эта книга ...................................................................................... 4

Допущения, принятые в книге ............................................................................................ 5

Содержание книги ................................................................................................................ 7

Соглашения, использованные в книге ................................................................................ 9

Использование кода примеров ............................................................................................ 9

Как связаться с издательством O'Reilly ............................................................................ 10

Safari Enabled ...................................................................................................................... 11

Благодарности .................................................................................................................... 11
Глава 1. Общие примеры................................................................................... 13

1.1. Применение технологии CSS с HTML-кодом ........................................................ 14

1.2. Использование различных селекторов для стилевого оформления ..................... 17

1.3. Когда использовать селекторы класса и селекторы ID ......................................... 32

1.4. Осмысление свойств CSS ......................................................................................... 36

1.5. Осмысление блочной модели .................................................................................. 37
1.6. Осмысление DOCTYPE и его влияние на компоновку страниц

в Web-обозревателе .................................................................................................. 45

1.7. Связь стилей с Web-страницей ................................................................................ 49

1.8. Как применять разные типы таблиц стилей ........................................................... 52

1.9. Вставка комментариев в таблицы CSS.................................................................... 58

1.10. Организация информации в таблице стилей ........................................................... 59

1.11. Организация файлов таблиц стилей ........................................................................ 61

1.12. Работа со свойствами с сокращенной формой записи ........................................... 62

1.13. Настройка альтернативной таблицы стилей ........................................................... 65

1.14. Применение плавающей модели для вывода изображений .................................. 66

1.15. Применение абсолютного позиционирования ....................................................... 69

1.16. Использование относительного позиционирования .............................................. 71

1.17. Применение CSS в Adobe Dreamweaver .................................................................. 73

1.18. Применение CSS Microsoft Expression Web Designer ............................................ 77
Глава 2. Web-типографика ................................................................................ 81

2.1. Задание шрифтов ...................................................................................................... 82

2.2. Задание размеров шрифта ........................................................................................ 86

2.3. Усиление контроля над размерами шрифтов ......................................................... 88
VI Îãëàâëåíèå

2.4. Принудительное назначение размера шрифта ....................................................... 94

2.5. Центрирование текста .............................................................................................. 95

2.6. Задание выравнивания текста по ширине ............................................................... 95

2.7. Удаление свободного пространства между заголовками и абзацами .................. 96

2.8. Задание простой приподнятой буквицы ................................................................. 97

2.9. Формирование центрированной приподнятой буквицы большего размера ........ 99

2.10. Декоративное оформление приподнятой буквицы с помощью изображения ... 101

2.11. Создание заголовка со стилизованным текстом .................................................. 104

2.12. Создание заголовка со стилизованным текстом и рамкой .................................. 106

2.13. Стилевое оформление заголовка с помощью текста и изображения ................. 108

2.14. Создание врезки в HTML-тексте ........................................................................... 110

2.15. Создание врезки с рамкой ...................................................................................... 112

2.16. Создание врезки с помощью изображений ........................................................... 114

2.17. Задание отступа в первой строке абзаца ............................................................... 117

2.18. Задание отступа для всего абзаца .......................................................................... 119

2.19. Создание обратного отступа .................................................................................. 122

2.20. Стилевое оформление первой строки абзаца ....................................................... 126

2.21. Стилизация первой строки абзаца с помощью изображения .............................. 128

2.22. Создание эффекта выделенного текста ................................................................. 129

2.23. Изменение межстрочных интервалов ................................................................... 130

2.24. Добавление графической обработки HTML-текста ............................................. 133

2.25. Вставка тени за текстом ......................................................................................... 134

2.26. Корректировка межбуквенных и межсловных пробелов .................................... 136
Глава 3. Изображения ...................................................................................... 141

3.1. Вывод рамки вокруг изображения ........................................................................ 141
3.2. Удаление рамок, устанавливаемых по умолчанию вокруг изображений

в некоторых Web-обозревателях ........................................................................... 143

3.3. Установка фонового изображения ........................................................................ 145

3.4. Создание полосы фоновых изображений ............................................................. 146

3.5. Размещение фонового изображения на Web-странице ....................................... 147

3.6. Выбор нескольких фоновых изображений в одном селекторе ........................... 151

3.7. Создание закрепленного фонового изображения................................................. 153

3.8. Наложение HTML-текста на изображение ........................................................... 156

3.9. Замещение HTML-текста изображением .............................................................. 159

3.10. Замена HTML-текста Flash-текстом ...................................................................... 163

3.11. Использование множественных PNG-файлов с прозрачностью ........................ 166

3.12. Создание панорамного представления изображения ........................................... 169

3.13. Комбинирование разных графических форматов ................................................ 172

3.14. Скругленные углы колонок с фиксированной шириной ..................................... 178

3.15. Скругленные углы (метод раздвижных дверей) ................................................... 182

3.16. Скругленные углы (метод горной вершины) ........................................................ 187

3.17. Скругление углов с помощью JavaScript .............................................................. 191

3.18. Вставка тени за изображением .............................................................................. 195

3.19. Вставка сглаженной тени за изображением ......................................................... 198
Îãëàâëåíèå VII

3.20. Создание масштабируемых изображений............................................................. 202

3.21. Создание выносок ................................................................................................... 204

3.22. Как помешать людям похищать ваши фотографии ............................................. 208

3.23. Автоматическая вставка отражений в изображения ............................................ 210

3.24. Применение изображений-спрайтов ..................................................................... 214
Глава 4. Элементы страницы ......................................................................... 219

4.1. Удаление полей страницы ...................................................................................... 219

4.2. Раскрашивание полосы прокрутки ........................................................................ 222

4.3. Методы центрирования элементов на Web-странице .......................................... 225

4.4. Создание рамки страницы ...................................................................................... 231

4.5. Настройка разделителя ........................................................................................... 234

4.6. Добавление зоны полноразмерного просмотра изображения............................. 238
Глава 5. Списки ................................................................................................. 245

5.1. Изменение формата списка .................................................................................... 246

5.2. Задание в списке отступов, отображаемых в разных Web-обозревателях ......... 248

5.3. Установка разделителей между элементами списка ............................................ 249

5.4. Создание пользовательских текстовых маркеров в списках ............................... 251

5.5. Создание пользовательских маркеров-изображений в списках .......................... 254

5.6. Вставка больших пользовательских маркеров-изображений для списков ........ 256

5.7. Обогащение представления списка с помощью изображения ............................ 258

5.8. Создание строчных списков................................................................................... 262

5.9. Создание обратных отступов в списке .................................................................. 264

5.10. Смещение маркера внутрь списка ......................................................................... 265
Глава 6. Ссылки и навигация ........................................................................ 269
6.1. Удаление подчеркивания ссылок (и применение других приемов

стилевого оформления) .......................................................................................... 269

6.2. Изменение цвета ссылок ........................................................................................ 272

6.3. Изменение цвета ссылок в разных секциях страницы ......................................... 273

6.4. Вывод пиктограммы в конце ссылки .................................................................... 274

6.5. Изменение курсоров ............................................................................................... 277
6.6. Изменение внешнего вида ссылки при наведении указателя мыши

без применения JavaScript ...................................................................................... 279
6.7. Создание навигационных текстовых меню и визуальных эффектов

при наведении указателя мыши на его пункты .................................................... 281

6.8. Создание горизонтальных навигационных меню ................................................ 286

6.9. Создание навигационного меню с клавишами доступа ....................................... 291

6.10. Создание переходов с помощью ссылок-цепочек ................................................ 293
6.11. Создание с помощью изображений визуальных эффектов

наведения указателя мыши на ссылку ................................................................... 297

6.12. Создание раскрывающихся меню.......................................................................... 303
VIII Îãëàâëåíèå

6.13. Создание контекстных меню ................................................................................. 305
6.14. Создание всплывающих подсказок с помощью атрибута title ............................ 308

6.15. Разработка динамического визуального меню ..................................................... 309

6.16. Динамическое применение стилей на Web-странице .......................................... 313
Глава 7. Формы ................................................................................................. 319

7.1. Изменение пробельной зоны вокруг формы ........................................................ 320

7.2. Задание стилей для элементов ввода ..................................................................... 321

7.3. Применение разных стилей к разным элементам ввода одной формы .............. 324
7.4. Назначение стилей элементам textarea ................................................................. 325
7.5. Задание стилей элементов select и option .............................................................. 327

7.6. Создание поля поиска в стиле Macintosh .............................................................. 329

7.7. Стили кнопок формы .............................................................................................. 332
7.8. Создание изображения кнопки Submit .................................................................. 336
7.9. Установка кнопки Submit-Once-Only..................................................................... 337
7.10. Создание кнопки Submit в виде HTML-текста ..................................................... 338
7.11. Как заставить текстовую HTML-ссылку действовать как кнопка Submit .......... 340

7.12. Разработка Web-формы без таблиц ....................................................................... 341

7.13. Разработка формы из двух колонок без применения таблиц .............................. 344

7.14. Выделение цветом полей формы ........................................................................... 347

7.15. Включение в форму информации обратной связи ............................................... 349

7.16. Стилевое оформление клавиш доступа в Web-формах ....................................... 352

7.17. Группировка одинаковых элементов формы ........................................................ 353

7.18. Ввод данных в форму в виде электронной таблицы ............................................ 356

7.19. Пример дизайна: регистрационная форма ............................................................ 360

7.20. Пример дизайна: регистрационная форма ............................................................ 366
Глава 8. Таблицы .............................................................................................. 377

8.1. Задание объема свободного пространства вокруг ячейки ................................... 377

8.2. Задание рамок и отступов ячеек ............................................................................ 379

8.3. Задание стиля заголовка ......................................................................................... 381

8.4. Задание стилей в ячейках таблицы ........................................................................ 382

8.5. Задание стилей элементов шапки таблицы ........................................................... 384

8.6. Удаление зазоров у изображений, помещенных в ячейки таблицы ................... 387

8.7. Устранение промежутков между ячейками таблицы ........................................... 389

8.8. Создание чередующихся цветов фона в строках таблицы .................................. 390

8.9. Создание эффекта выделения цветом строки таблицы ....................................... 393

8.10. Пример проекта: элегантный календарь ............................................................... 395
Глава 9. Макеты страниц ................................................................................ 407

9.1. Построение одноколоночного макета ................................................................... 408

9.2. Создание двухколоночного макета ....................................................................... 410

9.3. Построение двухколоночного макета с колонками фиксированной ширины ... 417
Îãëàâëåíèå IX
9.4. Создание "резинового" многоколоночного макета с помощью

плавающей модели ................................................................................................. 422
9.5. Создание с помощью плавающей модели макета с тремя колонками

фиксированной ширины ......................................................................................... 425
9.6. Создание с помощью позиционирования "резинового"

многоколоночного макета ...................................................................................... 428
9.7. Создание с помощью позиционирования многоколоночного макета

с колонками фиксированной ширины ................................................................... 432
9.8. Использование плавающей модели для отображения колонок

в произвольном порядке ......................................................................................... 435

9.9. Проектирование асимметричного макета ............................................................. 456
Глава 10. Печать................................................................................................ 461

10.1. Создание версии страницы для печати ................................................................. 462

10.2. Создание готовой к печати Web-формы ............................................................... 464

10.3. Отображение URI после ссылок ............................................................................ 469

10.4. Вставка специальных символов перед ссылками................................................. 471

10.5. Пример дизайна: версия страницы для печати, созданная средствами CSS ...... 473
Глава 11. Программистские трюки, искусственные приемы
и выявление неисправностей ......................................................................... 483

11.1. Изоляция стилей в Netscape Navigator 4 ............................................................... 484
11.2. Отображение некоторых стилей в Internet Explorer 5.x для Windows ................ 487
11.3. Устранение промелька Web-страницы в Internet Explorer 5.x для Windows ...... 492

11.4. Закрепление фоновых изображений в Internet Explorer 6 для Windows ............. 493
11.5. Использование условных комментариев в Internet Explorer для Windows

для передачи стилей ............................................................................................... 494

11.6. Скрывание стилей от Internet Explorer 5 для Macintosh ....................................... 497
11.7. Установка интеллектуальной системы управления

программистскими трюками .................................................................................. 498

11.8. Диагностика ошибок CSS и проблем Web-обозревателей .................................. 500
11.9. Тестирование дизайна сайта на нескольких платформах

с помощью единственного компьютера................................................................ 501

11.10. Установка на компьютер нескольких версий Internet Explorer для Windows .. 503

11.11. Проверка Web-сайта с помощью текстового Web-обозревателя ...................... 505
Глава 12. Проектирование с помощью CSS ................................................. 507

12.1. Существенное увеличение текста .......................................................................... 507

12.2. Создание неожиданного сочетания ....................................................................... 509

12.3. Комбинирование разнородных элементов для создания контраста ................... 512

12.4. Управление взглядом с помощью контраста ........................................................ 514

12.5. Проверка достаточности цветового контраста ..................................................... 517

12.6. Выделение цитаты .................................................................................................. 519
X Îãëàâëåíèå
Приложение 1. Источники............................................................................... 523
Основные обучающие материалы, относящиеся к языку HTML

и технологии CSS ............................................................................................................. 523

Дизайнерские ресурсы ..................................................................................................... 524

Дискуссионные группы ................................................................................................... 526

Ссылки .............................................................................................................................. 527

Средства ............................................................................................................................ 528
Приложение 2. Свойства CSS 2.1 и частные дополнения ......................... 531
Приложение 3. Селекторы, псевдоклассы и псевдоэлементы CSS 2.1 ... 547
Приложение 4. Стилевое оформление элементов форм ............................ 551

Флажки (checkboxes) ........................................................................................................ 553

Элемент ввода имени файла (file input) .......................................................................... 556

Переключатели (radio buttons) ........................................................................................ 559

Текстовые поля (text fields) ............................................................................................. 562

Поля со списком для многовариантного выбора (multiple options) ............................. 565

Поля со списком для выбора одного значения (select single item) ............................... 568
Кнопка Submit ................................................................................................................... 571

Многострочные текстовые поля (textarea) ..................................................................... 574
Предметный указатель .................................................................................... 577