Шпаргалка по стилям CSS

CSS (Cascading Style Sheets) используется для управления макетом и оформлением веб-страниц. Эта шпаргалка охватывает наиболее часто используемые свойства и селекторы.

Селекторы

Тип	Пример	Описание
All	`* { }`	Выбрать все элементы
Type	`h1 { }`	Выбрать конкретный HTML-тег
Class	`.header { }`	Выбрать элементы с class=“header”
ID	`#main { }`	Выбрать элемент с id=“main”
Descendant	`div p { }`	Выбрать все p внутри div
Pseudo	`a:hover { }`	Состояние при наведении курсора

Блочная модель

.box {
  width: 300px;
  height: 200px;
  padding: 10px;    /* Внутренний отступ */
  border: 1px solid #ccc; /* Рамка */
  margin: 20px;     /* Внешний отступ */
  box-sizing: border-box; /* Включает рамку и внутренний отступ */
}

Типографика

Property	Описание	Пример
`font-family`	Семейство шрифтов	`font-family: Arial, sans-serif;`
`font-size`	Размер шрифта	`font-size: 16px;`
`font-weight`	Начертание	`font-weight: bold;`
`text-align`	Выравнивание текста	`text-align: center;`
`line-height`	Высота строки	`line-height: 1.5;`
`color`	Цвет текста	`color: #333;`

Цвета и фоны

Property	Описание	Пример
`background-color`	Цвет фона	`background-color: #f0f0f0;`
`background-image`	Фоновое изображение	`background-image: url('bg.jpg');`
`background-size`	Размер фона	`background-size: cover;`
`opacity`	Прозрачность	`opacity: 0.8;`

Позиционирование

position: static; : Стандартный поток
position: relative; : Смещение относительно исходной позиции
position: absolute; : Позиционирование относительно ближайшего нестатичного предка
position: fixed; : Позиционирование относительно окна браузера
position: sticky; : Фиксация при прокрутке до определенной позиции
z-index: 10; : Порядок наслоения

Отображение и макет

display: block; : Блочный элемент
display: inline; : Строчный элемент
display: inline-block; : Строчно-блочный элемент
display: flex; : Включить flex-макет
display: grid; : Включить grid-макет
display: none; : Скрыть элемент, не занимая места

Краткая запись свойств

margin: 10px 5px 15px 20px; (Верх Право Низ Лево)
padding: 10px 5px; (Верх-Низ Право-Лево)
border: 1px dashed red; (Ширина Стиль Цвет)