diff options
Diffstat (limited to 'files/ca/web/guide')
| -rw-r--r-- | files/ca/web/guide/css/inici_en_css/dades_xml/index.html | 241 |
1 files changed, 0 insertions, 241 deletions
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 ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p><span id="result_box" lang="ca"><span>Aquesta</span> <span>pàgina</span> <span>conté</span> <span>un exemple</span> <span>de com</span> <span>es</span> <span>pot</span> <span>utilitzar CSS</span> <span>amb</span> <span>dades</span> <span>XML.</span></span></p> - -<p>Es crea un document XML d'exemple, i una fulla d'estil que s'utilitzarà per mostrar en el vostre navegador.</p> - -<p>Aquesta és la 3rd secció de la Part II del <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started">tutorial CSS</a>.<br> - Secció anterior : <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/SVG_and_CSS" title="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/SVG_and_CSS">SVG</a><br> - Secció següent : <a href="/en/CSS/Getting_Started/XBL_bindings" title="https://developer.mozilla.org/en/CSS/Getting_Started/XBL_bindings">XBL binding</a></p> - -<h3 id="Information:_XML_data" name="Information:_XML_data">Informació: Dades XML</h3> - -<p><em><a href="/en/XML" title="en/XML">XML</a></em> (eXtensible Markup Language) és un llenguatge de propòsit general per a qualsevol tipus de dades estructurades.</p> - -<p>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.</p> - -<p>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.</p> - -<table style="background-color: #fffff4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;"> - <caption>Exemple</caption> - <tbody> - <tr> - <td>Les dades d'un document XML utilitza etiquetes <code><INFO></code>. Voleu que els elements <code>INFO</code> del document es mostrin com paràgrafs HTML. - <p>En la fulla d'estil del document, s'especifica com els elements <code>INFO</code> es mostraran:</p> - - <div style="width: 30em;"> - <pre class="eval"> -INFO { - display: block; - margin: 1em 0; - } -</pre> - </div> - </td> - </tr> - </tbody> -</table> - -<p>Els valors més comuns per a la propietat <code>display</code> són:</p> - -<table style="margin-left: 2em;"> - <tbody> - <tr> - <td style="padding-right: 2em;"><code>block</code></td> - <td>Es mostra com HTML <code>DIV</code> (per a les capçaleres, paràgrafs)</td> - </tr> - <tr> - <td><code>inline</code></td> - <td>Es mostra com HTML <code>SPAN</code> (per major èmfasi en el text)</td> - </tr> - </tbody> -</table> - -<p>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.</p> - -<table style="background-color: #f4f4f4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;"> - <caption>Més detalls</caption> - <tbody> - <tr> - <td>Altres valors de <code>display</code> mostren l'element com un element de llista, o com un component d'una taula. - <p>Per veure la llista completa de tipus de pantalla, consulteu <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display">La propietat display</a> en l'Especificació CSS.</p> - - <p>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.</p> - - <p>Per obtenir més informació sobre XML en Mozilla, vegeu la pàgina <a href="/en/XML" title="en/XML">XML</a> en aquesta wiki.</p> - </td> - </tr> - </tbody> -</table> - -<h3 id="Action:_An_XML_demonstration" name="Action:_An_XML_demonstration"><span id="result_box" lang="ca"><span>Acció</span><span>:</span> <span>Una demostració</span> <span>XML</span></span></h3> - -<p><span id="result_box" lang="ca"><span>Fer un</span> <span>nou arxiu</span> <span>XML</span></span> , <code>doc9.xml</code>. <span id="result_box" lang="ca"> <span>Copieu</span> <span>i enganxeu el</span> <span>contingut</span> <span>d'aquí</span><span>,</span> <span>assegurant-se que</span> us <span>desplaceu</span> <span>per obtenir</span> <span>tota ella</span><span>:</span></span></p> - -<div style="width: 48em; height: 12em; overflow: auto;"> -<pre><?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> -</pre> -</div> - -<p>Feu un nou arxiu CSS, <code>style9.css</code>. <span id="result_box" lang="ca"><span>Copieu</span> <span>i enganxeu el</span> <span>contingut</span> <span>d'aquí</span><span>,</span> <span>assegurant-se que</span> us <span>desplaceu</span> <span>per obtenir</span> <span>tota ella</span><span>:</span></span></p> - -<div style="width: 48em; height: 12em; overflow: auto;"> -<pre>/*** 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"; - } -</pre> -</div> - -<p>Obriu el document en el navegador:</p> - -<table style="border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td> - <div style="border: 2px solid #cdf; border-bottom: none; padding: .5em 8em 1em .5em;"> - <p style="font-size: 150%; font-weight: bold; margin: -1em 0px 0px 0px; padding: .1em .25em; background-color: #cdf; width: 8em;">Oceans</p> - - <p style="font-size: 75%; margin: .25em 0px 0px 0px; line-height: 110%;"><strong>Arctic</strong><br> - Area: 13,000 million km²<br> - Mean depth: 1,200 m</p> - - <p style="font-size: 75%; margin: .5em 0px 0px 0px; line-height: 110%;"><strong>Atlantic</strong><br> - Area: 87,000 million km²<br> - Mean depth: 3,900 m</p> - - <p style="font-size: 75%; margin: .5em 0px 0px 0px; line-height: 110%;"><strong>. . .</strong></p> - </div> - </td> - </tr> - </tbody> -</table> - -<p><br> - Notes sobre aquesta demostració:</p> - -<ul> - <li>El superíndex 2 (en "milions km²") un caràcter Unicode, codificat com \ B2 a l'arxiu CSS.</li> - <li>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.</li> -</ul> - -<p> </p> - -<table style="background-color: #fffff4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;"> - <caption>Repte</caption> - <tbody> - <tr> - <td>Canvieu la fulla d'estils perquè mostri el document com una taula. - <p>(Vegeu el capítol <a class="external" href="http://www.w3.org/TR/CSS21/tables.html">Taules</a> en l'especificació CSS per exemples que es poden adaptar.)</p> - </td> - </tr> - </tbody> -</table> - -<h4 id="What_next.3F" name="What_next.3F">I ara què?</h4> - -<p>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 <a href="https://developer.mozilla.org/Talk:en/CSS/Getting_Started/JavaScript">discussió</a>.</p> - -<p>Aquesta és l'última pàgina del tutorial. Per obtenir més informació sobre CSS en Mozilla, consulteu la pàgina principal de <a href="/en/CSS" title="en/CSS">CSS</a> en aquesta wiki.</p> |