Увага!

Цей документ є перекладом, який може містити помилки та хибності.

Оригінал цієї сторінки доступний за адресою http://www.w3.org/Style/spec-mark-up.html.

Всі авторські права належать W3C.

Переклад зробив Тарас Склепко, технiчне забеспечення - автобазар Украины - 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>Застосовне до:
    <td>всі елементи
  <tr>

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

    <td>Обчислення значення:
    <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;number&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> елемент, який є таким само, як і елемент <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 утилітах.