CSS
В CSS тег используется как селектор по типу, например p { color: black; }.
Подключение и организация CSS-кода
Тег используется для подключения внешних ресурсов к HTML-документу. Наиболее распространённое применение — подключение CSS-файлов.
Переменные в CSS
CSS custom properties - именованные значения для повторного использования, темизации и централизованного управления стилями.
Блочная модель и механизм каскадирования
Контентная боксовая модель в CSS - как width и height задают размер контентной области и взаимодействуют с отступами и границами.
Типовые элементы интерфейса
Типовые элементы интерфейса: кнопки, формы, nav, modal, skeleton, tooltip, radio, switch с :has() и поиск без JS. Практика и каталог Uiverse (Galaxy).
Селекторы :is, :where и :has
Группировка селекторов без дублирования, нулевая специфичность :where и условный родитель :has.
Каскадные слои @layer
Порядок применения стилей через @layer — сброс, база, компоненты, утилиты без гонки специфичности.
Логические свойства CSS и subgrid
margin-inline, padding-block, writing-mode и вложенная сетка subgrid для выравнивания с родителем.
Доступность и пользовательские настройки в CSS
prefers-reduced-motion, prefers-contrast, forced-colors и связка с семантикой HTML.
Практические рекомендации по CSS
Сводные таблицы — что использовать, чего избегать и на что смотреть осторожно в повседневной вёрстке, включая мобильные экраны.
Функции в CSS
Функции значений (calc, var, color-mix), функциональные псевдоклассы (:is, :where, :has), встроенные и пользовательские вычисления, примеры и практика.
Flexbox и CSS Grid
Flexbox - одноосевая раскладка с распределением пространства и выравниванием дочерних элементов в контейнере.
Основные стили в CSS
Как работает CSS, как читать единицы измерения и планировать размещение.
Синтаксис и пунктуация в CSS
Апострофы — не являются частью синтаксиса CSS, но могут встречаться в строках (например, в content).
Псевдоклассы и псевдоэлементы
Синтаксис псевдоклассов и псевдоэлементов в CSS - одно и два двоеточия и типичные примеры селекторов.
Анимации, переходы и трансформации
transition и animation, transform, градиенты, opacity, position, perspective, justify-content, gap, баннеры и каталог типовых эффектов.
Адаптивный и отзывчивый дизайн
Что такое адаптивность, как подстроиться под разные экраны.
Справочник по CSS
— Синтаксис — ? — Используется с animation-timeline — view() — Пример — animation-range — entry 0 cover 50 — Позволяет задавать диапазон прогресса анимации в зависимости от видимости.
Инъекция стилей
Механизм внедрения CSS-правил в веб-контент.
Практика
Подключение внешнего CSS к HTML-проекту - файл style.css и связывание со страницей для оформления интерфейса.
CSS — итоги
Итоги раздела «CSS» — FAQ и краткие ответы по теме.
CSS — чек-лист
Чек-лист раздела «CSS» — вопросы для самопроверки.
CSS — о разделе
CSS описывает внешний вид разметки HTML: цвета, шрифты, отступы, сетку. Без HTML не к чему применять правила.