Jak dodaĆ styl do XML

zewnĘtrzne arkusze stylÓw

Tip: spróbuj w swojej przeglądarce

HTML ma link element, który linkuje do zewnętrznych arkuszy stylów ale nie każdy format oparty o XML będzie posiadał taki element. Jeśli nie ma odpowiedniego elementu można w dalszym ciągu podłączyć zewnętrzny arkusz stylów przy pomocy xml-stylesheet isntrukcji przetwarzania (processing instruction) w następujący sposób:

<?xml-stylesheet href="my-style.css" type="text/css"?>
... rest of document here...

Processing instruction (PI) musi znajdować się przed pierwszym znacznikiem dokumentu. Type="text/css" nie jest wymagany ale pomaga przeglądarce. Jeśli nie wspiera ona CSS to wie, że nie musi zciągać tego pliku.

JTak jak w przypadku elementu link w HTML można stosować wiele xml-stylesheet PIs i mogą one posiadać atrybuty do ustawiania typu, medium i tytułu.

Oto większy przykład. Załóżmy, że mamy trzy arkusze stylów, jeden, który ustawia podstawowy typ wyświetlania każdego elementu (inline, block, list-item, etc.) a dwa pozostałe ustawiają kolory i marginesy. Ostatnie dwa są alternatywne w stosunku do siebie i czytelnik dokumentu może sobie wybrać jeden z nich. Z wyjątkiem kiedy dokument jest drukowany, w którym to przypadku chcemy, żeby jedynie ostani byl zastosowany. Oto typowy arkusz stylów:

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

Ten kod należy do alternatywnych stylów w pliku "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 to kod drugiego "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 }

Dokument XML z tymi arkuszami wygląda w ten sposób:

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

Więcej detali można znaleźć w Rekomendacji W3C pt: “Associating Style Sheets with XML documents”

osadzone arkusze stylÓw

Tip: spróbuj w swojej przeglądarce

HTML ma style element, który pozwala arkuszom na osadzenie ich bezpośrednio w pliku HTML bez potrzeby zamieszczania dodatkowego pliku. W niektórych przypadkach jest to łatwiejsze, szczególnie gdy arkusz jest przeznaczony jedynie dla tego dokumentu.

Większośc formatów opartych na XML nie posiada takiego elementu ale takie same instrukcje przetwarzania (PI), które linkują do zewnętrznych arkuszy mogą również wskazywać arkusze, które są osadzone w samym dokumencie. Od lutego 2006 nadal istnieją problem techniczne związane z tym zagadnieniem i nie istnieją żadne formalne specyfikacje. Na przykład:

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

W tym przypadku musi byc obecny atrybut type="text/css",w przeciwnym razie przeglądarka (lub inny program) musi zgadywać język arkusza stylów. PI xml-stylesheet wskazuje nie na zewnętrzny arkusz ale na element samego dokumentu. Element ten jest identyfikowany poprzez atrybut id , który pełni rolę adresu docelowego odnośnika. (W zależności od formatu XML atrybut id może być nazwany inaczej, w niektórych formatach oże nie być go wcale.)

Inline styles

HTML także pozwala na to aby style były dołączone bezpośrednio do indiwidualnych elementów za pomocą atrybutu style. Większość formatów opartych na XML nie posiada takiego atrybutu, chociaż niektóre zezwalają na pewne cechy (modules) z HTML, które mogą być zastosowane w dokumencie.

Class attributes

Tip: spróbuj w swojej przeglądarce

Atrybut class , który pozwala na tworzenie podklas elementów HTML najprawdopodobniej nie jest dostępny w większości formatów opartych na XML. Oczywiście CSS pozwala na wybór elementów w oparciu o jakikolwiek atrybut nie tylko class, ale syntax nie jest zbyt łatwy.

Oto przykład. Jeśli istnieje atrybut class i format dokumentu definiuje to, że działa on jak HTML, można użyć następującego zapisu z kropką. (Dlatego ten konkretny przykład nie będzie działał, ponieważ <doc> nie jest formatem którego znają przegładarki jako coś co posiada class)

<?xml-stylesheet href="#s1" type="text/css"?>
<doc>
  <s id="s1">
    s { display: none }
    p { display: block }
    p.note { color: red }
  </s>
  <p>Some text... </p>
  <p class="note">A note... </p>
</doc>

Jeśli format dokumentu nie precyzuje że class tworzy podklasy to będzie trzeba użyć dłuższych selektorów z "[ ]":

<?xml-stylesheet href="#s1" type="text/css"?>
<doc>
  <s id="s1">
    s { display: none }
    p { display: block }
    p[class~=note] { color: red }
  </s>
  <p>Some text... </p>
  <p class="note">A note... </p>
</doc>

Jeśli nie ma atrybutu class , ale istnieje coś innego o możemy wykorzystać, stosuje się dalej selektory atrybutu "[ ]" :

spróbuj w swojej przeglądarce

<?xml-stylesheet href="#s1" type="text/css"?>
<doc>
  <s id="s1">
    s { display: none }
    p { display: block }
    p[warning="yes"] { color: red }
  </s>
  <p>Some text... </p>
  <p warning="yes">A note... </p>
</doc>