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; }
#Bloque { font-size:0.75em; border:1px solid #000; }
#Bloque * { color:#0C0; }
!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; }
#Bloque p { margin:2em; }
p { color:#000; }
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...
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.
<blockquote id="Bloque">
<p>
Este texto
<strong>no tiene</strong>
<em>ningún... </em>,
ni aporta ...
</p>
<p class="Especial">
Este texto
<strong>no tiene</strong>
<em>ningún... </em>,
ni aporta ...
</p>
<p>
Este texto
<strong>no tiene</strong>
<em>ningún... </em>,
ni aporta ...
</p>
</blockquote>
<p class="Especial">
Este texto
<strong>no tiene</strong>
<em>ningún... </em>,
ni aporta ...
</p>
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.