Что означает «каскадирование» в CSS?

Каково точное значение термина «каскадирование» в CSS? У меня разные взгляды, поэтому я спрашиваю здесь. Пример поможет.

«Каскадирование» в этом контексте означает, что, поскольку к определенному фрагменту HTML может применяться более одного объявления таблицы стилей, должен быть известный способ определения того, какое конкретное правило таблицы стилей применяется к определенному фрагменту HTML.

Используемое правило выбирается путем каскадного перехода от более общих объявлений к конкретному требуемому правилу. Выбирается наиболее конкретная декларация.

Когда я преподаю CSS, я всегда говорю студентам, что «каскадные таблицы стилей» означают что-то вроде « боевых таблиц стилей».

Одно правило говорит, что ваш тег H3 должен быть красным, другое правило говорит, что он зеленый - правила противоречат друг другу, кто победит !? Таблица стилей deathmatch!

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

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

Хокон Виум Ли (соавтор CSS) определяет «каскад» в своей докторской диссертации по CSS как «процесс объединения нескольких таблиц стилей и разрешения конфликтов между ними» https://www.wiumlie.no/2006/phd/

Следующая статья отлично отвечает на ваш вопрос.

Это порядок, в котором свойства применяются к определенному элементу (элементам).

http://www.blooberry.com/indexdot/css/topics/cascade.htm

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

Вы можете рассматривать обработку CSS как водопад, содержащий несколько каскадов. Вот эти каскады сверху вниз по порядку: (Нижнее значение может переопределить то же свойство в более высоком.)

1. объявления пользовательского агента
2. обычные объявления пользователя
3. автор нормальных деклараций
4. важные заявления автора
5. важные заявления для пользователей

Смотрите больше в спецификации

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

1. инициализировать массив значений;
2. применить значения из 1-го источника;
3. применить значения из 2-го источника, переопределить, если значение существует;
4. ...
5. применить значения из N-го источника, переопределить, если значения существуют;

Из псевдокода видно, что он очень похож на водопад из нескольких каскадов.

Одно уточнение, которое может помочь. Если вы включаете две таблицы стилей и в каждой есть правило с одинаковой спецификой, то побеждает та, которая была включена последней. IE, последний в каскаде имеет наибольшее влияние.

(Это просто вариант размещения двух правил на одном листе - последнее побеждает, если все остальные условия равны.)

Например, учитывая

body {
    background:blue;
}

body {
    background:green;
}

тогда фон будет зеленым.

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

Каскадирование - это процесс объединения разных таблиц стилей и разрешения конфликтов между разными правилами и объявлениями CSS, когда к определенному элементу применяется более одного правила . Потому что, как вы, вероятно, уже знаете, объявление для определенного свойства стиля, такого как размер шрифта, может появляться в нескольких таблицах стилей, а также несколько раз внутри одной таблицы стилей.

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

Теперь CSS также может поступать из разных источников. Самый распространенный - это CSS, который пишем мы, разработчики. Эти объявления, которые мы помещаем в наши таблицы стилей, называются объявлениями автора. Другим источником могут быть объявления пользователя, то есть CSS, исходящий от пользователя. Например, когда пользователь изменяет размер шрифта по умолчанию в браузере, тогда это CSS пользователя, и, наконец, что не менее важно, есть объявления браузера по умолчанию.

Например, если мы поместим тег привязки в наш HTML-код для ссылки, а затем вообще не стилизуем его, он обычно будет отображаться с синим текстом и подчеркнутым, правильно. Это называется CSS пользовательского агента, потому что он устанавливается браузером. Итак, каскад объединяет объявления CSS, поступающие из всех этих разных источников, но как каскад на самом деле разрешает конфликты, когда применяется более одного правила?

Что ж, то, что он делает, - это анализирует важность, специфичность селектора и порядок источника конфликтующих объявлений, чтобы определить, какое из них имеет приоритет, и вот как это работает. Сначала каскад начинается с предоставления конфликтующих объявлений разной важности в зависимости от того, где они объявлены в их источнике. Наиболее важные объявления - это объявления пользователей, отмеченные ключевым словом important.

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

Теперь очень часто в таблицах стилей авторов будет просто куча противоречащих друг другу правил без каких-либо важных ключевых слов. На самом деле это наиболее распространенный сценарий, и в этом случае все объявления имеют одинаковое значение. Что же происходит в этом случае? В этом случае каскад рассчитывает и сравнивает особенности селекторов объявлений, и вот как он работает.

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

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

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

А теперь давайте сравним его с другими. Следующий стиль также не является встроенным, поэтому ноль для первого. Теперь у нас действительно есть селектор идентификатора для идентификатора навигации, так что он один для идентификатора. У нас также есть два класса, тянущие вправо и кнопку, так что это два для категории классов, и, наконец, здесь также есть два селектора элементов. Элемент nav и элемент div, что означает, что их также два для категории elements. Итак, наконец, специфичность селектора - ноль, один, два, два, что на самом деле является очень специфичным селектором.

Селектор номер три очень прост. Это просто селектор элементов, поэтому его специфичность равна нулю, нулю, нулю, единице.

