Приоритеты стилей CSS.

Приоритет от способа подключения стилей CSS.

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

Какой из этих стилей будет приоритетнее для браузера? Какой он отобразит в итоге? 

В этой серии видеоуроков мы с вами попытаемся разобраться с этими вопросами. 

Первый пример, как браузер определяет приоритетные стили - это в зависимости от того способа подключения стилей CSS, которые вы будете использовать. 

Давайте рассмотрим такую ситуацию. У нас есть элемент абзаца. Давайте сейчас применим к этому абзацу разные стили CSS, но из разных источников и посмотрим, какой стиль в итоге будет применен для элемента.

Файл index.html

<style>
   .red {
     color:blue;
    }
</style>
...
<p class="red" style="color:green;">Абзац</p>

Файл style.css

<style>
   .red {
     color:red;
    }
</style>

В этом примере у нас есть 3 источника, в которых задается значение цвета текста для элемента абзаца с атрибутом class="red":

1 - атрибут style

2 - внутри элемента style

3 - внутри файла style.css

Самое главное, значение цвета текста, в каждом из этих источников противоречит друг другу. 

Какое значение стиля CSS в итоге будет применено к элементу? Каким цветом в итоге будет отображаться наш абзац? Зеленым, синим или красным?

Если вы откроете эту веб-страницу в браузере, вы увидите, что абзац отобразиться зеленым цветом текста.

Т.е. самым приоритетным с точки зрения подключения стилей CSS будет являться внутренний стиль, который применяется с помощью атрибута style.

Если удалить этот стиль, то более приоритетным становится стиль внутри элемента style. Это является вторым по приоритету способом применения стилей CSS.

Последним по приоритету применения стилей CSS будут являться стили внутри файла style.css.

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

Приоритет от места нахождения в коде.

Давайте рассмотрим еще один случай "конфликта" стилей CSS (когда они противоречат друг другу). Это тот случай, когда в пределах одного источника подключения файлов стилей CSS, например мы подключаем стили из файла style.css и в этом файле произошел конфликт стилей CSS: стили накладываются друг на друга.

Предположим, что файл style.css длинный и в нем есть селектор .red, но, который имеет свойства и значения, которые противоречат друг другу.

Например,

.red {
color:red;
}
…
.red {
color:blue;
}

Т.е. один и тот же селектор, одно и то же свойство color, но имеет разные значения. Какое значение в итоге будет применено к выбранному абзацу? Он станет синим или он станет красным?

Если проверить это на практике, то мы убедимся, что абзац становится синим цветом.

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

Это можно объяснить тем, что браузер выполняет код сверху вниз и сначала сделает элемент красным цветом и потом сделает его синим. В итоге в браузере отобразиться цвет текста, который будет синим.

Имейте это правило применения приоритетов стилей CSS в виду, т.к. часто приходится с этим сталкиваться, особенно в больших проектах.