</> Praktum

Главная / CSS

Учебник для начинающих

CSS: сделай страницу своей

HTML даёт странице структуру, а CSS отвечает за внешний вид. Здесь разберёмся с цветами, отступами и расположением блоков — без прыжка в сложную вёрстку.

  • Подойдёт после HTML
  • 51 тем
  • Примеры кода
Смотреть темы →

С чего начать

Основа аккуратной вёрстки

Иди по темам по порядку — они собраны так, чтобы сразу видеть результат в браузере.

01 / основа

Селекторы и свойства

Как выбрать элемент и изменить его внешний вид.

02 / порядок

Отступы и размеры

Margin, padding и box model на понятной схеме.

03 / раскладка

Flexbox и Grid

Два способа расположить блоки без хаоса.

04 / сетка

CSS Grid

Собираем карточки в гибкую сетку.

05 / экран

Адаптивная вёрстка

Делаем интерфейс удобным на телефоне.

06 / раскладка

Свойство display

Block, inline, flex, grid и none.

07 / слои

Position

Relative, absolute, fixed и sticky.

08 / текст

Шрифты

Размеры, интервалы и веб-шрифты.

09 / система

CSS-переменные

Управляем цветами и размерами централизованно.

10 / оформление

Цвета и типографика

Собираем читаемую палитру интерфейса.

11 / состояния

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

Настраиваем hover, focus и состояния полей.

12 / справочник

gap

Расстояние между элементами сетки.

13 / справочник

margin

Внешние отступы и центрирование.

14 / справочник

padding

Внутренние отступы и box-sizing.

15 / справочник

border-radius

Скругление карточек, кнопок и изображений.

16 / справочник

width

Управляем шириной элементов.

17 / справочник

max-width

Ограничиваем контейнеры и текст.

18 / справочник

color

Цвет текста, форматы и контраст.

19 / справочник

background

Цвет, изображение, градиент и размер фона.

20 / справочник

box-sizing

Считаем ширину элемента предсказуемо.

21 / справочник

min-height

Задаём минимальную, но гибкую высоту.

22 / справочник

overflow

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

23 / справочник

z-index

Разбираемся с наложением элементов.

24 / справочник

opacity

Настраиваем прозрачность элемента.

25 / справочник

box-shadow

Добавляем тень карточкам и кнопкам.

26 / справочник

transform

Перемещаем, вращаем и масштабируем.

27 / справочник

transition

Делаем смену состояний плавной.

28 / справочник

object-fit

Вписываем изображения без искажений.

29 / справочник

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

Меняем интерфейс под размер и возможности устройства.

30 / справочник

height

Управляем фиксированной высотой.

31 / справочник

min-width

Задаём минимальную ширину элемента.

32 / справочник

line-height

Настраиваем межстрочный интервал.

33 / справочник

font-size

Задаём понятный размер текста.

34 / справочник

font-weight

Управляем насыщенностью шрифта.

35 / справочник

text-align

Выравниваем строковое содержимое.

36 / справочник

text-decoration

Оформляем подчёркивания и линии текста.

37 / справочник

white-space

Управляем пробелами и переносами.

38 / справочник

cursor

Выбираем указатель для интерактивных элементов.

39 / справочник

aspect-ratio

Сохраняем пропорции блока.

100 / новая тема

CSS align-items

Выравниваем элементы во Flexbox и Grid.

101 / новая тема

CSS justify-content

Располагаем элементы вдоль главной оси.

102 / новая тема

CSS flex-wrap

Разрешаем карточкам переходить на новую строку.

103 / новая тема

CSS grid-template-columns

Задаём явные и адаптивные колонки сетки.

104 / новая тема

CSS функция clamp()

Ограничиваем текучий размер минимумом и максимумом.

105 / новая тема

CSS функция calc()

Смешиваем единицы и вычитаем известные размеры.

106 / новая тема

CSS filter

Настраиваем яркость, контраст, размытие и тень.

107 / новая тема

CSS animation и keyframes

Создаём управляемую анимацию и учитываем reduced motion.

108 / новая тема

CSS pointer-events

Пропускаем события через декоративные слои.

109 / новая тема

CSS visibility

Сравниваем hidden, display none и opacity.

110 / новая тема

CSS list-style

Меняем тип, положение и изображение маркера.

111 / новая тема

CSS inset

Задаём top, right, bottom и left одной строкой.

Практикумы

Короткие задачи по CSS

Короткие задачи на одну тему: прочитай, повтори в песочнице и проверь результат.

практикум

Длина строки, которую удобно читать

Широкий монитор делает строку длиной в полтора экрана. Такую строку теряют на обратном пути.

практикум

Карточки сами считают колонки

Одинаковые карточки не обязаны ждать отдельного правила на каждый размер экрана.

практикум

Короткая проверка макета перед кодом поведения

Перед JavaScript макет стоит прогнать глазами. Потом скрипт будет менять уже устойчивую страницу.

практикум

Короткое появление блока

Блок, который только что открылся, легче заметить, если он появляется, а не оказывается на месте мгновенно.

практикум

Меньше движения для тех, кто просил

Часть людей включает в системе настройку «уменьшить движение». Сайт может это уважать.

практикум

Одинаковый ритм между секциями

Селекторы, отступы и сетка уже собраны. Дальше глаз должен идти по странице ровным шагом.

практикум

Подвал прижат к низу короткой страницы

Если текста мало, подвал оказывается сразу под абзацем, а ниже пустой экран.

практикум

Поле с ошибкой видно до отправки

Браузер умеет пометить пустое обязательное поле. Цвета без слов недостаточно.

практикум

Рамка фокуса для клавиатуры

Человек на Tab должен видеть, где он находится. Рамка у каждого клика мышкой для этого не нужна.

практикум

Страница, которую отправляют на бумагу

Меню, фоны и кнопки на бумаге не нужны. Текст, заголовок и ссылка — нужны.

практикум

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

Обычная, посещённая, наведённая и нажатая ссылка — это четыре разных момента.

практикум

Шапка, которая остаётся при прокрутке

Длинный урок увозит меню вверх. Липкая шапка оставляет ссылки под рукой.

Все материалы

Все материалы раздела CSS

Учебные материалы

Справочник

Новые темы

Практика: карточка статьи

Сверстай небольшую карточку: заголовок, текст, картинку и кнопку. Попробуй сделать её удобной и на телефоне.

Начать →

Подробнее

CSS не меняет смысл, он меняет представление

HTML уже должен отвечать, что на странице заголовок, а что кнопка. CSS решает, как это выглядит: цвет, расстояние, колонки, поведение на узком экране. Если удалить стили, текст урока или карточки всё равно должен читаться сверху вниз.

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

<!-- в HTML, внутри head -->
<link rel="stylesheet" href="/styles.css">

/* styles.css */
body {
  margin: 0;
  font-family: Georgia, serif;
  line-height: 1.5;
  color: #1d1a17;
  background: #f7f4ef;
}

Откуда берётся итоговый вид элемента

У каждого элемента уже есть стиль браузера: у ссылки подчёркивание, у заголовка крупный размер, у тела страницы небольшой отступ. Твои правила либо дополняют его, либо переопределяют. Если свойство не меняется, в инструментах разработчика видно, какое правило победило и какое зачёркнуто.

Класс описывает роль в макете: card, price, is-open. Не называй класс red-text, если завтра этот текст может стать тёмным. Имя должно переживать смену цвета.

Порядок, в котором раздел не разваливается

Запомни: Меняй одно свойство за раз и сразу смотри результат. Пачка из десяти правок не показывает, какая из них сломала макет.