Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.
Go to Previous Section:
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.
Información: Cascada y herencia
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.
Los tres principales fuentes de información de estilo formar una cascada. Estas son:
- Estilos por defecto del navegador para del lenguaje de marcado.
- Estilos especificados por un usuario que está leyendo el documento.
- Los estilos relacionados en el documento por su autor. Estos pueden ser especificados en tres lugares:
- En un archivo externo: este tutorial aborda principalmente este método para definir los estilos.
- En una definición al principio del documento: utilice este método únicamente para los estilos que se utilizan sólo en esa página .
- En un elemento específico en el cuerpo del documento: este es el método menos fácil de mantener, pero puede ser utilizado para la probar.
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 <strong> son más relevante que el resto del texto. Esto viene del estilo por defecto del navegador para HTML.
El elemento <strong> son rojos. Esto viene de la propia hoja de estilos de ejemplo.
El elemento <strong> también heredan gran parte del estilo del elemento <p>, porque ellos son sus hijos. De la misma manera, los elementos <p> heredan gran parte del estilo del elemento<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.
Acción: El uso de la herencia
- Edite su archivo CSS de ejemplo.
- Agrega esta línea copiando y pegando. Realmente no importa si usted la agrega por encima o por debajo de la línea que está. Sin embargo, añadirla en la parte superior es más lógico, porque en el documento el elemento
<p>es el elemento padre del elemento<strong>:p {color: blue; text-decoration: underline;} - Ahora actualice el navegador para ver el efecto en su documento de muestra. El subrayado afecta todo el texto en el párrafo, incluido las letras iniciales. Los elementos
<strong>han heredado el estilo subrayado de su elemento padre<p>.
Pero los elementos
<strong>siguen siendo rojo. El color rojo es su estilo propio, por lo que tiene prioridad sobre el color azul de su elemento padre<p>.
| Cascading Style Sheets |
| Cascading Style Sheets |
| Cascading Style Sheets |
Move the declaration for underlining from the rule for <p> to the one for <strong>. The resulting file looks like this:
p {color: blue; }
strong {color: red; text-decoration: underline;}
Hide solution
¿Y ahora qué?
Go to Next Section:
SelectoresSu 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.