Рассмотрим пример, у нас есть html код:
К этому коду прикреплен следующий css-стиль:
Получается, что цвет для параграфа определен два раза, причем разный. Встает вопрос - "Какого же цвета будет текст в параграфе? Какому из стилей отдаст предпочтение браузер?".
На этот вопрос и призван ответить этот урок. Так же здесь мы коснемся других тонкостей, касаемых приоритетов стилей, кроме показанного в примере.
Небольшое отступление, для тех, кто не знает, что делает !important в CSS, для этого вы можете прочитать нашу статью здесь.
Для начала давайте определим возможные варианты указания стилей:
- Стиль указан в самом тэге
- Стиль указан в самом тэге с пометкой !important
- Стиль указан в CSS формате
- Стиль указан в CSS формате с пометкой !important
Теперь рассмотрим варианты конфликтов стилей:
- В самом тэге указан один и тот же стиль два и более раз, применятся будет самый последний стиль.
- В самом тэге указан один и тот же стиль несколько раз, среди которых есть один с пометкой !important, применятся будет стиль с этой пометкой.
- Стиль указан в самом тэге и в формате CSS, применятся будет стиль, указанный в тэге.
- Стиль указан в самом тэге и в формате CSS с пометкой !important, применятся будет тот стиль, который указан в CSS с пометкой !important.
- В самом тэге указан один и тот же стиль несколько раз, все с пометкой !important, применится самый последний из таких стилей.
- В самом тэге указан стиль с пометкой !important и в CSS формате, применится стиль, указанный в самом тэге с пометкой !important.
- В самом тэге указан стиль с пометкой !important и в CSS формате с пометкой !important, применится стиль, указанный в самом тэге с пометкой !important.
- Стиль указан в CSS формате несколько раз, применится последний из таких стилей.
- Стиль указан в CSS формате и в CSS формате, с пометкой !important, применится стиль с пометкой !important.
- Стиль указан несколько раз в CSS формате с пометкой !important, применится последний из таких стилей.
Из сказанного выше можно вынести несколько правил, чтобы можно было проще запомнить, по приоритету стили идут так:
- Стиль указан в самом тэге с пометкой !important
- Стиль указан в CSS формате с пометкой !important
- Стиль указан в самом тэге
- Стиль указан в CSS формате
- При этом, если на каждом уровне встречаются несколько объявлений стилей, применится последний из них. Последним считается, тот который встречается в полном коде самый нижний и правый по отношению к остальным.
Тест
- Задан следующий HTML-код:
CSS-код:
Какого цвета будет текст?
- #ff0000
- #00ff00
- #0000ff
- Задан следующий HTML-код:
CSS-код:
Какого цвета будет текст?
- #ff0000
- #00ff00
- #ee00ee
- #0000ff
- Задан следующий HTML-код:
CSS-код:
Какого цвета будет текст?
- #00ff00
- #ee00ee
- #0000ff
1. - b
2. - c
3. - c