Шпаргалка CSS

CSS (Cascading Style Sheets) — язык описания внешнего вида HTML-документа: цвета, размеры, отступы, расположение блоков, шрифты и анимации. Эта шпаргалка собирает основные конструкции CSS с короткими рабочими примерами. Для глубокого погружения во Flexbox и Grid есть отдельные шпаргалки.

Подключение CSS

Стили можно подключить тремя способами. Рекомендуемый — внешний файл через <link>: его кеширует браузер и переиспользуют все страницы.

/* 1. Внешний файл styles.css, в <head> HTML:
   <link rel="stylesheet" href="styles.css"> */

/* 2. Внутренний блок <style> внутри <head>:
   <style> p { color: red; } </style> */

/* 3. Инлайн прямо в атрибуте элемента (избегайте):
   <p style="color: red;">текст</p> */

Совет: инлайн-стили имеют высокую специфичность и мешают переиспользованию — держите стили во внешнем файле.

Синтаксис правила

CSS-правило состоит из селектора и блока объявлений в фигурных скобках. Каждое объявление — это пара свойство: значение;.

селектор {
  свойство: значение;   /* объявление */
  color: #333;          /* цвет текста */
  font-size: 16px;      /* размер шрифта */
}

/* Несколько селекторов через запятую — общий стиль */
h1, h2, h3 {
  margin: 0;
}

/* Комментарий: /* ... */ — однострочных // в CSS нет */

Селекторы

