Внимание!

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

Оригинал этой страницы доступен по адресу http://www.w3.org/Style/spec-mark-up.html.

Все авторские права принадлежат W3C.

Перевод сделан Склепко Тарасом при поддержке Reginform и автобазар Украины - rstcars.

Источник разметки CSS3

CSS3 модули не всегда являются опубликованными в документе. Хотя разметка, которую используют авторы включена, читатели никогда её не увидят.

Двумя важными характеристиками этой разметки (и программ, которые ее читают) являются:

• Оба авторских документа, а также опубликованный окончательный документ - правильные HTML документы, просматриваются и редактируются обычными программами читающими HTML.
• Окончательный документ является правильным входом для различных инструментов, с помощью которых редактируют разметку. Таким образом, если исходный авторский документ утерян или непросматриваем, старый окончательный документ может быть отредактирован и обработан до другого итогового документа (Существующая разметка будет либо удалена и восстановлена или оставлена "как есть".)

Свойства

Свойства отдельных слов, заключенных в одинарные кавычки, например,

'font'
'text-indent'

Это все, что автор должен прописать. Слова автоматически заключенные в элемент <a> с классом "property" будут генерироваться в ссылку с определенными свойствами:

<a class=property href="#font0">'font'</a>
<a class=property href="#text-indent">'text-indent'</a>

Все имена свойств являются разметкой, кроме случаев, когда они входят в пример или в некоторые части CSS кода. Определение свойства также не имеет кавычек.

Строчный CSS код и ключевые слова CSS

Строчный CSS, также заключается в одинарные кавычки или две одинарные кавычки, например:

'color: blue'
''display: none''

Автор пишет только одинарные кавычки, при этом текст обрамляется в тег <span> с классом "css" при публикации. Если используются две одинарные кавычки, одна пара кавычек удаляется:

<span class=css>'color: blue'</span>

<span class=css>'display: none'</span>

Ключевые слова CSS (кроме имен свойств) должны быть заключены в две одинарные кавычки, чтобы отличить их от свойств:

''none'' 

В результате в опубликованном документе слово обрамляется в одинарные кавычки и тег <span>

<span class=css>'none'</span>

Значения типов

Значения типов заключаются в угловые скобки и в элементы <var>. Например:

<var>&lt;integer&gt;</var>
<var>&lt;color&gt;</var>

<var>&lt;percentage&gt;</var>

[Разметка определений такого типа еще не разработана.]

Перекрестные ссылки и термины

Например, определение термина заключено в <dfn> элемент (означает, что оно в итоге будет в алфавитном индексе ):

<dfn>dog</dfn>

Для ссылки на определения, автор может использовать некоторые строчные элементы (<em>, <span> и т.д.) и текст автоматически будет обрамлен в <a> элемент, который ссылается на определение.

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

<dfn title="dog">dogs</dfn>

<em>dog</em>
<span title="dog">dog</span>

Результат выглядит следующим образом:

<dfn id=dogs0 title="dog">dogs</dfn>
<em><a href="#gogs0">dog</a></em>

<span title="dog"><a href="#dogs0">dog</a></span>

Свойства определений

Таблица свойств определений:

Имя:	Обрамление (padding)
Значение:	[ <length> | <percentage> ]{1,4}
Начальное:	(см. отдельные свойства)
Применимо к:	все элементы
Наследование:	нет
Процентное:	ширина(width*) контентного блока
Информация:	визуальная
Вычисленное значение:	см. отдельные свойства
*) Если контентный блок является горизонтальным, в противном случае вертикальным

Который создается следующим образом:

<table class=propdef>
  <tr>
    <td>Имя:
    <td><dfn>padding</dfn>

  <tr>
    <td>Значение:
    <td>[ <var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var>

    ]{1,4}
  <tr>
    <td>Начальное:
    <td>(см. отдельные свойства)
  <tr>
    <td>Применимо&nbsp;к:
    <td>все элементы
  <tr>

    <td>Наследование:
    <td>нет
  <tr>
    <td>Процентное:
    <td>ширина(width*) контентного блока
  <tr>
    <td>Информация:
    <td>визуальная
  <tr>

    <td>Вычисленное&nbsp;значение:
    <td>см. отдельные свойства
  <tr>
    <td colspan=2 class=footnote>*) Если контентный блок является горизонтальным, в противном случае вертикальным 
</table>

Таблица имеет класс "propdef" и имя свойства, которое обрамлено в <DFN> элемент (но оно не в одинарных кавычках). При публикации документа, идентификатор атрибута будет автоматически обрамляться в <DFN> элемент и свойство имени добавляется в алфавитный указатель и индекс свойства.

Дескриптор определений

Определение дескрипторов (характеристик шрифтов, внутри @font-face правила) являются аналогичными. Они выглядят так:

Имя:	Высота(x-height)
Значение:	<number>
Начальное:	неопределено
Информация:	визуальная

Таблица имеет класс "descdef" и выглядит следующим образом:

<table class="descdef">

<tr><td>Имя: <td><dfn>высота(x-height)</dfn>
<tr><td>Значение: <td>&lt;номер&gt;
<tr><td>Начальное: <td>неопределено

<tr><td>Информация: <td>визуальная
</table>

Библиографические ссылки

Есть два вида библиографических ссылок: нормативные и информативные. Авторские типы оформляются как

[[!CSS3BOX]]
[[!UNICODE4]]

где "CSS3BOX" и " UNICODE4" являются ярлыками элементов, которые определяются во внешних(1) базах данных. Информационные ссылки те же, но без восклицательного знака:

