2010г.
Количество страниц: 672
Книга CSS. Рецепты программирования. 3-е изд. Шмитт посвящена технологии Cascading Style Sheets (каскадные таблицы стилей). Об-суждаются основы CSS, а также средства, обеспечивающие наилучшие методы практиче-ской разработки: Web-типографика, изображения, элементы страницы, списки, ссылки и навигация, формы, таблицы, макеты страниц, печать Web-страниц, программистские трюки, а также проектирование с помощью CSS. Организованное как удобный справочник третье издание станет хорошим подспорьем для всех работающих с CSS. В отличие от пре-дыдущего издания в нем также рассматриваются Firefox 3, IE8 и Chrome.
Содержание книги
CSS. Рецепты программирования. 3-е изд. Шмитт
Оглавление Предисловие 13
Введение 15
Для кого предназначена эта книга 16
Допущения, принятые в книге 16
Содержание книги 18
Соглашения, использованные в книге 20
Использование кода примеров 20
Как связаться с издательством O'Reilly 21
Safari® Books Online 22
Благодарности 22
Глава 1. Использование базовых элементов HTML
25
1.1. Выбор текстового редактора 26
1.2. Кодирование простейшей HTML-страницы 28
1.3. О DOCTYPE и его влиянии на макет страниц в Web-обозревателе 30
1.4. Разметка заголовков 34
1.5. Подобающее цитирование 36
1.6. Вставка изображения 37
1.7. Вставка звуковых файлов средствами HTML5 39
1.8. Встраивание видео средствами HTML5 40
1.9. Эффективное применение strong и em 42
1.10. Создание списков 43
1.11. Формирование ссылки на Web-страницу 45
1.12. Разметка таблиц 47
1.13. Создание vCard (hCard) средствами HTML 49
1.14. Разметка события (hCalendar) 51
1.15. Проверка правильности HTML-разметки 51
Глава 2. Основы CSS
54
2.1. Применение правил CSS к Web-странице 55
2.2. Применение базовых селекторов для стилевого оформления 58
2.3. Применение селекторов прямого потомка 67
2.4. Применение селекторов соседнего элемента 68
2.5. Применение селекторов атрибута 70
2.6. Применение псевдоклассов 72
2.7. Применение псевдоэлементов 73
2.8. Когда использовать селекторы класса и селекторы ID 75
2.9. О свойствах CSS 80
2.10. Представление о блочной модели 81
2.11. Связь стилей с Web-страницей 87
2.12. Об источниках CSS 90
2.13. Порядок сортировки правил в CSS 91
2.14. Применение !important для переопределения отдельных правил CSS 93
2.15. Определение специфичности 94
2.16. Как применять разные типы таблиц стилей 96
2.17. Вставка комментариев в таблицы CSS 101
2.18. Организация информации в таблице стилей 102
2.19. Работа со свойствами с сокращенной формой записи 104
2.20. Задание альтернативной таблицы стилей 106
2.21. Применение плавающей модели 107
2.22. Применение автовыравнивания плавающих элементов 109
2.23. Применение абсолютного позиционирования 112
2.24. Применение относительного позиционирования 114
2.25. Применение сцепленного позиционирования 116
2.26. Создание стека элементов с помощью z-index 118
2.27. Проверка правил CSS 118
Глава 3. Web-типографика
121
3.1. Задание шрифтов 122
3.2. Применение Web-безопасных шрифтов 125
3.3. Задание стилизованного амперсанда 128
3.4. Внедрение файлов шрифтов 130
3.5. Принудительная разбивка действительно длинных слов 134
3.6. Задание размеров шрифта 135
3.7. Достижение большего соответствия размеров шрифтов в разных Web-обозревателях 137
3.8. Установка дефисов, длинных и коротких тире 141
3.9. Центрирование текста 142
3.10. Задание выравнивания текста по ширине 142
3.11. Обозначение избыточного текста многоточием 144
3.12. Удаление свободного пространства между заголовками и абзацами 145
3.13. Задание простой буквицы 146
3.14. Формирование центрированной приподнятой буквицы большего размера 147
3.15. Декоративное оформление приподнятой буквицы с помощью изображения 149
3.16. Создание заголовка со стилизованным текстом 151
3.17. Создание заголовка со стилизованным текстом и рамкой 153
3.18. Стилевое оформление заголовка с помощью текста и изображения 155
3.19. Создание врезки в HTML-тексте 157
3.20. Расположение врезки сбоку от колонки 159
3.21. Создание врезки с рамкой 160
3.22. Создание врезки с изображениями 162
3.23. Задание отступа в первой строке абзаца 165
3.24. Задание отступа для всего абзаца 166
3.25. Создание обратного отступа 169
3.26. Стилевое оформление первой строки абзаца 171
3.27. Стилевое оформление первой строки абзаца с помощью изображения 173
3.28. Создание эффекта выделенного текста 174
3.29. Изменение цвета при выделении текста 175
3.30. Изменение межстрочных интервалов 176
3.31. Добавление графической обработки HTML-текста 178
3.32. Вставка тени за текстом 180
3.33. Корректировка межбуквенных и межсловных пробелов 183
3.34. Достижение ритмичности базовых линий в Web-типографике 186
3.35. Стилевое оформление верхних и нижних индексов без нарушения базовой линии 188
3.36. Отображение нескольких колонок текста 189
Глава 4. Изображения
192
4.1. Преобразование средствами CSS цветных изображений в черно-белые в IE 192
4.2. Вывод рамки вокруг изображения 193
4.3. Установка вокруг изображения рамки со скругленными углами 195
4.4. Удаление рамок, устанавливаемых по умолчанию вокруг изображений в некоторых Web-обозревателях 197
4.5. Установка фонового изображения 199
4.6. Создание полосы фоновых изображений 200
4.7. Размещение фонового изображения 201
4.8. Применение нескольких фоновых изображений в одном HTML-элементе 204
4.9. Расположение изображений на рамке блока 206
4.10. Создание закрепленного фонового изображения 209
4.11. Изменение размеров изображений при изменении размеров окна Web-обозревателя 212
4.12. Растяжение изображения на все окно Web-обозревателя 214
4.13. Создание масштабируемых изображений 215
4.14. Задание способа визуализации изображений в Web-обозревателе 217
4.15. Поворот изображений средствами CSS 218
4.16. Задание градиентов средствами CSS 220
4.17. Создание прозрачных PNG-изображений для IE6 и более поздних версий 222
4.18. Применение PNG-файлов с прозрачностью с помощью JavaScript 224
4.19. Наложение HTML-текста на изображение 227
4.20. Замещение HTML-текста изображением 229
4.21. Создание панорамного представления изображения 232
4.22. Комбинирование разных графических форматов 233
4.23. Скругленные углы колонок с фиксированной шириной 239
4.24. Скругленные углы (метод раздвижных дверей) 241
4.25. Скругленные углы (метод горной вершины) 245
4.26. Скругление углов с помощью JavaScript 248
4.27. Вставка тени от элемента средствами CSS 252
4.28. Вставка тени за изображением 253
4.29. Вставка сглаженной тени за изображением 256
4.30. Создание выносок с текстом 260
4.31. Как помешать людям похищать ваши изображения 263
4.32. Автоматическая вставка отражений в изображения 265
4.33. Применение изображений-спрайтов 267
4.34. Обрезка фоновых изображений 269
4.35. Применение масок к изображениям и рамкам 271
Глава 5. Элементы страницы
274
5.1. Удаление полей страницы 274
5.2. Сброс стилей, назначаемых Web-обозревателем по умолчанию 277
5.3. Раскрашивание полосы прокрутки в IE 281
5.4. Методы центрирования элементов на Web-странице 284
5.5. Создание рамки страницы 289
5.6. Вывод рамки вокруг окна просмотра Web-обозревателя 291
5.7. Настройка горизонтального разделителя 293
5.8. Добавление просмотра изображения в режиме Lightbox 295
5.9. Изменение непрозрачности элементов 300
5.10. Регулировка непрозрачности цвета фона 302
Глава 6. Списки
306
6.1. Изменение формата списка 307
6.2. Изменение цвета маркера списка 309
6.3. Задание в списке отступов, одинаково отображаемых в разных Web-обозревателях 310
6.4. Установка разделителей между элементами списка 311
6.5. Создание пользовательских текстовых маркеров в списках 313
6.6. Создание пользовательских маркеров-изображений в списках 315
6.7. Вставка больших пользовательских маркеров-изображений в списки 318
6.8. Улучшение представления списка с помощью графики 320
6.9. Создание внутристрочных списков 324
6.10. Создание обратных отступов в списке 326
6.11. Смещение маркера внутрь списка 327
6.12. Стилевое оформление списка определений 329
6.13. Традиционное отображение киносценария с помощью элемента языка HTML5 dialog 335
6.14. Превращение списка в дерево каталогов 336
6.15. Создание системы "звездного" рейтинга 340
Глава 7. Ссылки и навигация
345
7.1. Легкое создание текстовых меню и подменю 345
7.2. Удаление подчеркивания ссылок и другие приемы стилевого оформления 347
7.3. Изменение цвета ссылок 350
7.4. Удаление пунктирных линий при щелчке мышью по ссылкам в Internet Explorer 351
7.5. Изменение цвета ссылок в разных секциях страницы 352
7.6. Вывод пиктограмм в конце ссылок разных типов 353
7.7. Меняющиеся курсоры 354
7.8. Изменение внешнего вида ссылки при наведении указателя мыши без применения JavaScript 356
7.9. Анимация ссылок с помощью свойств CSS3 transition при наведении указателя мыши 358
7.10. Создание навигационных текстовых меню и визуальных эффектов при наведении указателя мыши на его пункты 362
7.11. Вставка подменю в вертикальные меню 366
7.12. Создание горизонтальных навигационных меню 369
7.13. Построение горизонтальных навигационных меню с раскрывающимися меню 375
7.14. Создание навигационного меню с клавишами доступа 377
7.15. Создание переходов с помощью ссылок-цепочек 379
7.16. Создание с помощью изображений визуальных эффектов наведения указателя мыши на ссылку 382
7.17. Создание сворачиваемых меню 387
7.18. Создание контекстных меню 389
7.19. Создание всплывающих подсказок с помощью атрибута title 392
7.20. Разработка динамического меню из закладок 393
7.21. Изменяющиеся стили ссылок-якорей 395
Глава 8. Формы
400
8.1. Изменение пробельной зоны вокруг формы 400
8.2. Удаление пробельной зоны вокруг формы 401
8.3. Задание стилей для элементов ввода 402
8.4. Изменение стилей элементов формы при щелчке по ним кнопкой мыши 405
8.5. Применение разных стилей к разным элементам ввода в одной форме 406
8.6. Назначение стилей элементам textarea 407
8.7. Задание стилей элементов select и option 409
8.8. Создание поля поиска в стиле Macintosh 411
8.9. Стили кнопок формы 413
8.10. Создание изображения кнопки Submit 417
8.11. Установка кнопки Submit-Once-Only 418
8.12. Создание кнопки Submit в виде HTML-текста 419
8.13. Как заставить текстовую HTML-ссылку действовать как кнопка Submit 421
8.14. Разработка Web-формы без таблиц 422
8.15. Разработка формы из двух колонок без применения таблиц 424
8.16. Включение в форму информации для пользователей 427
8.17. Стилевое оформление клавиш доступа в Web-формах 429
8.18. Группировка общих элементов формы 431
8.19. Ввод данных в форму в виде электронной таблицы 432
8.20. Пример дизайна: простая регистрационная форма 436
8.21. Пример дизайна: бланк регистрации 442
Глава 9. Таблицы
454
9.1. Задание границ и отступов в ячейках и таблицах 454
9.2. Задание объема свободного пространства вокруг ячейки 457
9.3. Задание стиля заголовка 458
9.4. Задание стилей в ячейках таблицы 459
9.5. Задание стилей для элементов шапки таблицы 461
9.6. Удаление зазоров у изображений, помещенных в ячейки таблицы 463
9.7. Устранение зазоров между ячейками таблицы 465
9.8. Создание чередующихся цветов фона в строках таблицы 466
9.9. Создание эффекта выделения цветом строки таблицы 469
9.10. Пример проекта: элегантный календарь 470
Глава 10. Проектирование Web-страниц, предназначенных для печати
480
10.1. Применение к Web-странице таблицы стилей для печати 480
10.2. Замена цветного логотипа черно-белым при печати Web-страниц 482
10.3. Создание готовой к печати Web-формы 484
10.4. Отображение URI после ссылок 489
10.5. Вставка специальных символов перед ссылками 490
10.6. Вставка в документ для печати разрывов страниц 492
10.7. Пример дизайна: версия страницы для печати, созданная средствами CSS 493
Глава 11. Макеты страниц
503
11.1. Построение одноколоночного макета 503
11.2. Создание двухколоночного макета 505
11.3. Построение двухколоночного макета с колонками фиксированной ширины 509
11.4. Создание "резинового" многоколоночного макета с помощью плавающей модели 512
11.5. Создание с помощью плавающей модели макета с тремя колонками фиксированной ширины 515
11.6. Создание с помощью позиционирования "резинового" многоколоночного макета 518
11.7. Создание с помощью позиционирования многоколоночного макета с колонками фиксированной ширины 521
11.8. Использование плавающей модели для отображения колонок в произвольном порядке 522
11.9. Проектирование асимметричного макета 541
11.10. Проектирование макетов, не зависящих от разрешения 544
Глава 12. Программистские трюки, искусственные приемы и выявление неисправностей
548
12.1. Переопределение встроенных стилей 549
12.2. Диагностика ошибок CSS и проблем Web-обозревателей 549
12.3. Применение букмарклетов для поиска ошибок 551
12.4. Применение расширений Web-обозревателя для поиска ошибок 552
12.5. Исправление Internet Explorer 6 553
12.6. Исправление Internet Explorer 6 с помощью JavaScript 555
12.7. Использование условных комментариев для передачи стилей в разные версии Internet Explorer 556
12.8. Применение фильтров CSS для передачи правил в практически любой Web-обозреватель 558
12.9. Установка интеллектуальной системы передачи CSS для современных Web-обозревателей 559
12.10. Тестирование дизайна сайта на нескольких платформах с помощью единственного компьютера 561
12.11. Проверка Web-сайта с помощью текстового Web-обозревателя 562
Глава 13. Проектирование с помощью CSS
564
13.1. Существенное увеличение размера шрифта 564
13.2. Создание неожиданного сочетания 566
13.3. Комбинирование разнородных элементов для создания контраста 569
13.4. Привлечение взгляда с помощью контраста 570
13.5. Проверка достаточности цветового контраста 572
13.6. Выделение цитаты с помощью эффектных кавычек 574
13.7. Задание перемещающейся фоновой сцены при изменении пользователем размеров окна 576
13.8. Вставка анимации в элементы на странице 578
13.9. Создание отображения фейерверков при прокрутке страницы пользователем 583
13.10. Настройка таблицы стилей для просмотра исходного кода в Firefox 584
13.11. Проектирование с помощью сетки (наборы CSS) 585
13.12. Пример дизайна: связный Web-дизайн 588
13.13. Пример дизайна: флаг США 605
Глава 14. Взаимодействие с JavaScript
618
14.1. Проверка, включен ли JavaScript в Web-обозревателе 618
14.2. Применение разных таблиц стилей в зависимости от времени суток 619
14.3. Перенаправление на сайт для мобильных устройств в зависимости от ширины экрана Web-обозревателя 621
14.4. Вставка в Web-страницу библиотеки JavaScript 622
14.5. Применение селекторов CSS3 в IE6 и IE7 623
14.6. Создание с помощью JavaScript HTML-таблицы с окраской зебры 625
14.7. Выделение цветом строки таблицы при наведении указателя мыши 627
14.8. Визуальное оформление простого наведения указателя мыши 629
14.9. Формирование строки одной высоты из элементов с разным объемом контента 630
14.10. Задание ссылки, открывающей новое окно 633
14.11. Превращение элемента div целиком в элемент, активируемый щелчком мыши 634
14.12. Поддержка средствами JavaScript формата PNG в IE6 636
14.13. Предоставление кода на HTML5 и свойств CSS3 Web-обозревателям, способным их обрабатывать 638
Приложение 1. Источники 641
Основные обучающие материалы, относящиеся к языку HTML и технологии CSS 641
Дизайнерские ресурсы 642
Дискуссионные группы 643
Справочные материалы 644
Программные средства 645
Приложение 2. Свойства CSS 2.1 и специализированные дополнения 647
Приложение 3. Селекторы, псевдоклассы и псевдоэлементы CSS 2.1 661
Приложение 4. Селекторы и псевдоклассы CSS3 664
Приложение 5. Стилевое оформление элементов форм 667
Предметный указатель 668
10 Оглавление Оглавление
|
