Alterna · CSS: стили и макет

Если HTML — это скелет, то CSS — это одежда, причёска и макияж. Без CSS все сайты выглядели бы как документы из 90-х.

CSS описывает, как элементы выглядят: цвет, размер, отступы, расположение, анимации. Один CSS-файл может стилизовать сотни HTML-страниц.

ФГОС · базовый ФОП · углублённый

Селекторы и каскад

Как CSS находит элементы и какой стиль побеждает

Синтаксис CSS

селектор {
  свойство: значение;
  color: #22d3ee;
  font-size: 16px;
}
      

Типы селекторов

Селектор	Пример	Что выбирает	Вес
Тип	p, h1, div	Все элементы данного тега	0-0-1
Класс	.card, .btn	Элементы с атрибутом class	0-1-0
ID	#header	Один элемент с атрибутом id	1-0-0
Атрибут	[type="email"]	Элементы с указанным атрибутом	0-1-0
Псевдокласс	:hover, :first-child	Состояние элемента	0-1-0
Потомок	nav a	Все <a> внутри <nav>	сумма
Дочерний	ul > li	Только прямые дочерние <li>	сумма
Универсальный	*	Все элементы	0-0-0

Каскад: кто побеждает

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

inline-стили (style="...") — вес 1-0-0-0 (самый высокий)
ID (#header) — вес 0-1-0-0
Классы, атрибуты, псевдоклассы (.card) — вес 0-0-1-0
Типы, псевдоэлементы (p, h1) — вес 0-0-0-1

При равной специфичности побеждает последнее правило в коде.

!important color: red !important; — перебивает ВСЁ, даже inline. Но использовать его — плохая практика. Если нужен !important, значит CSS-архитектура сломана.

Box Model — блочная модель

Каждый элемент — это коробка: content + padding + border + margin

Четыре слоя коробки

Рис. 2. Box Model: от содержимого к внешним отступам

Свойство	Что делает	Пример
width / height	Размер содержимого	width: 300px;
padding	Внутренний отступ (от контента до border)	padding: 16px;
border	Рамка вокруг элемента	border: 1px solid #ccc;
margin	Внешний отступ (от border до соседей)	margin: 20px auto;

box-sizing: border-box По умолчанию width = только content. С box-sizing: border-box — width включает padding и border. Это гораздо удобнее. Используйте всегда!

Flexbox — гибкий макет

Одномерная раскладка: строка или столбец с полным контролем

Как работает Flexbox

Родитель получает display: flex. Дети автоматически выстраиваются в строку (по умолчанию).

Свойства родителя (flex-контейнера)

Свойство	Значения	Что делает
flex-direction	row \| column	Направление: строка или столбец
justify-content	flex-start \| center \| space-between \| space-around	Выравнивание по главной оси
align-items	stretch \| center \| flex-start \| flex-end	Выравнивание по поперечной оси
flex-wrap	nowrap \| wrap	Перенос на новую строку
gap	10px, 1rem	Расстояние между элементами

Свойства детей (flex-элементов)

Свойство	Что делает
flex-grow	Какую долю свободного пространства занять (0 = не растягиваться)
flex-shrink	Насколько сжиматься при нехватке места
flex-basis	Базовый размер до распределения свободного места
align-self	Индивидуальное выравнивание (переопределяет align-items)

CSS Grid — двумерный макет

Строки И столбцы одновременно — для сложных макетов

Основы Grid

Родитель: display: grid. Задаёте колонки и строки:

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;  /* 3 колонки */
  grid-template-rows: auto 200px;    /* 2 строки */
  gap: 16px;                   /* расстояние */
}
      

Единица fr

fr — доля свободного пространства. 1fr 2fr 1fr = три колонки, средняя вдвое шире.

Полезные функции

Функция	Пример	Назначение
repeat()	repeat(3, 1fr)	Повторить паттерн N раз
minmax()	minmax(200px, 1fr)	Минимум и максимум размера
auto-fit	repeat(auto-fit, minmax(200px, 1fr))	Адаптивная сетка без медиа-запросов!
grid-area	1 / 1 / 2 / 3	Элемент занимает несколько ячеек

Flexbox vs Grid Flexbox — для одномерных раскладок (строка ИЛИ столбец): навигация, кнопки, карточки в ряд.
Grid — для двумерных (строки И столбцы): макет страницы, галерея, дашборд.

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

transition для плавных изменений, @keyframes для сложных анимаций

Transition — плавный переход

.btn {
  background: blue;
  transition: background 0.3s ease;
}
.btn:hover {
  background: red;  /* плавно за 0.3с */
}
      

@keyframes — сложная анимация

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.card {
  animation: pulse 2s infinite;
}
      

Производительность Анимируйте только transform и opacity — они обрабатываются GPU. Анимация width, height, margin вызывает перерисовку и тормозит.

Адаптивность (Responsive)

Медиа-запросы: одна страница для десктопа, планшета и телефона

Медиа-запросы

/* Стили для всех экранов */
.grid { display: grid; grid-template-columns: 1fr 1fr 1fr; }

@media (max-width: 768px) {
  /* Планшет: 2 колонки */
  .grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  /* Телефон: 1 колонка */
  .grid { grid-template-columns: 1fr; }
}
      

Типичные брейкпоинты

Устройство	Ширина	Особенности
Десктоп	> 1024px	Полный макет, hover-эффекты
Планшет	768–1024px	Упрощённый макет, меньше колонок
Телефон	< 768px	Одна колонка, крупные кнопки (44px+)

Mobile-first Профессионалы пишут сначала стили для мобильных, потом добавляют @media (min-width: ...) для больших экранов. Это называется mobile-first подход.

📦

Flexbox-конструктор

настройте свойства · смотрите результат

интерактив

Измените свойства flex-контейнера — блоки перестроятся в реальном времени. Справа — готовый CSS-код.

direction

justify

align

wrap

gap

🎨

Таблица HTML-цветов

140 named colors · клик = копировать hex

интерактив

CSS поддерживает 140 именованных цветов. Кликните на цвет — hex-код скопируется. Используйте поиск для фильтрации.

⚖️

Калькулятор специфичности

введите селектор · узнайте вес

интерактив

Введите CSS-селектор — калькулятор покажет его специфичность (inline, ID, классы, типы).

🧪

CSS-песочница

HTML + CSS · живое превью · переключатель ширины

интерактив

Редактируйте HTML и CSS — превью обновляется мгновенно. Переключайте ширину, чтобы проверить адаптивность.

Ширина:

localhost/sandbox