О разделе
CSS описывает внешний вид разметки HTML — цвета, шрифты, отступы, сетку. Без HTML не к чему применять правила. Проверка каскада и box model на живой странице — DevTools в браузере (вкладки Elements, Styles, Computed).
Статьи раздела объясняют каскад и вёрстку; при споре о селекторах, свойствах и поддержке браузерами — MDN:
MDN: CSS · MDN: Flexbox · MDN: Grid · подборка документации.
Одностраничный конспект на русском (селекторы, Flex, Grid, анимации, container queries, @layer) — GitHub Gist, dmitry-osin.
Компактные таблицы свойств и селекторов (структура как у OverAPI CSS) — справочник, § Компактные шпаргалки.
Развёрнутые материалы в этом разделе:
- практические рекомендации и частые паттерны
- справочник по свойствам
- подключение и методологии (BEM, CSS Modules)
- тренажёры и лаборатории на этой странице ниже
Сначала: Что такое код и как он работает — общая база — код, блок кода, как браузер обрабатывает текстовые инструкции; в этом разделе — таблицы стилей CSS.
Перед селекторами: Операторы — оператор, операнд и приоритет; в CSS ту же роль выполняют селекторы, комбинаторы и псевдоклассы.
Функции в CSS (
calc(),var(),:where(),:has()): обзор и практика, справочник; базовая модель именованного вычисления — функции в коде.
Play ITЗагрузка интерактивного демо…
Play ITЗагрузка интерактивного демо…
Play ITЗагрузка интерактивного демо…
Play ITЗагрузка интерактивного демо…
Отдельная версия в браузере: WebEditor — Онлайн-редактор HTML, CSS и JavaScript с живым предпросмотром — обновляется при вводе.
Практика. Сначала HTML-каркас — HTML-страницы целиком. Затем оформление — HTML + CSS — готовые макеты. Tailwind CSS (utility-классы, CDN для учёбы) — статья Tailwind и готовые блоки. Типовые контролы — § Типовые элементы. Анимации — § Анимации, Lab / 1116. В JSX — React — рецепты.
CSS
В CSS тег используется как селектор по типу, например p { color: black; }.
Подключение и организация CSS-кода
Подключение CSS к HTML, каскад, DevTools, методологии BEM, SMACSS, OOCSS, CSS Modules.
Переменные в CSS
CSS custom properties - именованные значения для повторного использования, темизации и централизованного управления стилями.
Блочная модель и механизм каскадирования
Контентная боксовая модель в CSS - как width и height задают размер контентной области и взаимодействуют с отступами и границами.
Типовые элементы интерфейса
Типовые элементы интерфейса: кнопки, формы, nav, modal, skeleton, tooltip, radio, switch с :has() и поиск без JS. Практика и каталог Uiverse (Galaxy).
Селекторы :is, :where и :has
Атрибутные селекторы, группировка :is и :where, родительский селектор :has.
Каскадные слои @layer
Порядок применения стилей через @layer — сброс, база, компоненты, утилиты без гонки специфичности.
Логические свойства CSS и subgrid
margin-inline, padding-block, writing-mode и вложенная сетка subgrid для выравнивания с родителем.
Доступность и пользовательские настройки в CSS
prefers-reduced-motion, prefers-contrast, forced-colors и связка с семантикой HTML.
Практические рекомендации по CSS
Сводные таблицы по вёрстке, частые паттерны Flex и Grid, рекомендации для мобильных экранов.
Функции в CSS
Функции значений (calc, var, color-mix), функциональные псевдоклассы (:is, :where, :has), встроенные и пользовательские вычисления, примеры и практика.
Tailwind CSS
CSS-фреймворк utility-first. Классы прямо в HTML, CDN для учёбы, сравнение с обычным CSS и Bootstrap.
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 — практика
Подключение внешнего CSS к HTML-проекту - файл style.css и связывание со страницей для оформления интерфейса.
CSS — итоги
Итоги раздела «CSS» — FAQ и краткие ответы по теме.
CSS — чек-лист
Чек-лист раздела «CSS» — вопросы для самопроверки.
CSS — о разделе
CSS описывает внешний вид разметки HTML: цвета, шрифты, отступы, сетку. Без HTML не к чему применять правила.
В подборках
Статья входит в тематические подборки и блок "С чего начать?" на главной. Соседние шаги того же маршрута:
Веб-разработка — JavaScript — о разделе, PHP — о разделе, HTML — о разделе, ASP.NET - веб-платформа Microsoft, Веб-браузеры, C# — о разделе.