4-еиздание css Полный справочник Визуальное форматирование веб-страниц Fourth Edition CSS: The Definitive Guide Visual Presentation for the Web Eric Meyer and Estelle Weyl А. Beijing • Boston • Farnham • Sebastopol • Tokyo O"REILLY' 4-еиздание css Полный справочник Визуальное форматирование веб-страниц Эрик Мейер, Эстелл Уэйл Москва · Санкт-Петербург 2019 ББК 32.973.26-018.2.75 М45 УДК 681.3.07 Компьютерное издательство "Диалектика" Перевод с английского И.В. Василенко Под редакцией В.Р. Гинзбурга По общим вопросам обращайтесь в издательство "Диалектика" по адресу: [email protected], http://www.dialektika.com Мейер, Эрик, Уэйл, Эстелл. М45 CSS: полный справочник, 4-е изд.: Пер. с англ. - СПб.: ООО "Диалектика': 2019. - 1088 с. : ил. - Парал. тит. англ. ISBN 978-5-907114-56-2 (рус.) ББК 32.973.26-018.2.75 Все названия программных продуктов являются зарегистрированными торговыми марками соответ­ ствующих фирм. Никакая часть настоящего издания ни в каких целях не может быть воспроизведена в какой бы то ни было форме и какими бы то ни было средствами, будь то электронные или механические, включая фотоко­ пирование и запись на магнитный носитель, если на это нет письменного разрешения издательства O'Reilly Media, Inc. Authorized Russian translation of the English edition of CSS: The Definitive Guide, 4th Edition (ISBN 978-1- 449-39319-9) © 2018 Eric Meyer, Estelle Weyl. This translation is puЫished and sold Ьу permission of O'Reilly Media, Inc" which owns or controls all rights to sell the same. All гights reserved. No part of this book may Ье reproduced or transmitted in any form or Ьу any means, electronic or mechanical, including photocopying, recording, or Ьу any informatioп storage or retrieval system, without the prior written permission of the copyright owner and the PuЬlisher. Научно-популярное издание Эрик Мейер, Эстелл Уэйл CSS: полный справочник, 4-е издание Подписано в печать 11.02.2019. Формат 70х100/16. Гарнитура Times. Усл. печ. л. 87,7. Уч.-изд. л. 74,05. Тираж 400 экз. Заказ № 1675. Отпечатано в АО "Первая Образцовая типография" Филиал "Чеховский Печатный Двор" 142300, Московская область, г. Чехов, ул. Полиграфистов, д. 1 Сайт: www.chpd.ru, E-mail: [email protected], тел. 8 ( 499) 270-73-59 ООО "Диалектика': 195027, Санкт-Петербург, Магнитогорская ул" д. 30, лит. А, пом. 848 ISBN 978-5-907114-56-2 (рус.) © 2019 ООО "Диалектика" ISBN 978-1-449-39319-9 (англ.) © 2018 Eric Meyer, Estelle Weyl Оглавление Введение 13 Гnава 1.CSS и НТМL-документы 21 Гnава 2. Сеnекторы 51 Гnава 3. Приоритетность и каскадирование стиnей 125 Гnава 4. Значения и единицы измерения 141 Гnава 5. Шрифты 177 Гnава 6. Текстовые свойства 235 Гnава 7. Основы визуаnьного оформnения документа 285 Гnава 8. Поnя, отступы, границы и рамки 343 Гnава 9. Цвета, фон и градиенты 411 Гnава 1О . Обтекание и форма эnемента 513 Гnава 11. Позиционирование 551 Гnава 12. Гибкая верстка 591 Гnава 13. Верстка по сетке 687 Гnава 14. Верстка табnиц 765 Гnава 15. Списки и генерируемое содержимое 801 Гnава 16. Трансформации 853 Гnава 17. Переходы 891 Гnава 18. Анимация 927 Гnава 19. Фиnьтры, смешивание цветов, обтравочные контуры и маски 981 Гnава 20. Форматирование, зависящее от носитеnя 1027 Приnожение А. Анимируемые свойства 1055 Приnожение Б. Базовые свойства 1061 Приnожение В. Табnица соответствия цветов 1071 Предметный указатеnь 1075 Содержание 11 Об авторах 12 Об изображении на обложке Введение 13 Принятые соглашения 13 Синтаксис описания свойств CSS 14 Файлы примеров и цветные иллюстрации 17 Ждем ваших отзывов! 18 19 Благодарности Гnава 1. CSS и НТМL-документы 21 История CSS 21 23 Элементы Взаимодействие CSS и HTML 28 Таблицы стилей 37 41 Меди а-запросы Запросы поддержки 47 Резюме 50 Гnава 2. Сеnекторы 51 51 Базовые правила Группирование 56 Селекторы идентификаторов и классов 61 68 Селекторы атрибутов 78 Структура документа 87 Селекторыпсевдоклассов Псевдоэлементы 119 122 Резюме Гnава 3. Приоритетность и каскадирование стиnей 125 125 Приоритетность 131 Наследование 134 Каскадирование 140 Резюме Гnава 4. Значения и единицы измерения 141 Ключевые слова, строки и друтие текстовые значения 141 Числовые и процентные значения 148 149 Длина и расстояние 159 Вычисляемые значения Значения атрибутов 161 161 Цвета 171 Углы Время и частота 172 173 Положение 173 Пользовательские переменные Гnава S. Шрифты 177 Семейства шрифтов 177 Правило @font-face 182 Насыщенность шрифта 195 Размер шрифта 203 Начертание шрифта 214 Уплотнение и расширение текста 218 Кернинг шрифта 220 Варианты строчных букв 221 Особенности шрифта 224 Генерирование начертаний 226 Свойство font 228 Замена шрифтов 232 Резюме 234 Гnава 6. Текстовые свойства 235 Отступы и выравнивание 235 Выравнивание по высоте 244 Интервалы между словами и символами 254 Регистр символов 258 Оформление текста 260 Оптимизация отображения текста 264 Текст, отбрасывающий тень 266 Обработка пробелов 267 Разрывы и переносы текстовых строк 271 Направление письма 277 284 Резюме Гnава 7. Основы визуаnьноrо оформnения документа 285 Контейнеры 285 Представление элемента 288 Строчные элементы 312 Резюме 342 Гnава 8. Поnя, отступы, rраницы и рамки 343 Контейнеры элемента 343 Поля 346 Границы 356 Внешний контур 395 Отступы 401 Резюме 410 Глава 9. Цвета, фон и rрадиенты 411 Цвета 411 Фон элемента 416 Градиенты 474 Тень элемента 509 Резюме 512 Глава 1О . Обтекание и форма элемента 513 Обтекание 513 Отмена обтекания 530 Обтекание по форме элемента 534 Резюме 549 Глава 11. Позиционирование 551 Общие положения 551 Свойства смещения 553 Высота и ширина 556 Переполнение и обрезка содержимого 560 Сокрытие элемента 562 Абсолютное позиционирование 563 Фиксированное положение 581 Относительное позиционирование 583 Липкое позиционирование 585 Резюме 589 Глава 12 Гибкая верстка 591 Основы верстки flех-контейнеров 591 Flех-контейнеры 598 Упорядочение flех-элементов 616 Flех-контейнер 617 Выравнивание flех-элементов 618 Выравнивание flех-элементов вдоль поперечной оси 627 Свойство align-self 634 Выравнивание содержимого 635 Flех-элементы 641 Свойства форматирования отдельных flех-элементов 646 Свойство flex 646 Свойство flex-grow 648 Свойство flex-shrink 655 Свойство flex-basis 666 Свойство общего назначения flex 676 Порядок следования элементов 682 Гnава 13. Верстка по сетке 687 Создание grid-контейнера 687 690 Основные определения 692 Размещение линий сетки 720 Привязка элементов к сетке Поток grid-элементов 736 741 Автоматическое размещение линий сетки Свойство настройки сетки общего назначения 744 748 Интервалы Выравнивание grid-элементов 755 761 Размещение на слоях и порядок наложения 763 Резюме Гnава 14. Верстка табnиц 765 Форматирование таблиц 765 Границы ячеек таблицы 779 Размер таблицы 788 799 Резюме Гnава 15. Списки и генерируемое содержимое 801 801 Списки 813 Генерируемое содержимое 829 Шаблон счетчика 851 Резюме Гnава 16. Трансформации 853 853 Система координат Трансформация элементов 857 Другие свойства трансформации 877 889 Резюме Гnава 17. Переходы 891 Переходы в CSS 891 893 Свойства настройки переходов Независимый обратный переход 916 920 Анимируемые свойства и значения Переход как эффект оформления 925 925 Печать переходов Гnава 18. Анимация 927 928 Определение ключевых кадров 929 Настройка анимации 930 Селекторы ключевых кадров 936 Анимация элементов 971 Анимация общего назначения 9 1