CSS шпаргалка

Справочник CSS свойств и селекторов

Типографика

Свойство	Значения	Пример
font-size	px, em, rem, %	font-size: 16px;
font-weight	normal, bold, 100-900	font-weight: bold;
font-family	название шрифта	font-family: Arial;
text-align	left, center, right, justify	text-align: center;
line-height	число, px, em	line-height: 1.5;

Цвета и фон

Свойство	Значения	Пример
color	hex, rgb, название	color: #ff0000;
background-color	цвет	background-color: blue;
background-image	url(), gradient	background-image: url('path');
opacity	0-1	opacity: 0.5;

Отступы и размеры

Свойство	Значения	Пример
width, height	px, %, em, auto	width: 100%;
margin	px, em, auto	margin: 10px;
padding	px, em	padding: 20px;
box-sizing	content-box, border-box	box-sizing: border-box;

Границы и скругления

Свойство	Значения	Пример
border	width style color	border: 1px solid black;
border-radius	px, %	border-radius: 5px;
box-shadow	x y blur color	box-shadow: 0 2px 4px rgba(0,0,0,0.1);

Flexbox

Свойство	Значения	Пример
display	flex, inline-flex	display: flex;
flex-direction	row, column, row-reverse, column-reverse	flex-direction: row;
justify-content	start, center, end, space-between, space-around	justify-content: center;
align-items	start, center, end, stretch, baseline	align-items: center;
flex-wrap	nowrap, wrap, wrap-reverse	flex-wrap: wrap;
flex-grow	число	flex-grow: 1;
flex-shrink	число	flex-shrink: 0;
gap	px, em, rem	gap: 10px;

Grid

Свойство	Значения	Пример
display	grid, inline-grid	display: grid;
grid-template-columns	repeat(), fr, px, %	grid-template-columns: repeat(3, 1fr);
grid-template-rows	repeat(), fr, px, %	grid-template-rows: 100px auto;
grid-gap	px, em	grid-gap: 20px;
grid-column	span, start/end	grid-column: 1 / 3;
grid-row	span, start/end	grid-row: span 2;

Селекторы

Селектор	Описание	Пример
.class	Класс	.container
#id	ID	#header
element	Элемент	div
.class1.class2	Множественные классы	.btn.primary
parent > child	Прямой потомок	div > p
.class:hover	Псевдокласс	.btn:hover
.class::before	Псевдоэлемент	.class::before
[attribute]	Атрибут	[disabled]

Анимации и переходы

Свойство	Значения	Пример
transition	property duration timing	transition: all 0.3s ease;
animation	name duration timing	animation: slide 1s ease;
transform	translate, rotate, scale	transform: translateX(10px);
@keyframes	определение анимации	@keyframes slide { /* код */ }