Учебник CSS для начинающих

Программа курса

1. 1 Введение в CSS

   1. Что такое CSS и зачем он нужен

      Что такое CSS простыми словами, как он отделяет оформление от разметки и почему стили — отдельный слой страницы. Первый шаг в CSS.

   2. Способы подключить CSS к странице

      Три способа подключить CSS: inline через style, внутренний тег style и внешний файл через link. Когда какой использовать.

   3. Синтаксис правила: селектор, свойство, значение

      Из чего состоит правило CSS: селектор, блок объявлений, свойства и значения. Точка с запятой, фигурные скобки и комментарии.

   4. Каскад, специфичность и наследование

      Как CSS решает конфликты правил: каскад, специфичность селекторов и наследование свойств. Почему один стиль побеждает другой.

2. 2 Селекторы

   1. Селекторы по тегу, классу и id

      Базовые селекторы CSS: по тегу, по классу через точку и по id через решётку. Универсальный селектор и когда что выбирать.

   2. Группировка и комбинаторы

      Группировка селекторов через запятую и комбинаторы CSS: потомок (пробел), дочерний (>), соседний (+) и все следующие (~).

   3. Псевдоклассы: :hover, :focus, :nth-child

      Псевдоклассы CSS: :hover для наведения, :focus для фокуса, :nth-child и :first/:last-child для выбора по позиции. Интерактивные стили.

   4. Псевдоэлементы и атрибутные селекторы

      Псевдоэлементы ::before и ::after с content, оформление части элемента и селекторы по атрибутам: [type], [href^=], [class*=].

3. 3 Текст, цвета и фон

   1. Цвет и форматы записи: hex, rgb, hsl

      Свойство color и форматы цвета в CSS: ключевые слова, hex, rgb и rgba с прозрачностью, hsl. Как устроены и когда какой удобнее.

   2. Шрифты: семейство, размер, начертание

      Свойства шрифта в CSS: font-family и стопка шрифтов, font-size, font-weight, font-style и line-height для читаемого текста.

   3. Оформление и выравнивание текста

      Свойства текста в CSS: text-align, text-decoration, text-transform, letter-spacing и text-indent. Как выравнивать и оформлять текст.

   4. Фон: цвет, изображение и градиенты

      Свойство background в CSS: background-color, background-image, повтор и позиция, background-size: cover и линейные градиенты.

4. 4 Блочная модель

   1. Блочная модель: content, padding, border, margin

      Блочная модель CSS: content, padding, border и margin. Как устроены отступы внутри и снаружи элемента и чем они различаются.

   2. box-sizing: content-box и border-box

      Свойство box-sizing в CSS: разница между content-box и border-box, как padding и border влияют на ширину и зачем border-box.

   3. Размеры, схлопывание margin

      Размеры в CSS: width, height, min-width, max-width для адаптивных блоков и схлопывание вертикальных margin между элементами.

   4. Свойство display: block, inline, inline-block, none

      Свойство display в CSS: block, inline и inline-block, в чём разница, и display: none для скрытия элементов. Как меняется поведение блока.

5. 5 Современная вёрстка

   1. Flexbox: контейнер и его оси

      Flexbox в CSS: display: flex, главная и поперечная оси, flex-direction, justify-content, align-items и gap для выравнивания элементов.

   2. Flexbox: гибкость элементов

      Свойства flex-элементов: flex-grow, flex-shrink, flex-basis и сокращение flex, перенос строк flex-wrap и выравнивание отдельного элемента.

   3. Grid: сетки в две измерения

      CSS Grid: display: grid, grid-template-columns и rows, единица fr, repeat и minmax, gap и размещение элементов в сетке.

   4. Позиционирование и z-index

      Свойство position в CSS: static, relative, absolute, fixed и sticky. Свойства top/left, контекст позиционирования и z-index для слоёв.