Теперь последний, селектор номер четыре. Сначала снова у нас есть идентификатор навигации, так что он один для идентификатора. Затем у нас есть класс, класс кнопки, а также псевдокласс, который находится при наведении курсора, что составляет всего два для категории классов. Поскольку есть еще один селектор элементов, окончательная специфичность равна нулю, единице, двум, единице.

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

Теперь, когда у обоих селекторов есть один в категории идентификаторов, мы должны двигаться дальше и проверять классы. У них обоих есть два в этой категории, но между ними все еще есть связь, и, наконец, в категории элементов у селектора два есть два, а у селектора четыре только один, и поэтому у нас есть победитель. Селектор номер два является наиболее специфическим селектором из всех, поэтому он придаст нашей кнопке зеленый фон.34 Значение выигравшего объявления называется каскадным значением, потому что оно является результатом каскада.

Итак, мы начинаем с набора объявленных значений в этом случае: синий, зеленый, фиолетовый и желтый, одно из них выигрывает и становится каскадным значением, которое в нашем примере является зеленым.

А теперь представьте, что в четвертом секторе также есть два элемента, тогда оба селектора два и четыре будут иметь одинаковую специфичность, верно. Итак, что происходит в этом случае, и я обещаю вам, что теперь все почти закончилось, хорошо. Что ж, если на этом этапе все еще есть ничья, тогда будет применяться последнее объявление CSS, написанное в коде. Итак, снова, если все равно, если все селекторы объявлений имеют одинаковую специфичность, тогда это просто последнее объявление, которое будет использоваться для стилизации выбранного элемента.

Это процесс, который используется для разрешения конфликтов в спецификации таблиц стилей.

Это в первую очередь процесс разрешения конфликтов, выполняемый в соответствии с указанием приоритета в CSS.

CSS расшифровывается как Cascading Style Sheet. По самой своей природе стили, расположенные ниже, каскадная таблица стилей переопределяет эквивалентные стили выше (если стили выше не являются более конкретными). Таким образом, мы можем установить базовые стили в начале таблицы стилей, применимые ко всем версиям нашего дизайна, а затем переопределить соответствующие разделы с помощью медиа-запросов далее в документе.

Каскадирование означает поэтапное разливание или добавление поэтапно. Таблицы стилей содержат коды для стилизации элемента html. И способ, которым коды написаны в таблице стилей, является каскадным. Или просто, сплошные коды в слоях для каждого элемента html на странице html в таблице стилей создают каскадную таблицу стилей.

Каскадирование - это алгоритм, который присваивает вес каждому правилу стиля. Когда применяется несколько правил, приоритет имеет то, что имеет наибольший вес.

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

Каскад и специфичность, что вам нужно знать:

1. Объявление CSS с пометкой! Important имеет наивысший приоритет.

2. Но используйте! Important только в качестве последнего ресурса. Лучше использовать правильную специфику - более удобный код!

3. Встроенные стили всегда имеют приоритет над стилями во внешних таблицах стилей.

4. Селектор, содержащий 1 идентификатор, более конкретен, чем селектор с 1000 классами.

5. Селектор, содержащий 1 класс, более конкретен, чем селектор с 1000 элементами.

6. Универсальный селектор * не имеет значения специфичности (0,0,0)

7. Больше полагайтесь на конкретность, чем на порядок селекторов.

8. Но полагайтесь на порядок при использовании сторонних таблиц стилей - всегда помещайте таблицу стилей автора последней.

При выборе стилей CSS для применения к элементу HTML специфичность отменяет универсальность в соответствии с каскадным набором правил, которые разрешают конфликты между стилями:

1. Без CSS HTML будет отображаться в соответствии со стилями браузера по умолчанию.
2. Селекторы тегов CSS (соответствующие тегу HTML) переопределяют настройки браузера по умолчанию.
3. Селекторы классов CSS (с.) Переопределяют ссылки на теги.
4. Селекторы CSS ID (с #) переопределяют ссылки на классы.
5. Встроенный CSS, закодированный в HTML-тег, переопределяет идентификатор, класс и тег CSS.
6. Добавление ! Important в стиль CSS отменяет все остальное.
7. Если селекторы CSS идентичны, браузер объединяет их свойства. Если результирующие свойства CSS конфликтуют, браузер выбирает значение свойства, которое появилось позже или последним в коде.

Селектор CSS, соответствующий более конкретной комбинации тегов, классов и / или идентификаторов, будет иметь приоритет. Из следующих примеров первый будет иметь приоритет над вторым, независимо от порядка их появления в CSS:

ol#identity li.firstname { color: red; }
#identity .firstname { color: blue; }

CSS doc    
p{font-size: 12pt;}
p{font-size: 14pt;}

<p>My Headline<p>

будет отображать p с размером шрифта 14pt, потому что он «ближе» к фактическому элементу (внешние таблицы стилей загружаются сверху вниз файла). Если вы используете связанную таблицу стилей, а затем включите некоторый CSS в заголовок вашего документа после ссылки на внешний документ CSS, объявление «в заголовке» выиграет, потому что оно еще ближе к определенному элементу. Это верно только для селекторов с одинаковым весом. Посетите http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html чтобы получить хорошее описание веса данного селектора.

Все это говорит о том, что вы можете рассматривать «наследование» как часть каскада - для всех практических целей. Вещи «спускаются» вниз от содержащихся элементов.