Основные стили в CSS

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ

Разработчику Аналитику Тестировщику
Архитектору Инженеру

Основные стили в CSS

Единицы измерения

Тип	Примеры	Описание
Абсолютные	`px`, `cm`, `in`, `pt`	Фиксированные значения. `px` — наиболее распространён.
Относительные	`%`, `em`, `rem`, `vw`, `vh`	Зависят от контекста.
`em`	`1.2em`	Относительно `font-size` родителя или самого элемента — подробнее.
`rem`	`1.5rem`	Относительно `font-size` корня (`<html>`) — подробнее.
`%`	`50%`	Относительно размера родителя.
`vw` / `vh`	`100vw`, `50vh`	Относительно ширины/высоты окна браузера.

`em` и `rem`

Единицы em и rem привязаны к размеру шрифта. em (от element) берёт базу от родительского элемента, rem (root em) — от font-size корня (<html>). Обе единицы работают в любых свойствах длины — font-size, padding, margin, width, gap и других.

От чего считается размер

Единица	База для `font-size`	База для `padding`, `margin`, `width` и т.п.
`em`	`font-size` родителя	`font-size` самого элемента
`rem`	`font-size` `<html>`	`font-size` `<html>`

Из-за этого вложенные блоки с font-size в em могут накапливать масштаб по цепочке родителей. rem даёт один общий масштаб на всю страницу — удобно для отступов, сетки и типографики.

Пример — итоговый размер текста в пикселях

Один и тот же HTML, разные единицы в CSS:

<html>
  <div>
    <h1>Заголовок</h1>
    <h3>Подзаголовок</h3>
  </div>
</html>

html { font-size: 24px; }
div  { font-size: 16px; }
h1   { font-size: 2.5em; }   /* или 2.5rem — см. ниже */
h3   { font-size: 1em; }     /* или 1rem */

С em (база — шрифт родителя div, то есть 16px):

Элемент	Расчёт	Итог
`h1`	2.5 × 16px	40px
`h3`	1 × 16px	16px

С rem (база — шрифт корня html, то есть 24px; размер div не участвует):

Элемент	Расчёт	Итог
`h1`	2.5 × 24px	60px
`h3`	1 × 24px	24px

Тот же коэффициент 2.5 даёт разный результат в пикселях — зависит от того, от какого font-size считает браузер.

Не только текст

1.5rem в padding — это полтора корневых размера шрифта, а не "полтора пикселя". При увеличении шрифта в настройках браузера или при смене font-size на <html> пропорционально меняются и отступы, заданные в rem.

.card {
  font-size: 1rem;
  padding: 1.25rem 1.5rem;  /* отступы от корневого масштаба */
  border-radius: 0.5rem;
}

.card__title {
  font-size: 1.5em;       /* 1.5 × font-size .card */
  margin-bottom: 0.5em;   /* 0.5 × font-size .card__title */
}

Практика

rem — общая шкала страницы — контейнеры, отступы между секциями, базовый текст.
em — компонент, который должен масштабироваться вместе с локальным контекстом (кнопка внутри карточки с крупным шрифтом).
Часто на <html> задают удобный корень (например, font-size: 100% или 62.5% для простого счёта в голове), а дальше строят макет в rem.

В адаптивной вёрстке rem согласован с масштабом шрифта — см. Адаптивный и отзывчивый дизайн.

Блочная модель (Box Model)

Давайте напомним себе о том, как выглядит блок.

Каждый элемент на странице — это прямоугольная "коробка". Эта коробка состоит из нескольких слоёв:

     МАРЖИНЫ (margin)
┌─────────────────────────────┐
│       ПАДДИНГИ (padding)    │
│  ┌─────────────────────┐    │
│  │      КОНТЕНТ         │    │
│  │                     │    │
│  └─────────────────────┘    │
│        border               │
└─────────────────────────────┘

Стили блока

content

content — содержимое. То, что внутри — текст, изображение, вложенные элементы.

Содержимое — это то, что находится внутри элемента — текст, изображения, вложенные блоки, видео, SVG и другие HTML-элементы. Размер содержимого определяется свойствами width и height, если они заданы явно. По умолчанию размер содержимого зависит от его объёма.

Пример:

<div>Это текстовое содержимое</div>
<img src="photo.jpg" alt="Фотография">

Что такое отступ

Отступ — это пространство вокруг или внутри элемента. В CSS различают два типа отступов:

margin — внешний отступ;
padding — внутренний отступ.

margin