6. 6 Адаптивность и эффекты

   1. Единицы измерения: px, %, em, rem, vw/vh

      Единицы измерения в CSS: абсолютные px и относительные %, em, rem, vw и vh. В чём разница и когда какую выбирать.

   2. Медиазапросы и мобильная вёрстка

      Медиазапросы @media в CSS: адаптация под ширину экрана, брейкпоинты, подход mobile-first и тег viewport для мобильной вёрстки.

   3. Переходы и трансформации

      Анимация в CSS: transition для плавных переходов свойств и transform для перемещения, поворота и масштабирования элементов.

   4. Переменные CSS (custom properties)

      Переменные CSS (custom properties): объявление через --name, чтение через var(), значение по умолчанию, наследование и применение для тем.

7. 7 Grid и Flexbox вглубь

   1. CSS Grid вглубь: areas, minmax, auto-fill

      Глубоко про CSS Grid: grid-template-areas, repeat(), minmax(), auto-fill против auto-fit, единицы fr, именованные линии и выравнивание сетки по двум осям.

   2. Flexbox вглубь: grow, shrink, basis

      Тонкости Flexbox: flex-grow, flex-shrink и flex-basis, разбор шортката flex, align-self, flex-wrap, gap и главная ловушка min-width: auto.

   3. Готовые макеты: holy grail, sticky footer, карточки

      Проверенные макетные паттерны на Grid и Flexbox: holy grail, прилипающий футер, адаптивная сетка карточек одной строкой и центрирование по двум осям.

   4. Интринсик-вёрстка, aspect-ratio, subgrid

      Современная раскладка: min-content/max-content/fit-content, пропорции через aspect-ratio, выравнивание карточек subgrid и введение в container queries vs media queries.

8. 8 Современный CSS: переменные и функции

   1. CSS-переменные (custom properties)

      CSS-переменные: объявление --var и чтение var(), наследование и каскад, fallback-значения, светлая и тёмная темы, изменение из JavaScript и отличие от переменных Sass.

   2. Функции CSS: calc, clamp, min, max

      Функции вычислений CSS: calc для смешанных единиц, clamp для адаптивной типографики без медиа-запросов, min и max как границы значений, реальные примеры адаптивной вёрстки.

   3. Мощные селекторы: :has(), :is(), :where()

      Мощные селекторы CSS: :has() как «родительский» селектор, :is() и :where() для сокращения списков селекторов и их разная специфичность, практические примеры.

   4. Вложенность, @layer и контейнерные запросы

      Нативная вложенность CSS с амперсандом, каскадные слои @layer для управления приоритетом стилей и контейнерные запросы container queries для компонентной адаптивности.

9. 9 Анимации и трансформации

   1. Переходы вглубь: timing и кривые

      Как устроен transition в CSS: property, duration, timing-function и delay; кривые ease, linear, cubic-bezier и steps, что вообще можно анимировать.

   2. Ключевые кадры: @keyframes и animation

      Как создавать многошаговые и бесконечные CSS-анимации через @keyframes и свойство animation: name, duration, iteration-count, direction, fill-mode, play-state.

   3. Трансформации: translate, scale, rotate, 3D

      CSS transform: 2D-функции translate, scale, rotate, skew, transform-origin, комбинирование и 3D-вращения rotateX/rotateY с perspective.

   4. Производительность анимаций

      Какие CSS-свойства анимировать дёшево (transform, opacity), а какие дорого (layout-свойства), как работают will-change, слои композитора и prefers-reduced-motion.

10. 10 Архитектура и поддержка CSS

    1. Специфичность и каскад вглубь

       Как браузер выбирает выигрышное правило: формула специфичности (a,b,c), источники стилей и их приоритет, !important, наследование и роль порядка объявления.

    2. Методология BEM: именование классов

       BEM: Block__Element--Modifier на практике. Зачем плоская низкая специфичность, как строить переиспользуемые компоненты и какие ошибки именования встречаются чаще всего.

    3. Дизайн-токены и темизация

       Дизайн-токены на CSS-переменных: цвета, отступы, типографика как система. Светлая и тёмная тема через токены, согласованность дизайна и связь с дизайн-системами.

    4. Препроцессоры и современный тулинг

       Обзор Sass/SCSS (переменные, вложенность, миксины), PostCSS и автопрефиксы, utility-first и Tailwind как подход, CSS Modules — и когда что выбирать.