{{ CSSTutorialTOC() }}
{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "¿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.
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:
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.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.
<p> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets </p>
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"
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).
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.
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.
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.
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.
Web X-Ray Goggles muestra menos información que DOM Inspector, pero es más fácil de instalar y utilizar.
{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascada y herencia") }}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.