[[SELECT]]
[[MEDIAQ]]

В опубликованном документе, такие ссылки будут расширены в ссылки на библиографию следующим образом:

<a href="#CSS3BOX" rel=biblioentry>[CSS3BOX]<!--{{CSS3BOX}}--></a>
<a href="#UNICODE4" rel=biblioentry>[UNICODE4]<!--{{UNICODE4}}--></a>
<a href="#SELECT" rel=biblioentry>[SELECT]<!--{{SELECT}}--></a>
<a href="#MEDIAQ" rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a>

Причиной включения этого комментария является то, что она позволяет окончательному документу, который будет редактироваться, не снимая элементы <a> восстановить библиографию, несмотря на отсутствие двойных квадратных скобок. (В теории, в опубликованных спецификациях никогда ничего не изменилось, но практика и теория не всегда одинаковы ...)

Библиография

Библиография генерируется автоматически из библиографических ссылок и данных внешних библиографических баз данных. В результате вставляем на место следующие два комментария в исходнике:

<!--normative-->
<!--informative-->

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

<!--begin-normative-->
  <!-- Sorted by label -->

  <dl class=bibliography>
   <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
    <!---->

   <dt id=CSS3LINE>[CSS3LINE]

   <dd>Michel Suignard; Eric A. Meyer. <cite>CSS3 module: line.</cite> 15 May
    2002. W3C Working Draft. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2002/WD-css3-linebox-20020515">http://www.w3.org/TR/2002/WD-css3-linebox-20020515</a>
    </dd>
   <!---->

   <dt id=CSS3SYN>[CSS3SYN]

   <dd>L. David Baron. <cite>CSS3 module: Syntax.</cite> 13 August 2003. W3C
    Working Draft. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2003/WD-css3-syntax-20030813">http://www.w3.org/TR/2003/WD-css3-syntax-20030813</a>

    </dd>
   <!---->
  </dl>
  <!--end-normative-->

Индекс условий

Простейшая разметка, котороя ставит слово или фразу в алфавитный индекс <span> с классом "Index":

<span class=index>containing block</span>

Когда термин должен отображаться в инлексе отлично от его представления в тексте, текст атрибута тайтл (title) используется для индекса:

<span class=index title="box">boxes</span>
<span class=index title="inherited value">inherit a value</span>

Когда этот термин должен появиться в индексе, по двум или более различным записям, название атрибута тайтл (title) содержит различный текст, разделенный вертикальной чертой:

<span class=index title="outer edge|margin edge">outer (margin) edge</span>

Когда термин должен быть представлен раньше, чем другой термин, название атрибута тайтл (title) должно содержать подзапись, разделенную двумя восклицательными знаками:

<span class=index title="edge!!outer">outer edge</span>
<span class=index title="edge!!inner">inner edge</span>

Конечно, эти условия можно комбинировать:

<span class=index title="edge!!outer|edge!!margin">outer edge</span>

В случае определения экземпляра объекта термина, элемент <DFN> заменяет элемент span и класс упраздняется:

<dfn>padding</dfn>

Название атрибута может быть вставлено в <DFN> элемент точно так же, как и в <span>.

Все индексы условий автоматически получают идентификатор атрибута.

Индекс

Алфавитный индекс, который создается из индекса условий, автоматически вставляется в документ по месту следующиего комментария:

<!--index-->

Результат выглядит следующим образом:

<!--begin-index-->
<ul class=indexlist>
 <li>anonymous, <a href="#anonymous0"><strong>#</strong></a>

 <li>'writing-mode', <a href="#writing-mode"><strong>#</strong></a>
</ul>
<!--end-index-->

Примеры

Примеры разметки с классом “example” могут быть либо <div>, либо <pre>. Если в бывшем примере приводится пояснительный текст или изображение, последний пример ничего не содержит, кроме кода:

<div class=example>
 ...
</div>

<pre class=example>
 ...
</pre>

Данные

Данные как правило, имеют подписи. Рисунок и надпись заключаются в <div> с классом "figure" следующим образом:

<div class="figure">
  <p><img src="box.png" alt="Прямоугольники имеют четыре стороны [schema]">
  <p class=caption>Отношения между четырьмя…
</div>

Заметки

Класс "note" указывается ненормативного. Он обычно используется в тегах <p>, <div> или <span>.

<p class=note>Обратите внимание, что…

Номера разделов

Номера разделов обычно добавляются автоматически. Они заключаются в элемент span с классом "secno" и выглядят следующим образом:

<span class=secno>1. </span>

Подразделы нумеруются 1.1., 1.1.1 и т.д.

Заголовки

CSS3 имеет только один <h1> element, который является таким же, как и элемент <title> (без знаков препинания и сокращений).

Содержание

Содержание генерируется автоматически и вставить его на место можно следующим комментарием:

<!--toc-->

Результат выглядит следующим образом:

<!--begin-toc-->
<ul class=toc>
 <li><a href="#dependencies"><span class=secno>1. </span>Зависимости от других модулей</a>
 <li><a href="#introduction"><span class=secno>2. </span>Введение</a>
</ul>
<!--end-toc-->

Программное обеспечение

Рабочая группа CSS использует разнообразные инструменты для разработки, тестирования и другого использования спецификаций указанных выше. Некоторые инструменты это CGI скрипты, часть из которых это Perl программы или Sed скрипты. Но большая часть обработки производится с различными комбинациями из инструментов С в HTML-XML утилитах.