Что означает «каскадирование» в CSS? - PullRequest
Новая
       72

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

78 голосов
/ 25 июня 2009

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

Ответы [ 12 ]

102 голосов
/ 25 июня 2009

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

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

46 голосов
/ 27 июня 2009

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

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

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

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

17 голосов
/ 26 августа 2012

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

5 голосов
/ 16 ноября 2013

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

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

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

4 голосов
/ 13 апреля 2014

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

2 голосов
/ 06 февраля 2015

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

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

Подробнее в спецификации

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

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

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

1 голос
/ 29 ноября 2016

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

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

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

body {
    background:blue;
}

body {
    background:green;
}

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

0 голосов
/ 08 октября 2017

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

0 голосов
/ 18 ноября 2016

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

0 голосов
/ 31 августа 2015

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

Страница:
...