
 Vyučující
 Zakončení
 Přednášky
 Cvičení
  01 Úvod
  02 XML
  03 DTD
  04 Schémata
  05 CSS 
  06 XPath, XSLT
  07 XSLT
  08 XSL-FO
  09 DocBook
  10 XQuery
  11 XML API
 Software
 Partneři
| Definování vzhledu XML dokumentů pomocí CSS-
Stáhněte si ukázkový
dokument objednávky.
-
Vytvořte si prázdný kaskádový styl pro formátování objednávky
objednavka.css
-
Připojte tento styl k objednávce pomocí instrukce
<?xml-stylesheet href="objednavka.css" type="text/css"?>
-
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í.
-
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; }
-
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).
-
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.
|