Применение каскадных таблиц стилей (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>




Содержание  Назад  Вперед