Что такое каскад в css
Cascade
Каскадность это алгоритм, который определяет как совмещать и сочетать значения свойств происходящих из различных источников(CSS-правила могут располагаться как в самом веб-документе, так и во внешних файлах). Данный алгоритм лежит в основе CSS, как можно понять из его названия: Cascading Style Sheets(Каскадные Таблицы Стилей). Данная статья объясняет что такое каскадность, порядок в котором определяется какие свойства будут в конечном итоге выполнены и как это затрагивает вас, веб разработчика.
What CSS entities participate in the cascade
Finally note that @import (en-US) and @charset (en-US) obey specific algorithms and aren’t affected by the cascade algorithm.
Origin of CSS declarations
The CSS cascade algorithm wants to select CSS declarations to set the correct value for CSS properties. CSS declarations originate from different origins:
Though style sheets come from these different origins, they overlap in scope: the cascade algorithm defines how they interact.
Cascading order
The cascading algorithm determines how to find the value to apply for each property for each document element.
CSS animations and the cascade
CSS Animations, using @keyframes (en-US) at-rules defines animations between states. Keyframes don’t cascade, meaning that at any time CSS takes values from one single @keyframes and never mixes several of them.
When several keyframes are appropriate, it chooses the latest defined in the most important document, but never combined all together.
Example
User-agent CSS:
Author CSS 1:
Author CSS 2:
User CSS:
HTML:
So three declarations are in competition:
The last one is ignored (on a screen), and the two first have the same selector, hence the same specificity: it is the last one that is then selected:
Note that the declaration defined in the user CSS, though having a greater specifity, is not chosen as the cascade algorithm is applied before the specifity algorithm.
Каскадирование
Аббревиатура CSS расшифровывается как Cascading Style Sheets (каскадные таблицы стилей), где одним из ключевых слов выступает «каскад». Под каскадом в данном случае понимается одновременное применение разных стилевых правил к элементам документа — с помощью подключения нескольких стилевых файлов, наследования свойств и других методов. Чтобы в подобной ситуации браузер понимал, какое в итоге правило применять к элементу, и не возникало конфликтов в поведении разных браузеров, введены некоторые приоритеты.
Ниже приведены приоритеты браузеров, которыми они руководствуются при обработке стилевых правил. Чем выше в списке находится пункт, тем ниже его приоритет, и наоборот.
Самым низким приоритетом обладает стиль браузера — оформление, которое по умолчанию применяется к элементам веб-страницы браузером. Это оформление можно увидеть в случае «голого» HTML, когда к документу не добавляется никаких стилей.
Как задавать пользовательский стиль рассказывалось в главе 1 (см. рис. 1.3 и 1.4).
!important
При использовании пользовательской таблицы стилей или одновременном применении разного стиля автора и пользователя к одному и тому же селектору, браузер руководствуется следующим алгоритмом.
Повышение важности требуется не только для регулирования приоритета между авторской и пользовательской таблицей стилей, но и для повышения специфичности определенного селектора.
Специфичность
Если к одному элементу одновременно применяются противоречивые стилевые правила, то более высокий приоритет имеет правило, у которого значение специфичности селектора больше. Специфичность это некоторая условная величина, вычисляемая следующим образом. За каждый идентификатор (в дальнейшем будем обозначать их количество через a) начисляется 100, за каждый класс и псевдокласс (b) начисляется 10, за каждый селектор тега и псевдоэлемент (c) начисляется 1. Складывая указанные значения в определённом порядке, получим значение специфичности для данного селектора.
Если два селектора имеют одинаковую специфичность, то применяться будет тот стиль, что указан в коде ниже.
В примере 19.1 показано, как влияет специфичность на стиль элементов списка.
Пример 19.1. Цвет списка
HTML5 CSS 2.1 IE Cr Op Sa Fx
Пример 19.2. Изменение специфичности
Добавление идентификатора используется не только для изменения специфичности селектора, но и для применения стиля только к указанному списку. Поэтому понижение специфичности за счёт убирания идентификатора применяется редко, в основном, повышается специфичность нужного селектора.
Вопросы для проверки
1. Какая специфичность будет у селектора table.forum tr:hover p?
Каскадность в CSS — Основы современной вёрстки
В прошлом уроке была разобрана вторая часть словосочетания Каскадные таблицы стилей, а именно таблицы стилей. Мы изучили, как записываются и применяются стили к различным HTML элементам. В этом уроке поговорим о значении слова каскадные.
Что такое каскадность? Представьте себе каскад водопадов. В них вода перетекает из одного водопада в другой и так до тех пор, пока это всё не уйдёт в общий бассейн.
В CSS слово каскадность имеет такое же значение. В качестве воды у нас CSS свойства. Они могут накладываться и перекрывать друг друга. Другими словами каскадность — возможность языка CSS накладывать свойства друг на друга, а также расширять свойства в селекторах.
Возможно такое описание достаточно сложное, но давайте посмотрим на примере. Создадим параграф с двумя классами: text-bold и text-dark. Первый класс будет отвечать за жирное начертание текста, а второй за установку тёмного цвета шрифта. Также добавим селектор по тегу и укажем размер шрифта 24 пикселя.
В CSS файле укажем следующие стили:
Попробуйте воспроизвести этот пример и вы увидите, что текст выводится тёмного цвета и с жирным начертанием. Стили от классов text-bold и text-dark сложились и применились к нашему параграфу. Также текст имеет размер 24 пикселя, которые мы указали для селектора по тегу.
Итоговыми стилями для нашего параграфа будут:
Это и есть каскадность стилей CSS. Хоть мы и использовали разные селекторы и классы для описания, но в конечном итоге они суммировались.
Приоритет селекторов
Важной чертой CSS является то, что разные типы селекторов имеют разный приоритет. Если стили противоречат друг другу в разных селекторах, то вступает в дело принцип приоритета. Разберём на примере. Возьмём параграф с классом red и идентификатором blue. Установим соответствующие цвета для текста. Для всех же параграфов в тексте установим зелёный цвет.
Перед тем, как читать дальше попробуйте выполнить этот пример в любом удобном вам месте.
Как вы смогли заметить, текст параграфа будет синим. Но почему так? Может быть дело в том, что синий цвет в CSS указан самым последним? В данном случае нет. Даже если мы переместим селектор по идентификатору в самый вверх, параграф всё равно останется синим.
Всё дело в том, что селектор по идентификатору имеет самый высокий приоритет. Встретив его — браузер будет считать эти стили самыми важными для страницы и в случае противоречий возьмёт значение в первую очередь из стилей для идентификатора.
Условно можно расставить селекторы в следующем порядке по приоритету:
Где 1 — самый высокий приоритет, а 3 — самый низкий.
Разберём ещё один пример:
После всех таких преобразований итоговые стили для параграфа сложатся следующим образом:
Важно: так как селектор по идентификатору имеет самый высокий приоритет и перебивает все стили классов, то его использование считается не очень хорошей практикой. Указав стили для идентификатора мы лишаем себя возможности переопределить стили с помощью классов. Это бывает очень важно для создания отзывчивых к действиям пользователя сайтов, когда на его действия мы меняем внешний вид некоторых элементов.
Переопределение свойств
Возможно у вас возник вопрос, а что случится, если элемент будет иметь несколько классов, свойства которых противоречат друг другу? Здесь каскадность работает по принципу «Кто последний, тот и прав». Проще всего это так же посмотреть на примере.
Отталкиваясь от принципа каскадности, браузер вначале увидит селектор .alert и установит серый цвет текста. Далее ему встретится селектор .alert-error, который говорит установить красный цвет. И браузер просто перезапишет серый цвет на красный. Порядок классов в HTML в данном случае не играет никакой роли. Даже в таком случае
цвет текста будет красным. Это наглядно показывает независимость CSS от HTML. Если же поменять местами селекторы в CSS, то поменяются и итоговые стили.
Дополнительное задание
Создайте файлы index.html и style.css на своём компьютере.
Внутри HTML расположите следующую запись:
и следующие CSS стили:
Проанализируйте получившийся результат.
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты.
Принцип каскада
Время чтения: 6 мин
Обновлено 12 ноября 2021
Если вы так боитесь каскада, что отказываетесь его изучать, вы не понимаете веба и лучше вам посмотреть в сторону чего-нибудь попроще в другой области кодинга. Спасибо, что прослушали мой доклад для фронтендеров.
Каскад — одно из важнейших понятий в CSS. Само название CSS — Cascading Style Sheets, «каскадные таблицы стилей» явно упоминают это неочевидное определение.
Каскад — не специфичность!
Точнее, в определении каскада принимает участие не только специфичность, но и в первую очередь источник этих правил и область видимости. Также имеет важное значение порядок в коде (какие свойства были объявлены «позже», те «важнее»).
Источники правил
Чем выше — тем «важнее»:
Иногда браузеры нарушают этот порядок — порой осознанно (например, могут запретить сделать слишком мелкий шрифт в полях ввода, как это делал Google Chrome) или по ошибке (до недавнего времени стили при анимации перекрывали остальные стили только в Firefox).
Область видимости
Специфичность
Самая простое и очевидное понятие в определении каскада. Когда мы описываем стили (инлайном в теге или на селектор в
Цвет текста будет красным — единственное правило описано в теге
Цвет текста стал синим — инлайн «перебивает»
Цвет текста — синий!
Скопировать Скопировано Не удалось скопировать
Влияние на каскад 👻
Помимо знания «как» и «где» написать селектор, можно управлять каскадом с помощью CSS-свойств!
Начальное значение — initial
Даже если для тега какое-то свойство имеет конкретное значение (например, для
Заимствование у «родителя» — inherit
Отмена значения — unset
По своему поведению unset чем-то похож на initial + inherit — если это свойство ненаследуемое от родителя — оно «сбросится» до начального значения, наследуемое — получит значение «родителя».
Сброс значения — revert
Это менее «строгий» режим сброса — он отменяет все установленные разработчиком значения для данного свойства до значения, которое считается браузером «значением по умолчанию».
Подсказки
На практике
Realetive
Каскадность CSS. Приоритеты стилей
В данной главе подробно объясняется, почему каскадные таблицы стилей (Cascading Style Sheets, CSS) называются каскадными. Для начала давайте вспомним, какими способами можно добавить стиль на веб-страницу:
Это – один из способов управлять значимостью стилей. Еще один способ повысить приоритет – специально увеличить вес селектора, например, добавив к нему ID или класс.
Сброс стилей с помощью reset.css
В предыдущей главе мы уже упоминали о том, что у каждого браузера есть свои встроенные стили HTML-документов, созданные для улучшения читабельности. Вы наверняка уже видели, как выглядит «голая» веб-страница в браузере: синие подчеркнутые ссылки, черный шрифт, полужирное начертание заголовков и т. д.
Каждый браузер имеет свои отличия во встроенных стилях: например, в IE нет отступа от верхнего края окна, а в Firefox есть. Таких отличий существует много. Чтобы они не создавали помех для кроссбраузерности при написании собственного стиля CSS, можно воспользоваться методом сброса встроенных стилей.
Инструмент для сброса стилей – это, по сути, та же самая таблица CSS, где описаны правила, которые сбрасывают встроенные стили браузеров, устанавливая базовые значения свойств. Называется такая таблица reset.css и служит для того, чтобы вы могли начать создавать стиль «с нуля». Вот пример стандартной таблицы сброса:
Этот вариант таблицы Reset.css разработал известный опытный специалист по стандартам HTML и CSS Эрик Мейер. Он работает в области веб-технологий с 1993 года и является автором многих книг по CSS.
Конечно же, существуют и другие вариации Reset CSS, например, более популярный сейчас Normalize.css, который, в отличие от Reset CSS, сохраняет много полезных стилей по умолчанию, а не стирает их начисто. Это удобно, поскольку избавляет от необходимости вновь объявлять стили для многих стандартных элементов.
Если требуется, вы и сами можете создать свой файл сброса стилей, исходя из ваших потребностей.
А сейчас вкратце о том, что делает вышеприведенная таблица сброса стилей:
Файл сброса стилей необходимо подключать раньше, чем собственные стили. Если вы внимательно читали абзац о приоритетах, то уже поняли, почему reset.css должен находиться перед другими стилями: потому что правила, указанные ниже в коде, перезаписывают правила, объявленные ранее.
Итоги
Каскадность в CSS – это способность стилевых правил накладываться друг на друга, перезаписывать и смешиваться. Итоговый стиль элемента, который виден в браузере – это комбинация нескольких последовательно примененных стилей.
При конфликте нескольких стилей срабатывает правило приоритетов. Предпочтение отдается тому стилю, который считается более значимым.
Необходимо знать, как работают правила распределения приоритетов между стилями, чтобы создавать грамотные таблицы стилей.
Первая часть нашего учебника подошла к концу. Второй раздел книги мы начнем с изучения CSS шрифтов, веб-шрифтов и способов их подключения.