Com funciona el CSS

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

Aquesta tercera secció del tutorial CSS Getting Started explica com funciona CSS en el navegador i el propòsit del Document Object Model (DOM). També aprendreu com analitzar el document de mostra.

Informació: Com funciona el CSS

Quan un navegador mostra un document, s'ha de combinar el contingut del document amb la seva informació d'estil. El document es processa en dues etapes:

  1. El navegador converteix el llenguatge de marcat i el CSS en el DOM (Document Object Model). El DOM representa el document a la memòria de l'ordinador. Combina el contingut del document amb el seu estil.
  2. El navegador mostra el contingut de la DOM.

Un llenguatge de marcat utilitza elements per definir l'estructura del document. Es marca un element mitjançant etiquetes, que són cadenes que comencen amb '<' i acaban amb '>'. La majoria dels elements tenen un parell d'etiquetes, una etiqueta d'inici i una etiqueta final. Per l'etiqueta d'inici, col·locar el nom de l'element entre '<' i '>'. Per l'etiqueta final, col·locar un '/' després que el '<' i abans que el nom de l'element.

Depenent del llenguatge de marques, alguns elements només tenen una etiqueta d'inici, o una sola etiqueta on el '/' ve després que el nom de l'element. Un element també pot ser un contenidor i incloure altres elements entre la seva etiqueta inicial i final. Recordeu sempre de tancar les etiquetes dins del contenidor.

Un DOM té una estructura en forma d'arbre. Cada element, atribut i extensió de text, en el llenguatge de marcat, es converteix en un node en l'estructura de l'arbre. Els nodes es defineixen per la seva relació amb altres nodes DOM. Alguns elements són els pares dels nodes fills, i els nodes fills tenen germans.

La comprensió del DOM ajuda a dissenyar, depurar i mantenir la CSS, pel fet que el DOM és on el CSS i el contingut del document es reuneixen.

Exemple
 
En el vostre document d'exemple, l'etiqueta <p> i la seva etiqueta de tancament </p> creen un contenidor:
<p>
  <strong>C</strong>ascading
  <strong>S</strong>tyle
  <strong>S</strong>heets
</p>

Exemple en directe

En el DOM, el node corresponent P és un pare. Els seus fills són els nodes STRONG i els nodes de text. Els nodes STRONG són ells mateixos els pares, amb els nodes de text com els seus fills;

P
├─STRONG
│ └─"C"
├─"ascading"
├─STRONG
│ └─"S"
├─"tyle"
├─STRONG
│ └─"S"
└─"heets"

Acció: Anàlisi d'un DOM

L'ús de DOM Inspector

Per analitzar un DOM, es necessita un programari especial. Podeu utilitzar el complement DOM Inspector de Mozilla (DOMi) per analitzar un DOM. Només haureu de instal·lar el complement (veure més detalls a continuació).

  1. Utilitzeu el navegador Mozilla per obrir el document HTML d'exemple.
  2. Des de la barra de menú del navegador, seleccioneu Tools > DOM Inspector, or Tools > Web Development > DOM Inspector.
    Més detalls

    Si el navegador Mozilla no té DOMI, podeu instalar-ho des de la web de complements i reiniciar el navegador. A continuació, tornar a aquest tutorial.

    Si no voleu instal·lar DOMi (o esteu fent servir un navegador que no és Mozilla), poodeu utilitzar Web X-Ray Goggles, tal com es descriu en la següent secció. O bé, podeu ometre aquesta secció i anar directament a la pàgina següent. Saltar-se aquesta secció no interfereix amb la resta del programa d'aprenentatge.

  3. En DOMi, s'expandeixi els nodes del document fent clic a les fletxes.

    Nota: Els espais creats en el arxiu HTML pot causar que DOMi mostri alguns nodes de text buits, que podeu ignorar.

    Part del resultat podria tenir aquest aspecte, depenent de quins nodes heu expandit:

    │ ▼╴P
    │ │ │ ▼╴STRONG
    │ │ └#text
    │ ├╴#text
    │ ►╴STRONG
    │ │

    En seleccionar qualsevol dels nodes, podeu utilitzar el panell de la dreta de DOMi per esbrinar més sobre ell. Per exemple, quan es selecciona un node de text, DOMi mostra el text en el panell de la dreta.

    Quan se selecciona un node element, DOMi analitza i ofereix una enorme quantitat d'informació en el seu panell de la dreta. La informació d'estil és només part de la informació que proporciona.

Repte

En DOMi, feu clic en un node STRONG.

Utilitzeu el panell de la dreta de DOMi per esbrinar on el color del node és vermell, i on la seva aparença es fa més destacable que el text normal.

Possible solution

In the menu above the right-hand pane, choose CSS Rules. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the font-weight property as bolder; your stylesheet defines the color property as red.

Hide solution
Veure la solució per el repte.

Utilitzar Web X-Ray Goggles

Web X-Ray Goggles mostra menys informació que DOM Inspector, però és més fàcil d'instal·lar i utilitzar.

  1. Anar a la pàgina principal de Web X-Ray Goggles.
  2. Arrossegar el enllaç de marcador a la pàgina de la barra d'eines del navegador.
  3. Obriu el document HTML d'exemple.
  4. Activar Web X-Ray Goggles fent clic al marcador a la barra d'eines.
  5. Moure el punter del ratolí per sobre del document, per veure els elements del document.

I ara què?

Si heu pres el repte, veureu que la informació d'estil de més d'un lloc interacciona per crear l'estil final per a un element. La pàgina següent explica més sobre aquestes interaccions.

Document Tags and Contributors

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