KaskßdovΘ styly a XML

Ji°φ Kosek ml.

KaskßdovΘ styly (CSS) znß v∞tÜina webov²ch v²vojß°∙ a autor∙ z jazyka HTML. Pokud budou chtφt pou₧φt styl s XML dokumentem, bude pro n∞ CSS tou prvnφ volbou. Pou₧itφ stylu pro XML dokument je nutnΘ, proto₧e, narozdφl od HTML, zde neexistuje ₧ßdn² standard, jak se majφ jednotlivΘ elementy zobrazovat. Na ukßzce 1 vidφme, jak to dopadne, kdy₧ ukßzkov² dokument naΦteme do prohlφ₧eΦ∙ bez stylu.

Ukßzka 1: Zobrazenφ XML dokumentu bez stylu

Ukßzkov² dokument

<?xml version="1.0" encoding="utf-8"?>
<clanek>
  <zahlavi>
    <rubrika>TΘma t²dne</rubrika>
    <nazev>XML a stylovΘ jazyky</nazev>
    <autor>Ji°φ Kosek</autor>
  </zahlavi>
  <perex>V n∞kolika p°edchozφch Φφslech Computerworldu jsme se
    seznßmili s jazykem XML a s tφm jak v n∞m vytvß°et
    dokumenty. Jazyk XML je v²born² formßt pro p°enos dat mezi
    r∙zn²mi systΘmy. V urΦitΘm okam₧iku vÜak v₧dy do procesu
    zpracovßnφ dokument∙ a dat vstupuje Φlov∞k. V tomto okam₧iku je
    pot°eba dokument prezentovat ve form∞, kterß je pro Φlov∞ka
    nejsrozumiteln∞jÜφ.</perex>
  <!-- Po perexu zaΦφnß text Φlßnku. Tohle je jen komentß°. -->
  <para zarovnani="nastred">Jazyk XML definuje pouze strukturu
    dokument∙. Chceme-li vÜak dokument p°ehledn∞ zobrazit, musφme
    n∞jak²m zp∙sobem definovat, jak se jednotlivΘ elementy zobrazφ --
    jakou barvou, jak²m pφsmem, jak budou zarovnanΘ apod. Pro definici
    vzhledu dokument∙ se dnes pou₧φvajφ tzv. <em>stylovΘ
    jazyky</em>. Mezi t°i nejznßm∞jÜφ a nejpou₧φvan∞jÜφ pat°φ jazyky
    CSS, XSL a DSSSL.</para>
 <para zarovnani="doprava">V dneÜnφm tΘmatu t²dne se na n∞
    podφvßme podrobn∞ji a ukß₧eme si, jak vytvo°it XML dokument a
    odpovφdajφcφ styl tak, aby se dokument dal zobrazit v prohlφ₧eΦφch, kterΘ podporujφ XML (konkrΘtn∞ tedy v Internet
    Exploreru 5.0 a ve v²vojovΘ verzi Netscape Navigatoru znßmΘ pod
    nßzvem Gecko).</para>
</clanek>

IE si s dokumentem poradφ celkem p∞kn∞ i bez stylu. Cel² dokument je zobrazen jako stromovß struktura zachycujφcφ hierarchii jednotliv²ch element∙.

V Gecku u₧ to tak dob°e nedopadne. Je zobrazen pouze nep°ehledn∞ uspo°ßdan² text dokumentu

P°ipome≥me si ve struΦnosti, jak vypadajφ CSS. Styl se v₧dy sklßdß z n∞kolika pravidel. Ka₧dΘ pravidlo mß dv∞ Φßsti -- selektor a deklaraci. Selektor urΦuje, pro kterΘ elementy se pou₧ije deklarace. Deklarace pak obsahuje jednotlivΘ vlastnosti (pφsmo, barva, zarovnßnφ) a jejich konkrΘtnφ hodnoty. Kaskßdov²mi styly jsme se podrobn∞ji zab²vali v serißlu Vytvß°φme si domovskou strßnku, kter² vychßzel v roce 1997. Pokud nemßte k dispozici starÜφ Φφsla Computerworldu, m∙₧ete si pasß₧e o CSS p°eΦφst na adrese http://www.kosek.cz/clanky/html/. P°ehled vÜech vlastnostφ CSS naleznete na strßnce http://www.kosek.cz/clanky/web/css-ref.html.

Selektorem b²vß nejΦast∞ji nßzev elementu, pro kter² deklarujeme vzhled. Mßme mo₧nost vytvß°et i slo₧it∞jÜφ selektory, kterΘ se aplikujφ pouze na elementy v urΦitΘm kontextu nebo na elementy, kterΘ obsahujφ urΦit² atribut.

P°i vytvß°enφ stylu pro XML dokument musφme postupovat trochu odliÜn∞ oproti styl∙m pro HTML strßnky. Styl p°ipojen² k HTML strßnce v∞tÜinou pouze upravuje vzhled n∞kter²ch element∙. V naÜem p°φpad∞ vÜak zaΦφnßme na zelenΘ louce a musφme definovat vzhled vÜech element∙.