Селектор определяет, к каким элементам применится правило. Базовые: по тегу, по классу (.) и по id (#).

p        { color: gray; }   /* по тегу: все <p> */
.btn     { padding: 8px; }   /* по классу: class="btn" */
#header  { height: 60px; }    /* по id: id="header" */
*        { margin: 0; }       /* универсальный: все элементы */

/* По атрибуту */
input[type="text"] { border: 1px solid #ccc; }
a[target="_blank"] { color: teal; }

Комбинаторы

Комбинаторы выбирают элементы по их отношению друг к другу в дереве документа.

div p     { }  /* потомок: любой <p> внутри <div> */
div > p   { }  /* прямой ребёнок: <p> непосредственно в <div> */
h2 + p    { }  /* соседний: первый <p> сразу после <h2> */
h2 ~ p    { }  /* все следующие соседи <p> после <h2> */

Псевдоклассы

Псевдоклассы (одно двоеточие :) описывают состояние или позицию элемента.

a:hover        { color: red; }       /* наведение мышью */
a:visited      { color: purple; }     /* посещённая ссылка */
input:focus    { outline: 2px solid blue; }  /* фокус */
button:disabled{ opacity: 0.5; }       /* выключенный */
li:first-child { font-weight: bold; }  /* первый ребёнок */
li:last-child  { border: none; }        /* последний */
li:nth-child(2n) { background: #f0f0f0; }  /* чётные */
p:not(.intro)  { color: gray; }         /* кроме .intro */

Псевдоэлементы

Псевдоэлементы (два двоеточия ::) стилизуют часть элемента или вставляют контент.

p::first-line   { font-weight: bold; }   /* первая строка */
p::first-letter { font-size: 200%; }      /* первая буква */

/* ::before и ::after вставляют контент через content */
.label::before { content: "★ "; }
.link::after   { content: " ↗"; }

/* стиль выделенного мышью текста */
::selection { background: yellow; }

Специфичность и каскад

Когда несколько правил задают одно свойство одному элементу, побеждает правило с большей специфичностью. Считают четыре уровня (по убыванию веса):

Что	Пример	Вес
Инлайн-стиль	`style="..."`	самый высокий
id	`#header`	высокий
Класс, атрибут, псевдокласс	`.btn`, `:hover`	средний
Тег, псевдоэлемент	`p`, `::before`	низкий

/* Специфичность: #id (1,0,0) победит .class (0,1,0) */
#box   { color: green; }   /* применится это */
.box   { color: red; }

/* !important перебивает всё — используйте крайне редко */
p { color: blue !important; }

/* При равной специфичности побеждает правило, идущее ниже */

Цвета

Цвет задают именем, шестнадцатеричным кодом (hex), функциями rgb() и hsl(). Альфа-канал — прозрачность от 0 до 1.

.a { color: red; }                  /* имя цвета */
.b { color: #ff0000; }               /* hex, можно #f00 */
.c { color: #ff000080; }             /* hex с альфой (~50%) */
.d { color: rgb(255, 0, 0); }        /* красный, зелёный, синий */
.e { color: rgba(255, 0, 0, 0.5); }  /* с прозрачностью 50% */
.f { color: hsl(0, 100%, 50%); }     /* тон, насыщенность, светлота */
.g { color: hsla(0, 100%, 50%, 0.5); }
.h { background: transparent; }      /* прозрачный */

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

Единицы бывают абсолютные (px) и относительные (em, rem, %, vw, vh). Относительные удобнее для адаптивности.

.a { width: 200px; }   /* пиксели — фиксированный размер */
.b { font-size: 1.5em; }  /* em — относительно шрифта родителя */
.c { font-size: 1.5rem; } /* rem — относительно шрифта <html> */
.d { width: 50%; }      /* процент от родителя */
.e { width: 50vw; }     /* 50% ширины окна (viewport width) */
.f { height: 100vh; }   /* 100% высоты окна (viewport height) */

Правило большого пальца: для шрифтов берите rem, для ширин — % или px, для полноэкранных секций — vw/vh.

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

Каждый элемент — прямоугольник: контент, внутренний отступ padding, рамка border и внешний отступ margin.

.box {
  margin: 10px;             /* внешний отступ со всех сторон */
  margin: 10px 20px;        /* верх/низ 10, лево/право 20 */
  margin: 5px 10px 15px 20px; /* верх право низ лево (по часовой) */
  padding: 16px;            /* внутренний отступ */
  border: 2px solid #333;   /* толщина, стиль, цвет */
}

/* box-sizing: border-box включает padding и border
   в заданную width — размеры считаются предсказуемо */
* { box-sizing: border-box; }

Важно: по умолчанию width задаёт ширину только контента, а padding и border добавляются сверху. С border-box width — это итоговая ширина блока.

display

Свойство display определяет, как элемент участвует в потоке и как ведут себя его потомки.

.a { display: block; }        /* блок: на всю ширину, с новой строки */
.b { display: inline; }       /* строчный: ширина по контенту */
.c { display: inline-block; } /* строчный, но принимает width/height */
.d { display: none; }         /* полностью убрать из потока */
.e { display: flex; }         /* флекс-контейнер (см. шпаргалку Flexbox) */
.f { display: grid; }         /* грид-контейнер (см. шпаргалку Grid) */

Отличие от visibility: hidden: при display: none элемент не занимает места, при visibility: hidden — занимает, но невидим.

position

Свойство position управляет позиционированием со смещениями top, right, bottom, left.

.a { position: static; }   /* по умолчанию, в обычном потоке */
.b { position: relative; top: 10px; left: 5px; } /* сдвиг от своего места */
.c { position: absolute; top: 0; right: 0; }      /* от ближайшего
       позиционированного предка (relative/absolute/fixed) */
.d { position: fixed; bottom: 20px; right: 20px; } /* от окна, не скроллится */
.e { position: sticky; top: 0; }  /* липкий: прилипает при прокрутке */

/* z-index управляет наложением слоёв (выше — поверх) */
.modal { position: fixed; z-index: 100; }

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

Группа свойств для оформления текста: семейство шрифта, размер, начертание, выравнивание, межстрочный интервал.

.text {
  font-family: "Arial", sans-serif; /* шрифт + запасной */
  font-size: 16px;
  font-weight: bold;        /* или 100..900, normal */
  font-style: italic;
  line-height: 1.5;         /* межстрочный интервал */
  text-align: center;       /* left | right | center | justify */
  text-decoration: underline;  /* подчёркивание */
  text-transform: uppercase;   /* ВЕРХНИЙ регистр */
  letter-spacing: 1px;       /* трекинг между буквами */
  color: #222;
}

Фон

Фон может быть цветом, изображением или градиентом. Удобна короткая запись background.

.a { background-color: #f5f5f5; }
.b { background-image: url("bg.png"); }
.c {
  background-image: url("hero.jpg");
  background-size: cover;      /* заполнить блок */
  background-position: center;
  background-repeat: no-repeat;
}
/* короткая запись */
.d { background: #fff url("bg.png") no-repeat center / cover; }
/* градиент */
.e { background: linear-gradient(to right, #ff7e5f, #feb47b); }

Границы и тени

Рамки, скругление углов и тени делают интерфейс выразительнее.

.card {
  border: 1px solid #ddd;
  border-radius: 8px;            /* скругление углов */
  border-top: 3px solid teal;    /* только одна сторона */
}
/* тень блока: x y размытие разброс цвет */
.box   { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }
/* тень текста: x y размытие цвет */
.title { text-shadow: 1px 1px 2px gray; }
/* несколько теней через запятую */
.deep  { box-shadow: 0 1px 2px #0002, 0 4px 12px #0001; }

Переменные CSS

Кастомные свойства (переменные) объявляют с префиксом -- и читают через var(). Обычно их кладут в :root, чтобы они были глобальными.

:root {
  --primary: #4f46e5;
  --gap: 16px;
  --radius: 8px;
}

.button {
  background: var(--primary);
  padding: var(--gap);
  border-radius: var(--radius);
}

/* второе значение var() — запасное, если переменной нет */
.box { color: var(--accent, #333); }

/* переменные наследуются и переопределяются локально */
.dark { --primary: #1e1b4b; }

Медиазапросы (адаптивность)

Медиазапросы применяют стили в зависимости от ширины экрана, ориентации и других условий. Основа адаптивной (responsive) вёрстки.

/* мобильный по умолчанию, затем расширяем — mobile-first */
.container { width: 100%; }

@media (min-width: 768px) {   /* планшеты и шире */
  .container { width: 750px; }
}

@media (min-width: 1200px) {  /* десктоп */
  .container { width: 1140px; }
}

/* диапазон и ориентация */
@media (max-width: 600px) and (orientation: portrait) {
  .menu { display: none; }
}

Переходы и анимации

transition плавно меняет значение свойства, animation с @keyframes описывает многошаговую анимацию.

/* плавный переход: свойство длительность функция задержка */
.btn {
  background: #4f46e5;
  transition: background 0.3s ease;
}
.btn:hover { background: #3730a3; }

/* несколько свойств */
.box { transition: transform 0.2s, opacity 0.2s; }

/* ключевые кадры и их запуск */
@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.heart {
  animation: pulse 1s ease-in-out infinite;
}

Основы Flexbox

Flexbox раскладывает элементы в одну ось (строку или столбец) и удобно центрирует. Полный разбор — в отдельной шпаргалке Flexbox.

.container {
  display: flex;
  flex-direction: row;        /* или column */
  justify-content: center;    /* выравнивание по главной оси */
  align-items: center;        /* по поперечной оси */
  gap: 16px;                  /* промежутки между элементами */
  flex-wrap: wrap;            /* перенос на новую строку */
}
.item { flex: 1; }            /* элемент растягивается поровну */

Основы Grid

Grid — двумерная сетка из строк и столбцов. Подробнее — в отдельной шпаргалке Grid.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /* 3 равных колонки */
  grid-template-columns: repeat(3, 1fr); /* то же короче */
  gap: 16px;                            /* промежутки */
}

/* адаптивная сетка без медиазапросов */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

/* растянуть элемент на несколько колонок */
.wide { grid-column: span 2; }