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

Содержание и основные понятия

← Вернуться к оглавлению
Alterna · глава 8 · страница 8.2
CSS: стили и макет
CSS (Cascading Style Sheets) — язык, который превращает скелет HTML в красивую страницу. Цвета, шрифты, отступы, анимации, адаптивность — всё это CSS.
Если HTML — это
скелет
, то CSS — это
одежда, причёска и макияж
. Без CSS все сайты выглядели бы как документы из 90-х.
CSS описывает,
как
элементы выглядят: цвет, размер, отступы, расположение, анимации. Один CSS-файл может стилизовать сотни HTML-страниц.
ФГОС · базовый
ФОП · углублённый
01
Селекторы и каскад
Как 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-архитектура сломана.
02
Box Model — блочная модель
Каждый элемент — это коробка: content + padding + border + margin
Четыре слоя коробки
margin
border
padding
content
Рис. 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. Это гораздо удобнее. Используйте всегда!
03
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)
04
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
— для двумерных (строки И столбцы): макет страницы, галерея, дашборд.
05
Анимации и переходы
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
вызывает перерисовку и тормозит.
06
Адаптивность (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
1
2
3
4
5
🎨
Таблица HTML-цветов
140 named colors · клик = копировать hex
интерактив
CSS поддерживает 140 именованных цветов. Кликните на цвет — hex-код скопируется. Используйте поиск для фильтрации.
⚖️
Калькулятор специфичности
введите селектор · узнайте вес
интерактив
Введите CSS-селектор — калькулятор покажет его специфичность (inline, ID, классы, типы).
🧪
CSS-песочница
HTML + CSS · живое превью · переключатель ширины
интерактив
Редактируйте HTML и CSS — превью обновляется мгновенно. Переключайте ширину, чтобы проверить адаптивность.
Ширина:
localhost/sandbox