Hvordan bruke CSS til markup XML
XML er den fremste språket for lagring og transport av data på Internett. XML er ikke laget for visning av data, og XML er ikke HTML. I stedet fokuserer XML på selve dataene og lar utviklere lage sine egne koder som har applikasjonsspesifikke betydninger. Hvis rå XML må vises i en brukervennlig måte, for eksempel på en webside eller som del av en web-design, kan utviklere bruke CSS til å formatere XML ved hjelp av egendefinerte koder ved å bruke de samme prosedyrer som de som brukes til å style HTML .
Bruksanvisning
Opprett XML-fil
1 Åpne en teksteditor og opprette en ny tekstfil kalt "family.xml." Vanligvis, for å skape en ny fil i et tekstredigeringsprogram, velg "New" fra "Fil" -menyen.
2 Legg XML-deklarasjonen til filen på den første linjen. Dette header definerer filens XML versjon ( "1.0") og koding ( "ISO-8859-1" (Latin-1 / vesteuropeiske tegnsett)).
<? Xml version = "1.0" encoding = "ISO-8859-1"?>
3 Legg til "root" node til family.xml under XML-deklarasjonen. Siden XML-filen vil inneholde informasjon knyttet til en familie, må du bruke en root node "<familie>" og lukk rotnoden ( "</ familie>").
<Familie>
</ Familie>
4 Legg tre "barn" noder til family.xml mellom "<familie>" og "</ familie>" root node koder. Inkluder tre "subchild" noder med hverandre "<barnet>" node. "<Navn>", "<alder>" og "<Eyecolor>" Husk å lukke alle barn og hver subchild node. Lagre og lukk family.xml.
<Barnet>
<Navn> Bobby </ navn>
<Alder> 15 </ alder>
<Eyecolor> blå </ Eyecolor>
</ Barn>
<Barnet>
<Navn> Mary </ navn>
<Alder> 10 </ alder>
<Eyecolor> brun </ Eyecolor>
</ Barn>
<Barnet>
<Navn> Susan </ navn>
<Alder> 5 </ alder>
<Eyecolor> grå </ Eyecolor>
</ Barn>
Opprett CSS-filen
5 Lag en ny tekstfil kalt "family.css" ved hjelp av de samme prosedyrer som de som brukes for å skape "family.xml." Denne filen vil bli brukt til å style XML opprettet i family.xml.
6 Legg stilen for "root" node, eller "<familie>" node. Denne stilen påvirker alle elementene som inngår i "<familie>" node. Sett utformingen til "font-family: serif".
Familien {font-family: serif}
7 Legg stilen for "barn" node, eller "<barnet>" node. Denne stilen påvirker alle de elementene som inngår i "<barnet>" noder. Sett utformingen til "font-size: x-large."
Barnet {font-size: x-large}
8 Legg de tre stilene for "subchild" noder, eller "navn", "alder" og "barn" noder. Alle de "navn" noder bør ha en stil av "color: blue," alle "alder" noder bør ha en stil av "color: green" og alle "Eyecolor" noder bør ha en stil av "color: red. " Disse stilene påvirker alle de elementene som inngår i "Navn" noder, "alder" noder og "Eyecolor" noder. Lagre og lukk family.css.
Navnet {color: blue}
alder {color: green}
Eyecolor {color: red}
Knytt XML med CSS
9 Gjenåpne family.xml hjelp av tekst editor.
10 Rediger family.xml og legge til stilark erklæringen etter at XML-deklarasjonen. Den stilark erklæringen inneholder to attributter: "type" ( "text / css"), og "href" ( "family.css"). Lagre og lukk family.xml.
<? Xml-stylesheet type = "text / css" href = "family.css"?>
11 Åpne family.xml i en nettleser. Kontroller at XML data er stylet etter reglene beskrevet i family.css stilark.
Hint
- Alle XML-filer må inneholde en rot element.
- XML-koder og små bokstaver, slik at en node kalt "node" er forskjellig fra en node kalt "NODE."
- XSLT kan brukes til å formatere XML i situasjoner hvor transformasjoner er nødvendig.
- Alle XML-filer må være riktig nestet. Vær sikker på at alle åpne XML-koden har en matchende lukking XML-kode og at Singleton kodene er ordentlig lukket ved hjelp av "/" karakter.