Brugernavn:



Kodeord: Husk
Forside Forum Artikler Downloads Søg
 

Formater XML med CSS


I denne artikkel skal du lære at formatere dine XML dokumenter med CSS.
Det kræver ikke den store XML erfaring da det vil blive holdt på et meget lavt niveau, men derimod er det godt at kunne CSS, hvis du ikke kan det, så vil jeg foreslå at du læser nogle artikler om det først!
Men lad os hoppe ud i det, vi starter med vores XML fil, jeg har valgt at skrive om min og min fars computer!

#dinfil.xml
  1. <?xml version="1.0" encoding="iso-8859-1"?>
  2. <grundblok>

  4.   <computer>
  5.     <ejer>
  6.      Min Computer
  7.     </ejer>
  8.     <cpu>
  9.      Athlon 2300+
  10.     </cpu>
  11.     <ram>
  12.      768MB DDR
  13.     </ram>
  14.     <hd>
  15.      2x80GGB
  16.     </hd>
  17.   </computer>
  18.   
  19.   <computer>
  20.     <ejer>
  21.      Min fars computer
  22.     </ejer>
  23.     <cpu>
  24.      Athlon 900+
  25.     </cpu>
  26.     <ram>
  27.      96MB SD
  28.     </ram>
  29.     <hd>
  30.      13GB
  31.     </hd>
  32.   </computer>

  34. </grundblok>

Det er meget simpelt XML, så det vil jeg ikke forklare mere om.
Nu skal vi lige have en lille bitte smule teori før vi går videre:
Alle elementerne i dit XML dokument betragtes som "inline" elementer, hvilket betyder at de kommer til at stå på samme linke medmindre vi gør noget ved det, derfor skal vi bruge et CSS-tag der hedder "display" og hvis skal sætte display til "block" som gør vores inline elementer til block elementer i stedet!

Derfor kommer vores CSS dokument til at se sådan her ud:
#style.css
  1. ejer{
  2.    border:1px solid #000;
  3.    margin-top:10px;
  4.    font-family:verdana;
  5.    background-color:orange;
  6.    display:block;
  7. }
  8. cpu{
  9.    border-left: 1px solid #000;
  10.    border-right: 1px solid #000;
  11.    border-bottom:1px solid #000;
  12.    color:white;
  13.    font-family:verdana;
  14.    background-color:blue;
  15.    display:block;
  16. }

  18. ram{
  19.    border-left: 1px solid #000;
  20.    border-right: 1px solid #000;
  21.    border-bottom:1px solid #000;
  22.    color:white;
  23.    font-family:verdana;
  24.    background-color:blue;
  25.    display:block;
  26. }

  28. hd{
  29.    border-left: 1px solid #000;
  30.    border-right: 1px solid #000;
  31.    border-bottom:1px solid #000;
  32.    color:white;
  33.    font-family:verdana;
  34.    background-color:blue;
  35.    display:block;
  36. }

Som i kan se så formaterer man sit XML ved at bruge navnene på blokene i sit XML dokument, ergo kan vi manipulere med "ejer" blokken ved at skrive "ejer{}" i vores CSS fil.
Det man primært skal lægge mærke til i dette CSS dokument er som sagt tagget "display:block" som gør elementerne til block elementer i stedet for inline!
Det andet er elementær CSS så det vil jeg ikke forklare så meget om heller!

Nu skal vi bare have vores XML og CSS fil til at kommunikere sammen, det gør vi ved at sætte dette lille stykke kode ind i vores XML fil umiddelbart efter "<?xml version="1.0" encoding="iso-8859-1"?>":
  • <?xml-stylesheet type="text/css" href="style.css"?>

Her fortæller vi at vi gerne vil i kontakt med et CSS dokument ved navn "style.css" som vi har kaldt vores CSS fil :)

Det var alt for denne gang, det er godt nok lidt kort men jeg skriver nok en mere gennemgående artikkel en dag jeg får tid:)
Sidst redigeret 22:20 - 22/02/2006
Oprettet af:
__ak

Diverse

Point modtaget: 0

Rate:
22:17 22/02/2006

Kommentarer

Giv din mening tilkende om denne artikel, eller læs andres.
Har du spørgsmål eller brug for hjælp til denne artikel henvises du til forummet.
Jeg kan godt se ideén i det!
Men hvad kan man sådan set bruge XML til? :)
Det ligner alligevel lidt HTML.
Oprettet af:
Ukendt bruger
  Mail
13:05 23/02/2006
Jeg bruger mest xml til at lave menuer og opstille tekst fra database, i flash.
En dejlig let og overskuelig måde at gøre det på syntes jeg.
Oprettet af:
lgd.np
  Mail
18:20 23/02/2006
Nu ikke glem at XML-filer er noget af det nemmeste indhold at hente og parse. Kan bl.a. bruges i sprog som Delphi, Python, C++ osv...
F.eks. hvis man vil lave et program som f.eks. linker til ens egen hjemmeside og opdatere automatisk er det jo oplagt at skrive en tilhørende xml-fil, som man så henter det fra. Kunne evt. være hvis man havde en størrere side og ville holde øje med hvis der kom nye kommentarer til f.eks. en artikel? - Så ville det jo være en slags client.

Men ellers fed artikel - det var faktisk noget som jeg ikke vidste. Tusind tak! :)
Oprettet af:
v0id
  Mail
15:42 28/03/2006
fin 3/5
Oprettet af:
Ukendt bruger
  Mail
19:48 21/05/2006
ja den ska ha et 3/5.. Forstod ikk helt det hele.....
Oprettet af:
Ukendt bruger
  Mail
23:31 09/12/2006
ok artikel
Oprettet af:
Ukendt bruger
  Mail
21:31 19/01/2007
Jeg forstår ikke rigtig hva" man bruger XML til.

Men sikkert god artikel :)
Oprettet af:
JegCrazy-o2
  Mail
12:07 17/04/2007
Du skal være oprettet og logget ind for at kommentere en artikel
Copyright © Rowl.dk v/ Michael Raagaard | 2005-12 | Alle rettigheder forbeholdes