В чем разница между каскадированием и наследованием в CSS?
В чем разница между каскадированием и наследованием в CSS?
Или это одно и то же?
1 ответ
Наследование - это то, как свойства стекаются от элемента к его дочерним элементам. Некоторые свойства, такие как font-family
унаследовать. Если вы установили семейство шрифтов на body
это семейство шрифтов будет наследоваться всеми элементами в body
, То же самое верно для color
, но это не так для background
или же height
который всегда будет по умолчанию transparent
а также auto
, В большинстве случаев это имеет смысл. Почему фон наследовал? Это было бы болью. Что если шрифты не наследуются? Как бы это вообще выглядело?
Каскад о том, что имеет приоритет, когда есть конфликт. Правила каскада включают в себя:
- Более поздние свойства переопределяют более ранние свойства
- Более конкретные селекторы переопределяют менее специфичные селекторы
- Указанные свойства переопределяют унаследованные свойства
И так далее. Каскад решает любые конфликтные ситуации. Это порядок, в котором применяются свойства.
(обновление) Специфика - это расчет, используемый для определения приоритета селектора в каскаде. Когда два селектора применяются к одному и тому же элементу, приоритет имеет тот, который имеет более высокую специфичность.
- Встроенные стили имеют очень высокую специфичность (
1000
) - Идентификаторы имеют специфику
100
- классы / атрибуты и псевдо-классы добавить
10
- элементы и псевдоэлементы добавить
1
Сложите все части в цепочке селекторов, чтобы определить общую специфичность. В случае ничьей последний селектор имеет приоритет.
Конечно, это связано с различными крайними случаями и оговорками. Один класс всегда будет переопределять простые элементы, независимо от того, сколько. Более целевым селекторам предоставляется приоритет над унаследованными свойствами от родительских селекторов. И вы можете выбросить все свои расчеты, если кто-то использовал !important
- это превосходит все.
Чтобы понять разницу между наследованием и каскадированием, давайте разберемся с ними обоими на примере.
Наследование - это способ передачи значений свойств от родительских элементов к их дочерним элементам, давайте рассмотрим очень простой пример.
.parent{
font-size:20px;
line-height:150%;
}
.child{
font-size:25px;
}
Из приведенного выше примера мы собираемся определить, какой будет высота строки дочернего элемента. Все мы знаем, что каждое свойство CSS должно иметь значение, даже если ни мы, ни разработчик, ни браузер не указываем его. В этом случае нет никакого каскадного значения, верно? Таким образом, при обработке определенного свойства для определенного элемента, такого как высота строки, первый вопрос, который задает механизм CSS, - есть ли каскадное значение, если да, то, конечно, это значение используется. Теперь, если нет каскадного значения, следующий вопрос: можно ли унаследовать свойство, это зависит от каждого свойства, некоторые свойства наследуются, а другие нет. В случае line-height это свойство наследуется, как мы видим из спецификации свойства.
https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
Таким образом, если свойство унаследовано, тогда значение этого свойства становится вычисленным значением его родительского элемента. Очень важно отметить, что значение, которое наследуется, составляет не просто 150%, а вычисленное значение. В данном случае это 150% от 20 пикселей, что составляет 30 пикселей. Таким образом, высота строки дочернего элемента также будет 30 пикселей, а не 150% от размера шрифта в 25 пикселей. Теперь, если это свойство не унаследовано, например, padding, то указанное значение станет начальным значением, которое также является специфическим для каждого свойства. В случае заполнения это просто ноль пикселей.
Теперь каскадирование - это процесс объединения разных таблиц стилей и разрешения конфликтов между разными правилами и объявлениями CSS, когда к определенному элементу применяется более одного правила. Потому что, как вы, вероятно, уже знаете, объявление для определенного свойства стиля, такого как размер шрифта, может появляться в нескольких таблицах стилей, а также несколько раз внутри одной таблицы стилей.
Если вы хотите подробно прочитать о каскадировании в CSS, просто прочитайте мой другой ответ о каскадировании.