CSS2. Спецификация. Рекомендации W3C. 1998
CSS2 Введение
предыдущий следующий содержание свойства индекс
2 CSS2. Введение.
Содержание
2.1 Краткое пособие CSS2 для HTML
В этом пособии мы покажем, как можно быстро создать простые таблицы стилей.
Для использования этого пособия необходимо немного знать HTML (см.[HTML40]) и некоторые базовые термины настольных публикаций.
Вот небольшой документ HTML:
<p>Bach's home page <H1>Bach's home page</H1> <P>Johann Sebastian Bach was a prolific composer.
Чтобы установить голубой цвет текста элемента H1, можно написать такое правило CSS:
H1{color:blue}
Правило CSS состоит из 2 главных частей: селектора ('H1') и объявления ('color:blue'). Объявление имеет 2 части: свойство ('color') и значение ('blue'). Поскольку в предыдущем примере делается попытка использовать только 1 из свойств, необходимое для отображения документа HTML, он может быть квалифицирован как таблица стилей. В комбинации с другими таблицами стилей (возможность комбинировать таблицы стилей является 1 из фундаментальных свойств CSS) оно (свойство) определит конечный вид документа.
Спецификация HTML 4.0 определяет, как правила таблиц стилей могут быть специфицированы для документов HTML: или внутри документа HTML, или в таблицах стилей. Чтобы поместить в документ таблицу стилей, используйте элемент STYLE:
<p>Bach's home page
<STYLE>H1{color:blue}
</STYLE>
<H1>Bach's home page</H1>
<P>Johann Sebastian Bach was a prolific composer.
Для максимальной гибкости мы рекомендуем, чтобы авторы специфицировали внешние таблицы стилей; они могут быть изменены без модификации документа-источника HTML, а также могут раздельно использоваться несколькими документами. Чтобы сослаться на внешнюю таблицу стилей, Вы можете использовать элемент LINK:
<p>Bach's home page <LINK rel="stylesheet href=bach.css> <H1>Bach's home page</H1> <P>Johann Sebastian Bach was a prolific composer.
Элемент LINK специфицирует:
Чтобы продемонстрировать тесную взаимосвязь между таблицей стилей и структурной разметкой, мы продолжим использовать элемент STYLE в этом пособии. Давайте добавим больше цветов:
<p>Bach's home page
<STYLE>BODY{color:red} H1{color:blue}
</STYLE>
<H1>Bach's home page</H1>
<P>Johann Sebastian Bach was a prolific composer.
Таблица стилей теперь содержит 2 правила: 1-е устанавливает цвет элемента BODY в 'red', а 2-е - цвет элемента H1 в 'blue'. Поскольку для элемента P не специфицирован цвет, он будет наследовать цвет от своего элемента-предка, а именно - от BODY. Элемент H1 является также дочерним элементом элемента BODY, но 2-е правило переопределяет наследуемое значение. В CSS часто возникают такие конфликты между различными значениями, и данная спецификация описывает, как их разрешить.
В CSS2 имеется более 100 различных свойств, в т.ч. - 'color'.
Рассмотри некоторые другие:
<p>Bach's home page
<STYLE>BODY{font-family:"Gill Sans",sans-serif;font-size:12pt;margin:3em}
</STYLE>
<H1>Bach's home page</H1>
<P>Johann Sebastian Bach was a prolific composer.
1-е, что нужно отметить, это несколько объявлений, сгруппированных внутри блока, заключённого в фигурные скобки ({…}) и разделённых знаком точка с запятой, хотя последнее объявление может также заканчиваться точкой с запятой.
1-е объявление элемента BODY устанавливает семейство шрифтов "Gill Sans". Если этот шрифт недоступен, ПА (часто называемый "браузер") будет использовать семейство шрифтов 'sans-serif', которое является 1 из 5 семейств шрифтов, известных всем ПА. Дочерние элементы элемента BODY унаследуют значение свойства 'font-family'.
2-е объявление устанавливает размер шрифта элемента BODY в 12 пунктов. Единица измерения "пункт" используется обычно в типографской печати для обозначения размеров шрифта и других размеров. Это пример абсолютных единиц измерения, которые не определяются относительно окружения.
Третье объявление использует относительные единицы измерения, которые определяются относительно своего окружения. Единица "em" относится к размеру шрифта элемента. В нашем случае поля вокруг элемента BODY шире размера шрифта в 3 раза.
2.2 Краткое пособие CSS2 для XML
CSS может использоваться с любым структурированным форматом документа, например, с приложениями eXtensible Markup Language [XML10]. На самом деле XML намного больше зависит от таблиц стилей, чем HTML, поскольку авторы могут создавать свои собственные элементы, которые не известны ПА и не могут ими выводиться.
Вот простой фрагмент XML:
<ARTICLE> <HEADLINE>Fredrick >e Great meets Bach</HEADLINE> <AU>OR>Johann Nikolaus Forkel</AU>OR> <PARA>One evening, just as he was getting his <INSTRUMENT>flute</INSTRUMENT>ready and his musicians were assembled, an officer brought him a list of >e strangers who had arrived. </PARA> </ARTICLE>
Чтобы вывести данный фрагмент в виде документа, мы обязаны сначала объявить, какие элементы являются элементами инлайн-уровня (т.е. не вызывают разрывов строк) и какие - уровня блока (т.е. вызывают разрывы строк).
INSTRUMENT{display:inline}ARTICLE,HEADLINE,AU>OR,PARA{display:block}
1-е правило объявляет INSTRUMENT как инлайн, а 2-е правило с его списком разделённых запятыми селекторов объявляет все другие элементы как элементы уровня блока.
1 из вариантов связи таблицы стилей с документом XML является использование инструкций процесса:
<?XML:stylesheet href=bach.css"?> <ARTICLE> <HEADLINE>Fredrick >e Great meets Bach</HEADLINE> <AU>OR>Johann Nikolaus Forkel</AU>OR> <PARA>One evening, just as he was getting his <INSTRUMENT>flute</INSTRUMENT>ready and his musicians were assembled, an officer brought him a list of >e strangers who had arrived. </PARA> </ARTICLE>
Визуальный ПА может отформатировать вышеприведённый пример так:
Обратите внимание, что слово "flute" остаётся внутри параграфа, поскольку это содержимое инлайн-элемента INSTRUMENT.
Тем не менее, текст ещё не выглядит так, как Вы могли бы ожидать. Например, шрифт заголовка должен быть крупнее, чем остальной текст, и Вам может понадобиться вывести имя автора курсивом:
INSTRUMENT{display:inline}ARTICLE,HEADLINE,AU>OR,PARA{display:block;margin:.5em} HEADLINE{font-size:1.3em}AU>OR{font-style:italic}
Визуальный ПА может сформатировать этот пример так:
Добавление других правил в таблицу стилей позволить Вам сделать представление документа ещё более интересным.
2.3 Модель процесса CSS2
Этот раздел представляет 1 из возможных моделей того, как работают ПА, поддерживающие CSS. Это лишь концептуальная модель; конкретные реализации могут варьироваться.
ПА в этой модели обрабатывает источник, выполняя следующие шаги:
Частично расчёт значений зависит от алгоритма форматирования, соответствующего целевому типу носителя. Например, если целевой носитель - это экран, то ПА применяют модель визуального форматирования. Если целевой носитель - это страница для печати, то ПА применяют страничную модель. Если целевой носитель - это устройство звукового вывода (например, речевой синтезатор), то ПА применяют модель звукового представления.
Обратите внимание, что ПА CSS не изменяет дерево документа на этом этапе. И особенно, что содержимое, генерируемое в связи с таблицы стилей, не возвращается процессору языка документа (например, для повторного разбора).
Шаг 1 находится вне пределов действия данной спецификации (см., например, [DOM]).
Шаги 2-5 адресуются основным объёмом данной спецификации.
Шаг 6 находится вне пределов действия данной спецификации.
2.3.1 Канва
Для всех носителей термин канва описывает "пространство, где выводится сформатированная структура". Канва бесконечна по каждому измерению, но представление обычно производится в пределах ограниченной области канвы, установленной ПА в соответствии с целевым носителем. Например, вывод ПАгентами на экран обычно требует наличия минимальной ширины и выбора начальной ширины на базе размеров порта просмотра. Вывод ПАгентами на страницу обычно требует ограничения ширины и высоты. Звуковые ПА могут предполагать ограничения звукового пространства, но не времени.
2.3.2 Модель адресации CSS2
Селекторы и свойства CSS2 позволяют обращаться из таблиц стилей к следующим частям документа или ПАгента:
2.4 Принципы дизайна CSS
CSS2, а до них - CSS1, базируются на наборе принципов дизайна:
Примечание. За дополнительной информацией о разработке доступных документов с использованием CSS и HTML обратитесь, пожалуйста, на >[WAI-PAGEAU>].
