Jak do XML přidat styl

Externí soubory stylů

Tip: vyzkoušejte to ve svém prohlížeči

HTML má link element pro odkázání se na externí soubor stylů, ale ne každý formát založený na XML bude mít takový element. Pokud neexistuje vhodný element, stále můžete připojit externí soubor stylů pomocí xml-stylesheet zpracování takto:

<?xml-stylesheet href="my-style.css" type="text/css"?>
... Zbytek dokumentu ...

Instrukce pro zpracování (PI) musí být prvním tagem dokumentu. type="text/css" není nutné, ale pomáhá to prohlížeči: pokud nepodporuje CSS, ví, že tento soubor nemusí stahovat

Stejně jako u link elementu HTML, můžete využít více xml-stylesheet PI a ty budou moci mít atributy pro nastavení type, medium a title.

Tady je větší ukázka. Předpokládejme, že máme tři soubory stylů, jeden, který nastaví základní zobrazení každého elementu (inline, block, list-item, atd.) a dva další, které nastavují barvu a okraje. Dva posledně jmenované jsou svými alternativami, a uživatel si může vybrat, který z nich zvolí. Jedinou vyjímkou je tisk dokumentu, kdy chceme, aby byl použit pouze poslední styl. Tady je první common style sheet:

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

Toto je první alternativní styl, pojmenovaný "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 }

A tady je druhý, nazvaný "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 dokument s těmito třemi soubory stylů vypadá takto:

<?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>Johann Nikolaus Forkel</AUTHOR>
  <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
    the strangers who had arrived.
  </PARA>
</ARTICLE>

Pro více informací, navštivte W3C Doporučení “Asociativní styly a XML dokument ”

Vložené soubory stylů

Tip: vyzkoušejte to ve svém prohlížeči

HTML má style element, který umožňuje soubory stylů vložit přímo do HTML souboru bez potřeby externího souboru. V některých případech je to jednodušší, především, je-li tento soubor stylů jedinečný pro tento dokument.

Většina formátů založených na XML nebude mít takový element, ale stejné PI , které odkazuje na externí soubor stylů, může být i zde použito pro odkázání se na soubory stylů které jsou vloženy v samotném dokumentu. V únoru 2006, tu jsou stále jisté technické problémy s tímto spojené, a neexistuje žádná formální specifikace. Například:

<?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>Fredrick the Great meets Bach</HEADLINE>
  ...
</ARTICLE>

V tomto případě type="text/css" atribut musí být přítomen, jinak prohlížeč (či jiný program) musí jazyk souboru stylů pouze hádat. xml-stylesheet PI nyní neodkazuje na externí soubor stylů, ale na element dokumentu samotného. Tento element je identifikován id atribudem, který slouží jako cíl odkazu. (V závislosti na konkrétním XML formátu může být id atribut nazván jinak; v některých formátech vůbec vhodný atribut být nemusí.)

Inline styly

HTML také umožňuje aby byly styly přiřazeny přímo k individuálnímu elementu styles použitím style atributu. Většina formátů založených na XML nebude mít takový atribut, ačkoli některé mohou povolovat prvky (moduly) HTML použité uvnitř dokumentu.

Atributy tříd

Tip: vyzkoušejte to ve vašem prohlížeči

atribut class který umožnuje vytvořit podtřídy elementů HTML také pravděpodobně nebude dostupný ve většině formátů založených na XML. Samozřejmě že CSS vám umožní označit elementy na základě jakéhokoli atributu, nejen class, ale syntax je méně vhodná.

Zde je příklad. Máme-li atribut class a formát dokumentu definuje, že funguje jako v HTML, můžeme použít tečkový zápis. (Takže tento konkrétní příklad nebude fungovat, protože <doc> není formát, který prohlížeče znají jako něco, co má atribut class)

<?xml-stylesheet href="#s1" type="text/css"?>
<doc>
  <s id="s1">
    s { display: none }
    p { display: block }
    p.note { color: red }
  </s>
  <p>Nějaký text... </p>
  <p class="note">Poznámka... </p>
</doc>

Pokud formát dokumentu nespecifikuje, že class vytváří podtřídy, pak budete muset použít delší selektory - "[ ]":

<?xml-stylesheet href="#s1" type="text/css"?>
<doc>
  <s id="s1">
    s { display: none }
    p { display: block }
    p[class~=note] { color: red }
  </s>
  <p>Nějaký text... </p>
  <p class="note">Poznámka... </p>
</doc>

Pokud tu není žádný class attribut, ale je tu něco jiného co můžeme použít, atributové selektory "[ ]" se budou aplikovat i zde:

vyzkoušejte to ve vašem prohlížeči

<?xml-stylesheet href="#s1" type="text/css"?>
<doc>
  <s id="s1">
    s { display: none }
    p { display: block }
    p[warning="yes"] { color: red }
  </s>
  <p>Nějaký text... </p>
  <p warning="yes">Poznámka... </p>
</doc>