Buscar

CSS - Hojas de estilo - Herencias, cascadas y conceptos previos

8 - Herencias, cascadas y conceptos previos


Tutorial creado por t0m|ta . Extraido de: http://www.tomatoma.ws/subsecciones.php?forum_id=28&catid=22&todos=1
08 Marzo 2006
< anterior | 1 .. 6 7 8 9 10 .. 13 | siguiente >
""CSS responde al inglés Cascading Style Sheets (Hojas de estilo en cascada). En este tema intentamos obtener una buena comprensión de porqué las cascadas, como funciona el concepto de la herencia, y en qué consiste la especificidad.

Estos temas de CSS están siendo muy teóricos y puede que os esté resultando un poco petardo todo esto. Pero con las hojas de estilo es necesario tener una buena base, comprender realmente lo que estamos haciendo. La potencia y la facilidad de uso es tal que la mayoría de los mortales nos dejamos llevar jugando con las posibilidades de líneas, colores y control y cuando realmente queremos dar un paso más y hacer cosas realmente avanzadas, nos encontramos con que nos falla la base. A mí me ha pasado. En realidad este manual es el fruto de las notas que voy sacando de distintos sitios, para pegarme un repaso lo más completo posible sobre el funcionamiento de las hojas de estilo.

Aunque sea por encima, leeros bien estos primero temas sobre herencias, cascadas y selectores, porque forman la base, el esqueleto sobre el que se apoyan luego todas las hojas de estilo.

JERARQUÍAS Y HERENCIAS
Cualquier documento HTML contiene un buen número de elementos: encabezados, párrafos, listas y demás. Muchas veces, los desarrolladores utilizamos el término “etiqueta” (tag) para referirnos a un elemento, hablando por ejemplo de la etiqueta <p>. Pero la etiqueta es sólo la parte <p></p> de un elmento. En realidad el elemento completo es <p> Contenido del párrafo </p>. Es decir al hablar de un elemento nos referimos a la etiqueta y a su contenido, que debemos tener en cuenta, puede contener a su vez otros elementos.

Lo que hay que tener claro es que cada elemento de un documento HTML está contenido en otro elemento y puede contener elementos dentro de él. Esto es lo que se llama en inglés “containment hierarchy” (jerarquía de elementos) de una página.

En el punto más alto de la jerarquía está el elemento <HTML> de la página. Todos los demás elementos de un documento html están contenidos dentro de este elemento. Así unos elementos están contenidos dentro de otros. Los elementos de párrafo, pueden contener imágenes o enlaces y a su vez están contenidos en el elemento body.

A la hora de entender bien el funcionamiento de las hojas de estilo y el concepto de herencia y cascada, debemos tener muy claro este tema de que los elementos se incluyen unos dentro de otros.

Gráficamente podríamos representar esto así:



Hemos dicho que entender esto es muy importante y la razón de ello, es que en muchos casos (y con css2 siempre que así lo queramos), los elementos pueden heredar propiedades del elemento que los contiene.

En esta jerarquía hablamos de padres, hijos y hermanos:

Un elemento A dentro del cual está un elemento B, es el padre del elemento B, y el elemento B es el hijo del elemento A. Por ejemplo.

El elemento <p> está contenido dentro del elemento <body>. Así que el elemento p es hijo del elemento body y puede heredar sus propiedades. El elemento body es el padre del elemento p.

Dos elementos con un padre común son hermanos. Por ejemplo, el elemento p contiene los elementos img, y a, que son hermanos entre sí e hijos ambos de p.

Es decir , supongamos que hemos establecido un tipo de fuente para el elemento body (arial por ejemplo), si al elemento p no le establecemos una fuente distinta, heredará la fuente de su padre y se mostrará también con el tipo de fuente Arial.

COMO FUNCIONA LA “CASCADA”
Una hoja de estilo asociada con uno o más documentos html nos puede resultar muy útil. Pero la verdadera potencia de de las hojas de estilo es la posibilidad de enlazar unas hojas de estilo con otras, creando un grupo de hojas de estilo para manejar sitios grandes. O simplemente sitios con secciones distintas que queremos diferenciar visualmente.

De esta forma podemos por ejemplo, establecer una hoja de estilo base, para todo un web site, que contenga por ejemplo el tipo de fuente, el tamaño, cómo se muestran las listas etc, y luego nos podríamos hacer una serie de hojas estilo más específicas para cada una de nuestras secciones.

Así podemos enlazar diversas hojas de estilo relacionadas, creando una jerarquía de hojas de estilo. Y esto es lo que se llama cascada, en seguida veremos porqué.

Este mecanismo de la cascada funciona mediante la posibilidad que tiene una hoja de estilo de “importar” otra hoja de estilo, formando así una “cascada” de hojas de estilo.

Así como hemos visto en el gráfico, podemos tener una hoja de estilo central y hojas de estilos por secciones que importan la información de la hoja de estilo central y añaden las propiedades que ellos necesitan. De esta forma, la actualización resulta fácil, puesto que si cambiamos una hoja de estilo “padre”, sus hijas lo heredarán inmediatamente.

LA ESPECIFICIDAD
Tanto dentro de una hoja de estilos, como en un conjunto de hojas de estilo funcionando en cascada, puede ocurrir que más de una regla sea aplicable al mismo elemento. ¿Qué ocurre cuando dos propiedades, especificadas en reglas distintas y contradictorias entre sí son aplicables al mismo elemento? Obviamente no pueden aplicarse las dos (un texto no puede ser a la vez rojo y verde, por poner un ejemplo). Las reglas de especificidad son el mecanismo mediante el cual se resuelven estos conflictos. La regla general es que en caso de conflicto se aplica la regla más específica.

Algunos selectores, son más específicos que otros. Por ejemplo, los selectores de ID y de clase son más específicos que los selectores de etiqueta.

A la hora de tener en cuenta la especificidad, nos vendrá bien recordar lo siguiente:

1.- Los selectores de ID son más específicos que los otros selectores.

2.- Los selectores de clase son más específicos que los selectores de etiqueta.

3.- Los selectores contextuales y otros selectores que implican a más de un elemento, son más específicos que los selectores simples. (cuantos más elementos haya implicados, más específico será el selector y por tanto tendrá preferencia).

En los casos en que dos reglas tengan exactamente el mismo nivel de especificidad, tendrá preferencia el que esté después en la cascada.

Por ejemplo si tenemos una hoja de estilos A y una hoja de estilos B desde la que importamos las reglas de la hoja de estilos A. Si hay dos reglas contradictorias, prevalecerá la establecida en la hoja de estilos B por estar después en la cascada.

Si en una misma hoja de estilos hay dos reglas contradictorias, se aplicará la que esté en último lugar, la más alejada del comienzo del documento.

Aunque en principio todas estas reglas nos puedan parecer complicadas, la verdad es que aplicando el sentido común, no nos encontraremos con problemas de herencias y especificidad. ""
< anterior | 1 .. 6 7 8 9 10 .. 13 | siguiente >

Anuncios Google

Autor y licencia de 'CSS - Hojas de estilo'

Este contenido ha sido recopilado por el equipo de Wikilearning. Todo el contenido recopilado se ha obtenido respetando y comunicando en nuestro site la licencia de cada fuente.
Wikilearning tiene permiso expreso por escrito de los autores para publicar los contenidos que ha extraído de otras webs, incluyendo su uso comercial.