{{ CSSTutorialTOC() }}
{{ previousPage("/es/docs/Web/CSS/Introduction/How_CSS_works", "Cómo funciona el CSS.")}}Esta es la cuarta sección del tutorial CSS Primeros pasos; que describe cómo interactúan las hojas de estilo en cascada, y cómo los elementos heredan el estilo de sus padres. Usted agrega a la hoja de estilos de ejemplo, utilizando la herencia para alterar el estilo de muchas partes del documento en un solo paso.
El estilo final para un elemento se puede especificar en muchos lugares diferentes, que pueden interactuar de una manera compleja. Esta interacción compleja hace el CSS poderoso, pero puede también hacer que sea confuso y difícil de depurar.
Tres principales fuentes de información de estilo forman una cascada. Estas son:
El estilo del usuario modifica el estilo por defecto del navegador. El estilo del autor del documento a continuación modifica el estilo un poco más. En este tutorial, usted es el autor del documento de ejemplo, y solo trabaja con hojas de estilo del autor.
Cuando lea este documento en un navegador, parte del estilo que ves proviene por defecto de su navegador de HTML.
Parte del estilo podría venir de los ajustes personalizados del navegador o de un archivo de definición de estilo personalizado. En Firefox, la configuración se puede personalizar en cuadro de diálogo Preferencias, o puede especificar estilos en un archivo denominado user Content.css, archivado en su perfil de navegador.
Parte del estilo proviene de las hojas de estilo vinculadas al documento por el servidor wiki.
Al abrir su documento de muestra en el navegador, los elementos {{ HTMLElement("strong") }} son más relevante que el resto del texto. Esto viene del estilo por defecto del navegador para HTML.
El elemento {{ HTMLElement("strong") }} son rojos. Esto viene de la propia hoja de estilos de ejemplo.
El elemento {{ HTMLElement("strong") }} también heredan gran parte del estilo del elemento {{ HTMLElement("p") }}, porque ellos son sus hijos. De la misma manera, los elementos {{ HTMLElement("p") }} heredan gran parte del estilo del elemento{{ HTMLElement("body") }}.
Para los estilos en cascada, las hojas de estilo del autor tienen prioridad, ante las hojas de estilo del lector, por defecto de tu navegador.
Para los estilos heredados, el estilo propio de un nodo hijo tiene prioridad sobre estilo heredado de su padre.
Estas no son las únicas prioridades que se aplican. En una página posterior de este tutorial se explica mas detalladamente.
El CSS también proporciona una forma para que el lector pueda anular el estilo del autor del documento, mediante el uso de la palabra clave! !important.
Esto significa que, como autor del documento, no siempre se puede predecir con exactitud lo que sus lectores van a ver.
Si quieres conocer todos los detalles de cascada y herencia mira Asignando propiedad de valores, cascada, y herencia en las especificaciones del CSS.
p {color: blue; text-decoration: underline;}
Pero los elementos {{ HTMLElement("strong") }} siguen siendo rojo. El color rojo es su estilo propio, por lo que tiene prioridad sobre el color azul de su elemento padre {{ HTMLElement("p") }} .
| Cascading Style Sheets |
| Cascading Style Sheets |
| Cascading Style Sheets |
Move the declaration for underlining from the rule for {{ HTMLElement("p") }} to the one for {{ HTMLElement("strong") }}. The resulting file looks like this:
p {color: blue; }
strong {color: red; text-decoration: underline;}
Hide solution
{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectores")}}Su hoja de estilo de ejemplo especifica estilos para las etiquetas <p> y <strong>, cambiando el estilo de los elementos correspondientes en todo el documento. La siguiente sección describe cómo especificar el estilo de manera más selectiva.