Cómo funciona el CSS

Go to Previous Section:
¿Por qué usar 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:

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

https://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).

Utilice el navegador Mozilla para abrir el documento en versión HTML.
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.
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.

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

¿Y ahora qué?

Go to Next Section:
Cascada y herenciaSi 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.