| Каскадность — ряд правил, определяющих, какие именно стилевые свойства необходимы элементам веб-страницы, то есть задающих последовательность применения многократно определенных стилей. Другими словами, каскадность определяет, каким образом браузер должен обработать сложную структуру, относящуюся к одному и тому же тегу, и что делать, если возникает конфликт свойств. Это происходит в двух случаях: из-за механизма наследования (одинаковое свойство наследуется от нескольких родительских элементов-предков) и когда один или более стилей применяются к одному элементу веб-страницы (например, вы применили к абзацу стиль с помощью атрибута class, а также создали стиль для тега , и оба стиля применяются к этому абзацу). Объединение унаследованных стилей Наследование CSS гарантирует, что однородные взаимосвязанные элементы веб-страницы (например, все слова в абзаце, даже если они являются вложенными гиперссылками или расположены в другом теге) получают стилевые свойства родительских элементов. Это избавляет от необходимости создания отдельных стилей для каждого тега веб-страницы. Поскольку тег может унаследовать свойства любого предка (например, ссылка, наследующая шрифт родительского ), определить, почему конкретный тег отформатирован именно так, может быть сложной задачей. Предположим такую ситуацию: к применен определенный шрифт, к — размер шрифта, а для — цвет. Таким образом, любой тег абзаца унаследует свойства и . Другими словами, унаследованные стили будут объединены, сформировав один сложный. Пусть страница имеет три стиля: один для , второй для и третий для . CSS-код выглядит следующим образом: body { font-family: Verdana, Arial, Helvetica, sans-serif; } p { color: #F30;} strong { font-size:24px; } Тег вложен в абзац, который, в свою очередь, является вложенным в . Стилевые свойства наследует у всех элементов-предков, получая начертания шрифта font-family от и цвет color от родительского абзаца. Кроме того, имеет собственное CSS-свойство, устанавливающее размер шрифта 24 пиксела. Конечный внешний вид тега определяется сочетанием всех трех стилей. Другими словами, выглядит так, будто для него создали следующий стиль: strong { font-family: Verdana, Arial, Helvetica, sans-serif; color: color: #F30; font-size: 24px; } Превосходство близкого родительского элемента-предка Как видно из предыдущего примера, комбинирование стилей различных тегов с применением наследования создает полный стилевой пакет. Но что произойдет в случае конфликта унаследованных свойств CSS? Представьте себе страницу, где вы установили красный цвет шрифта для тега body и зеленый цвет шрифта для тега абзаца. отформатирован шрифтом определенного начертания, размера и цвета, несмотря на то что для него в стиле явно определено только одно свойство. Два других унаследованы от тегов-предков и . Теперь предположим, что внутри абзаца имеется тег . Тег наследует стиль как тега body, так и тега абзаца. Так какой текст внутри тега — красный или зеленый? Итак, у нас есть победитель: зеленый цвет от стиля абзаца. Браузер применит стиль, который является самым близким по отношению к рассматриваемому тегу. В данном примере любые свойства, унаследованные от , являются скорее общими. С одной стороны, они относятся ко всем тегам веб-страницы при условии отсутствия других. Однако стиль более близок к и, можно сказать, находится по соседству с ним. Стилевые свойства применяются непосредственно к вложенным тегам абзаца. По сути, если тег не имеет собственного, явно определенного стиля, то при возникновении конфликтов с унаследованными свойствами одержат победу самые близкие теги-предки | 
6 014
9 851 
