Увага!

Гэты дакумент з'яўляецца перакладам, які можа ўтрымоўваць памылкі і памылкі друку.

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

Усе аўтарскія правы прыналежаць W3C.

Пераклад зрабіў Шарылау Аляксандр пры падтрымцы Функции государства. Гражданское и правовое общество

Разметка спецыфікацый CSS

(Гэта старонка выкарыстоўвае CSS стылі)

Пачатак

Крыніца CSS3

Крыніца CSS2

Праграмы

CSS2 і розныя модулі CSS3 маюць спецыфічныя разметкі ў HTML. Разметка дазваляе задаваць стылі розным выглядам інфармацыі (імёнам уласцівасцяў, нататкам, прыкладам і г.д.), але першым чынам яна дазваляе розным праграмам счытвацца паводле яе спецыфікацыі.Гэтыя праграмы могуць зрабіць спіс усіх уласцівасцяў, здабываць сінтаксіс зразумелы ім, правяраць прыклады і г.д. У наступных частках утрымоўваюцца падрабязнасці.

Пачатак дамоў разметкі

У CSS2 і CSS3 разметка не аднолькавая. Тэхналогія CSS3 малодшай на некалькі гадоў CSS2 і з'яўляецца яе дапрацоўкай. Бо яна больш кампактная і семантычная.

Разметка апублікаваных тэкстаў CSS не з'яўляецца сапраўды такі ж, як разметка, якую аўтары выкарыстоўвалі пры напісанні тэксту. Апошнія скарачэнні, пашыраюцца аўтаматычна перад тым як дакумент будзе апублікаваны. Напрыклад, аўтары амаль ніколі не стваралі спасылкі. Замест гэтага, яны ўключаюць тэгі ці адмысловыя знакі, якія паказваюць ролю слова (назва ўласцівасці, прыналежнасць да тэхнічнага тэрміна, бібліяграфічныя спасылкі і г.д.), і кожнае такое слова аўтаматычна злучана з яго вызначэннем.

Чым менш распрацоўнікам неабходна набіраць тэксту, тым менш памылак будзе дапушчана пры працы і больш часу застанецца на працу над утрыманнем. Акрамя таго, паколькі, кампутар дадае спасылкі і шматлікую іншую разметку, таму, у выніку, дакумент будзе больш паслядоўным. У той жа час гэта па-ранейшаму паўнавартасны HTML дакумент, які можна змяняць і праглядаць. Ён проста мае менш спасылак і трохі менш кветак, чым канчатковы дакумент.

Такія паслядоўныя дакументы маюць шэраг пераваг. Напрыклад, табліца ўтрымання, індэкс і спіс усіх уласцівасцяў ствараны аўтаматычна. Акрамя таго, розныя аўтаматычныя праверкі могуць быць выкананы, перш чым апублікаваны дакумент, напрыклад: ці ўсё ўласцівасці, якія сустракаюцца ў тэксце, вызначаны? ці ўся граматыка поўная? усе прыклады правільныя? усе бібліяграфічныя спасылкі вызначаны?

Крыніца разметкі CSS3

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

Дзвюма важнымі характарыстыкамі гэтай разметкі (і праграм, якія яе чытаюць) з'яўляюцца:

Уласцівасці

Уласцівасці асобных слоў, зняволеных у адзінарныя двукоссі, напрыклад,

'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-->

Крыніца разметкі CSS2

[To do]

Праграмнае забеспячэнне

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

CSS Valid CSS!

Bert Bos , Кіроўны распрацоўкі W3C стыляў
Вэб-майстар
Апошняе абнаўленне: $Дата: 2009-10-10$ GMT