Евгений Резниченко - Спецификация CSS2 Страница 14

Следующий пример иллюстрирует, как может действовать перекрывание псевдоэлементов. Первые буквы каждого элемента P будут зелёными и размером '24pt'. Остаток первой форматированной строки будет 'blue', а остаток параграфа - 'red'.

P { color: red; font-size: 12pt } P:first-letter { color: green; font-size: 200% } P:first-line { color: blue } <P>Какой-нибудь текст не менее двух строк.</P>

Если предположить, что разрыв строки появится перед словом "не", последовательность фиктивных тэгов для этого фрагмента может быть такой:

<P> <P:first-line> <P:first-letter> К </P:first-letter>акой-нибудь текст </P:first-line> не менее двух строк. </P>

Заметьте, что элемент :first-letter находится внутри элемента :first-line. Свойства, установленные в :first-line, наследуются в :first-letter, но переопределяются, если то же самое свойство установлено в :first-letter.

Псевдоэлементы ':before' и ':after' можно использовать для вставки генерируемого содержимого до или после содержимого элемента. Они разъясняются в разделе генерируемый текст.

H1:before {content: counter(chapno, upper-roman) ". "}

Если псевдоэлементы :first-letter и :first-line сочетаются с :before и :after, то они применяются к первой букве или строке элемента, включая вставленный текст.

