Назначение и применение CSS

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

При обсуждении технических спецификаций часто бывает полезно вникнуть в смысл названия. В названии принято точно определять суть и назначение стандарта или спецификации. Описание стилей отображения элементов HTML-разметки носит название "Каскадные таблицы стилей". Со словом "стилей" все более-менее понятно. Под словом "таблицы" следует понимать набор свойств элемента разметки, который можно представить в виде строки в таблице свойств, т.е. элементы разметки — строки, а свойства — столбцы. А вот слово "каскадные" требует пояснения.

Во-первых, существует иерархия элементов разметки (дерево объектов на странице). Во-вторых, свойства этих объектов могут наследоваться. Таким образом в дереве объектов образуется ветвь, которая ведет к листу дерева — элементу разметки, например, элементу списка или параграфу. Его свойства определяются элементами разметки, в которые вложен элемент, и описателями стиля для данного элемента:

Предыдущий текст закодирован в терминах разделов и списка следующим образом:

<DIV STYLE="margin-left:10px;margin-top:10px;">
 Это начало первого раздела, который сдвинут 
 на 10 пикселов вправо относительно левого 
 края параграфа и на 10 пикселов вниз 
 относительно стандартной границы параграфа. 
<DIV STYLE="margin-left:10px;margin-top:20px;
 text-indent:10px;font-style:italic;">
    Это начало второго раздела, который 
   сдвинут относительно предыдущего раздела
   на 10 пикселов, а относительно параграфа —
   на 20 пикселов. Данный раздел имеет красную
   строку с отступом в 10 пикселов и смещен 
   относительно предыдущего раздела на 20 
   пикселов. 
<UL STYLE="margin-left:10px;">
<LI>первый элемент списка
<LI>второй элемент списка
</UL>
 Список сдвинут относительно второго раздела
 на 10 пикселов, а относительно текущего 
 параграфа — на 30 пикселов. Первая строка не
 является строкой начала параграфа, поэтому на
 нее отступ не распространяется (только в 
 Netscape). 
</DIV>
</DIV>

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

Когда объяснение некоторого феномена HTML-разметки растягивается на несколько параграфов, имеет смысл воспользоваться приведенной ниже графической схемой построения страницы.

При использовании стилей действуют следующие правила старшинства стилей:

Рис. 1.3.

• сначала применяются стили браузера по умолчанию;
• стили браузера по умолчанию переопределяются прилинкованными стилями (элемент LINK заголовка документа);
• прилинкованные стили переопределяются описаниями стилей в элементе STYLE ;
• стили элемента STYLE переопределяются атрибутом STYLE в любом из элементов разметки.

Не все атрибуты стиля могут наследоваться. Например, "набивка" (отступ содержания элемента от его границ) элемента BODY не наследуется вложенными в него элементами и определяется по умолчанию или прописывается для каждого элемента отдельно. Алгоритмы наследования в Internet Explorer и в Netscape Navigator разные, поэтому для единства отображения элементов следует прописывать стиль по максимуму атрибутов.