Кит Грант / CSS для профи Год издания: 2021 Автор: Keith J. Grant / Грант Кит Жанр или тематика: Веб-разработка Издательство: Питер ISBN: 978-5-4461-0909-8 Серия: Библиотека программиста Язык: Русский Формат: PDF/EPUB Качество: Издательский макет или текст (eBook) Интерактивное оглавление: Нет Количество страниц: 496 Описание Как вы понимаете, что зашли на хороший сайт? Это происходит практически мгновенно, с первого взгляда. Такие сайты привлекают внимание картинкой — отлично выглядят, а кроме этого они интерактивны и отзывчивы. Сразу видно, что такую страничку создавал CSS-профи, ведь именно каскадные таблицы стилей (CSS) отвечают за все наполнение и оформление сайта — от расположения элементов до неуловимых штрихов. Дело за малым — стать CSS-профи, а для этого придется разобраться в принципах CSS, научиться воплощать в жизнь идеи дизайнеров, не забывать о таких важных «мелочах», как красиво подобранный шрифт, плавные переходы и сбалансированная графика. Перед вами прямой путь в высшую лигу веб-разработки. Книга «CSS для профи» подарит вам не только свежие идеи, но и вдохновит на подвиги, а облегчить этот тернистый путь помогут новейшие технические достижения — адаптивный дизайн, библиотеки шаблонов и многое другое.
Примеры страниц (скриншоты)
Оглавление
Оглавление Предисловие Введение Благодарности Об этой книге Для кого предназначена книга Структура издания Условные обозначения и файлы примеров Версии браузеров Об авторе Иллюстрация на обложке Часть I. Обзор основных принципов Глава 1. Каскадность, специфичность и наследование 1.1. Каскадность 1.1.1. Источник стилей 1.1.2. Специфичность селекторов 1.1.3. Исходный порядок 1.1.4. Два правила 1.2. Наследование 1.3. Специальные значения 1.3.1. Ключевое слово inherit 1.3.2. Ключевое слово initial 1.4. Сокращенная запись свойств 1.4.1. Остерегайтесь сокращений, скрыто переопределяющих другие стили 1.4.2. Порядок записи сокращенных значений Итоги главы Глава 2. Работа с относительными единицами 2.1. Мощь относительных значений 2.1.1. Борьба за pixel-perfect-дизайн 2.1.2. Конец эпохи pixel-perfect 2.2. Единицы em и rem 2.2.1. Единицы em для указания размера шрифта 2.2.2. Указание размера шрифта в единицах rem 2.3. Перестаньте думать в пикселах 2.3.1. Установка адекватного размера шрифта по умолчанию 2.3.2. Делаем панель адаптивной 2.3.3. Изменение размера отдельного компонента 2.4. Единицы измерения, относящиеся к размеру экрана устройства 2.4.1. Единицы vw для указания размера шрифта 2.4.2. Функция calc() для указания размера шрифта 2.5. Числа без единиц измерения и свойство line-height 2.6. Пользовательские свойства (или CSS-переменные) 2.6.1. Динамическое изменение пользовательских свойств 2.6.2. Изменение пользовательских свойств с помощью JavaScript 2.6.3. Экспериментирование с пользовательскими свойствами Итоги главы Глава 3. Знакомство с блочной моделью 3.1. Трудности с шириной элемента 3.1.1. Избегаем волшебных чисел 3.1.2. Настройка блочной модели 3.1.3. Глобальное применение свойства box-sizing: border-box 3.1.4. Добавление зазора между колонками 3.2. Проблемы высоты элементов 3.2.1. Управление переполнением 3.2.2. Применение альтернатив к высотам, указанным в процентах 3.2.3. Свойства min-height и max-height 3.2.4. Центрирование контента по вертикалиОглавление 9 3.3. Отрицательные значения полей 3.4. Схлопывание полей 3.4.1. Схлопывание между текстом 3.4.2. Схлопывание многочисленных полей 3.4.3. Схлопывание вне контейнера 3.5. Расстояние между элементами в контейнере 3.5.1. Учет изменения контента 3.5.2. Универсальное решение: селектор лоботомированной совы Итоги главы Часть II. Разметка Глава 4. Плавающие элементы 4.1. Предназначение плавающих элементов 4.2. Схлопывание контейнера и clearfix 4.2.1. Что такое схлопывание контейнера 4.2.2. Что такое clearfix 4.3. Неожиданный «захват» плавающего элемента 4.4. Медиаобъекты и блочный контекст форматирования 4.4.1. Что такое блочный контекст форматирования 4.4.2. Использование блочного контекста форматирования для разметки медиаобъектов 4.5. CSS-сетки 4.5.1. Принципы CSS-сетки 4.5.2. Создание CSS-сетки 4.5.3. Добавление зазоров Итоги главы Глава 5. Flexbox-верстка 5.1. Принципы flexbox-верстки 5.1.1. Создание базовой flex-навигации 5.1.2. Добавление отступов и промежутков 5.2. Размеры flex-элементов 5.2.1. Свойство flex-basis 5.2.2. Свойство flex-grow 5.2.3. Свойство flex-shrink 5.2.4. Практические примеры 5.3. Направление flex-элементов 5.3.1. Изменение направления flex-элементов 5.3.2. Стилевое форматирование формы авторизации 5.4. Выравнивание, промежутки и другие штрихи 5.4.1. Свойства flex-контейнеров 5.4.2. Свойства flex-элементов 5.4.3. Выравнивание flex-блоков 5.5. Пара вещей, о которых следует знать 5.5.1. Flex-баги 5.5.2. Полноформатная разметка Итоги главы Глава 6. CSS-сетки 6.1. Веб-разметка уже здесь 6.1.1. Создание базовой сетки 6.2. Анатомия сетки 6.2.1. Нумерация линий сетки 6.2.2. Совместная работа с flex-блоками 6.3. Альтернативный синтаксис 6.3.1. Присвоение имен линиям сетки 6.3.2. Присвоение имен областям сетки 6.4. Явная и неявная сетка 6.4.1. Внесем разнообразие 6.4.2. Подгонка элементов для заполнения полосы сетки 6.5. Запросы функций 6.6. Выравнивание Итоги главы Глава 7. Контексты позиционирования и наложения 7.1. Фиксированное позиционирование 7.1.1. Создание модального окна с фиксированным позиционированием 7.1.2. Управление размером позиционированных элементов 7.2. Абсолютное позиционирование 7.2.1. Абсолютное позиционирование кнопки Закрыть 7.2.2. Позиционирование псевдоэлементов 7.3. Относительное позиционирование 7.3.1. Создание раскрывающегося меню 7.3.2. Создание треугольника CSS 7.4. Контексты наложения и z-индекса 7.4.1. Процесс рендеринга и порядок наложения 7.4.2. Управление наложением с помощью свойства z-index 7.4.3. Контексты наложения 7.5. Липкое позиционирование Итоги главы Глава 8. Адаптивный дизайн 8.1. Подход Mobile First 8.1.1. Создание мобильного меню 8.1.2. Добавление метатега viewport 8.2. Медиазапросы 8.2.1. Типы медиазапросов 8.2.2. Добавление контрольных точек на страницу 8.2.3. Добавление адаптивных колонок 8.3. Резиновые макеты 8.3.1. Добавление стилей для большой области просмотра 8.3.2. Работа с таблицами 8.4. Адаптивные изображения 8.4.1. Использование нескольких изображений для экранов разных размеров 8.4.2. Использование атрибута srcset для передачи нужного изображения Итоги главы Часть III. Масштабируемый CSS-код Глава 9. Модульный CSS 9.1. Базовые стили: закладываем основы 9.2. Простой модуль 9.2.1. Вариации модуля 9.2.2. Модули с множеством элементов 9.3. Составление крупных структур из модулей 9.3.1. Разделение ответственности между модулями 9.3.2. Именование модулей 9.4. Вспомогательные классы 9.5. Методологии CSS Итоги главы Глава 10. Библиотеки компонентов 10.1. Введение в KSS 10.1.1. Установка KSS 10.1.2. Написание KSS-документации 10.1.3. Документирование вариаций модуля 10.1.4. Создание начальной страницы 10.1.5. Документирование модулей, которым требуется JavaScript 10.1.6. Упорядочение контента библиотеки компонентов по разделам 10.2 Инновационный способ верстки CSS 10.2.1. Метод CSS First 10.2.2. Библиотека компонентов в качестве API Итоги главы Часть IV. Темы повышенной сложности Глава 11. Фоны, тени и режимы смешивания 11.1. Градиенты 11.1.1. Использование нескольких цветовых узлов 11.1.2. Использование радиального градиента 11.2. Тени 11.2.1. Создание объема с помощью градиентов и теней 11.2.2. Элементы с плоским дизайном 11.2.3. Создание кнопок с более современным дизайном 11.3. Режимы смешивания 11.3.1. Изменение оттенка изображения 11.3.2. Виды режимов смешивания 11.3.3. Добавление текстуры изображению 11.3.4. Микширование режимов смешивания Итоги главы Глава 12. Контраст, цвета и интервалы 12.1. Царство контраста 12.1.1. Создание шаблона 12.1.2. Реализация дизайнаОглавление 13 12.2. Цвета 12.2.1. Разбираемся с нотациями цветов 12.2.2. Добавление цветов в палитру 12.2.3. Применение контраста при выборе цвета текста 12.3. Интервалы 12.3.1. Единицы em или пикселы? 12.3.2. Вычисление высоты строки 12.3.3. Интервалы между строчными элементами Итоги главы Глава 13. Шрифтовое оформление 13.1. Веб-шрифты 13.2. Сервис Google Fonts 13.3. Как работает свойство @font-face 13.3.1. Форматы шрифтов и замена при необходимости 13.3.2. Варианты начертания в одной гарнитуре 13.4. Управление интервалами в целях повышения читаемости 13.4.1. Интервалы основного текста сайта 13.4.2. Заголовки, мелкие элементы и интервалы 13.5. Вспышки нестилизованного и невидимого текста 13.5.1. Библиотека Font Face Observer 13.5.2. Откат к системным шрифтам 13.5.3. И наконец, свойство font-display Итоги главы Глава 14. Переходы 14.1. Отсюда сюда 14.2. Функции времени 14.2.1. Изучение кривых Безье 14.2.2. Шаги 14.3. Неанимируемые свойства 14.3.1. Свойства, которые нельзя анимировать 14.3.2. Появление и исчезновение 14.4. Переход к автоматическому выравниванию высоты Итоги главы Глава 15. Трансформации 15.1. Вращение, масштабирование, смещение и наклон 15.1.1. Изменение точки трансформации 15.1.2. Применение нескольких трансформаций 15.2. Анимированные трансформации 15.2.1. Масштабирование значков 15.2.2. Создание «вылетающих» меток 15.2.3. Поэтапные переходы 15.3. Производительность анимации 15.3.1. Рендеринг страницы 15.4. Трехмерные (3D) трансформации 15.4.1. Контроль перспективы 15.4.2. Профессиональные приемы 3D-трансформации Итоги главы Глава 16. Анимация 16.1. Ключевые кадры 16.2. Анимация 3D-трансформаций 16.2.1. Создание макета без анимации 16.2.2. Добавление анимации в макет 16.3. Задержка запуска анимации и режим заполнения 16.4. Передача смысла с помощью анимации 16.4.1. Реакция на действие пользователя 16.4.2. Привлечение внимания пользователя 16.5. Совет напоследок Итоги главы Приложения Приложение A. Селекторы А.1. Базовые селекторы А.2. Комбинаторы A.3. Селекторы псевдоклассов А.4. Селекторы псевдоэлементов А.5. Селекторы атрибутовОглавление 15 Приложение Б. Препроцессоры Б.1. Препроцессор Sass Б.1.1. Установка препроцессора Sass Б.1.2. Запуск препроцессора Sass Б.1.3. Важные функции препроцессора Sass Б.2. PostCSS Б.2.1. Использование инструмента Autoprefixer Б.2.2. Применение cssnext Б.2.3. Использование cssnano Б.2.4. Использование PreCSS
You cannot post new topics in this forum You cannot reply to topics in this forum You cannot edit your posts in this forum You cannot delete your posts in this forum You cannot vote in polls in this forum You cannot attach files in this forum You can download files in this forum
![[Quote]](./templates/default/images/lang/en/icon_quote.gif "Reply with quote"){kind=icon}
![[Profile]](./templates/default/images/lang/en/icon_profile.gif "View user's profile"){kind=icon}
![[PM]](./templates/default/images/lang/en/icon_pm.gif "Send private message"){kind=icon}
