Наследование
При добавлении текстовых элементов на Web-страницу часто один элемент вставляется в другой. Например, при выделении текста полужирным шрифтом, как в случае с текстом "полужирный текст" в приведенном ниже примере, фактически элемент полужирного шрифта вставляется в элемент абзаца:
<р>Вы вставляете один элемент в другой всегда, когда помещаете текст, находящийся в пределах одного набора контейнерных дескрипторов, в другой набор начального и конечного дескрипторов. Например, следующий далее<b>полужирный текст</b> представляет собой полужирный элемент, вставленный в элемент параграфа.</р>
При форматировании Web-браузером вставленного элемента сначала он при- меняет инструкции форматирования, установленные для внешнего элемента, а затем для внутреннего элемента (если соответствующие правила определены).
В терминологии каскадных списков стилей элемент, содержащийся в другом элементе, называется дочерним (child), а внешний элемент — родительским (parent). Таким образом, в предыдущем примере текст, окружающий элемент полужирного текста (<b>полужирный текст</b>), является родительским, а сам элемент "полужирный текст" — дочерним. При включении одного типа элемента страницы в другой тип Web-браузер применяет правила каскадного списка родительского (т.е. внешнего) элемента стилей и к дочернему (т.е. внутреннему) элементу.
Предположим, например, что имеется каскадный список стилей со следующими правилами:
р {color:blue}b {color:red}
При наличии на Web-странице следующего HTML-кода Web-браузер выведет на экран текст "Весь текст" синим цветом и текст "полужирного начертания будет красным -- включая и полужирный курсив" — красным цветом:
<р>Весь текст <b>полужирного начертания будет красным -- включая и полужирный <i>курсив</i>.</b></р>
Элемент полужирного текста (т.е. текст, заключенный между начальным и конечным дескрипторами полужирного текста) является дочерним элементом текста абзаца. В свою очередь, элемент курсивного текста — это дочерний элемент элемента полужирного текста, поскольку начальный и конечный дескрипторы курсивного текста находятся между начальным и конечным дескрипторами полужирного текста. Так как в приведенном примере список стилей не содержит правила для элемента курсивного текста, Web-браузер будет применять к нему как к дочернему элементу правило его родительного элемента, т.е. правило для селектора b. Таким образом, курсивный текст будет выводиться на экран шрифтом красного цвета.
Если бы каскадный список стилей в приведенном примере содержал правило только для элемента абзаца (р), весь текст выводился бы шрифтом синего цвета. Во-первых, отношение родительский элемент/дочерний элемент между элементом абзаца и элементом полужирного текста диктовал бы, чтобы элемент полужирного текста (дочерний элемент) наследовал правило элемента абзаца (родительского элемента) — "выводить текст шрифтом синего цвета". Затем отношение родительский элемент/дочерний элемент между элементом полужирного текста (родительский элемент) и элементом курсивного текста (дочерний элемент) привело бы к тому, что элемент курсивного текста наследовал бы правило своего родительного элемента — элемента полужирного текста.