Оглавление
Об авторе . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
О творческой команде . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Благодарности . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Введение . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Что такое CSS? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Что необходимо знать . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
HTML: структура языка . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Типы документов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Как работают HTML-элементы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
HTML5: больше элементов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Программное обеспечение, используемое для CSS . . . . . . . . . . . . . . . . . . 20
Об этой книге . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Основы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Обэтихстрелках . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Соглашения, использованные в данной книге . . . . . . . . . . . . . . . . . . . . . 25
Интернет-ресурсы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Примеры к книге . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Часть I. Основы CSS
Глава 1. HTML и CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
HTML: прошлое и настоящее . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Верстка HTML-кода вместе с CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Важность объявления типа документа . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Как работают каскадные таблицы стилей . . . . . . . . . . . . . . . . . . . . . . . . . 44
8 Оглавление
Глава 2. Создание стилей и таблиц стилей . . . . . . . . . . . . . . . . . . . . 46
Анатомия стиля . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Концепция таблиц стилей . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Внутренние таблицы стилей . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Внешние таблицы стилей . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Практикум: создание стилей . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Глава 3. Селекторы: выбор форматируемых элементов . . . . . . . . . 65
Селекторы тегов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Классы: точное управление . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Идентификаторы: отдельные элементы веб-страницы . . . . . . . . . . . . . . . 71
Форматирование групп элементов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Форматирование вложенных элементов . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Псевдоклассы и псевдоэлементы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Селекторы атрибутов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Дочерние селекторы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Дочерние псевдоклассы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
Родственные селекторы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Селектор :target . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Селектор :not() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Практикум: использование селекторов . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Глава 4. Механизм наследования стилей . . . . . . . . . . . . . . . . . . . . . 110
Что такое наследование? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Упрощение таблиц стилей через наследование . . . . . . . . . . . . . . . . . . . 111
Ограничения наследования . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
Практикум: наследование . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
Глава 5. Управление сложной структурой стилей: каскадность . . . 120
Каскадность стилей . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Особенности каскадности: какие стили имеют преимущество . . . . . . . . . 125
Управление каскадностью . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Практикум: механизм каскадности . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Часть II. Применение CSS
Глава 6. Форматирование текста . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Использование шрифтов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Использование веб-шрифтов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Оглавление 9
Использование службы Google Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
Форматирование текста цветом . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
Изменение размера шрифта . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
Форматирование символов и слов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
Добавление тени . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
Форматирование абзацев . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
Форматирование списков . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
Практикум: форматирование текста . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198
Глава 7. Поля, отступы, границы . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Понятие блочной модели . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Управление размерами полей и отступов . . . . . . . . . . . . . . . . . . . . . . . . 213
Добавление границ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
Установка цвета фона . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
Скругление углов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
Добавление тени . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
Изменение высоты и ширины . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232
Управление обтеканием контента с помощью плавающих элементов . . . 239
Практикум: поля, фон и границы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244
Глава 8. Добавление графики на веб-страницы . . . . . . . . . . . . . . . 257
Каскадные таблицы стилей и элемент img . . . . . . . . . . . . . . . . . . . . . . . 257
Добавление фоновых изображений . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258
Управление повтором фоновых изображений . . . . . . . . . . . . . . . . . . . . . 263
Позиционирование фоновых изображений . . . . . . . . . . . . . . . . . . . . . . . 264
Сокращенная запись свойства background . . . . . . . . . . . . . . . . . . . . . . . 276
Использование множественных фоновых изображений . . . . . . . . . . . . . 278
Использование градиентных фонов . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
Практикум: совершенствуем изображения . . . . . . . . . . . . . . . . . . . . . . . 290
Практикум: создание фотогалереи . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295
Практикум: использование фоновых изображений . . . . . . . . . . . . . . . . . 300
Добавление на веб-страницу фонового изображения . . . . . . . . . . . . . . . 300
Замена границ изображениями . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302
Использование графики для маркированных списков . . . . . . . . . . . . . . . 304
Персонализация боковой панели . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306
Глава 9. Построение навигационной системы сайта . . . . . . . . . . . 309
Выборка форматируемых ссылок . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309
Форматирование ссылок . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313
10 Оглавление
Создание панелей навигации . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320
Использование ролловеров . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330
Форматирование ссылок определенного типа . . . . . . . . . . . . . . . . . . . . . 331
Практикум: форматирование ссылок . . . . . . . . . . . . . . . . . . . . . . . . . . . 334
Практикум: создание панели навигации . . . . . . . . . . . . . . . . . . . . . . . . . 340
Глава 10. Преобразования, переходы и анимация
с помощью CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349
Преобразования . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349
Переходы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360
Анимация . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368
Практикум . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380
Добавление анимации . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382
Глава 11. Форматирование таблиц и веб-форм . . . . . . . . . . . . . . . 387
Разумное применение таблиц . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387
Форматирование таблиц . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389
Форматирование строк и столбцов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 394
Форматирование веб-форм . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 396
Практикум: форматирование таблиц . . . . . . . . . . . . . . . . . . . . . . . . . . . 401
Практикум: форматирование веб-форм . . . . . . . . . . . . . . . . . . . . . . . . . 406
Часть III. Верстка страниц с помощью CSS
Глава 12. Введение в CSS-верстку . . . . . . . . . . . . . . . . . . . . . . . . . . . 414
Типы макетов веб-страниц . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414
Принцип CSS-верстки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417
Стратегии верстки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421
Глава 13. Макеты на основе обтекаемых элементов . . . . . . . . . . . 427
Использование обтекаемых элементов при верстке . . . . . . . . . . . . . . . . 431
Решение проблем с обтекаемыми элементами . . . . . . . . . . . . . . . . . . . . 435
Практикум: многоколоночные макеты . . . . . . . . . . . . . . . . . . . . . . . . . . 449
Глава 14. Позиционирование элементов на странице . . . . . . . . . . 462
Принципы работы свойств позиционирования . . . . . . . . . . . . . . . . . . . . 462
Эффективные стратегии позиционирования . . . . . . . . . . . . . . . . . . . . . . 476
Практикум: позиционирование элементов страницы . . . . . . . . . . . . . . . . 483
Оглавление 11
Глава 15. Адаптивный веб-дизайн . . . . . . . . . . . . . . . . . . . . . . . . . . . 491
Основы адаптивного веб-дизайна . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 491
Создание адаптивного дизайна веб-страницы . . . . . . . . . . . . . . . . . . . . 493
Медиазапросы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 495
Гибкие сетки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 503
Гибкие изображения . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 508
Практикум: адаптивный веб-дизайн . . . . . . . . . . . . . . . . . . . . . . . . . . . . 512
Глава 16. Система модульной верстки Skeleton . . . . . . . . . . . . . . . 528
Принцип модульной сетки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 528
Структурирование HTML-кода под модульную сетку . . . . . . . . . . . . . . . . 530
Использование системы модульной верстки Skeleton . . . . . . . . . . . . . . . 532
Создание и именование колонок . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 536
Практикум: использование системы модульной верстки . . . . . . . . . . . . . 544
Глава 17. Профессиональная flexbox-верстка . . . . . . . . . . . . . . . . . 561
Знакомство с методом flexbox-верстки . . . . . . . . . . . . . . . . . . . . . . . . . . 561
Свойства flex-контейнера . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 564
Свойства flex-элементов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 574
Практикум: создание flexbox-макета . . . . . . . . . . . . . . . . . . . . . . . . . . . . 588
Часть IV. Профессиональные приемы
CSS-верстки
Глава 18. Профессиональные приемы CSS-верстки . . . . . . . . . . . . 600
Добавление комментариев . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 600
Организация стилей . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 602
Устранение конфликтов стилей в браузере . . . . . . . . . . . . . . . . . . . . . . 610
Использование селекторов потомков . . . . . . . . . . . . . . . . . . . . . . . . . . . 614
Глава 19. Профессиональный дизайн с помощью Sass . . . . . . . . . 621
Понятие Sass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 621
Интеграция Sass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 623
Основы Sass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 627
Организация стилей с помощью фрагментов Sass.................. 631
Переменные Sass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 635
Вложенные селекторы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 639
12 Оглавление
Наследование (или расширение) свойств . . . . . . . . . . . . . . . . . . . . . . . . 645
Примеси . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 650
Использование медиазапросов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 658
Поиск и устранение ошибок с помощью карт CSS-кода . . . . . . . . . . . . . . 663
Часть V. Приложения
Приложение 1. Справочник свойств CSS . . . . . . . . . . . . . . . . . . . . 668
Значения свойств CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 668
Свойства текста . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 673
Свойства списков . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 678
Отступы, границы и поля . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 680
Фоны . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 686
Компоновка макета . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 689
Свойства анимации, преобразований и переходов . . . . . . . . . . . . . . . . . 696
Свойства таблицы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 701
Прочие свойства . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 703
Приложение 2. Информационные ресурсы,
посвященные CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 706
Справочники . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 706
Справочная информация по CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 707
Подсказки, приемы и советы по CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . 707
CSS-навигация . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 708
CSS-верстка . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 709
Демонстрационные сайты . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 709
Указатель . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 711