margin – внешние отступы. Пространство вне границы, отделяющее элемент от других. Не имеет фона, всегда прозрачное:

  div {
    margin: 10px;       /* Все стороны */
    margin-top: 20px;   /* Индивидуально */
  }

margin управляет расстоянием до соседних элементов. Может "схлопываться" (collapse) между вертикальными блоками. Например, если один блок имеет margin-bottom — 20px, а следующий — margin-top — 30px, расстояние между ними будет не 50px, а 30px.

margin надо использовать:

Чтобы отделить один блок от другого.
Для центрирования блока по горизонтали: margin: 0 auto.
Для отступа от края родителя.

padding

padding – внутренние отступы. Пространство между содержимым и границей (border). Увеличивает общую занимаемую площадь:

  div {
    padding: 15px;
  }

padding находится внутри границы и имеет фон того же цвета, что и элемент.

padding надо использовать:

Чтобы отодвинуть текст от края фона.
Для создания "воздуха" внутри кнопки, карточки и т.п.
При необходимости, чтобы кликабельная область была больше содержимого.

border

border — видимая линия вокруг содержимого и паддингов. Состоит из трёх частей:

ширина — 1px, 2px, medium;
стиль — solid, dashed, dotted, double, none;
цвет — black, #FF0000, rgba(255,0,0,0.5).

.border-example {
  border: 2px solid #333;
}

border входит в общую ширину и высоту элемента (если не используется box-sizing: border-box).

outline

outline — невидимая рамка, рисуемая вне margin. Не влияет на размеры элемента и не занимает места в потоке.

  .box {
    border: 2px solid black;
    outline: 1px dashed red;
  }

Похож на border, но не входит в размеры элемента, рисуется вокруг margin, не может быть скруглён через border-radius, обычно используется для фокуса (accessibility). Используется браузером по умолчанию при tab-навигации.

Размеры и позиционирование

width и height

Ширина (width) и высота (height) определяют размер содержимого. Реальный размер зависит от box-sizing:

content-box (по умолчанию): width = content;
border-box: width = content + padding + border.

* {
  box-sizing: border-box;
}

Рекомендуется глобально применять border-box — это упрощает расчёт размеров.

width и height задают ширину и высоту содержимого (если не указано иное).

width – ширина;

height – высота:

  .container {
    width: 100%;
    min-height: 200px;
  }

Поддерживают:

абсолютные значения — px, cm, in,
относительные — %, em, rem, vw, vh.

Если нужен блок, который сжимается по содержимому, но не вылезает за контейнер/экран, используйте fit-content:

.alert-card {
  width: fit-content;   /* ширина по содержимому */
  max-width: 90vw;      /* ограничение на мобильных */
  margin-inline: auto;  /* центрирование */
}

Такой паттерн удобен для компактных карточек, бейджей и модалок, когда width: 100% делает блок слишком широким.

Важно: реальный размер зависит от box-sizing. По умолчанию — content-box (размер без padding и border). Лучше использовать border-box:

* {
    box-sizing: border-box;
}

position

Свойство position задаёт, как элемент участвует в потоке документа и относительно чего считаются смещения top, right, bottom, left (или сокращение inset). Пять значений нужно знать на практике — от них зависят шапки, модальные окна, бейджи, выпадающие меню и "липкие" заголовки таблиц.

Значение	Участие в потоке	Точка отсчёта	Типичные задачи
`static`	Да, обычный поток	Смещения не действуют	Значение по умолчанию
`relative`	Да, место в потоке сохраняется	Своё исходное положение	Сдвиг "визуально", якорь для `absolute`-потомков
`absolute`	Нет, вынимается из потока	Ближайший спозиционированный предок	Оверлеи, подсказки, иконка в углу карточки
`fixed`	Нет	Область просмотра (viewport)	Модалка на весь экран, плавающая кнопка
`sticky`	Гибрид	Позиция прокрутки + порог (`top` и др.)	Шапка раздела, заголовок таблицы при скролле

Подробный справочник по синтаксису — в CSS-справочнике. Семантическая шапка в HTML — HTML-страницы целиком. Рабочий пример липкой шапки с CSS — HTML + CSS — готовые макеты; на Tailwind — Tailwind — готовые блоки (раздел "Навигация с липкой шапкой").

static

Значение по умолчанию. Элемент располагается по обычному потоку — так, как если бы position не задавали. Свойства top, right, bottom, left и z-index на static не действуют.

relative

Элемент остаётся в потоке: зарезервированное место на странице сохраняется, даже если блок сдвинут. Смещение считается от исходной позиции в потоке:

.badge-offset {
  position: relative;
  top: -4px;
  left: 8px;
}

