Definování vzhledu XML dokumentů pomocí CSS

  1. Stáhněte si ukázkový dokument objednávky.

  2. Vytvořte si prázdný kaskádový styl pro formátování objednávky objednavka.css

  3. Připojte tento styl k objednávce pomocí instrukce

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

  4. Do stylu postupně přidávejte pravidla definující zobrazení jednotlivých elementů tak, abyste dosáhli pěkného a přehledného zobrazení objednávky. Výsledky své práce průběžně kontrolujte v prohlížeči. Pro ladění používejte spíše Operu nebo Mozillu, protože Internet Explorer mnoho věcí z CSS neumí.

  5. Při tvorbě stylu si vyzkoušejte i následující:

    určení kódování CCS souboru
    Elementy objednávky používají znaky s diakritikou. CSS styl proto musíme uložit buď v kódování UTF-8, nebo jako jeho první řádku uvést definici použitého kódování, např.: 
    @charset "windows-1250";
    formátování tabulek
    Kaskádové styly umožňují do podoby tabulky formátovat data, které odpovídají struktuře tabulka/řádky/buňky. V objednáce je proto možné jako tabulku formátovat například jednotlivé položky. Stačí do stylu přidat následující deklarace: 
    položky { display: table; }
položka { display: table-row; }
název, počet, cena, popis { display: table-cell; }
    zobrazování hodnot atributů
    Jako hodnotu vlastnosti content lze použít i zápis attr(název_atributu), který zobrazí hodnotu atributu. Např.: 
    počet:after { content: " " attr(mj); }

    Použijte tuto konstrukci pro zobrazení atributů, které se vyskytují v dokumentu objednávky.

    automatické číslování položek
    Jako hodnotu vlastnosti content lze použít zápis counter(čítač), který vrací číslo uložené v daném čítači. Hodnotu čítače můžeme zvýšit pomocí vlastnosti counter-increment, např.: 
    položka { counter-increment: citac; }

  6. K dokumentu objednávky připojte schéma, které jste si vytvořili během předchozích cvičení (využijte atribut xsi:noNamespaceSchemaLocation) a dokument si otevřete v editoru oXygen ve vizuálním módu (záložka Author dole).

  7. Zkuste si dokument editovat a postupně do CSS přidávejte další definice, které zlepší práci s dokumentem v editoru. Můžete využít i proprietární extenze CSS, které editor podporuje – http://www.oxygenxml.com/doc/ug-oxygen/concepts/dg-oXygen-css-extensions.html.

Další informace o CSS