---

1. Продолжайте работу в проекте из задания 7. Сначала эксперимент
с каскадом: напишите три правила для одного и того же заголовка
— по тегу, по классу и по идентификатору — с разными цветами и
проверьте, какой цвет победил. Объясните себе почему.
2. Переставьте правила в файле местами и убедитесь, что при равной
специфичности побеждает нижнее правило.

Основы HTML и CSS · учебный практикум

24

3. Создайте шапку страницы: тег <header> с классом .site-header,
внутри — название сайта. Задайте position: sticky; top: 0; и тёмный
фон (#162235), белый цвет текста, внутренние отступы по 16
пикселей.
4. Прокрутите страницу: шапка должна оставаться наверху. Если не
залипает — проверьте, что у родителя нет overflow: hidden, и что у
самой шапки заданы top и фон.
5. Добавьте на карточку из задания 7 маленький бейдж «Новое»:
внутри карточки тег <span class="badge">Новое</span> со стилями
position: absolute; top: -10px; right: -10px;. Самой карточке задайте
position: relative;, иначе бейдж привяжется к странице.
6. Закрепите внизу экрана кнопку «Наверх» (.to-top { position: fixed;
bottom: 24px; right: 24px; }) и свяжите её с якорем #top из задания 3.