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

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

12 73
css terminology css-cascade

12 ответов:

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

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

97

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

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

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

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

42

Håkon Wium Lie (CSS co-creator) определяет "каскад" в своей кандидатской диссертации по CSS как "Процесс объединения нескольких таблиц стилей и разрешения конфликтов между ними"https://www.wiumlie.no/2006/phd/

12

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

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

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

5

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

4

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

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

Посмотреть больше spec

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

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

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

2

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

(это просто вариант наличия двух правил в одном листе - последний выигрывает, если все остальные вещи равны.)

например, приведенный

body {
    background:blue;
}

body {
    background:green;
}

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

1

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

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

0

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

0

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

0

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

0
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 для хорошего описания веса данного селектора.

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

-2