Codebra
25 января 2026 в 19:03

Урок 20. Каскад в CSS

Что такое каскад в CSS? Немного о приоритете в CSS. Практика
📝

Внимание! На этой странице вы найдете материал урока из архивного курса по CSS. Курс был написан в 2015 и по-прежнему актуален для начинающих веб-разработчиков.

Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.

Полный список уроков доступен по тегу Архивный курс по CSS и на странице первого урока.

📋 Задание
  • Измените CSS код так, чтобы абзац стал зеленого цвета. НЕЛЬЗЯ радактировать правила, МОЖНО только менять их местами.

Что же происходит, когда к одному элементу применяются два правила с одинаковой специфичностью. Допустим, у нас есть вот такой CSS код:

h1 { color: blue; }
h1 { color: green; }

Специфичность у них равная. Так какое же правило будет применено? Будет применено то, которое стоит позже. В нашем примере будет применено второе правило и заголовок станет зеленого цвета.

Рассмотрим следующий пример, в котором появляется новое для вас - !important.

h1 { color: blue !important; }
h1 { color: green; }

Теперь выигрывает то правило, у которого написан importantimportant повышает приоритет стиля. Но если написан important к обоим стилям, то выиграет тот, который стоит после.

h1 { color: blue !important; }
h1 { color: green !important; }
📝

Переходите к следующему уроку курса, а так же не забудьте посмотреть новый материал на Codebra по тегу CSS.