CSS для профи

Издательство: Питер
Автор: Грант К.
ISBN: 978-5-4461-0909-8
Страниц: 496
Язык: Русский
Год издания: 2019

 
 
 

Описание книгиСодержаниеДополнительно

Книги по IT. Как у вас происходит понимание что сайт, на котором вы находитесь, — хороший? Вы осознаете это очень быстро, можно сказать мгновенно, как только откроете веб-страницу. У таких ресурсов отличный внешний вид, картинка, обращающая на себя внимание, при этом их интерфейс интерактивен и отзывчив. Сразу понятно, что над страничкой потрудился CSS-профи, так как всё в наполнении и оформлении контента, начиная расположением элементов и заканчивая неуловимыми штрихами дизайна, делается с помощью каскадных таблиц стилей (CSS). Вы, после прочтения данного руководства, изучите CSS, и при воплощении идей дизайнеров, не будете забывать о красиво подобранном шрифте, плавных переходах и сбалансированной графике, а также станете настоящим профессионалом.

Предисловие 16
Введение 18
Благодарности 20
Об этой книге 22
Для кого предназначена книга 22
Структура издания 23
Условные обозначения и файлы примеров 24
Версии браузеров 25
Об авторе 25
Иллюстрация на обложке 26
Часть I. Обзор основных принципов
Глава 1. Каскадность, специфичность и наследование 28
1.1. Каскадность 29
1.1.1. Источник стилей 33
1.1.2. Специфичность селекторов 36
1.1.3. Исходный порядок 41
1.1.4. Два правила 44
1.2. Наследование 45
1.3. Специальные значения 48
1.3.1. Ключевое слово inherit 48
1.3.2. Ключевое слово initial 49
1.4. Сокращенная запись свойств 50
1.4.1. Остерегайтесь сокращений, скрыто переопределяющих другие стили 51
1.4.2. Порядок записи сокращенных значений 52
Итоги главы 54
Глава 2. Работа с относительными единицами 55
2.1. Мощь относительных значений 55
2.1.1. Борьба за pixel-perfect-дизайн 56
2.1.2. Конец эпохи pixel-perfect 56
2.2. Единицы em и rem 58
2.2.1. Единицы em для указания размера шрифта 59
2.2.2. Указание размера шрифта в единицах rem 63
2.3. Перестаньте думать в пикселах 65
2.3.1. Установка адекватного размера шрифта по умолчанию 66
2.3.2. Делаем панель адаптивной 68
2.3.3. Изменение размера отдельного компонента 69
2.4. Единицы измерения, относящиеся к размеру экрана устройства 71
2.4.1. Единицы vw для указания размера шрифта 74
2.4.2. Функция calc() для указания размера шрифта 74
2.5. Числа без единиц измерения и свойство line-height 75
2.6. Пользовательские свойства (или CSS-переменные) 77
2.6.1. Динамическое изменение пользовательских свойств 79
2.6.2. Изменение пользовательских свойств с помощью JavaScript 82
2.6.3. Экспериментирование с пользовательскими свойствами 83
Итоги главы 84
Глава 3. Знакомство с блочной моделью 85
3.1. Трудности с шириной элемента 86
3.1.1. Избегаем волшебных чисел 89
3.1.2. Настройка блочной модели 90
3.1.3. Глобальное применение свойства box-sizing: border-box 91
3.1.4. Добавление зазора между колонками 93
3.2. Проблемы высоты элементов 94
3.2.1. Управление переполнением 95
3.2.2. Применение альтернатив к высотам, указанным в процентах 96
3.2.3. Свойства min-height и max-height 101
3.2.4. Центрирование контента по вертикали 102
3.3. Отрицательные значения полей 104
3.4. Схлопывание полей 105
3.4.1. Схлопывание между текстом 106
3.4.2. Схлопывание многочисленных полей 106
3.4.3. Схлопывание вне контейнера 107
3.5. Расстояние между элементами в контейнере 109
3.5.1. Учет изменения контента 111
3.5.2. Универсальное решение: селектор лоботомированной совы 112
Итоги главы 116
Часть II. Разметка
Глава 4. Плавающие элементы 118
4.1. Предназначение плавающих элементов 118
4.2. Схлопывание контейнера и clearfix 125
4.2.1. Что такое схлопывание контейнера 125
4.2.2. Что такое clearfix 128
4.3. Неожиданный «захват» плавающего элемента 131
4.4. Медиаобъекты и блочный контекст форматирования 134
4.4.1. Что такое блочный контекст форматирования 135
4.4.2. Использование блочного контекста форматирования для разметки медиаобъектов 136
4.5. CSS-сетки 138
4.5.1. Принципы CSS-сетки 139
4.5.2. Создание CSS-сетки 139
4.5.3. Добавление зазоров 144
Итоги главы 148
Глава 5. Flexbox-верстка 149
5.1. Принципы flexbox-верстки 150
5.1.1. Создание базовой flex-навигации 153
5.1.2. Добавление отступов и промежутков 156
5.2. Размеры flex-элементов 157
5.2.1. Свойство flex-basis 160
5.2.2. Свойство flex-grow 160
5.2.3. Свойство flex-shrink 162
5.2.4. Практические примеры 163
5.3. Направление flex-элементов 165
5.3.1. Изменение направления flex-элементов 167
5.3.2. Стилевое форматирование формы авторизации 168
5.4. Выравнивание, промежутки и другие штрихи 170
5.4.1. Свойства flex-контейнеров 174
5.4.2. Свойства flex-элементов 175
5.4.3. Выравнивание flex-блоков 176
5.5. Пара вещей, о которых следует знать 178
5.5.1. Flex-баги 178
5.5.2. Полноформатная разметка 179
Итоги главы 179
Глава 6. CSS-сетки 181
6.1. Веб-разметка уже здесь 182
6.1.1. Создание базовой сетки 183
6.2. Анатомия сетки 185
6.2.1. Нумерация линий сетки 191
6.2.2. Совместная работа с flex-блоками 192
6.3. Альтернативный синтаксис 196
6.3.1. Присвоение имен линиям сетки 196
6.3.2. Присвоение имен областям сетки 198
6.4. Явная и неявная сетка 200
6.4.1. Внесем разнообразие 204
6.4.2. Подгонка элементов для заполнения полосы сетки 207
6.5. Запросы функций 210
6.6. Выравнивание 213
Итоги главы 216
Глава 7. Контексты позиционирования и наложения 217
7.1. Фиксированное позиционирование 218
7.1.1. Создание модального окна с фиксированным позиционированием 218
7.1.2. Управление размером позиционированных элементов 221
7.2. Абсолютное позиционирование 222
7.2.1. Абсолютное позиционирование кнопки Закрыть 222
7.2.2. Позиционирование псевдоэлементов 223
7.3. Относительное позиционирование 225
7.3.1. Создание раскрывающегося меню 226
7.3.2. Создание треугольника CSS 229
7.4. Контексты наложения и z-индекса 231
7.4.1. Процесс рендеринга и порядок наложения 232
7.4.2. Управление наложением с помощью свойства z-index 234
7.4.3. Контексты наложения 235
7.5. Липкое позиционирование 239
Итоги главы 242
Глава 8. Адаптивный дизайн 243
8.1. Подход Mobile First 244
8.1.1. Создание мобильного меню 252
8.1.2. Добавление метатега viewport 257
8.2. Медиазапросы 258
8.2.1. Типы медиазапросов 260
8.2.2. Добавление контрольных точек на страницу 262
8.2.3. Добавление адаптивных колонок 266
8.3. Резиновые макеты 268
8.3.1. Добавление стилей для большой области просмотра 269
8.3.2. Работа с таблицами 272
8.4. Адаптивные изображения 273
8.4.1. Использование нескольких изображений для экранов разных размеров 274
8.4.2. Использование атрибута srcset для передачи нужного изображения 275
Итоги главы 276
Часть III. Масштабируемый CSS-код
Глава 9. Модульный CSS 278
9.1. Базовые стили: закладываем основы 279
9.2. Простой модуль 281
9.2.1. Вариации модуля 282
9.2.2. Модули с множеством элементов 287
9.3. Составление крупных структур из модулей 290
9.3.1. Разделение ответственности между модулями 290
9.3.2. Именование модулей 295
9.4. Вспомогательные классы 296
9.5. Методологии CSS 297
Итоги главы 299
Глава 10. Библиотеки компонентов 300
10.1. Введение в KSS 301
10.1.1. Установка KSS 302
10.1.2. Написание KSS-документации 304
10.1.3. Документирование вариаций модуля 308
10.1.4. Создание начальной страницы 311
10.1.5. Документирование модулей, которым требуется JavaScript 311
10.1.6. Упорядочение контента библиотеки компонентов по разделам 314
10.2 Инновационный способ верстки CSS 316
10.2.1. Метод CSS First 317
10.2.2. Библиотека компонентов в качестве API 318
Итоги главы 324
Часть IV. Темы повышенной сложности
Глава 11. Фоны, тени и режимы смешивания 326
11.1. Градиенты 327
11.1.1. Использование нескольких цветовых узлов 329
11.1.2. Использование радиального градиента 332
11.2. Тени 334
11.2.1. Создание объема с помощью градиентов и теней 335
11.2.2. Элементы с плоским дизайном 336
11.2.3. Создание кнопок с более современным дизайном 337
11.3. Режимы смешивания 338
11.3.1. Изменение оттенка изображения 341
11.3.2. Виды режимов смешивания 342
11.3.3. Добавление текстуры изображению 343
11.3.4. Микширование режимов смешивания 345
Итоги главы 347
Глава 12. Контраст, цвета и интервалы 348
12.1. Царство контраста 349
12.1.1. Создание шаблона 351
12.1.2. Реализация дизайна 352
12.2. Цвета 353
12.2.1. Разбираемся с нотациями цветов 360
12.2.2. Добавление цветов в палитру 364
12.2.3. Применение контраста при выборе цвета текста 367
12.3. Интервалы 368
12.3.1. Единицы em или пикселы? 369
12.3.2. Вычисление высоты строки 371
12.3.3. Интервалы между строчными элементами 374
Итоги главы 377
Глава 13. Шрифтовое оформление 378
13.1. Веб-шрифты 380
13.2. Сервис Google Fonts 381
13.3. Как работает свойство @font-face 386
13.3.1. Форматы шрифтов и замена при необходимости 387
13.3.2. Варианты начертания в одной гарнитуре 388
13.4. Управление интервалами в целях повышения читаемости 390
13.4.1. Интервалы основного текста сайта 391
13.4.2. Заголовки, мелкие элементы и интервалы 392
13.5. Вспышки нестилизованного и невидимого текста 397
13.5.1. Библиотека Font Face Observer 398
13.5.2. Откат к системным шрифтам 400
13.5.3. И наконец, свойство font-display 402
Итоги главы 403
Глава 14. Переходы 404
14.1. Отсюда сюда 404
14.2. Функции времени 407
14.2.1. Изучение кривых Безье 409
14.2.2. Шаги 412
14.3. Неанимируемые свойства 413
14.3.1. Свойства, которые нельзя анимировать 416
14.3.2. Появление и исчезновение 417
14.4. Переход к автоматическому выравниванию высоты 419
Итоги главы 421
Глава 15. Трансформации 422
15.1. Вращение, масштабирование, смещение и наклон 422
15.1.1. Изменение точки трансформации 426
15.1.2. Применение нескольких трансформаций 426
15.2. Анимированные трансформации 427
15.2.1. Масштабирование значков 433
15.2.2. Создание «вылетающих» меток 436
15.2.3. Поэтапные переходы 438
15.3. Производительность анимации 439
15.3.1. Рендеринг страницы 440
15.4. Трехмерные (3D) трансформации 442
15.4.1. Контроль перспективы 443
15.4.2. Профессиональные приемы 3D-трансформации 446
Итоги главы 449
Глава 16. Анимация 450
16.1. Ключевые кадры 451
16.2. Анимация 3D-трансформаций 454
16.2.1. Создание макета без анимации 454
16.2.2. Добавление анимации в макет 459
16.3. Задержка запуска анимации и режим заполнения 461
16.4. Передача смысла с помощью анимации 464
16.4.1. Реакция на действие пользователя 464
16.4.2. Привлечение внимания пользователя 468
16.5. Совет напоследок 471
Итоги главы 472
Приложения
Приложение A. Селекторы 474
А.1. Базовые селекторы 474
А.2. Комбинаторы 474
A.3. Селекторы псевдоклассов 475
А.4. Селекторы псевдоэлементов 477
А.5. Селекторы атрибутов 478
Приложение Б. Препроцессоры 479
Б.1. Препроцессор Sass 480
Б.1.1. Установка препроцессора Sass 480
Б.1.2. Запуск препроцессора Sass 481
Б.1.3. Важные функции препроцессора Sass 482
Б.2. PostCSS 491
Б.2.1. Использование инструмента Autoprefixer 491
Б.2.2. Применение cssnext 492
Б.2.3. Использование cssnano 492
Б.2.4. Использование PreCSS 493

