Како додати стил XML-у

Спољашњи стилски фајлови

Савет: пробајте ово у свом браузеру

HTML има link елеменат за линковање ка спољашњим стилским фајловима, али немају сви формати засновани на XML-у такав елеменат. Ако не постоји одговарајући елеменат, можете и даље да прикључите спољашњи стилски фајл помоћу xml-stylesheet инструкције за процесирање овако:

<?xml-stylesheet href="my-style.css" type="text/css"?>
... остатак документа овде...

Ова инструкција за процесирање (PI) мора доћи пре првог елемента документа. type="text/css" није обавезан, али помаже браузеру: ако не подржава CSS, зна да неће морати да учита тај фајл.

Као и са link елементом HTML-a, могу постојати вишеструке xml-stylesheet инструкције за процесирање и оне могу имати атрибуте за обележавање типа, медијума и наслова.

Ево већег примера. Претпоставимо да имамо три стилска фајла, један који поставља основни презентациони тип сваког елемента (линиски, блок, елеменат листе, итд.) и друга два који постављају боје и маргине. Два последња су алтернативе један другом, и читаоц документа може изабрати који оће да користи. Осим кад се докуменат штампа, у којем случају ми желимо да користимо само последњи стил. Овде је уобичајен стилски фајл:

/* common.css */
INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }

Ово је један од могућих стилова, у фајлу названом "modern.css":

/* modern.css */
ARTICLE { font-family: sans-serif; background: white; color: black }
AUTHOR { margin: 1em; color: red }
HEADLINE { text-align: right; margin-bottom: 2em }
PARA { line-height: 1.5; margin-left: 15% }
INSTRUMENT { color: blue }

А ово је други, назван "classic.css":

/* classic.css */
ARTICLE { font-family: serif; background: white; color: #003 }
AUTHOR { font-size: large; margin: 1em 0 }
HEADLINE { font-size: x-large; margin-bottom: 1em }
PARA { text-indent: 1em; text-align: justify }
INSTRUMENT { font-style: italic }

XML докуменат са ова три стилска фајла линкована ка њему изгледа овако:

<?xml-stylesheet href="common.css" type="text/css"?>
<?xml-stylesheet href="modern.css" title="Modern" media="screen"
  type="text/css"?>
<?xml-stylesheet href="classic.css" alternate="yes"
  title="Classic" media="screen, print" type="text/css"?>
<ARTICLE>
  <HEADLINE>Fredrick the Great meets Bach</HEADLINE>
  <AUTHOR>Јохан Николаус Форкел</AUTHOR>
  <PARA>
    Једно вече, баш док је спреман узимао своју
    <INSTRUMENT>флауту</INSTRUMENT> и кад су његови музичари су били окупљени, 
официр му је донео листу непознатих лица која су била стигла.
  </PARA>
</ARTICLE>

За више детаља, погледајте W3C Препоруку “Прикључивање Стилских Фајлова XML документима.”

Уграђени стилски фајлови

Савет: пробајте у свом браузеру

HTML има style елеменат који дозвољава стилсим фајловима да буду уграђени директно у HTML фајл, без потребе за спољним фајлом. У неким случајевима то је лакше, нарочито када је стилски фајл веома специфичан датом документу.

Већина формата заснованих на XML-у неће имати такав елеменат, али исте PI које линкују ка спољним стилским фајловима могу да се искористе да линкују ка стилским фајловима који су уграђени у сам докуменат. Од Фебруара 2006, и даље постоје технички проблеми са овиме, и не постоји формална спецификација. На пример:

<?xml-stylesheet href="#style" type="text/css"?>
<ARTICLE>
  <EXTRAS id="style">
    INSTRUMENT { display: inline }
    ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
    EXTRAS { display: none }
  </EXTRAS>
  <HEADLINE>Фредерик Велики сусреће Баха</HEADLINE>
  ...
</ARTICLE>

У овом случају type="text/css" атрибут мора постојати, иначе браузер (или неки други програм) мора да погађа стилски језик. xml-stylesheet PI сада показује не ка спољашњем стилском фајлу, него ка елементу унутар самог документа. Тај елеменат је идентификован са id атрибутом који служи као мета линка. (У зависности од конкретног XML формата, id атрибут се може звати другачије; у неким форматима можда и неће постојати одговарајући атрибут.)

Линијски стилови

HTML такође дозвољава стиловима да вуду директно прикачени индивидуалним елементима уз помоћ style атрибута. Већина документ формата занованих на XML-у неће имати такав атрибут, мада неки дозвољавају карактеристике (modules) из HTML да се користе унутар документа.

Class атрибути

Савет: пробајте у свом браузеру

class атрибут који вам омогућава да креирате подкласе елемената у HTML такође није вероватно да ће те га наћи у већини докумената заснованих на XML формату. Наравно, CSS вам допушта да изаберете елементе засноване на било ком атрибуту, не само class, али синтакса није тако угодна.

Ево примера. Ако постоји class атрибут и формат документа дефинише да то ради као у HTML-у, ми можемо користити нотацију са тачком. (Стога, овај конкретан пример неће радити јер <doc> није формат који браузери знају као нешто што има class)

<?xml-stylesheet href="#s1" type="text/css"?>
<doc>
  <s id="s1">
    s { display: none }
    p { display: block }
    p.note { color: red }
  </s>
  <p>Неки текст... </p>
  <p class="note">Порука... </p>
</doc>

Ако формат документа не специфицира да class ствара подкласу, онда ви треба да користите дуже селекторе са "[ ]":

<?xml-stylesheet href="#s1" type="text/css"?>
<doc>
  <s id="s1">
    s { display: none }
    p { display: block }
    p[class~=note] { color: red }
  </s>
  <p>Неки текст... </p>
  <p class="note">Порука... </p>
</doc>

Ако не постоји атрибут class, али има нешто друго што можемо да користимо, атрибут селектор "[ ]" и даље важи:

пробајте у свом браузеру

<?xml-stylesheet href="#s1" type="text/css"?>
<doc>
  <s id="s1">
    s { display: none }
    p { display: block }
    p[warning="yes"] { color: red }
  </s>
  <p>Неки текст... </p>
  <p warning="yes">Порука... </p>
</doc>