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

Оглавление ......Page 6
Предисловие ......Page 14
Введение ......Page 16
Допущения, принятые в книге ......Page 17
Содержание книги ......Page 19
Использование кода примеров ......Page 21
Как связаться с издательством O'Reilly ......Page 22
Благодарности ......Page 23
Глава 1. Использование базовых элементов HTML ......Page 26
1.1. Выбор текстового редактора ......Page 27
1.2. Кодирование простейшей HTML-страницы ......Page 29
1.3. О DOCTYPE и его влиянии на макет страниц в Web-обозревателе ......Page 31
1.4. Разметка заголовков ......Page 35
1.5. Подобающее цитирование ......Page 37
1.6. Встазка изображения ......Page 38
1.7. Вставка звуковых файлов средствами HTML5 ......Page 40
1.8. Встраивание видео средствами HTML5 ......Page 41
1.9. Эффективное применение strong и еm ......Page 43
1.10. Создание списков ......Page 44
1.11. Формирование ссылки на Web-страницу ......Page 46
1.12. Разметка таблиц ......Page 48
1.13. Создание vCard (hCard) средствами HTML ......Page 50
1.15. Проверка правильности HTML-разметки ......Page 52
Глава 2. Основы CSS ......Page 55
2.1. Применение правил CSS к Web-странице ......Page 56
2.2. Применение базовых селекторов для стилевого оформления ......Page 59
2.3. Применение селекторов прямого потомка ......Page 68
2.4. Применение селекторов соседнего элемента ......Page 69
2.5. Применение селекторов атрибута ......Page 71
2.6. Применение псевдоклассов ......Page 73
2.7. Применение псевдоэлементов ......Page 74
2.8. Когда использовать селекторы класса и селекторы ID ......Page 76
2.9. О свойствах CSS ......Page 81
2.10. Представление о блочной модели ......Page 82
2.11. Связь стилей с Web-страницей ......Page 88
2.12. Об источниках CSS ......Page 91
2.13. Порядок сортировки правил в CSS ......Page 92
2.14. Применение !important для переопределения отдельных правил CSS ......Page 94
2.15. Определение специфичности ......Page 95
2.16. Как применять разные типы таблиц стилей ......Page 97
2.17. Вставка комментариев в таблицы CSS ......Page 102
2.18. Организация информации в таблице стилей ......Page 103
2.19. Работа со свойствами с сокращенной формой записи ......Page 105
2.20. Задание альтернативной таблицы стилей ......Page 107
2.21. Применение плавающей модели ......Page 108
2.22. Применение автовыравнивания плавающих элементов ......Page 110
2.23. Применение абсолютного позиционирования ......Page 113
2.24. Применение относительного позиционирования ......Page 115
2.25. Применение сцепленного позиционирования ......Page 117
2.27. Проверка правил CSS ......Page 119
Глава 3. Web-типографика ......Page 122
3.1. Задание шрифтов ......Page 123
3.2. Применение Web-безопасных шрифтов ......Page 126
3.3. Задание стилизованного амперсанда ......Page 129
3.4. Внедрение файлов шрифтов ......Page 131
3.5. Принудительная разбивка действительно длинных слов ......Page 135
3.6. Задание размеров шрифта ......Page 136
3.7. Достижение большего соответствия размеров шрифтов в разных Web-обозревателях ......Page 138
3.8. Установка дефисов, длинных и коротких тире ......Page 142
3.10. Задание выравнивания текста по ширине ......Page 143
3.11. Обозначение избыточного текста многоточием ......Page 145
3.12. Удаление свободного пространства между заголовками и абзацами ......Page 146
3.13. Задание простой буквицы ......Page 147
3.14. Формирование центрированной приподнятой буквицы большего размера ......Page 148
3.15. Декоративное оформление приподнятой буквицы с помощью изображения ......Page 150
3.16. Создание заголовка со стилизованным текстом ......Page 152
3.17. Создание заголовка со стилизованным текстом и рамкой ......Page 154
3.18. Стилевое оформление заголовка с помощью текста и изображения ......Page 156
3.19. Создание врезки в HTML-тексте ......Page 158
3.20. Расположение врезки сбоку от колонки ......Page 160
3.21. Создание врезки с рамкой ......Page 161
3.22. Создание врезки с изображениями ......Page 163
3.23. Задание отступа в первой строке абзаца ......Page 166
3.24. Задание отступа для всего абзаца ......Page 167
3.25. Создание обратного отступа ......Page 170
3.26. Стилевое оформление первой строки абзаца ......Page 172
3.27. Стилевое оформление первой строки абзаца с помощью изображения ......Page 174
3.28. Создание эффекта выделенного текста ......Page 175
3.29. Изменение цвета при выделении текста ......Page 176
3.30. Изменение межстрочных интервалов ......Page 177
3.31. Добавление графической обработки HTML-текста ......Page 179
3.32. Вставка тени за текстом ......Page 181
3.33. Корректировка межбуквенных и межсловных пробелов ......Page 184
3.34. Достижение ритмичности базовых линий в Web-типографике ......Page 187
3.35. Стилевое оформление верхних и нижних индексов без нарушения базовой линии ......Page 189
3.36. Отображение нескольких колонок текста ......Page 190
4.1. Преобразование средствами CSS цветных изображений в черно-белые в IE ......Page 193
4.2. Вывод рамки вокруг изображения ......Page 194
4.3. Установка вокруг изображения рамки со скругленными углами ......Page 196
4.4. Удаление рамок, устанавливаемых по умолчанию вокруг изображений в некоторых Web-обозревателях ......Page 198
4.5. Установка фонового изображения ......Page 200
4.6. Создание полосы фоновых изображений ......Page 201
4.7. Размещение фонового изображения ......Page 202
4.8. Применение нескольких фоновых изображений в одном HTML-элементе ......Page 205
4.9. Расположение изображений на рамке блока ......Page 207
4.10. Создание закрепленного фонового изображения ......Page 210
4.11. Изменение размеров изображений при изменении размеров окна Web-обозревателя ......Page 213
4.12. Растяжение изображения на все окно Web-обозревателя ......Page 215
4.13. Создание масштабируемых изображений ......Page 216
4.14. Задание способа визуализации изображений в Web-обозревателе ......Page 218
4.15. Поворот изображений средствами CSS ......Page 219
4.16. Задание градиентов средствами CSS ......Page 221
4.17. Создание прозрачных PNG-изображений для IE6 и более поздних версий ......Page 223
4.18. Применение PNG-файлов с прозрачностью с помощью JavaScript ......Page 225
4.19. Наложение HTML-текста на изображение ......Page 228
4.20. Замещение HTML-текста изображением ......Page 230
4.21. Создание панорамного представления изображения ......Page 233
4.22. Комбинирование разных графических форматов ......Page 234
4.23. Скругленные углы колонок с фиксированной шириной ......Page 240
4.24. Скругленные углы (метод раздвижных дверей) ......Page 242
4.25. Скругленные углы (метод горной вершины) ......Page 246
4.26. Скругление углов с помощью JavaScript ......Page 249
4.27. Вставка тени от элемента средствами CSS ......Page 253
4.28. Вставка тени за изображением ......Page 254
4.29. Вставка сглаженной тени за изображением ......Page 257
4.30. Создание выносок с текстом ......Page 261
4.31. Как помешать людям похищать ваши изображения ......Page 264
4.32. Автоматическая вставка отражений в изображения ......Page 266
4.33. Применение изображений-спрайтов ......Page 268
4.34. Обрезка фоновых изображений ......Page 270
4.35. Применение масок к изображениям и рамкам ......Page 272
5.1. Удаление полей страницы ......Page 275
5.2. Сброс стилей, назначаемых Web-обозревателем по умолчанию ......Page 278
5.3. Раскрашивание полосы прокрутки в IE ......Page 282
5.4. Методы центрирования элементов на Web-странице ......Page 285
5.5. Создание рамки страницы ......Page 290
5.6. Вывод рамки вокруг окна просмотра Web-обозревателя ......Page 292
5.7. Настройка горизонтального разделителя ......Page 294
5.8. Добавление просмотра изображения в режиме Lightbox ......Page 296
5.9. Изменение непрозрачности элементов ......Page 301
5.10. Регулировка непрозрачности цвета фона ......Page 303
Глава 6. Списки ......Page 307
6.1. Изменение формата списка ......Page 308
6.2. Изменение цвета маркера списка ......Page 310
6.3. Задание в списке отступов, одинаково, отображаемых в разных Web-обозревателях ......Page 311
6.4. Установка разделителей между элементами списка ......Page 312
6.5. Создание пользовательских текстовых маркеров в списках ......Page 314
6.6. Создание пользовательских маркеров-изображений в списках ......Page 316
6.7. Вставка больших пользовательских маркеров-изображений в списки ......Page 319
6.8. Улучшение представления списка с помощью графики ......Page 321
6.9. Создание внутристрочных списков ......Page 325
6.10. Создание обратных отступов в списке ......Page 327
6.11. Смещение маркера внутрь списка ......Page 328
6.12. Стилевое оформление списка определений ......Page 330
6.13. Традиционное отображение киносценария с помощью элемента языка HTML5 dialog ......Page 336
6.14. Превращение списка в дерево каталогов ......Page 337
6.15. Создание системы "звездного" рейтинга ......Page 341
7.1. Легкое создание текстовых меню и подменю ......Page 346
7.2. Удаление подчеркивания ссылок и другие приемы стилевого оформления ......Page 348
7.3. Изменение цвета ссылок ......Page 351
7.4. Удаление пунктирных линий при щелчке мышью по ссылкам в Internet Explorer ......Page 352
7.5. Изменение цвета ссылок в разных секциях страницы ......Page 353
7.6. Вывод пиктограмм в конце ссылок разных типов ......Page 354
7.7. Меняющиеся курсоры ......Page 355
7.8. Изменение внешнего вида ссылки при наведении указателя мыши без применения JavaScript ......Page 357
7.9. Анимация ссылок с помощью свойств CSS3 transition при наведении указателя мыши ......Page 359
7.10. Создание навигационных текстовых меню и визуальных эффектов при наведении указателя мыши на его пункты ......Page 363
7.11. Вставка подменю в вертикальные меню ......Page 367
7.12. Создание горизонтальных навигационных меню ......Page 370
7.13. Построение горизонтальных навигационных меню с раскрывающимися меню ......Page 376
7.14. Создание навигационного меню с клавишами доступа ......Page 378
7.15. Создание переходов с помощью ссылок-цепочек ......Page 380
7.16. Создание с помощью изображений визуальных эффектов наведения указателя мыши на ссылку ......Page 383
7.17. Создание сворачиваемых меню ......Page 388
7.18. Создание контекстных меню ......Page 390
7.19. Создание всплывающих подсказок с помощью атрибута title ......Page 393
7.20. Разработка динамического меню из закладок ......Page 394
7.21. Изменяющиеся стили ссылок-якорей ......Page 396
8.1. Изменение пробельной зоны вокруг формы ......Page 401
8.2. Удаление пробельной зоны вокруг формы ......Page 402
8.3. Задание стилей для элементов ввода ......Page 403
8.4. Изменение стилей элементов формы при щелчке по ним кнопкой мыши ......Page 406
8.5. Применение разных стилей к разным элементам ввода в одной форме ......Page 407
8.6. Назначение стилей элементам textarea ......Page 408
8.7. Задание стилей элементов select и option ......Page 410
8.8. Создание поля поиска в стиле Macintosh ......Page 412
8.9. Стили кнопок формы ......Page 414
8.10. Создание изображения кнопки Submit ......Page 418
8.11. Установка кнопки Submit-Once-Only ......Page 419
8.12. Создание кнопки Submit в виде HTML-текста ......Page 420
8.13. Как заставить текстовую HTML-ссылку действовать как кнопка Submit ......Page 422
8.14. Разработка Web-формы без таблиц ......Page 423
8.15. Разработка формы из двух колонок без применения таблиц ......Page 425
8.16. Включение в форму информации для пользователей ......Page 428
8.17. Стилевое оформление клавиш доступа в Web-формах ......Page 430
8.18. Группировка общих элементов формы ......Page 432
8.19. Ввод данных в форму в виде электронной таблицы ......Page 433
8.20. Пример дизайна: простая регистрационная форма ......Page 437
8.21. Пример дизайна: бланк регистрации ......Page 443
9.1. Задание границ и отступов в ячейках и таблицах ......Page 455
9.2. Задание объема свободного пространства вокруг ячейки ......Page 458
9.3. Задание стиля заголовка ......Page 459
9.4. Задание стилей в ячейках таблицы ......Page 460
9.5. Задание стилей для элементов шапки таблицы ......Page 462
9.6. Удаление зазоров у изображений, помещенных в ячейки таблицы ......Page 464
9.7. Устранение зазоров между ячейками таблицы ......Page 466
9.8. Создание чередующихся цветов фона в строках таблицы ......Page 467
9.9. Создание эффекта выделения цветом строки таблицы ......Page 470
9.10. Пример проекта: элегантный календарь ......Page 471
10.1. Применение к Web-странице таблицы стилей для печати ......Page 481
10.2. Замена цветного логотипа черно-белым при печати Web-страниц ......Page 483
10.3. Создание готовой к печати Web-формы ......Page 485
10.4. Отображение URI после ссылок ......Page 490
10.5. Вставка специальных символов перед ссылками ......Page 491
10.6. Вставка в документ для печати разрывов страниц ......Page 493
10.7. Пример дизайна: версия страницы для печати, созданная средствами CSS ......Page 494
11.1. Построение одноколоночного макета ......Page 504
11.2. Создание двухколоночного макета ......Page 506
11.3. Построение двухколоночного макета с колонками фиксированной ширины ......Page 510
11.4. Создание "резинового" многоколоночного макета с помощью плавающей модели ......Page 513
11.5. Создание с помощью плавающей модели макета с тремя колонками фиксированной ширины ......Page 516
11.6. Создание с помощью позиционирования "резинового" многоколоночного макета ......Page 519
11.7. Создание с помощью позиционирования многоколоночного макета с колонками фиксированной ширины ......Page 522
11.8. Использование плавающей модели для отображения колонок в произвольном порядке ......Page 523
11.9. Проектирование асимметричного макета ......Page 542
11.10. Проектирование макетов, не зависящих от разрешения ......Page 545
Глава 12. Программистские трюки, искусственные приемы и выявление неисправностей ......Page 549
12.2. Диагностика ошибок CSS и проблем Web-обозревателей ......Page 550
12.3. Применение букмарклетов для поиска ошибок ......Page 552
12.4. Применение расширений Web-обозревателя для поиска ошибок ......Page 553
12.5. Исправление Internet Explorer 6 ......Page 554
12.6. Исправление Internet Explorer 6 с помощью JavaScript ......Page 556
12.7. Использование условных комментариев для передачи стилей в разные версии Internet Explorer ......Page 557
12.8. Применение фильтров CSS для передачи правил в практически любой Web-обозреватель ......Page 559
12.9. Установка интеллектуальной системы передачи CSS для современных Web-обозревателей ......Page 560
12.10. Тестирование дизайна сайта на нескольких платформах с помощью единственного компьютера ......Page 562
12.11. Проверка Web-сайта с помощью текстового Web-обозревателя ......Page 563
13.1. Существенное увеличение размера шрифта ......Page 565
13.2. Создание неожиданного сочетания ......Page 567
13.3. Комбинирование разнородных элементов для создания контраста ......Page 570
13.4. Привлечение взгляда с помощью контраста ......Page 571
13.5. Проверка достаточности цветового контраста ......Page 573
13.6. Выделение цитаты с помощью эффектных кавычек ......Page 575
13.7. Задание перемещающейся фоновой сцены при изменении пользователем размеров окна ......Page 577
13.8. Вставка анимации в элементы на странице ......Page 579
13.9. Создание отображения фейерверков при прокрутке страницы пользователем ......Page 584
13.10. Настройка таблицы стилей для просмотра исходного кода в Firefox ......Page 585
13.11. Проектирование с помощью сетки (наборы CSS) ......Page 586
13.12. Пример дизайна: связный Web-дизайн ......Page 589
13.13. Пример дизайна: флаг США ......Page 606
14.1. Проверка, включен ли JavaScript в Web-обозревателе ......Page 619
14.2. Применение разных таблиц стилей в зависимости от времени суток ......Page 620
14.3. Перенаправление на сайт для мобильных устройств в зависимости от ширины экрана Web-обозревателя ......Page 622
14.4. Вставка в Web-страницу библиотеки JavaScript ......Page 623
14.5. Применение селекторов CSS3 в IE6 и IE7 ......Page 624
14.6. Создание с помощью JavaScript HTML-таблицы с окраской зебры ......Page 626
14.7. Выделение цветом строки таблицы при наведении указателя мыши ......Page 628
14.8. Визуальное оформление простого наведения указателя мыши ......Page 630
14.9. Формирование строки одной высоты из элементов с разным объемом контента ......Page 631
14.10. Задание ссылки, открывающей новое окно ......Page 634
14.11. Превращение элемента div целиком в элемент, активируемый щелчком мыши ......Page 635
14.12. Поддержка средствами JavaScript формата PNG в IE6 ......Page 637
14.13. Предоставление кода на HTML5 и свойств CSS3 Web-обозревателям, способным их обрабатывать ......Page 639
Основные обучающие материалы, относящиеся к языку HTML и технологии CSS ......Page 642
Дизайнерские ресурсы ......Page 643
Дискуссионные группы ......Page 644
Справочные материалы ......Page 645
Программные средства ......Page 646
Приложение 2. Свойства CSS 2.1 и специализированные дополнения ......Page 648
Приложение 3. Селекторы, псевдоклассы и псевдоэлементы CSS 2.1 ......Page 662
Приложение 4. Селекторы и псевдоклассы CSS3 ......Page 665
Приложение 5. Стилевое оформление элементов форм ......Page 668
Предметный указатель ......Page 669