Asignación de valores, cascada y herencia

Descripción de los ejemplos

La hoja de estilos genérica de esta página consta de siete reglas para medios de pantalla, cada una de las cuales hace uso de selectores y propiedades sencillas. El objetivo es ilustrar los conceptos de cómputo, cascada y herencia:

em { color:#000 !important; } strong { color:#000; }: Estas dos primeras reglas establecen color negro para los elementos em y strong. El peso de la primera regla ha sido reforzado.
#Bloque { font-size:0.75em; border:1px solid #000; }: La tercera regla selecciona el elemento identificado como "Bloque", que podemos encontrar en la sección de ejemplos. Su primera declaración aplica un tamaño de fuente que sea el 75% del tamaño asignado al elemento que lo contiene, el cual hereda directamente, en este caso, el tamaño de fuente especificado en hojas de estilo anteriores, o en último caso el predeterminado del navegador. La segunda declaración, por su parte, agrega un borde al elemento.
#Bloque * { color:#0C0; }: Establece un color de texto verde para cualquier elemento que esté dentro de "Bloque". En la práctica afectará a los tres párrafos que contiene y a los elementos que contenga cada párrafo. Esta regla es más específica que la primera y la segunda (un selector de id frente a ninguno), pero sólo sobreescribe a la segunda, porque la primera está marcada como !important. Como resultado los elementos strong descendientes del elemento "Bloque" son verdes, pero los em son negros.
p.Especial { font-size:1.2em; color:#00C; border:inherit; }: Esta regla selecciona los párrafos de la clase "Especial" (el segundo y el cuarto en el Ejemplo), y consta de varias declaraciones. La primera establece un tamaño de letra del 120%. Esto va a tener un efecto diferente en sendos párrafos, dado que en uno se aplica respecto al tamaño calculado para el elemento "Bloque" y el otro es independiente. La segunda regla establece un color de texto azul, pero sólo afecta al último párrafo, porque para el segundo manda la declaración de la regla anterior (de nuevo un selector de id frente a ninguno) y seguirá siendo verde. La declaración restante obliga a heredar las propiedades de borde (lo cual no ocurre por defecto). Esto provoca la añadidura de un borde similar al del elemento "Bloque" en el segundo párrafo, y queda sin efecto en el último párrafo, al no tener ningún borde su ascendente (el elemento body).
#Bloque p { margin:2em; }: Define un margen para los párrafos descendientes del elemento "Bloque". La anchura de dicho margen es de dos veces el tamaño computado de la fuente. Por tanto el margen del segundo párrafo es superior, al ser su tamaño de letra mayor.
p { color:#000; }: La última regla establece un color negro para el texto de los párrafos. Sin embargo esto no afecta a ninguno de los cuatro párrafos del ejemplo, porque esta regla es sobreescrita por la quinta (un selector de clase frente a ninguno) o la cuarta (un selector de id frente a ninguno).

Ejemplos

Este texto no tiene ningún propósito razonable, ni aporta absolutamente ningún dato en especial, ya que es un simple relleno. Podría bromear un poco, y reproducir el discurso de un político, un fragmento de la legislación educativa o cualquier otro texto del mismo nivel de erudición, pero, pensándomelo mejor, prefiero dejarlo en este inútil fluir de palabras huecas...

Este texto no tiene ningún propósito razonable, ni aporta absolutamente ningún dato en especial, ya que es un simple relleno. Podría bromear un poco, y reproducir el discurso de un político, un fragmento de la legislación educativa o cualquier otro texto del mismo nivel de erudición, pero, pensándomelo mejor, prefiero dejarlo en este inútil fluir de palabras huecas...

Este texto no tiene ningún propósito razonable, ni aporta absolutamente ningún dato en especial, ya que es un simple relleno. Podría bromear un poco, y reproducir el discurso de un político, un fragmento de la legislación educativa o cualquier otro texto del mismo nivel de erudición, pero, pensándomelo mejor, prefiero dejarlo en este inútil fluir de palabras huecas...

Este texto no tiene ningún propósito razonable, ni aporta absolutamente ningún dato en especial, ya que es un simple relleno. Podría bromear un poco, y reproducir el discurso de un político, un fragmento de la legislación educativa o cualquier otro texto del mismo nivel de erudición, pero, pensándomelo mejor, prefiero dejarlo en este inútil fluir de palabras huecas...

Resultado esperado

Resultado esperado de la aplicación de estilo, tal y como describe en el texto.

La imagen ilustra el aspecto aproximado del ejemplo que debería mostrar un navegador que soportase CSS para medios de pantalla:

Los tres primeros párrafos deben estar encerrados en un bloque que cuenta con borde, y su texto independiente será de color verde. El segundo párrafo debe tener un margen mayor que el de los demás, un tamaño de fuente superior y tendrá un borde similar al del bloque contenedor. El cuarto párrafo tendrá el texto independiente de color azul, el tamaño de fuente más grande que cualquiera de los otros tres, y quedará fuera del bloque citado. El texto de todos los elementos em será de color negro. Los elementos strong de los tres primeros párrafos tendrán el texto de color verde, y los del último párrafo de color negro.

Código HTML empleado (extracto)

<blockquote id="Bloque"> Este texto no tiene ningún... , ni aporta ... Este texto no tiene ningún... , ni aporta ... Este texto no tiene ningún... , ni aporta ... </blockquote> Este texto no tiene ningún... , ni aporta ... 

· tierra de nómadas · tallerWeb · debates · recortes · diccionario · búsqueda · contactar ·

Estás en: tierra de nómadas > tallerWeb > Principios básicos de CSS > Asignación de valores, cascada y herencia

Volver a: Principios básicos de CSS.