CSS урок 3. Каскадирование и принципы приоритетности
В данном посте мы разбирем такую особенность CSS, как каскадность и приоритетность. Из урока по наследованию вы наверняка помните, что для одного и того же элемента веб-страницы может быть применено несколько правил. Значит, браузер должен как-то решить, какое правило будет наиболее приоритетным для конкретной ситуации. А решает он это с помощью специальной системы, которая, как неудивительно называется каскадностью.
Тема эта очень важна и ее правильное понимание является необходимым условием для продуктивной работы с каскадными таблицами стилей. Поэтому постарайтесь максимально сконцентрироваться в ближайшие 20 минут, чтобы с первого раза освоить материал.
Видеоверсия:
[iframe id="https://www.youtube.com/embed/LUr8nppME7g?rel=0&vq=hd720" align="center" mode="normal" autoplay="no" maxwidth="1280"]
Объединение унаследованных стилей
Так уж сложилось, что вложенные элементы обычно наследуют свойства у своих родителей и предков. Рассмотрим следующую ситуацию:
body { font-family: Arial; }
p { font-size: 16px; }
em { color: blue; }
В примере выше мы задали семейство шрифта общему предку (body), размер - абзацам (p), и цвет - тегу em. На самой веб-странице мы увидим содержимое тега em шрифтом в 16px, семейства Arial и синего цвета. В нашем случае шрифт и размер были унаследованы от предка и родителя соответственно.
Значит, вложенные элементы могут наследовать неконфликтующие свойства. Но что произойдет, если мы зададим одно и то же свойство с разными значениями родителю и предку?
Преимущество имеет ближайший родительский элемент
Рассмотрим следующие правила оформления для главного тега страницы и всех абзацев:
body { color: green; }
p { color: red; }
Как вы думаете, каким цветом окрасится содержимое тега em, зеленым или красным? Конечно же красным (red), так как приоритет при наследовании всегда имеет свойство ближайшего родительского элемента. Учитывая вложенность тегов em в абзацы, их отображение красным цветом не вызывает удивления.
Приоритет всегда отдается конкретному стилю
А что будет, если к предыдущим правилам оформления мы зададим еще один? Например, цвет для того же тега em.
body { color: green; }
p { color: red; }
em { color: blue; }
В этом случае, вполне логично, содержимое тега окрашивается в синий цвет (blue), так как для него есть конкретный определяющий стиль. Это значит, что конкретный стиль имеет приоритет над унаследованными.
При выборе браузером стиля для элемента веб-страницы выбор всегда падает в сторону конкретного стиля. Если его нет, то браузер выбирает стиль ближайшего родительского элемента и применяет его на дочерние.
Распределение приоритетности между конкретными стилями CSS
После уяснения вышезатронутых принципов каскадности, непроизвольно возникает вопрос - "Как распределяются приоритеты между конкретными правилами?" Ведь к одному и тому же элементу можно обращаться разными способами.
Например, через селектор тегов, классов и идентификаторов. Рассмотрим следующий пример, в котором у нас есть один абзац на странице, имеющий класс 'aly' и идентификатор 'main'. Для этого абзаца мы придадим разные цвета через соответствующие селекторы.
p { color: green; }
.aly { color: red; }
#main { color: blue; }
Какое же правило возьмет верх? Ведь все они обращены к одному и тому же элементу. Не знаю, удивитесь вы или нет, но наш единственный абзац будет окрашен в синий цвет. А происходит это потому, что каждый вид обращения имеет свой уровень важности. Он хорошо показан на иллюстрации ниже.
Как видно из иллюстрации, правило применяемое через селектор тегов имеет 1 балл значимости, класс - 10, а идентификатор - 100 баллов. Самая высокая значимость присуждается встроенным стилям, имеющим 1000 единиц важности. Встроенный стиль представляет из себя CSS правило, находящееся внутри html разметки:
<p style="color: green;">Текст абзаца...</p>
При наличии подобного встроенного стиля, абзац будет окрашен в зеленый цвет (green). Однако, использование подобной техники оформления является нежелательным по двум причинам:
- html разметка не предназначена для оформления;
- могут возникнуть трудности при изменении оформления элемента, имеющего встроенный стиль, ведь любые обращения к ней через внешнюю таблицу стилей ничего не даст.
Приоритетность не имеет значения в случае наследуемых свойств.
Иногда принцип приоритетности может ввести человека в заблуждение. Например, когда элемент наследует стили у родителя, вызванного через селектор идентификаторов.
#main{ color: black; }
p { color: green; }
Из примера выше мы видим, что абзацы внутри блочного элемента с идентификатором 'main' будут окрашены в зеленый цвет (green). Хотя, на первый взгляд может показаться что правило для '#main' более важно, нужно помнить что оно обращено к div`у, а не напрямую к абзацу. И здесь срабатывает правило о более конкретном стиле, согласно которому абзацы будут окрашены в зеленый цвет. Словом, приоритетность не наследуется потомками.
В таблице ниже вы можете увидеть пример того, как могут суммироваться баллы для разных селекторов.
Последний стиль сродни окончательному решению
Может случиться так, что правила для одного и того же элемента могут иметь одинаковый балл по приоритетности. Как в этом случае поступит браузер? Какому CSS правилу он отдаст предпочтение? Рассмотрим на примере ниже.
.alive strong{ color: black; }
p .bold { color: green; }
У нас есть два форматирующих правила для одного и того же тега strong с классом bold, находящийся внутри абзаца с классом alive. Оба стиля имеют одинаковую важность - 11 баллов. Какому правилу браузер отдаст пальму первенства?
В равной схватке побеждает второе правило, так как оно указано последним, читай - является самой актуальной. Но что если у нас есть стиль, который мы хотим наверняка определить для тега strong?
У нас может быть таблица стилей внушительных размеров, по причине чего становится довольно сложно использовать селектор с правильной приоритетностью, не говоря уже о возможности наличия где-нибудь встроенных стилей. Для решения данной задачи мы можем воспользоваться значением !important. Ее необходимо прописать к необходимому свойству.
.alive strong{ color: black !important; }
При использовании такой записи все остальные свойства цвета будут игнорироваться браузером. Однако, нужно использовать данный прием с осторожностью, ведь применив его один раз, вы теряете контроль над данным свойством в будущем, пока не избавитесь от этого значения (!important).
Хитрость: гибкое использование правила последней записи
Одной из сложностей создания больших сайтов является необходимость использовать нестандартные стили для определенных страниц. То есть, для одних и тех же элементов разных страниц может понадобится использовать разные стили. Но как этого добиться?
Как вариант можно использовать правило последней (самой актуальной) записи. Например, для такой "нестандартной" страницы можно подключить отдельную таблицу стилей, содержащую особенные правила форматирования. Только нужно не забыть подключить этот файл после основной таблицы стилей, чтобы отменить предыдущие правила. Вот вам и хитрость:-)
Опасность частого использования селекторов по ID
Советую вам с осторожностью использовать селектор идентификаторов. Наличие у неё большого балла приоритетности может стать причиной проблем оформления вашего сайта. Обратите внимание на стили ниже.
#main p{ color: black; }
p.letter { color: green; }
Согласно первому правилу мы задаем черный цвет для всех абзацев внутри блока с идентификатором 'main'. Затем мы хотим выделить абзац с классом 'letter' отдельным цветом. Он находится внутри блока с идентификатором 'main'.
Но сделать это не получится по той причине, что первый стиль имеет 101 балл значимости, а второй всего лишь 11. Это пример того, какие трудности могут быть при использовании селектора по идентификатору. Можно конечно, использовать другую запись:
#main .letter { color: green; }
Однако, проблему она решает лишь частично, так как действует только на абзацы внутри блока с идентификатором 'main'. На абзацы с классом 'letter', находящиеся в других блоках она не подействует. Посему, будьте внимательны.
Итак, на этом урок по каскадности можно считать завершенным. Если есть вопросы или мысли по данной теме, буду рад видеть их в комментариях. Надеюсь, данный урок по CSS был для вас полезен. Если это так:
- Сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу;
- [popup_trigger id="3874" tag="span"]Подписывайтесь[/popup_trigger] на мою рассылку, чтобы не пропустить полезные и интересные публикации на блоге.
На этом я с вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!
