Шпаргалка по CSS
Удобный для поиска и печати справочник по CSS — селекторы, блочная модель, flexbox, grid, типографика, переходы и современные возможности. Бесплатно.
Селекторы
13.class
Выбрать все элементы с классом
#id
Выбрать элемент по id
a, b
Группа: выбрать a и b
a b
Потомок: b внутри a
a > b
Прямой потомок b у a
a + b
Соседний элемент сразу после a
a ~ b
Общий соседний b после a
[type="text"]
Селектор атрибута
:hover :focus
Псевдоклассы для состояния
:nth-child(2n)
Каждый чётный потомок
::before ::after
Псевдоэлементы (генерируемый контент)
:not(.x)
Отрицание: всё, кроме .x
:is(h1, h2, h3)
Совпадает с любым селектором из списка
Блочная модель
7box-sizing: border-box;
Включить padding и border в ширину
margin: 0 auto;
Центрировать блок по горизонтали
padding: 1rem 2rem;
По вертикали 1rem, по горизонтали 2rem
border: 1px solid #ccc;
Ширина, стиль, цвет
border-radius: 8px;
Скруглённые углы
outline: 2px dashed red;
Обводка (не влияет на раскладку)
overflow: hidden;
Обрезать переполняющий контент
Flexbox
8display: flex;
Создать flex-контейнер
flex-direction: row | column;
Направление главной оси
justify-content: space-between;
Выровнять вдоль главной оси
align-items: center;
Выровнять вдоль поперечной оси
flex-wrap: wrap;
Разрешить перенос элементов
gap: 1rem;
Промежуток между элементами
flex: 1;
Расти, заполняя пространство (1 1 0)
align-self: flex-end;
Переопределить поперечную ось для одного элемента
Grid
8display: grid;
Создать grid-контейнер
grid-template-columns: 1fr 1fr 1fr;
Три равных столбца
repeat(3, 1fr)
Сокращение для повторяющихся дорожек
minmax(200px, 1fr)
Дорожка между min и max
grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
Адаптивные авто-столбцы
gap: 1rem;
Промежуток строк и столбцов
grid-column: 1 / 3;
Растянуть с линии 1 до 3
place-items: center;
Центрировать элементы по обеим осям
Типографика
8font-family: system-ui, sans-serif;
Стек шрифтов
font-size: 1.125rem;
Относительный размер шрифта
font-weight: 600;
Жирное начертание
line-height: 1.6;
Межстрочный интервал
letter-spacing: .02em;
Межбуквенный интервал
text-align: center;
Горизонтальное выравнивание текста
text-transform: uppercase;
Сменить регистр букв
text-overflow: ellipsis;
Усечение с … (нужны overflow+nowrap)
Цвета и фон
7color: #1f2937;
Цвет текста
background: rgb(0 0 0 / 50%);
Современный rgb с альфой
background: linear-gradient(90deg,#f06,#48f);
Линейный градиент
opacity: .5;
Прозрачность элемента
box-shadow: 0 4px 12px rgb(0 0 0 / .15);
Тень
background-size: cover;
Масштабировать изображение для покрытия
color-mix(in srgb, red 40%, blue);
Смешать два цвета
Позиционирование
6position: relative;
Смещение от обычной позиции
position: absolute;
Относительно ближайшего позиционированного предка
position: fixed;
Относительно области просмотра
position: sticky; top: 0;
Прилипает при прокрутке
inset: 0;
top/right/bottom/left = 0
z-index: 10;
Порядок наложения
Переходы и анимация
5transition: all .2s ease;
Анимировать изменения свойств
transform: translateY(-4px) scale(1.05);
Сдвиг, масштаб, поворот
@keyframes spin { to { transform: rotate(360deg); } }
Определить анимацию
animation: spin 1s linear infinite;
Запустить keyframe-анимацию
will-change: transform;
Подсказать браузеру оптимизировать
Адаптивность и современное
7@media (max-width: 768px) { ... }
Контрольная точка медиазапроса
clamp(1rem, 2vw, 2rem)
Плавное значение с min/max
aspect-ratio: 16 / 9;
Сохранять соотношение сторон
var(--brand)
Использовать пользовательское свойство
:root { --brand: #4f46e5; }
Определить пользовательское свойство
container-type: inline-size;
Включить контейнерные запросы
@container (min-width: 400px) {…}
Контейнерный запрос
Нет записей, соответствующих «:q».
Нужна помощь?
Возникла проблема с этим инструментом? Сообщите нам.