136
4. Trabajo con estilos
regla de estilo de texto, como puede ser el color, a un contenedor <div>, sus párrafos <p> hijo que no tengan aplicadas reglas más específicas heredarán esta característica. Observemos la siguiente regla CSS: div {color: red;} Debemos tener en cuenta que si esta regla se aplica al siguiente ejemplo, siempre que no exista otra regla más específica, el párrafo se verá de color rojo y no de color negro, como sería por defecto: <div> <p>Texto de mi párrafo.</p> </div> La herencia puede ser muy útil si se utiliza con criterio. Un aspecto para tener en cuenta es que no toda las propiedades se heredan (podemos analizarlo visitando el sitio que se encuentra en la dirección www.w3.org/TR/CSS21/propidx.html).
Cascada y especificidad Una importante característica que debemos conocer sobre CSS es cómo actúa la cascada cuando las reglas creadas se superponen. ¿Cómo ocurre esto? Supongamos que, en diferentes partes del código de una página, ya sea en el CSS anexado o en el escrito en el propio documento, escribimos reglas que apuntan al mismo elemento HTML, estableciendo una propiedad con diferentes valores. ¿Qué ocurre en este tipo de choque? ¿Qué regla prima sobre la otra? En primer lugar, la cascada nos indica que la regla que esté más abajo y que sea igual de específica será la que se aplique. Esto parece muy simple, pero aquí es donde entra a jugar un concepto muy interesante e importante: la especificidad. En palabras simples, podríamos decir que el motor de render del navegador utiliza este principio para saber qué regla debe utilizar cuando hay propiedades que se superponen. Para saber el peso que tiene, podemos basarnos en un sistema de puntuación, en el que los elementos valen 1 punto; las clases (class), 10 puntos; los identificadores (id), 100 puntos, y la declaración de
www.redusers.com
04_HTML5_REAJUSTADO.indd 136
7/28/11 9:10 PM