P.special:before {content: "Special! "} P.special:first-letter {color: #ffd800} Это выведет "S" в слове "Special!" золотом.

Лекция 6. Установка значений свойств. Каскадирование и Наследование

После того, как ПА разобрал документ и сконструировал дерево документа, он обязан назначить каждому элементу дерева значение для каждого свойства, применимое для целевого типа носителя.

Конечное значение свойства является результатом трёхступенчатого процесса вычисления: значение определяется по спецификации ("специфицированное значение"), затем, если необходимо, выводится абсолютное значение ("вычисленное значение") и наконец - трансформируется в соответствии с ограничениями локальной среды ("реальное значение").

ПА обязаны сначала назначить свойству специфицированное значение на основе следующих механизмов (по приоритету):

1Если каскад даёт значение, использовать его.

2Иначе, если свойство унаследовано, использовать значение элемента-предка, обычно - вычисленное значение.

3Иначе, использовать начальное значение свойства. Начальное значение каждого свойства указано в определении свойства.

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

Специфицированные значения могут быть абсолютными (т.е. не специфицированными относительно других значений: 'red' или '2mm') или относительными (т.е. специфицированными относительно других значений: 'auto', '2em', '12%'). Для абсолютных значений не требуется никаких вычислений, чтобы найти вычисленное значение.

Относительные значения, с другой стороны, обязаны быть трансформированы в вычисленные значения: процентные рассчитываются относительно данного значения-ссылки (каждое свойство определяет соответствующее значение), значения с указанием единиц измерения (em, ex, px) должны быть сделаны абсолютными путём применения подходящих по размеру шрифтов или в пикселах, значения 'auto' должны высчитываться по формулам, данным для каждого свойства, ключевые слова ('smaller', 'bolder', 'inherit') должны быть замещены в соответствии со своими определениями.

В большинстве случаев элементы наследуют вычисленные значения. Однако есть некоторые свойства, чьи специфицированные значения могут наследоваться (например, числовое значение свойства 'line-height'). В тех случаях , когда дочерние элементы не наследуют вычисленные значения, это описывается в определении свойства.

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

Некоторые значения наследуются потомками элемента в дереве документа. Каждое свойство определяет, наследуется оно или нет.

<H1>The headline <EM>is</EM> important! </H1>

Если цвет элементу EM не назначен, выделенное "is" будет наследовать цвет элемента-предка, и, поскольку H1 имеет голубой цвет, элемент EM будет, соответственно, голубым.

Чтобы установить свойство стиля "по умолчанию" в документе, авторы могут установить это свойство в корне дерева документа. В HTML, например, эту функцию могут выполнить элементы HTML или BODY. Заметьте, что это будет работать, даже если автор опустит тэг BODY в тексте HTML, поскольку разборщик HTML вставит отсутствующие тэги.

Например, поскольку свойство 'color' наследуется, все потомки элемента BODY будут наследовать цвет 'black':

BODY { color: black; }

Специфицированные процентные значения не наследуются, а вычисленные значения - наследуются.

В данной таблице:

BODY { font-size: 10pt } H1 { font-size: 120% }

и в этом фрагменте документа:

<BODY> <H1>A <EM>large</EM> heading</H1> </BODY>

свойство 'font-size' элемента H1 будет иметь вычисленное значение'12pt' (120% от 10pt, значения-предка). Поскольку значение свойства 'font-size' наследуется, элемент EM также получит вычисленное значение '12pt'. Если ПА не имеет доступного шрифта в 12pt, реальное значение 'font-size' и для H1, и для EM может быть, например, '11pt'.

Каждое свойство может иметь специфицированное значение 'inherit', которое означает, что для данного элемента свойство принимает то же самое вычисленное значение, что и свойство элемента-предка. Наследуемое значение, которое как правило используется только как возвращаемое значение, может быть усилено путём явной установки 'inherit'.

В следующем примере свойства 'color' и 'background' установлены в элементе BODY. Во всех других элементах значение 'color' будет наследоваться, а фон будет прозрачным. Если эти правила являются частью пользовательской таблицы стилей, чёрный текст на белом фоне будет форсирован по всему документу.

BODY { color: black !important; background: white !important; } * { color: inherit !important; background: transparent; }

Правило '@import' даёт пользователям возможность импортировать правила стиля из других таблиц стилей. Любое правило @import обязано предшествовать всем наборам правил в таблице стилей. После ключевого слова '@import' обязан следовать URI подключаемой таблицы стилей. Допустима также строка; она будет интерпретироваться так, как будто имеет вокруг себя url(...).

Следующие строки эквивалентны по значению и обе иллюстрируют синтаксис '@import' (одно с "url()", а другое - с простой строкой):

@import "mystyle.css"; @import url("mystyle.css");

Поскольку ПА могут исключать запрос ресурсов неподдерживаемых типов носителя, авторы могут специфицировать медиа-зависимые правила @import. Эти условные @import специфицируют список разделённых запятыми типов носителя после URI.

Следующие правила имеют такой же эффект, как если бы импортированная таблица стилей была перенесена в правило @media для того же типа, но данные правила позволят исключить бесполезную нагрузку на ПА.

@import url("fineprint.css") print; @import url("bluish.css") projection, tv;

При отсутствии любых типов носителя, импорт является безусловным. Спецификация 'all' для носителя имеет тот же эффект.

Таблицы стилей могут иметь три независимых источника: автор, пользователь и ПА.

[x]. Автор. Специфицирует таблицы стилей для документа-источника в соответствии с соглашениями о языке документа. К примеру, в HTML таблицы стилей могут быть включены в документ или иметь внешнюю связь.

[x]. Пользователь. Может иметь возможность специфицировать стилевую информацию для определённого документа. Например, пользователь может специфицировать файл, содержащий таблицу стилей, или ПА может предоставить интерфейс, генерирующий пользовательскую таблицу стилей (или вести себя так, как если бы предоставлял).

[x].

Пользовательский агент. Соответствующие ПА обязаны применять таблицу стилей по умолчанию (или вести себя так, как если бы применяли) до того, как применять к документу все другие таблицы стилей. Таблицы стилей по умолчанию в ПАгенте должны представить элементы языка документа теми способами, которые удовлетворяют общим ожиданиям для языка документа (например, для визуальных браузеров, элемент EM в HTML представляется шрифтом italic). См. "Образец таблицы стилей HTML 4.0" - рекомендуемую таблицу стилей по умолчанию для документов HTML 4.0.