CSS отличается от многих средств разработки программного обеспечения. Строго говоря, это не язык программирования, хотя он требует абстрактного мышления. Это не исключительно инструмент дизайна, хотя понадобится толика креатива. Каскадные таблицы стилей обеспечивают обманчиво простой декларативный синтаксис, но если вы использовали его при работе над крупными проектами, то знайте, что он способен перерасти в серьезную проблему.
Если требуется научиться делать что-то в обычном программировании, вы чаще всего знаете, что искать (например, «как найти элементы типа x в массиве»). С CSS не всегда легко решить проблему с помощью только одного запроса в Интернете. Даже когда вы можете это сделать, ответ часто от чего-то зависит. Чтобы добиться чего-либо, нередко нужно уметь обрабатывать разнообразные ситуации.
По сути, CSS — это объявленные правила: мы хотим, чтобы в различных условиях происходили определенные вещи. Если этот класс добавлен к тому элементу — применить такие-то стили. Если элемент X является потомком элемента Y — вот эти. Затем браузер принимает эти правила, определяет, какие из них действуют, в каком порядке и в каком месте, и использует их при визуализации страницы.
Когда рассматриваются небольшие примеры, этот процесс обычно не вызывает сложностей. Но по мере увеличения размера таблицы стилей или количества веб-страниц, к которым вы ее применяете, код может неожиданно быстро усложниться. В CSS существует несколько способов делать одно и то же. При изменении структуры HTML или использовании стилей на разных страницах результаты могут оказаться совершенно разными. Это зависит от того, какое решение задействовано. Ключевая часть разработки CSS сводится к написанию правил таким образом, чтобы они были предсказуемыми.


Отрывок из книги
Примеры кода
ссылка