Obvykle zaΦneme s definicφ stylu pro ko°enov² element, kter² v sob∞ obsahuje cel² dokument. V HTML je ko°enov²m elementem html v naÜφ ukßzce je to clanek. U n∞j deklaruje vlastnosti, kterΘ majφ b²t spoleΦnΘ pro cel² dokument -- nap°. barvu pozadφ nebo pou₧it² druh pφsma. Jak takov² styl vypadß si m∙₧ete prohlΘdnout na ukßzce 2.

Ukßzka 2: Zobrazenφ XML dokumentu se stylem

Ukßzkov² styl styl.css byl k XML dokumentu p°ipojen pomocφ "magickΘ" °ßdky:

<?xml-stylesheet href="styl.css" type="text/css"?>

Soubor se stylem styl.css

/* Cel² dokument bude na bφlΘm pozadφ, fontem Arial */
clanek { background-color: white;
	 font-family: Arial, Verdana, sans-serif }

/* Rozd∞lenφ element∙ na blokovΘ a inline */
zahlavi, nazev, autor, perex, para, rubrika { display: block }
em { display: inline }

/* Zßhlavφ Φlßnku */
zahlavi { text-align: center;
          padding: 10pt;
          margin: 20pt; 
          background-color: silver;
          border: 4pt outset silver }

/* Rubrika */
rubrika { float: right; 
          color: yellow;
          font-size: small;
          font-weight: bold }

/* Nßzev Φlßnku */
nazev { font-size: 300%;
        text-transform: uppercase;
        color: blue;
        margin: 5pt }

/* Autor Φlßnku */
autor { font-style: italic }

/* Mezera mezi odstavci */
para, perex { margin: 5pt 20pt }

/* Perex je zv²razn∞n²m pφsmem a s odliÜnou ·pravou prvnφ °ßdky */
perex { font-style: italic;
        font-weight: bold; }
perex:first-letter { font-size: 200% }
perex:first-line { text-transform: uppercase }

/* Test na atributovΘ selektory -- zarovnßnφ odstavce */
para[zarovnani="nastred"] { text-align: center }
para[zarovnani="doleva"] { text-align: left }
para[zarovnani="doprava"] { text-align: right }

/* Zv²razn∞nφ textu */
em { font-weight: bold }

Interpretace stylu prob∞hla v IE celkem dob°e. IE 5 bohu₧el neumφ pracovat s atributov²mi selektory, tak₧e nem∙₧e nap°φklad ovlßdat zarovnßnφ odstavce pomocφ atribut∙.

Nynφ mß Gecko navrch. Korektn∞ interpretovalo vÜe, co je ve stylu -- tedy i atributovΘ selektory a pseudoelementy, kterΘ umo₧≥ujφ m∞nit formßtovßnφ pro prvnφ pφsmeno nebo °ßdku odstavce.

DalÜφm d∙le₧it²m krokem p°i tvorb∞ stylu je rozliÜenφ blokov²ch a inline element∙. BlokovΘ elementy jsou ty, kterΘ zp∙sobujφ zalomenφ °ßdky -- nap°. odstavce textu, nadpisy, tabulka apod. Inline elementy jsou pak vÜechny ostatnφ, kterΘ se obvykle projevφ pouze zm∞nou pφsma v odstavci. Implicitn∞ jsou prohlφ₧eΦem vÜechny elementy pova₧ovßny za inline, tak₧e je cel² dokument zobrazen jako jeden dlouh² nep°ehledn² odstavec (jak je vid∞t na obrßzku z prvnφ ukßzky).

DalÜφ pravidla v ukßzkovΘm stylu ji₧ jen drobn∞ upravujφ v²slednΘ zobrazenφ tak, aby vyhov∞lo naÜim zßm∞r∙m. Zajφmavostφ, kterou neznßme z HTML, jsou atributovΘ selektory. Ty umo₧≥ujφ vytvß°et pravidla, kterß se aplikujφ pouze v p°φpad∞, ₧e v poΦßteΦnφm tagu elementu je p°φtomen urΦit² atribut.

NejjednoduÜÜφ atributov² selektor mß tvar element[atribut], kter² je spln∞n v p°φpad∞, ₧e u elementu je pou₧it atribut. V praxi se vÜak obvykle budou aplikovat r∙znß pravidla v zßvislosti na obsahu atributu. Potom m∙₧eme pou₧φt selektor element[atribut="hodnota"], kter² je pou₧it v p°φpad∞, kdy mß atribut po₧adovanou hodnotu. Tento p°φstup je pou₧it i v ukßzkovΘm stylu, kde m∙₧eme u odstavce para m∞nit zp∙sob zarovnßnφ. TroÜku Ükoda je, ₧e tento standardnφ mechanismus nenφ v IE 5.0 implementovßn.

I z naÜφ malΘ ukßzky bylo patrnΘ, ₧e pou₧itφ kaskßdov²ch styl∙ spoleΦn∞ s XML je velice jednoduchΘ a pro mnoho ·Φel∙ dostaΦujφ. Umo₧nφ nßm zcela odd∞lit strukturu dokumentu a v²znam ulo₧en²ch dat od jejich vizußlnφ reprezentace.