ББК 32.988.02-018 УДК 004.738.8 М17 Макфарланд Д. М17 Новая большая книга CSS. — СПб.: Питер, 2016. — 720 с.: ил. — (Серия «Бест- селлеры O’Reilly»). ISBN 978-5-496-02080-0 Технология CSS3 позволяет создавать профессионально оформленные сайты, но тонкости этого языка могут оказаться довольно сложными даже для опытных веб-разработчиков. Полностью пере- работанное четвертое издание этой книги поможет вам поднять навыки работы с HTML и CSS на новый уровень; оно содержит множество ценных советов, описаний приемов, а также инструкции, написанные в стиле справочного руководства. Веб-дизайнеры, как начинающие, так и опытные, при помощи этой книги быстро научатся создавать красивые веб-страницы, которые молниеносно загру- жаются как на ПК, так и на мобильные устройства. 12+ (В соответствии с Федеральным законом от 29 декабря 2010 г. № 436-ФЗ.) ББК 32.988.02-018 УДК 004.738.8 Права на издание получены по соглашению с O’Reilly. Все права защищены. Никакая часть данной книги не может быть воспроизведена в какой бы то ни было форме без письменного разрешения владельцев авторских прав. Информация, содержащаяся в данной книге, получена из источников, рассматриваемых издательством как на- дежные. Тем не менее, имея в виду возможные человеческие или технические ошибки, издательство не может гарантировать абсолютную точность и полноту приводимых сведений и не несет ответственности за возможные ошибки, связанные с использованием книги. ISBN 978-1491918050 англ. © Copyright © 2015 David Sawyer McFarland. All rights reserved. ISBN 978-5-496-02080-0 © Перевод на русский язык ООО Издательство «Питер», 2016 © Издание на русском языке, оформление ООО Издательство «Питер», 2016 © Серия «Бестселлеры O’Reilly», 2016 Краткое содержание Об авторе . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 О творческой команде . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Благодарности . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Введение . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Часть I. Основы CSS Глава 1. HTML и CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 Глава 2. Создание стилей и таблиц стилей . . . . . . . . . . . . . . . . . . . . 46 Глава 3. Селекторы: выбор форматируемых элементов . . . . . . . . . 65 Глава 4. Механизм наследования стилей . . . . . . . . . . . . . . . . . . . . . 110 Глава 5. Управление сложной структурой стилей: каскадность . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120 Часть II. Применение CSS Глава 6. Форматирование текста . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142 Глава 7. Поля, отступы, границы . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211 Глава 8. Добавление графики на веб-страницы . . . . . . . . . . . . . . . 257 6 Краткое содержание Глава 9. Построение навигационной системы сайта . . . . . . . . . . . 309 Глава 10. Преобразования, переходы и анимация с помощью CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349 Глава 11. Форматирование таблиц и веб-форм . . . . . . . . . . . . . . . 387 Часть III. Верстка страниц с помощью CSS Глава 12. Введение в CSS-верстку . . . . . . . . . . . . . . . . . . . . . . . . . . . 414 Глава 13. Макеты на основе обтекаемых элементов . . . . . . . . . . . 427 Глава 14. Позиционирование элементов на странице . . . . . . . . . . 462 Глава 15. Адаптивный веб-дизайн . . . . . . . . . . . . . . . . . . . . . . . . . . . 491 Глава 16. Система модульной верстки Skeleton . . . . . . . . . . . . . . . 528 Глава 17. Профессиональная flexbox-верстка . . . . . . . . . . . . . . . . . 561 Часть IV. Профессиональные приемы CSS-верстки Глава 18. Профессиональные приемы CSS-верстки . . . . . . . . . . . . 600 Глава 19. Профессиональный дизайн с помощью Sass . . . . . . . . . 621 Часть V. Приложения Приложение 1. Справочник свойств CSS . . . . . . . . . . . . . . . . . . . . 668 Приложение 2. Информационные ресурсы, посвященные CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 706 Указатель . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 711 Оглавление Об авторе . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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