Справочники
Справочник CSS-свойств
Частые CSS-свойства по группам: допустимые значения, начальное значение, наследуется ли свойство, и рабочий пример. Поиск понимает и имя свойства, и задачу — «обрезать текст», «по центру», «липкая шапка».
Наследуются 27 из 101: visibility, color, font-family, font-size, font-weight, font-style, line-height, letter-spacing, text-align, text-transform, text-indent, white-space, overflow-wrap, word-break, hyphens, text-wrap, text-shadow, font-variant-numeric, list-style, cursor, pointer-events, accent-color, caret-color, color-scheme, writing-mode, direction, border-collapse. Любое свойство можно заставить наследоваться значением inherit, а сбросить к начальному — initial.
Показано 101 из 101 свойств.
Блочная модель и размеры
display: flex;
display — Тип блока и способ раскладки детей.
Значения: block | inline | inline-block | flex | inline-flex | grid | inline-grid | contents | none | … · Начальное: inline · Не наследуется
*, *::before, *::after { box-sizing: border-box; }
box-sizing — Входят ли padding и border в width. border-box избавляет от подсчётов.
Значения: content-box | border-box · Начальное: content-box · Не наследуется
width: min(100%, 60rem);
width / height — Размер области содержимого (или всего блока при border-box).
Значения: auto | <длина> | <процент> | min-content | max-content | fit-content · Начальное: auto · Не наследуется
max-width: 65ch;
min-width / max-width — Нижняя и верхняя граница размера.
Значения: auto | none | <длина> | <процент> · Начальное: auto (min), none (max) · Не наследуется
aspect-ratio: 16 / 9;
aspect-ratio — Пропорции блока, когда задан только один размер.
Значения: auto | <отношение> · Начальное: auto · Не наследуется
margin-inline: auto;
margin — Внешний отступ. Вертикальные margin соседних блоков схлопываются.
Значения: <длина> | <процент> | auto · Начальное: 0 · Не наследуется
padding: 1rem 1.5rem;
padding — Внутренний отступ. Процент считается от ширины родителя — даже для вертикального.
Значения: <длина> | <процент> · Начальное: 0 · Не наследуется
border: 1px solid #d0d7de;
border — Рамка. Без стиля (solid, dashed…) её не видно.
Значения: <ширина> || <стиль> || <цвет> · Начальное: medium none currentcolor · Не наследуется
border-radius: 12px;
border-radius — Скругление углов; 50% у квадрата даёт круг.
Значения: <длина> | <процент> · Начальное: 0 · Не наследуется
overflow: auto;
overflow — Что делать с содержимым, которое не влезло. hidden создаёт контекст прокрутки, clip — нет.
Значения: visible | hidden | clip | scroll | auto · Начальное: visible · Не наследуется
box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
box-shadow — Тени блока, через запятую.
Значения: none | [inset] <x> <y> <размытие> <растяжение> <цвет>, … · Начальное: none · Не наследуется
outline: 2px solid; outline-offset: 2px;
outline — Обводка поверх блока, не влияет на размеры. Убирать у :focus без замены нельзя.
Значения: <ширина> || <стиль> || <цвет> · Начальное: medium none (цвет auto) · Не наследуется
opacity: 0.6;
opacity — Прозрачность всего блока вместе с детьми; меньше 1 — новый контекст наложения.
Значения: <число> | <процент> · Начальное: 1 · Не наследуется
visibility: hidden;
visibility — Скрыть, сохранив место. Наследуется: ребёнок с visible снова виден.
Значения: visible | hidden | collapse · Начальное: visible · Наследуется
Позиционирование
position: sticky; top: 0;
position — Схема позиционирования. absolute отсчитывается от ближайшего предка с position не static.
Значения: static | relative | absolute | fixed | sticky · Начальное: static · Не наследуется
inset: 0;
inset — Сокращение top, right, bottom, left.
Значения: <длина> | <процент> | auto (1–4 значения) · Начальное: auto · Не наследуется
z-index: 10;
z-index — Порядок наложения — работает только внутри своего контекста наложения.
Значения: auto | <целое> · Начальное: auto · Не наследуется
float: inline-start;
float — Обтекание текстом. Для раскладки колонок сегодня есть flex и grid.
Значения: none | left | right | inline-start | inline-end · Начальное: none · Не наследуется
clear: both;
clear — Не обтекать плавающие блоки с указанной стороны.
Значения: none | left | right | both | inline-start | inline-end · Начальное: none · Не наследуется
Flexbox
Свойства flex-контейнера: flex-direction, flex-wrap, justify-content, align-items, gap. Остальные задаются детям.
flex-direction: column;
flex-direction — Главная ось раскладки.
Значения: row | row-reverse | column | column-reverse · Начальное: row · Не наследуется
flex-wrap: wrap;
flex-wrap — Переносить ли элементы на новую строку.
Значения: nowrap | wrap | wrap-reverse · Начальное: nowrap · Не наследуется
justify-content: space-between;
justify-content — Распределение по главной оси.
Значения: normal | flex-start | center | flex-end | space-between | space-around | space-evenly · Начальное: normal · Не наследуется
align-items: center;
align-items — Выравнивание по поперечной оси; normal во flex ведёт себя как stretch.
Значения: normal | stretch | flex-start | center | flex-end | baseline · Начальное: normal · Не наследуется
align-content: start;
align-content — Распределение строк при переносе (flex-wrap: wrap).
Значения: normal | flex-start | center | space-between | … · Начальное: normal · Не наследуется
gap: 1rem 2rem;
gap — Промежутки между элементами во flex, grid и колонках.
Значения: <длина> | <процент> (1–2 значения) · Начальное: normal · Не наследуется
flex: 1;
flex — Сокращение flex-grow, flex-shrink, flex-basis. flex: 1 — «1 1 0%», поровну делить место.
Значения: none | [<grow> <shrink>? || <basis>] · Начальное: 0 1 auto · Не наследуется
flex-grow: 2;
flex-grow — Доля свободного места, которую забирает элемент.
Значения: <число> · Начальное: 0 · Не наследуется
flex-shrink: 0;
flex-shrink — Насколько элемент сжимается при нехватке места; 0 — не сжиматься.
Значения: <число> · Начальное: 1 · Не наследуется
flex-basis: 12rem;
flex-basis — Исходный размер до распределения места.
Значения: auto | content | <длина> | <процент> · Начальное: auto · Не наследуется
align-self: flex-end;
align-self — Выравнивание одного элемента поперёк оси.
Значения: auto | stretch | flex-start | center | flex-end | baseline · Начальное: auto · Не наследуется
order: -1;
order — Визуальный порядок. Порядок табуляции и скринридера не меняется.
Значения: <целое> · Начальное: 0 · Не наследуется
Grid
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
grid-template-columns — Колонки сетки.
Значения: none | <список дорожек> | repeat() | subgrid · Начальное: none · Не наследуется
grid-template-rows: auto 1fr auto;
grid-template-rows — Строки сетки.
Значения: none | <список дорожек> | subgrid · Начальное: none · Не наследуется
grid-template-areas: "header header" "nav main";
grid-template-areas — Раскладка именованными областями.
Значения: none | <строки с именами> · Начальное: none · Не наследуется
grid-area: main;
grid-area — Разместить элемент в области или между линиями.
Значения: <имя> | <строка> / <колонка> / … · Начальное: auto · Не наследуется
grid-column: 1 / -1;
grid-column / grid-row — Линии начала и конца элемента.
Значения: <начало> / <конец> | span <n> · Начальное: auto · Не наследуется
grid-auto-flow: dense;
grid-auto-flow — Как раскладываются элементы без явного места; dense заполняет дыры.
Значения: row | column | dense · Начальное: row · Не наследуется
grid-auto-rows: minmax(8rem, auto);
grid-auto-rows / grid-auto-columns — Размер неявно созданных дорожек.
Значения: <размер дорожки> · Начальное: auto · Не наследуется
justify-items: center;
justify-items — Выравнивание элементов внутри ячеек по строчной оси.
Значения: legacy | normal | stretch | start | center | end · Начальное: legacy · Не наследуется
place-items: center;
place-items — Сокращение align-items и justify-items.
Значения: <align-items> <justify-items>? · Начальное: normal legacy · Не наследуется
Текст и шрифт
Почти все текстовые свойства наследуются: их достаточно задать на body. Исключения — text-decoration, text-overflow и vertical-align.
color: #1f2328;
color — Цвет текста и значение currentcolor для рамок и теней.
Значения: <цвет> · Начальное: canvastext · Наследуется
font-family: Inter, system-ui, sans-serif;
font-family — Шрифты по приоритету; в конце — общее семейство: sans-serif, serif, monospace, system-ui.
Значения: <семейство>, … <общее семейство> · Начальное: зависит от браузера · Наследуется
font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
font-size — Размер шрифта; em и % считаются от родителя, rem — от корня.
Значения: <длина> | <процент> | small | medium | large | … · Начальное: medium · Наследуется
font-weight: 600;
font-weight — Насыщенность; normal = 400, bold = 700.
Значения: normal | bold | 100…900 · Начальное: normal · Наследуется
font-style: italic;
font-style — Курсив.
Значения: normal | italic | oblique · Начальное: normal · Наследуется
line-height: 1.5;
line-height — Высота строки. Число без единиц наследуется как множитель — лучше писать так.
Значения: normal | <число> | <длина> | <процент> · Начальное: normal · Наследуется
letter-spacing: 0.02em;
letter-spacing — Межбуквенный интервал.
Значения: normal | <длина> · Начальное: normal · Наследуется
text-align: center;
text-align — Выравнивание строк внутри блока.
Значения: start | end | left | right | center | justify · Начальное: start · Наследуется
text-transform: uppercase;
text-transform — Регистр при отображении; в буфер копируется исходный текст.
Значения: none | uppercase | lowercase | capitalize · Начальное: none · Наследуется
text-decoration: underline dotted;
text-decoration — Подчёркивание и зачёркивание. Не наследуется, но рисуется и под текстом детей.
Значения: <линия> || <стиль> || <цвет> || <толщина> · Начальное: none · Не наследуется
text-indent: 1.5em;
text-indent — Красная строка.
Значения: <длина> | <процент> · Начальное: 0 · Наследуется
text-overflow: ellipsis;
text-overflow — Многоточие в конце обрезанной строки; нужны overflow: hidden и white-space: nowrap.
Значения: clip | ellipsis · Начальное: clip · Не наследуется
white-space: nowrap;
white-space — Схлопывать ли пробелы и переносить ли строки.
Значения: normal | nowrap | pre | pre-wrap | pre-line | break-spaces · Начальное: normal · Наследуется
overflow-wrap: anywhere;
overflow-wrap — Разрывать ли длинное слово или ссылку, чтобы не вылезло за блок.
Значения: normal | break-word | anywhere · Начальное: normal · Наследуется
word-break: break-all;
word-break — Где можно рвать слова; break-all рвёт где угодно.
Значения: normal | break-all | keep-all · Начальное: normal · Наследуется
hyphens: auto;
hyphens — Автоматические переносы; работают при правильном lang.
Значения: none | manual | auto · Начальное: manual · Наследуется
text-wrap: balance;
text-wrap — balance выравнивает длину строк заголовка, pretty избегает одиноких слов в конце абзаца.
Значения: wrap | nowrap | balance | pretty · Начальное: wrap · Наследуется
vertical-align: middle;
vertical-align — Вертикальное выравнивание строчных элементов и ячеек таблицы — не блоков.
Значения: baseline | middle | top | bottom | <длина> | … · Начальное: baseline · Не наследуется
text-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
text-shadow — Тень текста.
Значения: none | <x> <y> <размытие> <цвет>, … · Начальное: none · Наследуется
font-variant-numeric: tabular-nums;
font-variant-numeric — Цифры одинаковой ширины для таблиц и таймеров.
Значения: normal | tabular-nums | oldstyle-nums | slashed-zero | … · Начальное: normal · Наследуется
list-style: none;
list-style — Маркеры списка.
Значения: <тип> || <позиция> || <картинка> · Начальное: disc outside none · Наследуется
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
-webkit-line-clamp — Обрезать текст до N строк с многоточием (с display: -webkit-box и -webkit-box-orient: vertical).
Значения: none | <целое> · Начальное: none · Не наследуется
Фон
background-color: #f6f8fa;
background-color — Цвет фона.
Значения: <цвет> · Начальное: transparent · Не наследуется
background-image: linear-gradient(135deg, #6366f1, #ec4899);
background-image — Картинки и градиенты фона, первый — сверху.
Значения: none | url() | <градиент>, … · Начальное: none · Не наследуется
background-size: cover;
background-size — Размер фоновой картинки.
Значения: auto | cover | contain | <длина> | <процент> · Начальное: auto auto · Не наследуется
background-position: center;
background-position — Положение картинки.
Значения: <позиция> · Начальное: 0% 0% · Не наследуется
background-repeat: no-repeat;
background-repeat — Повторение картинки.
Значения: repeat | no-repeat | repeat-x | repeat-y | space | round · Начальное: repeat · Не наследуется
background-clip: text; color: transparent;
background-clip — Докуда рисуется фон; text — градиентный текст.
Значения: border-box | padding-box | content-box | text · Начальное: border-box · Не наследуется
Трансформации, анимации, эффекты
transform: translateY(-2px) scale(1.02);
transform — Сдвиг, поворот, масштаб без влияния на раскладку. Создаёт контекст наложения.
Значения: none | <функции> · Начальное: none · Не наследуется
transform-origin: top left;
transform-origin — Точка, вокруг которой идут поворот и масштаб.
Значения: <позиция> · Начальное: 50% 50% 0 · Не наследуется
transition: transform 200ms ease-out;
transition — Плавная смена значения. Анимировать дёшево только transform и opacity.
Значения: <свойство> <длительность> <функция> <задержка>, … · Начальное: all 0s ease 0s · Не наследуется
animation: spin 1s linear infinite;
animation — Анимация по @keyframes.
Значения: <имя> <длительность> <функция> <задержка> <повторы> … · Начальное: none 0s ease 0s 1 normal none running · Не наследуется
filter: grayscale(1);
filter — Графические фильтры самого элемента.
Значения: none | blur() | brightness() | grayscale() | drop-shadow() | … · Начальное: none · Не наследуется
backdrop-filter: blur(12px);
backdrop-filter — Фильтр того, что под элементом, — «матовое стекло». В Safari до 18 только с -webkit-.
Значения: none | <фильтры> · Начальное: none · Не наследуется
mix-blend-mode: multiply;
mix-blend-mode — Как элемент смешивается с тем, что под ним.
Значения: normal | multiply | screen | overlay | … · Начальное: normal · Не наследуется
clip-path: circle(50%);
clip-path — Обрезать элемент по фигуре.
Значения: none | inset() | circle() | polygon() | path() · Начальное: none · Не наследуется
object-fit: cover;
object-fit — Как картинка или видео вписываются в свои width и height.
Значения: fill | contain | cover | none | scale-down · Начальное: fill · Не наследуется
object-position: top;
object-position — Какую часть картинки показывать при object-fit.
Значения: <позиция> · Начальное: 50% 50% · Не наследуется
will-change: transform;
will-change — Подсказка браузеру заранее подготовить слой. Не ставить «на всякий случай».
Значения: auto | <свойство>, … · Начальное: auto · Не наследуется
Взаимодействие и прокрутка
cursor: pointer;
cursor — Вид курсора над элементом.
Значения: auto | pointer | text | not-allowed | grab | … · Начальное: auto · Наследуется
pointer-events: none;
pointer-events — none пропускает клики сквозь элемент к тому, что под ним.
Значения: auto | none · Начальное: auto · Наследуется
user-select: all;
user-select — Можно ли выделить текст мышью.
Значения: auto | none | text | all · Начальное: auto · Не наследуется
touch-action: manipulation;
touch-action — Какие жесты обрабатывает браузер; manipulation убирает задержку двойного тапа.
Значения: auto | none | pan-x | pan-y | manipulation · Начальное: auto · Не наследуется
html { scroll-behavior: smooth; }
scroll-behavior — Плавная прокрутка к якорям.
Значения: auto | smooth · Начальное: auto · Не наследуется
scroll-margin-top: 5rem;
scroll-margin-top — Отступ при прокрутке к якорю — чтобы заголовок не прятался под липкой шапкой.
Значения: <длина> · Начальное: 0 · Не наследуется
scroll-snap-type: x mandatory;
scroll-snap-type — Прокрутка с прилипанием к элементам — карусели без JS.
Значения: none | [x | y | both] [mandatory | proximity] · Начальное: none · Не наследуется
overscroll-behavior: contain;
overscroll-behavior — Не передавать прокрутку родителю: модалки и боковые панели.
Значения: auto | contain | none · Начальное: auto · Не наследуется
accent-color: #6366f1;
accent-color — Цвет чекбоксов, радиокнопок, range и progress.
Значения: auto | <цвет> · Начальное: auto · Наследуется
caret-color: #ec4899;
caret-color — Цвет текстового курсора в полях.
Значения: auto | <цвет> · Начальное: auto · Наследуется
appearance: none;
appearance — Снять системный вид с элемента формы (браузер сам ставит полям auto).
Значения: none | auto · Начальное: none · Не наследуется
resize: vertical;
resize — Можно ли тянуть уголок, чтобы изменить размер.
Значения: none | both | horizontal | vertical · Начальное: none · Не наследуется
Прочее и новые возможности
content: "→ ";
content — Содержимое ::before и ::after.
Значения: normal | none | <строка> | attr() | counter() · Начальное: normal · Не наследуется
container-type: inline-size;
container-type — Сделать блок контейнером для @container-запросов.
Значения: normal | size | inline-size · Начальное: normal · Не наследуется
contain: content;
contain — Изолировать блок: изменения внутри не пересчитывают страницу.
Значения: none | strict | content | size | layout | paint · Начальное: none · Не наследуется
content-visibility: auto; contain-intrinsic-size: auto 500px;
content-visibility — auto не отрисовывает блоки за пределами экрана — ускоряет длинные страницы.
Значения: visible | auto | hidden · Начальное: visible · Не наследуется
:root { color-scheme: light dark; }
color-scheme — Какие темы поддерживает страница: системные поля и полосы прокрутки подстроятся.
Значения: normal | light | dark | light dark · Начальное: normal · Наследуется
writing-mode: vertical-rl;
writing-mode — Направление строк: вертикальный текст.
Значения: horizontal-tb | vertical-rl | vertical-lr · Начальное: horizontal-tb · Наследуется
direction: rtl;
direction — Направление письма; для языков справа налево лучше атрибут dir в HTML.
Значения: ltr | rtl · Начальное: ltr · Наследуется
isolation: isolate;
isolation — Создать контекст наложения без побочных эффектов — починить z-index.
Значения: auto | isolate · Начальное: auto · Не наследуется
border-collapse: collapse;
border-collapse — Сливать ли рамки ячеек таблицы.
Значения: separate | collapse · Начальное: separate · Наследуется
table-layout: fixed;
table-layout — fixed считает ширину колонок по первой строке — быстро и предсказуемо.
Значения: auto | fixed · Начальное: auto · Не наследуется