Принцип каскада
Один из основных принципов работы CSS. Стили читаются и применяются сверху вниз.
Время чтения: 6 мин
Открыть/закрыть навигацию по статье
- Источники правил
- Область видимости
- Специфичность
- Порядок в коде
- Влияние на каскад ��
- Начальное значение — initial
- Заимствование у родителя — inherit
- Отмена значения — unset
- Сброс значения — revert
- Николай Лопин советует
- Realetive советует
Контрибьюторы:
Обновлено 27 марта 2023
Если вы так боитесь каскада, что отказываетесь его изучать, вы не понимаете веба и лучше вам посмотреть в сторону чего-нибудь попроще в другой области кодинга. Спасибо, что прослушали мой доклад для фронтендеров.
Каскад — одно из важнейших понятий в CSS. Само название CSS — Cascading Style Sheets, «каскадные таблицы стилей» явно упоминают это неочевидное определение.
Каскад — не специфичность!
Точнее, в определении каскада принимает участие не только специфичность, но и в первую очередь источник этих правил и область видимости. Также имеет важное значение порядок в коде (какие свойства были объявлены «позже», те «важнее»).
Источники правил
Скопировать ссылку «Источники правил» Скопировано
Чем выше — тем «важнее»:
- Стили во время CSS-переходов ( transition );
- Браузерные стили с !important ;
- Пользовательские стили с !important ;
- Авторские (мы с вами пишем именно эти стили) стили с !important ;
- Стили во время анимаций ( animation );
- Обычные (т. е. без !important ) авторские стили;
- Обычные пользовательские стили;
- Обычные браузерные стили.
Иногда браузеры нарушают этот порядок — порой осознанно (например, могут запретить делать слишком мелкий шрифт в полях ввода, как это делал Google Chrome) или по ошибке (до недавнего времени стили при анимации перекрывали остальные стили только в Firefox).
Область видимости
Скопировать ссылку «Область видимости» Скопировано
Со свойствами, описанными через классические CSS-селекторы (классы, теги, id, атрибуты) иначе — чем точнее мы описываем правило для селектора, тем сильнее мы суживаем область видимости (т. е. как бы точнее прицеливаемся), тем самым увеличивая и приоритетность правила. Но это работает до тех пор, пока CSS-правило не содержит «подлого» !important . Именно поэтому их использование считается плохой практикой — они «меняют правила игры». Это правило мгновенно становится приоритетнее, но чем шире область видимости — тем оно важнее ��
Специфичность
Скопировать ссылку «Специфичность» Скопировано
Установим цвет текста абзаца в красный:
p color: red;> Цвет текста будет красным — единственное правило описано в теге <style>.style> p color: red; > style> p> Цвет текста будет красным — единственное правило описано в теге <style>. p>Теперь переопределим цвет текста более специфичным инлайн-правилом:
p color: red;> Цвет текста стал синим — инлайн «перебивает» <style>.style> p color: red; > style> p style="color: blue"> Цвет текста стал синим — инлайн «перебивает» <style>. p>Повысим специфичность, добавив !important в правила селектора:
p color: red !important;> Цвет текста снова стал красным за счёт !important в <style>.style> p color: red !important; > style> p style="color: blue"> Цвет текста снова стал красным за счёт !important в <style>. p>Последний «шанс» разработчику повлиять на правило — добавить !important в инлайн-стиль:
p color: red !important;> Цвет текста снова синий — !important инлайн-правила «перебивает» даже !important в <style>.style> p color: red !important; > style> p style="color: blue !important"> Цвет текста снова синий — !important инлайн-правила «перебивает» даже !important в <style>. p>Инлайн-стили и !important — крайние меры влияния на стилизацию, правильнее описывать стили в селекторах в файлах. Но разные правила можно описать так, что они будут претендовать на одну и ту же сущность (тег и его содержимое). В этом случае на применимость правила будет влиять специфичность, т. е. тип (тег, класс, id, атрибуты и псевдоклассы) и их совокупность и комбинации. Самый простой способ разобраться в этом разнообразии — использовать так называемый калькулятор специфичности. Можно воспользоваться одним из множества онлайн-сервисов:
- Specificity Calculator
- CSS Specificity calculator | Polypane Browser for Developers
- CSS Specificity Calculator. * CodeCaptain
Подробнее про специфичность можно прочитать в статье «Специфичность».
Порядок в коде
Скопировать ссылку «Порядок в коде» Скопировано
Тут ещё проще — при равной специфичности правила, написанные ниже по ходу чтения переопределяют написанное выше:
.color_red /* Определяем начальное значение */ color: red;> .color_red /* Переопределяем написанное ранее правило */ color: blue;>Цвет текста — синий!
style> .color_red /* Определяем начальное значение */ color: red; > .color_red /* Переопределяем написанное ранее правило */ color: blue; > style> p class="color_red">Цвет текста — синий!p>Влияние на каскад ��
Скопировать ссылку «Влияние на каскад ��» Скопировано
Помимо знания как и где написать селектор, можно управлять каскадом с помощью CSS-свойств!
Начальное значение — initial
Скопировать ссылку «Начальное значение — initial» Скопировано
Любое CSS-правило можно сбросить на начальное значение — то, которое было у правила до того как было установлено явно разработчиком. color станет #000 , position — static , display — inline , padding и margin — 0 и так далее.
Даже если для тега какое-то свойство имеет конкретное значение (например, для по умолчанию браузером ставится display : block ), установка initial выставит именно дефолтное значение без учёта значения для тега (то есть для свойство display : initial вычислится как inline ).
Заимствование у родителя — inherit
Скопировать ссылку «Заимствование у родителя — inherit» Скопировано
Некоторые свойства наследуются от родителя автоматически ( color , font , text — align и другие). Но можно и явно позаимствовать какое-то значение у родителя:
div class="wrapper"> div class="inner">div> div>.wrapper background-color: #2E9AFF; border: 10px solid #FFFFFF;> .inner background-color: #F498AD; border: inherit;>.wrapper background-color: #2E9AFF; border: 10px solid #FFFFFF; > .inner background-color: #F498AD; border: inherit; >Отмена значения — unset
Скопировать ссылку «Отмена значения — unset» Скопировано
По своему поведению unset чем-то похож на initial + inherit — если это свойство ненаследуемое от родителя — оно сбросится до начального значения, наследуемое — получит значение родителя.
Сброс значения — revert
Скопировать ссылку «Сброс значения — revert» Скопировано
Это менее строгий режим сброса — он отменяет все установленные разработчиком значения для данного свойства до значения, которое считается браузером «значением по умолчанию».
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� В CSS есть такое волшебное свойство — all — это своеобразный шорткат (сокращённый формат записи), который внутри себя содержит все-все CSS-свойства. В сочетании с initial , inherit , unset или revert это позволяет повлиять на каскад в одну строчку.
Все наследуемые свойства .widget и вложенных элементов будут сброшены:
.widget all: revert;>.widget all: revert; >На практике
Скопировать ссылку «На практике» Скопировано
Николай Лопин советует
Скопировать ссылку «Николай Лопин советует» Скопировано
�� Если вы знакомы с JavaScript, то каскад можно представить как создание объекта через спред-синтаксис на основе приоритета стилей:
const styles = . inheritedStyles, . tagStyles, . classStyles, . idStyles, . inlineStyles, . importantStyles, . transitionStyles>const styles = . inheritedStyles, . tagStyles, . classStyles, . idStyles, . inlineStyles, . importantStyles, . transitionStyles >+ Развернуть
Realetive советует
Скопировать ссылку «Realetive советует» Скопировано
�� Понимание каскада — один из ключевых моментов в понимании работы CSS. С опытом вы научитесь так эффективно писать селекторы и группировать стили, что сам уровень каскада будет минимальным — это ускоряет «чтение» кода и упрощает поддержку. Ну и в идеале — исключить необходимость использования !important .
Что такое каскадность в css
Когда к определенному элементу применяется один стиль, то все относительно просто. Однако если же к одному и тому же элементу применяется сразу несколько различных стилей, то возникает вопрос, какой же из этих стилей будет в реальности применяться?
В CSS действует механизм каскадности, которую можно определить как набор правил, определяющих последовательность применения множества стилей к одному и тому же элементу.
К примеру, у нас определена следующая веб-страница:
Каскадность стилей в CSS3 Для просмотра подробной информации пройдите по ссылке: Основы CSS 3
В CSS определено три стиля и все они применяются к ссылке.
Если к элементу веб-страницы применяется несколько стилей, которые не конфликтуют между собой, то браузер объединяет их в один стиль.
Так, в данном случае, все три стиля не конфликтуют между собой, поэтому все эти стили будут применяться к ссылке:
Если же стили конфликтуют между собой, например, определяют разный цвет текста, то в этом случае применяется сложная система правил для вычисления значимости каждого стиля. Все эти правила описаны в спецификации по CSS: Calculating a selectors specificity. Вкратце разберем их.
Для определения стиля к элементу могут применяться различные селекторы, и важность каждого селектора оценивается в баллах. Чем больше у селектора пунктов, тем он важнее, и тем больший приоритет его стили имеют над стилями других селекторов.
- Селекторы тегов имеют важность, оцениваемую в 1 балл
- Селекторы классов, атрибутов и псевдоклассов оцениваются в 10 баллов
- Селекторы идентификаторов оцениваются в 100 баллов
- Встроенные inline-стили (задаваемые через атрибут style ) оцениваются в 1000 баллов
Каскадность стилей в CSS3 Основы CSS 3Здесь к ссылке применяется сразу три стиля. Эти стили содержат два не конфликтующих правила:
font-size: 20px; font-weight: bold;
которые устанавливают высоту шрифта 20 пикселей и выделение ссылки жирным. Так как каждое из эти правил определено только в одном стиле, то в итоге они будут суммироваться и применяться к ссылке без проблем.
Кроме того, все три стиля содержат определение цвета текста, но каждый стиль определяет свой цвет текста. Так как селекторы идентификаторов имеют больший удельный вес, то в конечном счете будет применяться темно-синий цвет, задаваемый селектором:
#index
Если селектор является составным, то происходит сложение баллов всех входящих в селектор подселекторов. Так, рассмотрим следующий пример:
В CSS определено аж пять различных селекторов, которые устанавливают цвет ссылок. В итоге браузер выберет селектор #menu a и окрасит ссылки в темно-синий цвет. Но почему, на каком основании браузер выберет этот селектор?
Рассмотрим, как у нас будут суммироваться баллы по каждому из пяти селекторов:
CSS: Каскадность
Каскадность — это особенность CSS, с помощью которой браузер определяет значения каких свойств будут применены к элементу при возникновении конфликта свойств. Конфликт свойств возникает, когда для элемента определено несколько правил, селекторы которых имеют одинаковую специфичность и они содержат одинаковые свойства, но с разными значениями.
Каскадность работает следующим образом: если в таблице стилей для одного элемента определено несколько правил, селекторы которых имеют одинаковую специфичность и они содержат конфликтующие свойства то, для элемента устанавливаются значения конфликтующих свойств того правила, которое расположено ниже в таблице стилей:
Название документа Цвет текста абзаца зелёный.
Если разные правила для одного элемента содержат свойства, которые не конфликтуют, то они объединяются в один стиль, т.е. каждое новое правило добавляет новую информацию о стиле к тому правилу, которое находится выше:
h1 < color: gray; font-family: sans-serif; >h1
Код, расположенный в примере выше, равносилен коду в примере ниже, в котором все три свойства указаны в одном правиле:
Обычно дополнительные правила для элемента указываются в тех случаях, когда был задан один стиль сразу для нескольких элементов, но помимо этого необходимо добавить что-то ещё для определённого элемента:
h1, h2, h3 < /* одинаковый стиль для трёх элементов */ color: gray; font-family: sans-serif; >/* дополнительное правило для заголовков второго уровня */ h2
С этой темой смотрят:
- CSS селекторы
- Наследование стилей
- Специфичность (приоритет) CSS селекторов
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2024 © puzzleweb.ru | razumnikum.ruКаскадность в CSS: как высчитываются приоритеты (специфичность) стилей
CSS — это каскадные таблицы стилей (Cascading Style Sheets). Каскадность — это главный принцип css — это приоритет одних правил/стилей над другими. Когда одни стили перебивают другие. Это понятие также называется «специфичность селектора».
Читайте также о специфичности: https://developer.mozilla.org/ru/docs/Web/CSS/Specificity
- Все CSS селекторы.
- Типы селекторов.
- CSS Функции.
При вычислении приоритета браузер определяет «Вес» каждого CSS правила, который складывается из веса отдельных селекторов этого правила. Стили менее весомых правил перебиваются стилями более весомых. В результате элемент получает собранные стили от самых «весомых» правил. Все это и есть каскадность.
Таблица веса (числа) для каждого селектора:
Тип селектора Описание селектора Вес (число) * универсальный селектор 0 div тег 1 :first-letter псевдо-элемент 1 .text класс 10 :hover псевдо-класс 10 [атрибут=»значение»] селектор атрибута 10 #content селектор по id 100 style=»color:red;» стили в style атрибуте 1000 !important суффикс увеличения веса 10000 Из правил с одинаковым весом выбираются те, которые ближе к концу HTML страницы (ниже в коде).
Пример подсчета веса (вес представляет из себя число):
#content .text p < color:red; >/* 100 + 10 + 1 = 111 */ .text p < color:blue; >/* 10 + 1 = 11 */
Тег
внутри элемента .text получит стиль color:red; , а не color:blue; , потому что число 111 больше чем 11.
Теперь давайте посчитаем веса на примере:
* <> /* = 0 */ li <> /* = 1 */ li::first-line <> /* = 2 */ ul li <> /* = 2 */ ul ol + li <> /* = 3 */ ul li.red <> /* = 12 */ li.red.level <> /* = 21 */ li:not(.red)<> /* = 11 */ li:not(.red):not(.green)<> /* = 11 */ #t34 <> /* = 100 */ #content #wrap <> /* = 200 */
Считать приоритеты никогда не нужно на практике, но нужно понимать как это работают и какой из селекторов важнее остальных.
Трюк с увеличением веса. Допустим у нас есть один селектор в правиле, но нам нужно увеличить приоритет стилей, при этом не добавляя каких-то дополнительных селекторов. Сделать это можно просто продублировав селектор или добавишь селектор атрибута или псевдо-класса:
.class.class < color:blue; >/* сильнее чем .class */ .class < color:red; >img[src] < >/* вес = 11 */
Приоритет @media
Медиа правила @media ( max-width:500px ) < >не участвуют в подсчете приоритета (веса).
Поэтому они всегда должны располагаться ниже всех остальных правил, чтобы перебивать предыдущие правила с таким же весом (приоритетом).
.section < width:100%; >@media ( max-width:500px ) < .section < width:50%; >>
@media ( max-width: 500px ) < .section < width:50%; >> .section