streda 20. júna 2012

CSS štýl použitý na XML súbory

CSS nie je len pre HTML. Keď potrebujete rýchly pohľad na vaše XML v používateľsky prívetivejšom formáte, môžete ľahko zapojiť kaskádové štýly na zobrazenia XML. CSS je jednoduchý mechanizmus, ktorý umožňuje pripojiť štýly k XML obsahu. Na nasledujúcom príklade bude XML súbor, ktorý obsahuje informácie o objednávke. Formátovanie k tomuto XML súboru bude v súbore s názvom po.css..

XML súbor s obsahom:

<>xml version="1.0">>
<>xml-stylesheet href="po.css" type="text/css">>
<purchaseOrder xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.my-company.com/PO po.xsd">
   <billTo>
      <name>Robert Smith</name>
      <street>18 Park Avenue</street>
      <city>Some Town</city>
      <state>AR</state>
      <zip>95819</zip>
   </billTo>
   <Items>
      <item partNum="833-AA">
         <productName>Lapis necklace</productName>
         <quantity>2</quantity>
         <price>99.95</price>
         <comment>Need this for the holidays!</comment>
         <shipDate>2005-12-05</shipDate>
      </item>
      <item partNum="748-OT">
         <productName>Diamond heart</productName>
         <quantity>1</quantity>
         <price>248.90</price>
         <comment>Valentine's day packaging.</comment>
         <shipDate>2005-02-14</shipDate>
      </item>
   </Items>
</purchaseOrder>

Kaskádový štýl CSS pre tento XML používa na mapovanie jednotlivých XML elementov divoké karty (wildcards). Výsledkom je, že každý prvok sa zobrazí ako samostatný blok. Obsah elementu Name sa zobrazí tučným písmom. Tento štýl kaskádový štýl tiež ilustruje podstatu CSS štýlov. Všimnite si, že okraj je stanovený na úrovni koreňového elementu a všetci jeho potomkovi zdedia nastavenia ľavého okraja.

Výpis po.css

/* css style rules for purchaseOrder xml */

*{
    display: block;
}
purchaseOrder{
    margin-left: 1em;
}
name{
    font-weight: bold;
}