Урок 14. Задания: Цвета и типографика
⚡ Кратко
Делайте задания по порядку: каждое следующее опирается на предыдущее. Цель — читаемая страница с продуманной палитрой и иерархией.
Практические задания
- Задайте
bodyосновной цвет текста, фон,font-familyиline-height. - Оформите
h1,h2и обычные абзацы как иерархию. - Сделайте блок с тёмным фоном и светлым текстом.
- Проверьте, что ссылки заметны на выбранном фоне.
- Ограничьте ширину текстового блока до 65–75
ch.
Ожидаемый визуальный результат
К чему примерно нужно прийти (задания 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, а ссылка должна оставаться отличимой от обычного текста.