Частый паттерн — родитель с position: relative как контейнер отсчёта для дочернего position: absolute (иконка "×" в углу, метка "NEW" на карточке).

absolute

Элемент вынимается из потока — соседи ведут себя так, будто его нет. Координаты считаются от ближайшего предка с position, отличным от static (relative, absolute, fixed, sticky). Если такого предка нет — от начального containing block (обычно это область <html> / viewport).

.card {
  position: relative;
}

.card__close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

Без position: relative (или другого ненулевого position) у .card кнопка закроется относительно всей страницы, а не карточки.

fixed

Как absolute, но точка отсчёта — viewport: элемент остаётся на одном месте экрана при прокрутке документа.

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

Типичные случаи — полноэкранная подложка модального окна, фиксированная панель навигации, кнопка "наверх". На iPhone учитывайте env(safe-area-inset-*), чтобы контент не заезжал под "чёлку" — см. шпаргалку по макету.

sticky

Гибрид relative + fixed. Пока пользователь не прокрутил страницу до порога, элемент ведёт себя как relative. После достижения порога (например, top: 0) — "прилипает" к краю прокручиваемого предка или viewport.

.section-heading {
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 10;
}

Для работы sticky нужны заданный порог (top, bottom, …) и предок без overflow: hidden, который обрезает sticky-контекст. Для шапки сайта при длинной прокрутке часто предпочитают sticky, а не fixed — элемент остаётся в потоке и не требует отдельного отступа у контента.

Position и Flexbox / Grid

Сетку страницы и ряды карточек строят через Flexbox и Grid. position — для точечных задач — наложение слоёв, привязка к углу контейнера, фиксированные панели. Центрировать блок по макету лучше через Flex/Grid, а не через absolute "на глаз" — см. шпаргалку по макету.

Фон и цвет

background

background – фон, может включать цвет, изображение, положение, размер, повторение.

Это многофункциональное свойство, объединяющее:

background-color
background-image
background-repeat
background-position
background-size
background-attachment

  body {
    background: url("image.jpg") no-repeat center / cover;
  }

— фоновое изображение по центру, без повтора, растянуто на весь блок.

color

color – цвет текста. Задаёт цвет символов внутри элемента:

  h1 {
    color: #FF5733;
  }

Форматы:

HEX: #FF5733
RGB — rgb(255, 87, 51)
RGBA — rgba(255, 87, 51, 0.8) — с прозрачностью.
Названия: red, blue (ограниченный набор).

Для оттенков и затемнений от одного базового цвета удобнее color-mix() — смешивание в выбранном пространстве (srgb, oklch, hsl и др.) без препроцессора:

:root {
  --brand: #2563eb;
  --brand-light: color-mix(in oklch, var(--brand) 20%, white);
  --brand-dark: color-mix(in oklch, var(--brand) 75%, black);
}

Подробнее — в главе Функции в CSS.

Текст и шрифты

font

font – шрифт:

  p {
    font-family: "Arial", sans-serif;
    font-size: 16px;
    font-weight: bold;
  }

font-family

font-family — семейство шрифтов. Список шрифтов через запятую. Браузер использует первый доступный.

font-family: "Arial", "Helvetica", sans-serif;

"Arial" — желаемый шрифт.
sans-serif — запасной вариант (шрифт без засечек).

font-size

font-size задаёт размер шрифта. Частые единицы — px (фиксированно), em и rem (относительно шрифта родителя или корня), %, vw. Разбор em и rem с расчётом в пикселях — в разделе em и rem.

font-weight

font-weight — жирность. От 100 до 900 (400 = normal, 700 = bold).

text

text – свойства текста:

  .text {
    text-align: center;
    text-decoration: underline;
    line-height: 1.5;
  }

text-align

text-align — выравнивание текста

left, right, center, justify (по ширине).

text-decoration

text-decoration — декоративные линии

underline — подчёркивание,
overline — надчёркивание,
line-through — зачёркивание.

line-height

line-height — межстрочный интервал. Задаёт высоту строки. Рекомендуется значение 1.4–1.6 для читаемости.

Специальные эффекты

box-shadow

box-shadow – тень элемента:

  .card {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }

— тень смещена на 4px вниз, размытие 8px, полупрозрачная.

column-count

column-count – мультиколоночность. Разбивает текст на несколько колонок, как в газете:

  .article {
    column-count: 3;
    column-gap: 20px;
  }

display

Определяет тип отображения элемента:

