CSS – учебник, спецификация (стр. 3 )

LI. red {...} /* a=0 b=1 c=1 -> специфичность = 11 */

UL OL LI. red {...} /* a=0 b=1 c=3 -> специфичность = 13 */

#x34y {...} /* a=1 b=0 c=0 -> специфичность = 100 */

Псевдо-элементы и псевдо-классы учитываются соответственно также, как и нормальные элементы и классы.

5. Отсортировать в порядке определения: если два правила имеют одинаковый вес, указанное позднее побеждает. Правила в импортированной таблице стилей считаются предшествующими любому правилу внутри самой таблицы стилей.

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

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

Определение в атрибуте 'STYLE' элемента (см. раздел 1.1) имеет тот же вес, что и определение через ID селектор, определенный в таблице стилей:

<STYLE TYPE="text/css">

#x97z { color: blue }

</STYLE>

<P ID=x97z STYLE="color: red">

Но в данном примере элемент 'P' будет красным. Так как специфичность обоих определений одинакова, определение в атрибуте 'STYLE' переопределит определение через ID согласно правилу 5.

UA могут по-прежнему поддерживать стилистические атрибуты HTML, например 'ALIGN'. Если так, то эти атрибуты должны переводиться в соответствующее правило CSS со специфичностью равной 1. Должно считаться, что такие правила описаны в начале авторской таблицы стилей и могут быть переопределены нижеследующими правилами в таблице стилей. В переходный период такая политика позволит стилистическим атрибутам сосуществовать с таблицей стилей.

4 Модель форматирования

