Урок 14. Справочник: Цвета и типографика

📁 Раздел: Основы CSS ⏱️ Время изучения: ~45 мин 🎯 Сложность: Начальная

#color #background-color #rgb #hsl #font-family #font-size #font-weight #line-height #text-align #letter-spacing #max-width

⚡ Кратко

Запоминайте не синтаксис ради синтаксиса, а назначение каждой конструкции. Цвет: color / background-color. Текст: font-family, font-size, font-weight, line-height.

Базовые палитры в трёх нотациях

Один цвет можно записать тремя способами — образцы идентичны:

#0f766e

rgb(15 118 110)

hsl(176 77% 26%)

Несколько именованных цветов (named colors) — удобны для быстрых набросков:

teal

tomato

gold

slateblue

rebeccapurple

Ключевые конструкции

Конструкция	Зачем нужна
`color`	Цвет текста.
`background-color`	Цвет фона.
`#0f766e`	Hex-запись цвета.
`rgb(15 118 110)`	RGB-запись цвета в современном синтаксисе.
`hsl(176 77% 26%)`	HSL удобен для подбора оттенков.
`font-family`	Семейство шрифта.
`font-size`	Размер текста.
`font-weight`	Насыщенность шрифта.
`line-height`	Высота строки.
`text-align`	Выравнивание текста.
`letter-spacing`	Межбуквенный интервал.
`max-width: 70ch`	Ограничение длины строки (≈70 символов).

⚠️ Проверить по документации: для размеров шрифта в современных проектах часто используют rem (относительно корневого font-size) и em (относительно родителя) вместо px — это масштабируется при изменении базового размера. Системный набор шрифтов задаётся через стек font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;.