Иерархия документа: знакомство с семейством XHTML
Еще одной важной концепцией, с которой следует познакомиться перед тем, как мы начнем работать с CSS, является иерархия документа. Иерархия документа похожа на генеалогическое древо или на диаграмму, состоящую из вложенных XHTML-тегов страницы. Чтобы лучше понять это, взглянем на фрагмент кода только что рассмотренной страницы без содержимого, оставив только теги:
<body>
<!-header - это не код а просто комментарий—>
</div id=logo>
<img />
<h3> </h3>
</div>
</body>
Теперь мы четко видим взаимоотношения тегов. Например, в коде тег body содержит все остальные теги. Мы также заметили, что тег div с идентификатором "logo" включает два тега - тег изображения и заголовка третьего уровня. Мы видим, что теги img и h3 являются дочерними для тега div, так как они расположены внутри него.
В свою очередь, тег div - родительский для обоих элементов, а теги img и h3 - сестринские друг для друга, так как находятся на одном уровне иерархии. Эту иерархию можно использовать при написании правил CSS:
div#logo img {здесь правила CSS}
Такая строка предназначается только для тегов img, расположенных внутри div с id="logo" (# в CSS заменяет id). Другие теги img на странице не попадают под действие этого правила, так как они не расположены внутри div с идентификатором "logo". Таким способом можно задать, например, границу только вокруг одного изображения или с помощью полей сместить изображение подальше от окружающих элементов.
Создавая правила, использующие идентификаторы и классы в иерархической структуре, вы можете точно и избирательно применять различные правила CSS к выбранным элементам XHTML.