From a065e04d529da1d847b5062a12c46d916408bf32 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 21:46:22 -0500 Subject: update based on https://github.com/mdn/yari/issues/2028 --- .../guide/css/inici_en_css/dades_xml/index.html | 241 --------------------- 1 file changed, 241 deletions(-) delete mode 100644 files/ca/web/guide/css/inici_en_css/dades_xml/index.html (limited to 'files/ca/web/guide/css') diff --git a/files/ca/web/guide/css/inici_en_css/dades_xml/index.html b/files/ca/web/guide/css/inici_en_css/dades_xml/index.html deleted file mode 100644 index 8885cbb036..0000000000 --- a/files/ca/web/guide/css/inici_en_css/dades_xml/index.html +++ /dev/null @@ -1,241 +0,0 @@ ---- -title: Dades XML -slug: Web/Guide/CSS/Inici_en_CSS/Dades_XML -tags: - - CSS - - 'CSS:Getting_Started' - - Example - - Guide - - Intermediate - - NeedsUpdate - - Web -translation_of: Archive/Beginner_tutorials/XML_data ---- -

{{ CSSTutorialTOC() }}

- -

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:

- - - - - - - - - - - - -
blockEs mostra com HTML DIV (per a les capçaleres, paràgrafs)
inlineEs 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ó:

- - - -

 

- - - - - - - - -
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.

-- cgit v1.2.3-54-g00ecf