26. Наследование и каскадирование.

Наследование

Принцип наследования: некоторые свойства CSS, объявленные для элементов-предков, наследуются элементами потомками.

Пример: если задать цвет шрифта для абзаца, всё в абзаце будет иметь этот цвет. Т.е. цвет шрифта – наследуемое свойство. А вот рамка вокруг элемента – это не наследуемое свойство.

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

Каскадирование

Введём следующие категории CSS:

1. Default CSS – «встроена» в браузер
2. User CSS – создаётся и настраивается пользователем сайта
3. Author CSS – создаётся автором HTML-страницы

Согласно принципу каскадирования, порядок применения стилей такой:

1. Default CSS
2. User CSS
3. Author CSS
4. Author CSS с !important
5. User CSS с !important

Вес правила

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

Вес правила – четвёрка чисел вида at, id, c, e

• если правило записано в style, его вес (1,0,0,0)
• id = число селекторов идентификаторов у правила;
• c = число селекторов классов, псевдоклассов, атрибутов;
• e = число селекторов элементов и псевдоэлементов.

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

(1, 0, 0, 0) > (0, 0, 2, 1)

(0, 0, 1, 0) > (0, 0, 0, 4)