Урок 12. Задания: Каскад, наследование и специфичность

📁 Раздел: Основы CSS ⏱️ Время изучения: ~45 мин 🎯 Сложность: Начальная
#p #hover #style

⚡ Кратко

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

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

  1. Три правила на один абзац. Создайте <p class="text" id="lead"> и три правила: по тегу, классу и id с разными цветами.
    Ожидаемый результат: абзац окрашен в цвет из #lead (id (0,1,0,0) сильнее класса и тега).
  2. Предскажите победителя без браузера. Посчитайте специфичность каждого правила из задания 1 как (inline, id, class, tag) и запишите ответ. Затем проверьте в браузере.
  3. Поменяйте порядок. Сделайте два правила .tag с одинаковой специфичностью и разным фоном. Поменяйте их местами.
    Ожидаемый результат: цвет фона меняется на тот, что в нижнем правиле.
  4. Проверьте наследование. Задайте color и font-family на родительском блоке.
    Ожидаемый результат: вложенные абзацы получают цвет и шрифт без собственных правил; а border родителя у детей не появляется.
  5. Уберите !important. Из готового фрагмента с двумя !important удалите оба и добейтесь того же вида через обычные классы и порядок.
    Ожидаемый результат: картинка та же, но код переопределяется без «гонки ставок».
Подсказка: разбор всех пяти заданий с живыми превью — в разделе «Решения».