Урок №3. Приоритеты применения стилей

Рассмотрим пример, у нас есть html код:

<p style="color:#ff0000">Какого цвета будет этот текст?</p>

К этому коду прикреплен следующий css-стиль:

p {color:#00ff00;}

Получается, что цвет для параграфа определен два раза, причем разный. Встает вопрос - "Какого же цвета будет текст в параграфе? Какому из стилей отдаст предпочтение браузер?".

На этот вопрос и призван ответить этот урок. Так же здесь мы коснемся других тонкостей, касаемых приоритетов стилей, кроме показанного в примере.

Небольшое отступление, для тех, кто не знает, что делает !important в CSS, для этого вы можете прочитать нашу статью здесь.

Для начала давайте определим возможные варианты указания стилей:

1. Стиль указан в самом тэге

   <p style="color:#ff0000;">Какого цвета будет этот текст?</p>

2. Стиль указан в самом тэге с пометкой !important

   <p style="color:#ff0000!important;">Какого цвета будет этот текст?</p>

3. Стиль указан в CSS формате

   p {color:#00ff00;}

4. Стиль указан в CSS формате с пометкой !important

   p {color:#00ff00!important;}

Теперь рассмотрим варианты конфликтов стилей:

1. В самом тэге указан один и тот же стиль два и более раз, применятся будет самый последний стиль.
2. В самом тэге указан один и тот же стиль несколько раз, среди которых есть один с пометкой !important, применятся будет стиль с этой пометкой.
3. Стиль указан в самом тэге и в формате CSS, применятся будет стиль, указанный в тэге.
4. Стиль указан в самом тэге и в формате CSS с пометкой !important, применятся будет тот стиль, который указан в CSS с пометкой !important.
5. В самом тэге указан один и тот же стиль несколько раз, все с пометкой !important, применится самый последний из таких стилей.
6. В самом тэге указан стиль с пометкой !important и в CSS формате, применится стиль, указанный в самом тэге с пометкой !important.
7. В самом тэге указан стиль с пометкой !important и в CSS формате с пометкой !important, применится стиль, указанный в самом тэге с пометкой !important.
8. Стиль указан в CSS формате несколько раз, применится последний из таких стилей.
9. Стиль указан в CSS формате и в CSS формате, с пометкой !important, применится стиль с пометкой !important.
10. Стиль указан несколько раз в CSS формате с пометкой !important, применится последний из таких стилей.

Из сказанного выше можно вынести несколько правил, чтобы можно было проще запомнить, по приоритету стили идут так:

1. Стиль указан в самом тэге с пометкой !important
2. Стиль указан в CSS формате с пометкой !important
3. Стиль указан в самом тэге
4. Стиль указан в CSS формате

• При этом, если на каждом уровне встречаются несколько объявлений стилей, применится последний из них. Последним считается, тот который встречается в полном коде самый нижний и правый по отношению к остальным.