Урок 03

Цвета, единицы, шрифты, текст

Цвета

Форматы:

/* HEX */
color: #c1442e;
color: #c1442e80;   /* с прозрачностью (50%) */

/* RGB */
color: rgb(193, 68, 46);
color: rgba(193, 68, 46, 0.5);

/* HSL — удобнее для человека */
color: hsl(9, 61%, 47%);
color: hsla(9, 61%, 47%, 0.5);

/* Именованные */
color: red;
color: rebeccapurple;

/* Современный */
color: rgb(193 68 46 / 50%);
color: hsl(9 61% 47% / 50%);

Правило: HSL — для дизайн-систем, легко менять светлоту. HEX — компактно. RGB — для JS-динамики.

Прозрачность

opacity: 0.5 — прозрачность всей карточки (включая текст и картинки).
rgba(0,0,0,0.5) — прозрачность только фона.

Правило: для фона — rgba/hsla. Для карточки целиком — opacity.

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

:root {
    --color-primary: #c1442e;
    --color-primary-hover: #a83926;
    --color-text: #1a1a1a;
    --color-bg: #fafafa;
    --radius: 10px;
    --spacing: 16px;
}

.button {
    background: var(--color-primary);
    color: white;
    border-radius: var(--radius);
    padding: var(--spacing);
}

.button:hover {
    background: var(--color-primary-hover);
}

Что даёт:

Меняешь в одном месте — применяется везде.
Тёмная тема — просто переопределить переменные.
Не нужно препроцессор.

Fallback:

color: var(--unknown, #000);

Правило: переменные для цветов, отступов, радиусов, шрифтов.

Единицы

Абсолютные:

px — пиксели. Самые частые.
pt — пункты (печать).
cm, mm, in — сантиметры, миллиметры, дюймы (печать).

Относительные:

% — от родителя.
em — от font-size родителя.
rem — от font-size root (html).
vw — 1% ширины viewport.
vh — 1% высоты viewport.
vmin / vmax — 1% от меньшей/большей стороны.
ch — ширина символа «0».
ex — высота «x».

Правило:

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

`em` vs `rem`

html { font-size: 16px; }
.parent { font-size: 20px; }

.child-rem { font-size: 1.5rem; }   /* 24px */
.child-em { font-size: 1.5em; }     /* 30px — от родителя */

Правило: rem везде, кроме случаев, когда нужна зависимость от родителя.

Шрифты

Подключение системного стека:

body {
    font-family:
        system-ui,
        -apple-system,
        'Segoe UI',
        Roboto,
        'Helvetica Neue',
        sans-serif;
}

Что даёт: использует системный шрифт — быстро, без загрузки.

Подключение Google Fonts:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">

body {
    font-family: 'Inter', system-ui, sans-serif;
}

Правило: display=swap — показывать fallback сразу.

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

font-family: 'Inter', sans-serif;
font-size: 16px;             /* или 1rem */
font-weight: 600;            /* 100–900 или normal/bold */
font-style: italic;          /* normal / italic / oblique */
font-variant: small-caps;
line-height: 1.5;            /* без единиц — множитель */

Сокращённое:

font: 600 16px/1.5 'Inter', sans-serif;
/* weight size/line-height family */

Правило: использовать line-height без единиц — наследуется корректно.

Текст

text-align: left | center | right | justify;

/* Декор */
text-decoration: underline;
text-decoration: none;
text-decoration: line-through;

/* Трансформация */
text-transform: uppercase | lowercase | capitalize | none;

/* Отступ первой строки */
text-indent: 2em;

/* Разрядка */
letter-spacing: 0.05em;
word-spacing: 0.1em;

/* Тень */
text-shadow: 0 1px 2px rgba(0,0,0,0.2);

Перенос и обрезка

Перенос длинных слов:

overflow-wrap: break-word;   /* переносить, если не влезает */
word-break: break-all;       /* ломать где угодно */

Обрезка с многоточием (одна строка):

.text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Многострочная обрезка:

.text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

Что даёт: максимум 3 строки + «…».

Белые пробелы

white-space: normal;      /* сжимать пробелы, переносить */
white-space: nowrap;      /* без переноса */
white-space: pre;         /* сохранять пробелы и переносы */
white-space: pre-wrap;    /* сохранять, но переносить */
white-space: pre-line;    /* сжимать пробелы, сохранять переносы */

Правило: pre-wrap — для кода в HTML.

Выравнивание

/* По центру */
.container {
    text-align: center;
}

/* Вертикально по центру */
.container {
    display: flex;
    align-items: center;
    justify-content: center;
}

Правило: text-align — только для текста. Для блоков — flex/grid.

Пример: типографика

:root {
    --font-size-base: 1rem;      /* 16px */
    --line-height-base: 1.6;
}

body {
    font-family: system-ui, sans-serif;
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: #1a1a1a;
    overflow-wrap: break-word;
}

h1 { font-size: 2.5rem; line-height: 1.2; margin-bottom: 1rem; }
h2 { font-size: 2rem;   line-height: 1.3; margin-bottom: 0.75rem; }
h3 { font-size: 1.5rem; line-height: 1.4; margin-bottom: 0.5rem; }

p { margin-bottom: 1rem; }

small { font-size: 0.875rem; color: #6b6b6b; }

code {
    font-family: ui-monospace, monospace;
    font-size: 0.9em;
    background: #f6f8fa;
    padding: 2px 6px;
    border-radius: 4px;
}

Fluid-типографика

Плавное изменение размера:

h1 {
    font-size: clamp(1.75rem, 4vw, 3rem);
}

Что даёт: минимум 1.75rem, максимум 3rem, между — 4vw.

Правило: clamp() — современный способ. Не нужны медиазапросы для шрифтов.

Практика

1. Создайте систему цветов через переменные:

:root {
    --primary: #c1442e;
    --primary-hover: #a83926;
    --text: #1a1a1a;
    --text-muted: #6b6b6b;
    --bg: #fafafa;
    --surface: #fff;
    --border: #e5e5e5;
}

2. Настройте типографику для h1–h6, p, small, code.

3. Используйте rem везде.

4. Попробуйте clamp() для заголовков.

5. Сделайте многострочную обрезку для карточки с описанием.

Частые ошибки

1. px для шрифтов:

Не масштабируется с настройками пользователя

Решение: rem.

2. line-height с px:

line-height: 24px;   /* не масштабируется с font-size */

Решение: без единиц — 1.5.

3. em везде:

Сложно понять итоговый размер

Решение: rem.

4. Много шрифтов:

Каждый — +100KB

Решение: 1-2 шрифта, системные.

5. Google Fonts без preconnect:

Долгая загрузка

Решение: preconnect.

6. Без display=swap:

Текст невидим, пока грузится шрифт

Решение: display=swap.

7. !important для шрифта:

Признак плохой архитектуры

Решение: специфичность через классы.

8. text-align: center для блока:

Не работает как ожидается

Решение: flex / grid.

Итог

Цвета: HEX, RGB, HSL, переменные.
CSS-переменные — для системы.
rem — для шрифтов и отступов.
px — для границ.
%, vw, vh — для адаптива.
Системный стек шрифтов — быстрый.
line-height без единиц.
overflow-wrap: break-word — обязательно.
clamp() — fluid-типографика.
Не злоупотреблять шрифтами.

Дальше — box model.