*
Универсальный селектор
Код
* { margin: 0; }CSS шпаргалка
Справочник CSS свойств и селекторов
Селекторы
Справочный блок 1
#id
Селектор по ID
Код
#header { }.class
Селектор по классу
Код
.container { }element
Селектор по тегу
Код
div { }element, element
Группировка
Код
h1, h2 { }element element
Потомок
Код
div p { }element > element
Дочерний элемент
Код
div > p { }element + element
Соседний элемент
Код
h1 + p { }:hover
Псевдокласс
Код
a:hover { }::before
Псевдоэлемент
Код
p::before { }Блоковая модель
Справочный блок 2
width, height
Ширина и высота
Код
width: 100px;
margin
Внешние отступы
Код
margin: 10px;
padding
Внутренние отступы
Код
padding: 10px;
border
Рамка
Код
border: 1px solid black;
box-sizing
Модель расчета размеров
Код
box-sizing: border-box;
Flexbox
Справочный блок 3
display: flex
Flex контейнер
flex-direction
Направление
Код
flex-direction: row | column;
justify-content
Выравнивание по главной оси
Код
justify-content: center;
align-items
Выравнивание по поперечной оси
Код
align-items: center;
flex-wrap
Перенос строк
Код
flex-wrap: wrap;
gap
Расстояние между элементами
Код
gap: 20px;
Grid
Справочный блок 4
display: grid
Grid контейнер
grid-template-columns
Колонки
Код
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows
Строки
Код
grid-template-rows: auto;
grid-gap
Расстояние
Код
grid-gap: 20px;
grid-column
Позиция колонки
Код
grid-column: 1 / 3;
grid-row
Позиция строки
Код
grid-row: 1 / 2;
Позиционирование
Справочный блок 5
position: static
Обычный поток
position: relative
Относительное
position: absolute
Абсолютное
position: fixed
Фиксированное
position: sticky
Липкое
top, right, bottom, left
Смещение
Код
top: 10px;
Типография
Справочный блок 6
font-family
Шрифт
Код
font-family: Arial, sans-serif;
font-size
Размер
Код
font-size: 16px;
font-weight
Жирность
Код
font-weight: bold;
line-height
Высота строки
Код
line-height: 1.5;
text-align
Выравнивание
Код
text-align: center;
color
Цвет текста
Код
color: #333;