Урок 14. Решения: Цвета и типографика

📁 Раздел: Основы CSS ⏱️ Время изучения: ~45 мин 🎯 Сложность: Начальная
#color #background-color #rgb #hsl #font-family #font-size #font-weight #line-height #text-align #letter-spacing #max-width

⚡ Кратко

Сверяйтесь с решениями после собственной попытки, иначе практика превращается в чтение. Базу типографики задавайте у body, акценты — выделяйте не только цветом.

Эталонное решение заданий

Здесь собрана базовая типографика, иерархия и контрастный блок. Слева код — сверху результат.

Заголовок статьи

Раздел

Текст наследует цвет и шрифт от body. Ширина ограничена 70ch, поэтому строки не растягиваются.

Важная заметка: выделена фоном, рамкой и цветом — не только оттенком текста. 
body {
  font-family: Georgia, serif;
  color: #1f2937;
  background: #f8fafc;
  line-height: 1.6;
}
h1, h2 { color: #0f172a; line-height: 1.2; }
article { max-width: 70ch; }
.note {
  background: #0f766e;
  color: #ecfeff;
  border-left: 4px solid #fef08a;
  padding: 1rem;
}

Как проверять себя

  1. Начинайте типографику с body, чтобы базовые свойства наследовались.
  2. line-height: 1.5 или 1.6 обычно даёт читаемый текст.
  3. Не полагайтесь только на цвет: важные элементы выделяйте весом, размером или рамкой.
  4. Для длинного текста используйте max-width: 70ch.
Критерий готовности: вы можете изменить пример под новую задачу и объяснить, почему результат изменился.