A dia d'avui, XML és un llenguatge utilitzat per a estructurar la informació d'una pàgina i en un futur es convertirà en el llenguatge estàndard per a la publicació de documents en la Web substituint a l'actual HTML. Vaig a saltar-me una introducció al llenguatge XML ja que en teniu una en aquest article.
Dono per fet que saps utilitzar estils CSS en HTML i que entens l'estructura d'arbre d'un document XML.
La nostra pàgina index.xml
| index.xml |
000
001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
|
<?xml version="1.0" encoding="ISO-8859-1" ?>
<?xml-stylesheet href="estil.css" type="text/css" ?>
<pagina>
<capçalera>
Benvingut/da a XML amb CSS
</capçalera>
<cos>
Això és un paràgraf.
</cos>
<cos1>
Això és un paràgraf.
</cos1>
<cos2>
Això és un paràgraf.
</cos2>
<peu>
Copyright - declaracions - Links
</peu>
</pagina>
|
En aquest codi podem distingir 6 etiquetes: pagina, capçalera, cos, cos1, cos2 i peu. Aquestes etiquetes estructuren l'arxiu de manera que l'etiqueta "pagina" podria ser com l'etiqueta "body" d'html, després tenim l'etiqueta "cap", on es col·locaria el logotip de la web i/o enllaços, els cossos són ja el contingut en si de la web i finalment el peu on posaríem el copy o el que ens interessarà. Això és solament una estructura bàsica, la qual hauries de modificar per a adaptar a les teves necessitats.
Ok, ara utilitzarem CSS, per a cada etiqueta XML comentada crearem un estil amb el seu mateix nom, aquest estil haurà de contenir la major informació possible sobre el format del text, pensa que aquí no tenim etiquetes <p> que ens donin salts de línia o <div> o <br>.... tindrem d'utilitzar CSS per a aplicar la totalitat del aspecte i posicionamient dels continguts de la nostra web.
D'aquesta manera la etiqueta pagina:
000
001
002
003
004
005
|
pagina {
cursor:crosshair;
background-color:#000000;
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
}
|
Duria aquest codi, on ja especifiquem algunes opcions sobre el document, com el color de fons, el tipus de lletra, el color de lletra, el punter!
L'etiqueta capçalera és el títol de la web, on se sol posar una imatge del logotip o semblant, duria el següent codi CSS:
000
001
002
003
004
005
006
007
008
|
cabecera {
display:block;
text-align: center;
font-size: 20px;
color:#FF0000;
font-weight:bold;
margin-bottom: 3em;
margin-top: 1em;
}
|
En aquest CSS cap destacar els atributs margin, que funcionen como si fossin etiquetes <br>. margin-bottom: 3em; col·locaria tres etiquetes <br> per davall del text Benvingut/da a XML amb CSS, d'aquesta manera separem els diferents paràgrafs de text que tenim. No pensis que realment s'inserten els <br> al utilitzar margin, tan sols ho menciono com a referència per fer això més comprensible.
Les etiquetes de cos ja mostrarien la informació de la pàgina:
000
001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
|
cuerpo {
display:block;
text-align:justify;
font-size:12px;
font-weight:bold;
margin-bottom: 2em;
}
cuerpo1 {
display:block;
text-align:justify;
font-size:12px;
margin-bottom: 2em;}
cuerpo2 {
display:block;
color:#FF0000;
text-align:justify;
font-size:12px;
font-weight:bold;
margin-bottom: 2em;
}
|
Un detall important, en els estils hem usat l'atribut display per a mostrar les etiquetes per blocs, això per exemple permet que l'atribut margin treballi com desitgem que ho faci (en aquest cas).
I d'igual manera amb la etiqueta <peu>, li dissenyaríem el seu estil amb CSS.
Per tant, hem utilitzat dos arxiu per aquest article, index.xml i estil.css, l'index seria el nostre arxiu principal, on hi hem d'incloure un enllaç perquè sàpiga que ha d'usar l'arxiu estil.css
000
|
<?xml-stylesheet href="estilo.css" type="text/css" ?>
|
Que es colocaria just després de la declaració de Doctype
000
001
|
<?xml version="1.0" encoding="ISO-8859-1" ?>
<?xml-stylesheet href="estilo.css" type="text/css" ?>
|
D'altra banda, les etiquetes XML buscaran dins el CSS etiquetes amb el seu mateix nom per a usar aquest estil.
Si ho desitgeu podeu veure aquest exemple i també el podeu descarregar |
jordifreek
Introduccion a XML