Tabla de contenidos
Bypass table of contentsLa herencia es una característica muy simple, por la cual los elementos contenidos por otros elementos heredan de sus padres las características aunque no haya sido definidas para ellos mismos.
En el siguiente ejemplo, las propiedades definidas para el párrafo anularán aquellas definidas para el cuerpo (tag HTML body). Las propiedaes del cuerpo que no son anuladas, ser heredarán por el párrafo (ya que el mismo está contenido por el cuerpo).
En este documento, el párrafo tendrá todas las propiedades definidas para el elemento "p" ("font-family", "font-size" y "color"), pero la propiedad "font-weight" será heredada del cuerpo (su padre).
La jerarquía en la estructura de CSS es una de sus más importantes características, y es además de donde toma su denominación de "cascading". La idea de cascada veine del efecto causado por el orden en que las propiedades son aplicadas a un elemento desde diferentes orígenes. Los tres orígenes posibles son, en orden de relevancia: el autor, el visitante y el navegador.
Las implicancias de este orden son muy pequeñas para los autores, ya que las definiciones de estilos que ellos declaren sólo pueden ser anuladas explícitamente por el usuario. Pero no debes olvidar el echo de que los atributos que no especifiques serán establecidos por el visitante o navegador (y los valores predeterminados de los navegadores pueden variar).
La otra variante que provee la propiedad de cascada es la regla "!important". Con esta regla los autores pueden cambiar el órden en que los estilos son aplicados: los estilos normales son siempre anulados por los estilos importantes.
La regla "!important" es aplicada a las propiedades al final de la declaración (antes del punto y coma) y separada del resto por un espacio.
En el ejemplo anterior el tamaño de la letra es declarado con la regla "!important", por lo tanto, cualquier párrafo definido con estilos normales seguirá teniendo un tamaño de fuente de 10px (ya que esta declaración se aplica a todos los párrafos).
El orden de especificidad tiene un mayor impacto en la forma que los autores aplican atributos a sus documentos. A diferencia de la propiedad de cascada, éste especifica el órden en que diferentes declaraciones (atributo "style", selectores ID, clases, etc.) toman precedencia.
La lista siguiente muestra el órden de especificidad usado para aplicar propiedades CSS a elementos HTML, desde el más específico al más global.
<p style="...">).p#ayuda {...}).p.segundo {...}).*.segundo {...}).p {...}).* {...}).En el siguiente ejemplo analizaremos la aplicación de diferentes definiciones de estilo a un solo elemento.
Las declaraciones con mayor orden de especificidad anula al resto. En el ejemplo anterior, el párrafo tendrá una fuente "arial, helvetica" y un color negro de las propiedades definidas para el elemento "p", pero no tendrá un tamaño de fuente de "10px" debido a que será anulada por la propiedad definida en la clase "importante" que es aplicada al elemento. Subsecuentemente, el elemento recibirá de la clase "importante" un tamaño de fuente de "12px" pero el espesor de la fuente "bold" será anulado por la propiedad definida en el atributo "style".
Diseño y desarrollo: Latitud29.com