Slabikář XML – CSS

13. května 2002

•

XML byl navržen pro práci se strukturovanými daty. Narozdíl od HTML, samotný XML dokument neobsahuje žádné informace o tom, jak mají být data zobrazena. Naštěstí ale můžeme k XML dokumentu přiřadit nějaký styl (CSS, XSL) a určit tak způsob formátování dat. V tomto díle se budeme zabývat pouze prací s CSS.

Na úvod malá poznámka – kombinaci XML a CSS podporují pouze prohlížeče MS Internet Explorer a Mozilla. Doporučuji pracovat s Mozillou, jelikož Mozilla podporuje CSS v kombinaci s XML podstatně lépe než MSIE.

Styl k dokumentu přiřadíme vložením deklarace, která má tuto skladbu:

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

Deklaraci stylů pak vložíme hned za deklaraci XML. V praxi to bude vypadat takto:

<?xml version=“1.0″?>
<?xml-stylesheet href=“styl.css“ type=“text/css“?>
<xml>
  <nadpis>
    <nazev>Název</nazev>
    <cena>Cena</cena>
  </nadpis>
  <produkt>
    <nazev>Houska</nazev>
    <cena>1,20</cena>
  </produkt>
  <produkt>
    <nazev>Rohlík</nazev>
    <cena>0,90</cena>
  </produkt>
  <produkt>
    <nazev>Kobliha</nazev>
    <cena>3,50</cena>
  </produkt>
</xml>

Deklarace ještě může mít nastavenou hodnotu atributu media, který určuje, pro jaké médium je styl určen:

<?xml version=“1.0″?>
<?xml-stylesheet href=“stylnaobrazovku.css“ type=“text/css“ media=“screen“?> // styl pro obrazovku počítače
<?xml-stylesheet href=“stylktisku.css“ type=“text/css“ media=“print“?> // styl pro tisk
<?xml-stylesheet href=“stylprojektor.css“ type=“text/css“ media=“projection“?> // styl pro projektor
…

Nyní si vytvoříme soubor se styly. Předpokládám, že základní znalosti práce s CSS již máte, pokud tomu tak není, přečtěte si článek Miloslava Ponkráce Kompletní seznam vlastností CSS stylů použitelných v HTML. I pro ty, kteří CSS ovládají, připomenu prvek display. Byl zahrnut již do CSS1, ale v HTML se téměř nepoužívá. Pomocí display lze určit, zda-li bude element zobrazen jako inline (přímo v textu), block (jako samostatný odstavec), nebo třeba jako položka v seznamu. CSS2 dokonce umožňuje pomocí display vytvářet tabulky. Následuje seznam hodnot vlastnosti display:

inline – zobrazí se jako součást textu
block – zobrazí se jako samostatný odstavec
list–item – zobrazí se jako položka seznamu
none – nezobrazí se
table – zobrazí se jako tabulka = tento element obsahuje podelementy, které budou tvořit prvky v tabulce
table–row – zobrazí se jako řádek tabulky = jeho podelementy budou prvky v řádku tabulky
table–column – zobrazí se jako sloupec tabulky = jeho podelementy budou prvky ve sloupci tabulky
table–row–group – zobrazí se jako skupina řádků = jeho podelementy jsou řádky
table–column–group – zobrazí se jako skupina sloupců = jeho podelementy jsou sloupce
table–cell – zobrazí se jako okénko tabulky = jeho obsah se zobrazí jako prvek v tabulce

První čtyři hodnoty jsou obsaženy již v CSS1. S jejich použitím by soubor styl.css vypadal třeba takto:

xml {
font-family : Arial, Helvetica, sans-serif;
font-size : 13px;
display : table;
}
produkt {
display: block;
}
nadpis {
display: block;
font-weight : bold;
}
nazev {
display : inline;
}
cena {
display : inline;
}

A výsledek takto:

XML soubor s použitím stylů

Nyní použijeme i tabulky a celkový vzhled trochu doladíme. Soubor styl.css bude tentokrát vypadat následovně:

xml {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
display: table;
border: 1px solid #000000;
}
produkt {
display: table-row;
}
nadpis {
display: table-row;
}
nadpis nazev {
color: white;
display: table-cell;
width: 100px;
background-color: black;
padding:2px;
}
nadpis cena {
color: white;
display: table-cell;
width: 30px;
background-color: black;
padding:2px;
text-align: right;
}
produkt nazev {
display: table-cell;
width: 100px;
background-color: Lightblue;
padding:2px;
}
produkt cena {
display: table-cell;
width: 30px;
background-color: Lightblue;
padding:2px;
text-align: right;
}

A výsledek:

XML soubor s použitím stylů

Výsledné zobrazení je naprosto shodné s příkladem v HTML z prvního dílu Slabikáře. S použitím CSS dostaneme takovéto zobrazení jen v Mozille. Internet Explorer nerozumí hodnotám vlastnosti display z CSS2. Ten by výsledek nevrátil přesně tak, jak jsme si to představovali:

XML soubor s použitím stylů