block — занимает всю ширину, начинается с новой строки.
inline — не создаёт перенос, не принимает width/height.
inline-block — как inline, но поддерживает размеры.
flex — включает Flexbox-контейнер.
grid — включает Grid-контейнер.
none — скрывает элемент полностью.

.container {
  display: flex;
  gap: 16px;
}

gap

Расстояние между дочерними элементами в flex или grid. Заменяет необходимость в margin.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

overflow

Управляет поведением при выходе содержимого за границы:

visible — по умолчанию, содержимое выходит наружу.
hidden — обрезает всё, что выходит за пределы.
scroll — добавляет прокрутку всегда.
auto — добавляет прокрутку только при необходимости.

.scrollable {
  height: 200px;
  overflow-y: auto;
}

white-space

Управляет обработкой пробелов и переносов:

normal — стандартное поведение.
nowrap — запрещает перенос строк.
pre — сохраняет пробелы и переносы, как в <pre>.
pre-wrap — сохраняет пробелы, но позволяет перенос.

.code {
  white-space: pre-wrap;
}

word-break

Контролирует разрыв слов:

normal — стандартный перенос.
break-all — разрывает слова даже внутри слова.
keep-all — не разрывает слова (часто для CJK-языков).

.cell {
  word-break: break-all;
}

border-radius

Скругление углов границы и фона:

.rounded {
  border-radius: 8px;
  /* или: 50% — для круга */
}

box-shadow

Добавляет тень. Может быть внутренней (inset) или внешней:

.card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

Синтаксис: смещениеX смещениеY размытие растяжение цвет.

text-shadow

Тень для текста:

.title {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

Поведение

visibility

visibility — управляет видимостью элемента, но не влияет на макет:

visible — элемент отображается;
hidden — элемент невидим, но занимает место в потоке.

.hidden-element {
  visibility: hidden;
}

Используется, когда нужно временно скрыть элемент, сохранив его пространство.

opacity

opacity — задаёт прозрачность всего элемента (включая содержимое):

Значения от 0 (полностью прозрачный) до 1 (непрозрачный).

.semi-transparent {
  opacity: 0.6;
}

В отличие от rgba() цвета фона или текста, opacity влияет на весь элемент целиком.

z-index

z-index — определяет порядок наложения элементов по оси Z (глубине). Работает только у позиционированных элементов (position ≠ static):

Чем выше значение — тем ближе к пользователю.

.overlay {
  position: absolute;
  z-index: 1000;
}

Критически важен при создании модальных окон, выпадающих меню, всплывающих подсказок.

cursor

cursor — задаёт форму курсора при наведении:

pointer — рука (для кликабельных элементов);
default — обычная стрелка;
not-allowed, wait, text, move и другие.

.button {
  cursor: pointer;
}

Улучшает UX, сигнализируя о поведении элемента.

list-style

list-style — управляет внешним видом маркеров списков:

list-style-type — disc, circle, square, decimal, none;
list-style-position: inside / outside;
list-style-image: собственное изображение маркера.

ul.no-bullets {
  list-style: none;
}

Полезно при сбросе стандартных стилей списков в навигации или кастомных компонентах.

transition

transition — анимирует изменение свойств при смене состояния (например, при наведении). Полный пример hover-кнопки с разбором — CSS-анимации — готовые эффекты.

.button {
  background-color: blue;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: red;
}

Простой способ добавить плавность без JavaScript.

transform

transform — применяет геометрические преобразования:

translate(), rotate(), scale(), skew().

.icon {
  transform: rotate(45deg) scale(1.2);
}

Не влияет на поток документа — идеален для анимаций и интерактивных эффектов.

object-fit и object-position

Для управления отображением медиа (<img>, <video>):

object-fit — cover, contain, fill, none, scale-down;
object-position: положение внутри контейнера.

.avatar {
  width: 100px;
  height: 100px;
  object-fit: cover;
  object-position: center;
}

Аналог background-size/background-position, но для заменяющих элементов.

user-select

user-select — контролирует возможность выделения текста:

none, text, all, auto.

.no-select {
  user-select: none;
}

Часто используется в интерфейсах (иконки, кнопки), где выделение мешает UX.

pointer-events

pointer-events — управляет реакцией на мышь:

none — игнорировать все события;
auto — стандартное поведение.

.disabled-overlay {
  pointer-events: none;
}

Полезно для временного отключения кликов без изменения DOM.

Чит-лист и документация

Если возникло желание погрузиться в CSS, то рекомендую ознакомиться с MDN - https://developer.mozilla.org/ru/docs/Web/CSS

Чит-лист - https://cheatsheets.zip/css3