Frontend Academy · Урок

Цвета, типографика и блочная модель

Урок 2 из 413 шагов

«Цвета, типографика и блочная модель» — бесплатный урок Frontend Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Цветовые значения CSS

CSS поддерживает несколько форматов цветов. Выбирайте наиболее понятный для Вашей задачи: шестнадцатеричные коды для фирменных цветов, hsl() для удобной настройки цветов, rgb() для программных значений и именованные цвета для быстрого создания прототипов.

color: #2b6cb0;              /* hex */
color: rgb(43, 108, 176);    /* rgb */
color: hsl(212, 61%, 43%);   /* hsl */
color: royalblue;            /* named */
color: rgba(0,0,0,0.5);      /* rgba with alpha */

Цвета и изображения фона

Задавайте фон элементов с помощью background-color. Используйте background-image с градиентами или URL-адресами. Сокращённая запись background объединяет цвет, изображение, положение, размер и повторение в одном объявлении.

background-color: #f7fafc;
background-image: linear-gradient(135deg, #667eea, #764ba2);
background: url('/hero.webp') center / cover no-repeat #1a202c;

Свойства шрифта

Управляйте типографикой с помощью: font-family (гарнитура), font-size (em, rem, px), font-weight (100–900), font-style (курсив), line-height (коэффициент удобочитаемости) и letter-spacing (межбуквенный интервал).

body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: #1a202c;
}

Свойства текста

Дополнительная стилизация текста: text-align (слева, по центру, справа, по ширине), text-decoration (подчёркивание, зачёркивание, отсутствие оформления), text-transform (верхний регистр, заглавные буквы), text-overflow: ellipsis для усечения текста.

h1 { text-align: center; text-transform: uppercase; }
a { text-decoration: none; }
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

rem против em и px

px — абсолютная единица. em зависит от размера шрифта самого элемента и участвует в каскадировании. rem зависит от размера шрифта корневого элемента, что делает его предсказуемым. Для большинства размеров используйте rem, чтобы учитывать предпочтения пользователя относительно размера шрифта.

html { font-size: 16px; }  /* 1rem = 16px */
.card { padding: 1.5rem; }  /* 24px */
.small { font-size: 0.875rem; } /* 14px */

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

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

/* Total width = content + padding + border */
.box {
  width: 200px;
  padding: 16px;
  border: 2px solid #ccc;
  margin: 24px;
}

box-sizing: border-box

По умолчанию при значении content-box внутренние отступы и граница добавляются к объявленной ширине. При box-sizing: border-box внутренние отступы и граница включаются в объявленную ширину — почти всегда это именно то, что Вам нужно.

/* Apply globally */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Now width: 200px includes padding and border */
.card {
  width: 200px;
  padding: 20px; /* doesn't add to width */
}

Схлопывание внешних отступов

Вертикальные внешние отступы между соседними блочными элементами схлопываются — учитывается только больший отступ. Также схлопываются отступы родителя и его первого или последнего дочернего элемента. У дочерних элементов Flexbox и сетки внешние отступы не схлопываются.

Сокращённая запись padding

Сокращённая запись padding: top right bottom left задаёт все стороны. Два значения задают вертикальный и горизонтальный отступы. Три значения задают верхний, горизонтальные и нижний отступы.

padding: 16px;              /* all sides */
padding: 8px 16px;          /* top/bottom  left/right */
padding: 8px 16px 24px;     /* top  left/right  bottom */
padding: 8px 16px 24px 32px; /* top right bottom left */

Свойства границы

Задавайте границы с помощью сокращённой записи border: width style color. Для отдельных сторон используйте border-top и другие свойства. Используйте border-radius для скруглённых углов. outline похож на границу, но не влияет на раскладку.

.card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
button:focus {
  outline: 2px solid #3182ce;
  outline-offset: 2px;
}

Переполнение

overflow: hidden обрезает содержимое, выходящее за пределы размера элемента. overflow: scroll добавляет полосы прокрутки. overflow: auto добавляет полосы прокрутки только при необходимости. Используйте overflow-x и overflow-y, чтобы независимо управлять осями.

Быстрая проверка

Если заданы box-sizing: border-box, width: 300px; padding: 20px; border: 2px solid, какова общая отображаемая ширина элемента?

Ответь в интерактивном уроке

Итоги: цвета, типографика и блочная модель

Задавайте цвета с помощью шестнадцатеричных значений, rgb или hsl. Применяйте шрифты, указывая семейство, размер, насыщенность и высоту строки. Каждый элемент — это блок: содержимое + внутренний отступ + граница + внешний отступ. Глобально включайте box-sizing: border-box для предсказуемых размеров.

Можно начать бесплатно

Изучай HTML с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 41
Уроки: 163

Начать учиться бесплатно Посмотреть полный курс

Часто задаваемые вопросы

Урок «Цвета, типографика и блочная модель» бесплатный?

Да — полный текст урока «Цвета, типографика и блочная модель» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «Цвета, типографика и блочная модель»?

Применяйте цвет с помощью значений hex, rgb и hsl, выбирайте шрифты, задавайте размеры и высоту строк, а также используйте внешние и внутренние отступы и границы для размещения элементов. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Цвета, типографика и блочная модель»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Селекторы и каскад
Цвета, типографика и блочная модель
Display: основы block, inline, flex и grid
Позиционирование: relative, absolute, fixed, sticky

← Назад к Frontend Academy