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

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

⚡ Кратко

Делайте задания по порядку: каждое следующее опирается на предыдущее. Цель — читаемая страница с продуманной палитрой и иерархией.

Практические задания

  1. Задайте body основной цвет текста, фон, font-family и line-height.
  2. Оформите h1, h2 и обычные абзацы как иерархию.
  3. Сделайте блок с тёмным фоном и светлым текстом.
  4. Проверьте, что ссылки заметны на выбранном фоне.
  5. Ограничьте ширину текстового блока до 65–75ch.

Ожидаемый визуальный результат

К чему примерно нужно прийти (задания 1–3): иерархия заголовков + контрастная карточка.

Главный заголовок (h1)

Раздел (h2)

Абзац обычного текста. Читается легко за счёт контраста и высоты строки 1.6.

Блок с тёмным фоном и светлым текстом — заметная ссылка.
body {
  font-family: Georgia, serif;
  color: #1f2937;
  background: #f8fafc;
  line-height: 1.6;
}
.dark-block { background: #0f766e; color: #ecfeff; }
.dark-block a { color: #fef08a; }
Самопроверка: сузьте окно браузера — текст не должен растягиваться шире 70ch, а ссылка должна оставаться отличимой от обычного текста.