Урок 14. Примеры: Цвета и типографика
⚡ Кратко
Смотрите на «Результат» рядом с кодом, затем измените одно значение (например, line-height или color) и предскажите, как изменится текст.
Рабочие примеры
В каждом примере сверху — реальный результат, снизу — код. Сравнивайте и экспериментируйте.
1. Один цвет — три записи
Имя, hex, rgb() и hsl() дают идентичный оттенок. Образцы ниже выглядят одинаково.
.a { color: teal; }
.b { color: #008080; }
.c { color: rgb(0 128 128); }
.d { color: hsl(180 100% 25%); }
/* все четыре — один и тот же цвет */2. Базовая типографика страницы
Сначала задаём общий текст у body, затем уточняем заголовки.
Заголовок раздела
Основной текст набран шрифтом с засечками. Высота строки 1.6 даёт воздух между строками, поэтому абзац читается без напряжения.
body {
font-family: Georgia, 'Times New Roman', serif;
color: #1f2937;
background-color: #f8fafc;
line-height: 1.6;
}
h1,
h2 {
line-height: 1.15;
color: #0f172a;
}3. Семейства шрифтов: serif / sans-serif / monospace
Один и тот же текст в трёх семействах — почувствуйте разницу набора.
serif — с засечками: «Съешь ещё этих булок 123»
sans-serif — рубленый: «Съешь ещё этих булок 123»
monospace — моноширинный: «Съешь ещё этих булок 123»
.serif { font-family: Georgia, serif; }
.sans { font-family: Arial, Helvetica, sans-serif; }
.mono { font-family: 'Courier New', monospace; }4. font-size, font-weight, line-height, letter-spacing
Каждое свойство меняет один аспект текста. Сравните строки в превью.
font-size: 24px — крупный текст
font-weight: 700 — жирное начертание
line-height: 2 — широкие строки, видно по высоте фона
letter-spacing: .25em
.big { font-size: 24px; }
.bold { font-weight: 700; }
.tall { line-height: 2; }
.wide { letter-spacing: .25em; text-transform: uppercase; }5. Контрастная карточка с акцентом
Фон, текст и ссылка-акцент должны читаться вместе.
«Хороший контраст — это когда текст читается без усилий, даже искоса».
— читать источник.quote-card {
background-color: #0f766e;
color: #ecfeff;
padding: 2rem;
border-radius: 1rem;
}
.quote-card a {
color: #fef08a;
}line-height, color или font-size прямо в панели — результат обновится мгновенно.