CSS1 предполагает простой ортогональный способ форматирования, когда каждый элемент образуется одним или несколькими прямоугольными полями. (Элементы, имеющие параметр 'display' со значением 'none', не форматируются и поэтому не влияют на поле. Все поля имеют внутреннюю содержательную область с устанавливаемыми смежными областями отступа, рамки и границы.

_______________________________________

| |

| граница (прозрачная) |

| _________________________________ |

| | | |

| | рамка | |

| | ___________________________ | |

| | | | | |

| | | отступ | | |

| | | _____________________ | | |

| | | | | | | |

| | | | содержание | | | |

| | | |_____________________| | | |

| | |___________________________| | |

| |_________________________________| |

|_______________________________________|

| ширина элемента |

| ширина поля |

Размеры границы, рамки и отступа устанавливаются соответственно описаниям следующих разделов настоящего документа: (5.5.1-5.5.5) для границы; (5.5.6-5.5.10) для отступа; (5.5.11-5.5.22) для рамки.

Отступ использует тот же самый фон, что и сам элемент (установка свойств фона см. 5.3.2-5.3.7). Цвет и стиль рамки устанавливаются в свойствах рамки. Границы всегда прозрачны, поэтому через них будет просвечивать родительский элемент.

Размеры поля есть сумма размеров элемента (форматированного текста или изображения) и размеров областей отступа, рамки и границы.

С точки зрения форматирования элементы подразделяются на два основных типа: блочные и строчные.

4.1 Блочные элементы

Элементы с параметром 'display', имеющим значение 'block' или 'list-item' относятся к блочным элементам. Плавающие (floating) элементы ( т. е. со значением параметра 'float' иным, чем 'none') также считаются блочными.

Следующий пример показывает, как границы и отступы форматируют элемент 'UL' с двумя дочерними. Для упрощения границы на диаграмме не показаны. Учтите, что односимвольные "константы" в данном примере - это не синтаксис CSS1, это просто удобный способ связать значения таблицы стилей с рисунком.

<STYLE TYPE="text/css">

UL {

background: red;

margin: A B C D;

padding: E F G H;

}

LI {

color: white;

background: blue;

margin: a b c d;

padding: e f g h;

}

</STYLE>

..

<UL>

<LI>1й элемент списка

<LI>2й элемент списка

</UL>

_______________________________________________________

| |

| A UL граница прозрачная |

| _______________________________________________ |

| D | | B |

| | E UL отступ красный | |

| | _______________________________________ | |

| | H | | F | |

| | | a LI граница прозрачная | | |

| | | красный цвет просвечивает | | |

| | | _______________________________ | | |

| | | d | | b | | |

| | | | e LI отступ синий (blue) | | | |

| | | | | | | |

| | | | h 1й элемент списка f | | | |

| | | | | | | |

| | | | g | | | |

| | | |_______________________________| | | |

| | | | | |

| | | max(a, c) | | | <- См. max

| | | _______________________________ | | |

| | | | | | | |

| | | d | e LI отступ синий (blue) | | | |

| | | | | | | |

| | | | h 2й элемент списка f | | | |

| | | | | | | |

| | | | g | | | |

| | | |_______________________________| | | |

| | | | | |

| | | c LI отступ прозрачный, | | |

| | | красный цвет просвечивает | | |

| | |_______________________________________| | |

| | | |

| | G | |

| |_______________________________________________| |

| |

| C |

|_______________________________________________________|

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

Если бы в вышеназванном примере указывались рамки, они бы располагались между отступами и границами.

Некоторые из используемых терминов иллюстрирует следующая диаграмма:

---- <-- верх

верхняя граница

----

верхняя рамка

----

верхний отступ

+--+ <-- потолок

| | | | | | | |

| левая | левая | левый | | правый | правая | правая |

|-граница|-рамка--|-отступ-|-содержание--|-отступ--|--рамка--|-граница-|

| | | | | | | |

+--+ <-- подвал

^ ^ ^ ^

левый внешний край | левый внутр. край | правый внутр. край | правый внешний край

нижний отступ

----

нижняя рамка

----

нижняя граница

---- <-- низ

Левый внешний край - это край всего элемента, с учетом отступа, рамки и границы. Левый внутренний край - это край содержания внутри отступа, рамки и границы. Справа - аналогично. Верх - это верх самого объекта с учетом отступа, рамки и границы; он определяется для строковых и плавающих элементов, но не для фиксированных блочных элементов. Потолок - это верх содержания внутри отступа, рамки и границы. Низ - это низ самого элемента, ниже отступа, рамки и границы; он определяется для строковых и плавающих элементов, но не для фиксированных блочных элементов. Подвал - это низ элемента внутри отступа, рамки и границы (низ содержания).

Ширина элемента - это ширина содержания, т. е. расстояние между левым и правым внутренними краями. Высота - это высота содержания, т. е. расстояние от подвала до потолка.

4.1.1 Вертикальное форматирование

Ширина границы фиксированного блочного элемента определяют минимальное расстояние до краев окружающих полей. Две или более прилегающих вертикальных границы (т. е. без рамки, отступа и содержания между ними) сжимаются для максимального использования значения границы. В большинстве случаев после сжатия вертикальных границ результат приятнее на вид и ближе к ожидаемому дизайнером. В приведенном примере границы между двумя элементами 'LI' сжимаются с использованием максимума нижней границы первого элемента 'LI' и верхней границы второго элемента 'LI'. Аналогично, если заполнение между 'UL' и первым элементом 'LI' (значение "Е") было бы равно нулю, границы 'UL' и первого элемента 'LI' были бы сжаты.

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

4.1.2 Горизонтальное форматирование

Горизонтальное позиционирование и размеры фиксированного блочного элемента определяются семью свойствами: 'margin-left', 'border-left', 'padding-left', 'width', 'padding-right', 'border-right' и 'margin-right'. Сумма этих семи составляющих равносильна ширине родительского элемента.

По умолчанию, "ширине" элемента присваивается значение 'auto'. Если элемент не является замещаемым, это значит, что UA считает "ширину" так, чтобы сумма указанных семи свойств была эквивалентна ширине родительского элемента. Если элемент замещаемый, то значение 'auto' для "ширины" автоматически заменяется внутренней шириной элемента.

Трем из семи свойств может быть присвоено значение 'auto': "левая граница", "ширина", и "правая граница". Для замещаемых элементов значение 'auto' для "ширины" автоматически заменяется внутренней шириной элемента, поэтому для них могут существовать только два значения auto'.

"Ширина" имеет неотрицательное минимально-допустимое значение, определяемое UA (которое может меняться от элемента к элементу, и даже зависеть от других свойств). Если "ширина" меньше допустимой (даже если она задана явным образом либо имела значение 'auto' и по приоритетному правилу должна быть меньше), ее значение будет заменено заменяется минимально-допустимым.

Если именно одно из свойств "левая граница", "ширина" или "правая граница" имеют значение 'auto', UA определит этому свойству значение, которое сделает сумму значений семи свойств эквивалентной ширине родительского элемента.

Если ни одно из свойств не имеет значения 'auto', то последнее будет присвоено свойству "правая граница".

Если более чем одному из трех вышеуказанных свойств будет присвоено значение 'auto', и одно из них - "ширина", то остальные ("левая граница", и/или "правая граница") будут приравнены к нулю, а "ширина" получит значение, необходимое, чтобы сделать сумму значений семи свойств эквивалентной ширине родительского элемента.

В противоположной ситуации, если как "правая граница" так и "левая граница" будут иметь значение 'auto', им будут присвоены равноценные значения. Элемент будет выронен по центру внутри родительского.

Если значение 'auto' было присвоено как значение для одного из вышеупомянутых семи свойств в строчном или плавающем элементе, это будет обработано так, как если бы им было присвоено нулевое значение.

В отличие от вертикальных границ, горизонтальные границы не сливаются.

4.1.3 Элементы-списки

Элементы со свойством 'display', имеющим значение 'list-item' ("список"), форматируются как блочные, но предваряются маркером. Тип маркера определяется свойством "стиль списка" ('list-style'). Маркер устанавливается в соответствии со значением свойства "стиль списка":

<STYLE TYPE="text/css">

UL { list-style: outside }

pact { list-style: inside }

</STYLE>

<UL>

<LI>первый пункт списка идет первым

<LI>второй пункт списка идет вторым

</UL>

<UL CLASS=COMPACT>

<LI>первый пункт списка идет первым

<LI>второй пункт списка идет вторым

</UL>

Форматирование по данному примеру может выглядеть как:

* первый пункт списка

идет первым

* второй пункт списка

идет вторым

* первый пункт

списка идет первым

* второй пункт

списка идет вторым

Если текст выравнивается по ширине, маркеры должны быть на левой стороне поля.

4.1.4 Плавающие элементы

Используя свойство элемента "плавающий" ('float'), можно декларировать его в качестве внешнего по отношению к нормальному потоку элементов, а затем форматировать, как блочный элемент. Например, при установке значения 'left' для свойства "плавающий" применительно к изображению, последнее перемещается влево до границы отступа или рамки, либо достигает другого блочного элемента. Нормальный поток будет переноситься по правой стороне. Границы, рамки и отступы самого элемента будут учитываться, и никогда не будут сливаться с границами смежных элементов.

При позиционировании плавающего элемента должны выполняться следующие условия (см. раздел 4.1. для разъяснения терминов):