Справочник CSS
Оформление, размеры и раскладка: понятные объяснения свойств CSS, примеры, частые ошибки и упражнения.
Свойство display: модель отображения
Чем отличаются block, inline, flex и grid и что происходит при display: none.
Свойство flex: размеры гибких элементов
Как распределять свободное место между элементами Flexbox с помощью flex-grow, shrink и basis.
CSS Grid: строки и колонки
Как собрать адаптивную сетку карточек с repeat, minmax и единицами fr.
Свойство color: цвет текста
Как задавать цвет текста, использовать наследование и currentColor.
Свойство background: фон элемента
Как задать цвет или градиент фона и не потерять параметры сокращённого свойства.
Свойство font-family: стек шрифтов
Как подобрать основной и резервные шрифты без обязательной загрузки внешних файлов.
Свойство font-size: размер текста
Как использовать rem и clamp для читаемого текста на разных экранах.
Свойство line-height: ритм текста
Как выбрать высоту строки для абзацев и почему удобно безразмерное значение.
Свойство margin: внешние отступы
Как отделять соседние блоки и почему вертикальные margin иногда схлопываются.
Свойство padding: внутренние отступы
Как добавить воздух внутри карточки или кнопки и учитывать его в общей ширине.
Свойство box-sizing: размер блока
Почему width не всегда равен видимой ширине и как помогает border-box.
Свойство width: ширина элемента
Как выбрать фиксированную, относительную или автоматическую ширину блока.
Свойство max-width: предел ширины
Как удерживать читаемую длину строки и не мешать блоку сжиматься на телефоне.
Свойство border: рамки
Как задать толщину, стиль и цвет рамки и учитывать её в размере блока.
Свойство border-radius: скругление
Как скруглять карточки, делать капсулы и учитывать размеры элемента.
Свойство box-shadow: тени
Как добавить мягкую тень карточке, не меняя размеры раскладки.
Свойство gap: промежутки
Как задавать расстояние между элементами Grid и Flexbox без лишних крайних отступов.
Свойство align-items: поперечная ось
Как выравнивать элементы по поперечной оси Flexbox и почему ось не всегда вертикальная.
Свойство justify-content: свободное место
Как распределять свободное пространство и отличать его от фиксированного gap.
Свойство position: позиционирование
Чем отличаются relative, absolute, fixed и sticky и как выбрать точку отсчёта.
Свойство z-index: порядок наложения
Почему большой z-index не всегда поднимает элемент над соседней областью.
Свойство overflow: переполнение
Как управлять содержимым, которое не помещается в отведённую область.
Правило @media: адаптивные стили
Как менять раскладку под ширину экрана и учитывать предпочтения пользователя.
Свойство transition: плавные изменения
Как плавно менять состояние элемента и уважать настройку уменьшенного движения.
Селекторы CSS: выбор элементов
Как выбирать теги, классы и дочерние элементы, не привязывая стили ко всей структуре страницы.
Специфичность CSS: какое правило победит
Как разбирать конфликт селекторов и почему порядок строк решает не всегда.
Переменные CSS: общие значения оформления
Как задавать дизайн через custom properties и локально менять оформление компонента.
Псевдоэлементы ::before и ::after
Как добавлять небольшие декоративные элементы без лишних тегов в документе.
Псевдокласс :focus-visible: заметный фокус
Как выделять активный элемент для пользователя клавиатуры и не убирать стандартную обводку без замены.
Свойство object-fit: изображение в рамке
Как вписать картинку в заданный прямоугольник без искажения пропорций.