C贸mo funciona el CSS

Esta tercera parte del tutorial Empezando CSS explica c贸mo funciona el CSS en el navegador y la finalidad del Modelo de Objeto de Documento (DOM). Usted tambi茅n aprender谩 c贸mo analizar el documento de muestra.

Informaci贸n: C贸mo funciona CSS

Cuando un navegador muestra un documento, debe combinar el contenido del documento con la informaci贸n de su estilo. Se procesa el documento en dos etapas:

  1. El navegador convierte el lenguaje de marcado (markup) y el CSS en el DOM (Document Object Model). El DOM representa el documento en la memoria del ordenador. Combina el contenido del documento con su estilo.
  2. El navegador muestra el contenido de la DOM.

Un lenguaje de marcado utiliza elementos para definir la estructura del documento. Usted marca un elemento utilizando etiquetas, que son cadenas que comienzan con '<' y termina con '>'. La mayor铆a de los elementos tienen un par de etiquetas, una etiqueta de inicio y una etiqueta de cierre. Para la etiqueta de inicio, coloque el nombre del elemento entre '<' y '>'. Para la etiqueta final, coloque un '/' despu茅s de '<' y antes del nombre del elemento.

Dependiendo del lenguaje de marcado, algunos elementos tienen s贸lo una etiqueta de inicio, o una sola etiqueta donde el '/' viene despu茅s del nombre del elemento. Un elemento tambi茅n puede ser un contenedor e incluir otros elementos entre su etiqueta de inicio y la etiqueta de cierre. S贸lo recuerda cerrar siempre las etiquetas dentro del contenedor.

Un DOM tiene una estructura en forma de 谩rbol. Cada elemento, atributo y extensi贸n de texto en el lenguaje de marcado se convierte en un nodo de la estructura de 谩rbol. Los nodos se definen por su relaci贸n con otros nodos DOM. Algunos elementos son los padres de los nodos secundarios, y los nodos secundarios tienen hermanos.

Comprender el DOM le ayuda a dise帽ar, depurar y mantener su CSS, porque el DOM es donde su CSS y el contenido del documento se re煤nen.

Ejemplo
En el documento de ejemplo, las etiqueta <p> y su etiqueta de cierre </ p> crean un contenedor:
<p>
  <strong>C</strong>ascading
  <strong>S</strong>tyle
  <strong>S</strong>heets
</p>

Ejemplo en vivo

http://jsfiddle.net/djaniketster/6jbpS/

En el DOM, el nodo correspondiente P es uno de los padres. Sus hijos son los nodos STRONG y los nodos de texto. Los nodos STRONG son en s铆 mismos padres, con los nodos de texto como sus hijos:

P
鈹溾攢STRONG
鈹 鈹斺攢"C"
鈹溾攢"ascading"
鈹溾攢STRONG
鈹 鈹斺攢"S"
鈹溾攢"tyle"
鈹溾攢STRONG
鈹 鈹斺攢"S"
鈹斺攢"heets"

Acci贸n: Analizando un DOM

El uso del Inspector DOM

Para analizar un DOM, se necesita un software especial. Usted puede usar el complemento de  Mozilla DOM Inspector (DOMi) para analizar un DOM. Usted s贸lo tendr谩 que instalar el complemento (ver m谩s detalles abajo).

  1. Utilice el navegador Mozilla para abrir el documento en versi贸n HTML.
  2. Desde la barra de men煤 de su navegador, selecciona Herramientas> Inspector DOM, o Herramientas> Desarrollo Web> Inspector DOM.
    M谩s detalles

    Si el navegador Mozilla no tiene Domi, puede instalarlo del sitio de complementos y reiniciar el navegador. Luego regrese a este tutorial.

    Si no desea instalar Domi (o est谩s usando un navegador que no Mozilla), puede utilizar Web X-Ray Goggles, como se describe en la siguiente secci贸n. O bien, puede omitir esta secci贸n e ir directamente a la p谩gina siguiente. Saltarse esta secci贸n no interfiere con el resto del tutorial.

  3. En el Domi, expanda los nodos de su documento haciendo clic en las flechas.

    Nota: El espaciado de su archivo HTML puede ocasionar que Domi muestre algunos nodos de texto vac铆os, que se pueden pasar por alto.

    Parte del resultado podr铆a tener este aspecto, seg煤n qu茅 nodos has expandido:

    鈹 鈻尖暣P
    鈹 鈹 鈹 鈻尖暣STRONG
    鈹 鈹 鈹#text
    鈹 鈹溾暣#text
    鈹 鈻衡暣STRONG
    鈹 鈹

    Cuando selecciona cualquiera de los nodos, puede usar panel de la derecha de  DOMi para averiguar m谩s cosas sobre 茅l. Por ejemplo, cuando se selecciona un nodo de texto, DOMi muestra el texto en el panel de la derecha.

    Cuando se selecciona un elemento nodo, DOMi analiza y ofrece una enorme cantidad de informaci贸n en su panel de la derecha. La informaci贸n de estilo es s贸lo una parte de la informaci贸n que proporciona.

Problema

En el DOMi , haga clic en un nodo STRONG.

Utilice el panel de la derecha de Domi para encontrar el nodo de color rojo, y donde su apariencia es m谩s relevante que el texto 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.

Ocultar soluci贸n
Ver la soluci贸n para el problema.

Utilizando Web X-Ray Goggles

Web X-Ray Goggles muestra menos informaci贸n que DOM Inspector, pero es m谩s f谩cil de instalar y utilizar.

  1. Ir a la p谩gina principal de la Web X-Ray Goggles.
  2. Arrastre el enlace bookmarklet en esa p谩gina a tu barra de herramientas del navegador.
  3. Abra el documento en versi贸n HTML.
  4. Active Web X-Ray Goggles haciendo clic en el bookmarklet en la barra de herramientas.
  5. Mueva el puntero del rat贸n por encima de su documento para comprobar los elementos en el documento.

驴Y ahora qu茅?

Si tomaste el reto, usted vera que la informaci贸n de estilo  interact煤a en m谩s de un lugar, para crear el estilo final de un elemento. La siguiente p谩gina explica m谩s acerca de estas interacciones.