MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Dades XML

This translation is incomplete. Please help translate this article from English.

Aquesta pàgina conté un exemple de com es pot utilitzar CSS amb dades XML.

Es crea un document XML d'exemple, i una fulla d'estil que s'utilitzarà per mostrar en el vostre navegador.

Aquesta és la 3rd secció de la Part II del tutorial CSS.
Secció anterior : SVG
Secció següent :  XBL binding

Informació: Dades XML

XML (eXtensible Markup Language) és un llenguatge de propòsit general per a qualsevol tipus de dades estructurades.

Per defecte, el navegador Mozilla mostra XML en un format molt similar a les dades originals d'un arxiu XML. Es veuen les etiquetes reals que defineixen l'estructura de les dades.

En vincular una fulla d'estil CSS amb el document XML, pot definir altres formes de mostrar la mateixa. Per a això, la fulla d'estils utilitza regles que assignen les etiquetes en el document XML als tipus de visualització que utilitza HTML.

Exemple
Les dades d'un document XML utilitza etiquetes <INFO>. Voleu que els elements INFO del document es mostrin com paràgrafs HTML.

En la fulla d'estil del document, s'especifica com els elements INFO es mostraran:

INFO {
  display: block;
  margin: 1em 0;
  }

Els valors més comuns per a la propietat display són:

block Es mostra com HTML DIV (per a les capçaleres, paràgrafs)
inline Es mostra com HTML SPAN (per major èmfasi en el text)

Afegiu les vostres pròpies regles d'estil que especifiquin el tipus de lletra, espaiat i altres detalls de la mateixa manera que per a HTML.

Més detalls
Altres valors de display mostren l'element com un element de llista, o com un component d'una taula.

Per veure la llista completa de tipus de pantalla, consulteu La propietat display en l'Especificació CSS.

Utilitzant CSS sol, l'estructura de la pantalla ha de ser la mateixa que l'estructura del document. Altres tecnologies poden modificar l'estructura de la pantalla - per exemple, XBL pot afegir contingut, JavaScript i pot modificar el DOM.

Per obtenir més informació sobre XML en Mozilla, vegeu la pàgina XML en aquesta wiki.

Acció: Una demostració XML

Fer un nou arxiu XML , doc9.xml. Copieu i enganxeu el contingut d'aquí, assegurant-se que us desplaceu per obtenir tota ella:

<?xml version="1.0"?>
<!-- XML demonstration -->

<?xml-stylesheet type="text/css" href="style9.css"?>

<!DOCTYPE planet>
<planet>

<ocean>
<name>Arctic</name>
<area>13,000</area>
<depth>1,200</depth>
</ocean>

<ocean>
<name>Atlantic</name>
<area>87,000</area>
<depth>3,900</depth>
</ocean>

<ocean>
<name>Pacific</name>
<area>180,000</area>
<depth>4,000</depth>
</ocean>

<ocean>
<name>Indian</name>
<area>75,000</area>
<depth>3,900</depth>
</ocean>

<ocean>
<name>Southern</name>
<area>20,000</area>
<depth>4,500</depth>
</ocean>

</planet>

Feu un nou arxiu  CSS, style9.css. Copieu i enganxeu el contingut d'aquí, assegurant-se que us desplaceu per obtenir tota ella:

/*** XML demonstration ***/

planet:before {
  display: block;
  width: 8em;
  font-weight: bold;
  font-size: 200%;
  content: "Oceans";
  margin: -.75em 0px .25em -.25em;
  padding: .1em .25em;
  background-color: #cdf;
  }

planet {
  display: block;
  margin: 2em 1em;
  border: 4px solid #cdf;
  padding: 0px 1em;
  background-color: white;
  }

ocean {
  display: block;
  margin-bottom: 1em;
  }

name {
  display: block;
  font-weight: bold;
  font-size: 150%;
  }

area {
  display: block;
  }

area:before {
  content: "Area: ";
  }

area:after {
  content: " million km\B2";
  }

depth {
  display: block;
  }

depth:before {
  content: "Mean depth: ";
  }

depth:after {
  content: " m";
  }

Obriu el document en el navegador:

Oceans

Arctic
Area: 13,000 million km²
Mean depth: 1,200 m

Atlantic
Area: 87,000 million km²
Mean depth: 3,900 m

. . .


Notes sobre aquesta demostració:

  • El superíndex 2 (en "milions km²") un caràcter Unicode, codificat com \ B2 a l'arxiu CSS.
  • La capçalera, "Oceans", té un marge superior negatiu, movent-lo cap amunt de manera que es mostri en la part superior de la vora.

 

Repte
Canvieu la fulla d'estils perquè mostri el document com una taula.

(Vegeu el capítol Taules en l'especificació CSS per exemples que es poden adaptar.)

I ara què?

Si teniu dificultats per entendre aquesta pàgina o si teniu altres comentaris al respecte, si us plau, contribuïu a la vostre pàgina de discussió.

Aquesta és l'última pàgina del tutorial. Per obtenir més informació sobre CSS en Mozilla, consulteu la pàgina principal de CSS en aquesta wiki.

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,