Unidad 9. Hojas de estilo CSS. Sintaxis. Selectores (XI)



9.8. Orden de aplicación. Colisiones

Hemos vistos que los estilos se pueden declarar en varios sitios y que los selectores pueden ser de varios tipos, esto puede producir que una etiqueta se vea afectada por más de un estilo. La regla general es que a una etiqueta se le pueden aplicar varios estilos de forma acumulativa provenientes de distintas reglas. Por esto se llaman hojas de estilo "en cascada". El caso más sencillo es que no haya intersección de propiedades, es decir que no haya que aplicar una propiedad dos veces a la misma etiqueta.

Sin embargo el tema se puede complicar, se pueden producir colisiones para un atributo, es decir, que el atributo tome valores distintos provenientes de dos reglas aplicables, en ese caso ¿Qué valor aplicamos? Para responder a esta pregunta disponemos de normas para solucionarlo que vamos a ver en este punto.

Para aclarar el concepto de colisión vamos a ver un caso sin colisiones y otro con colisiones.

1- Sin colisiones.

Definimos el siguiente estilo con una colisión potencial: .clase_rojo y .clase_azul actúan sobre el mismo atributo color con valores distintos, sin embargo en el código HTML vemos que no se han aplicado a la vez sobre una misma etiqueta, por lo tanto no habrá ninguna colisión.

p { font-style: italic }
.clase_rojo { color: red }
.clase_azul { color: blue }
#id_negrita { font-weight: bold }

Para este fragmento de página:

<h3>Cabecera h3.</h3>
<p>Párrafo uno cursiva.</p>
<p class="clase_rojo">Párrafo dos con clase rojo.</p>
<p class="clase_azul">Párrafo tres con clase azul.</p>
<p id="id_negrita" class="clase_rojo">Párrafo cuatro con id negrita y clase rojo</p>
<div> Texto cuatro dentro de div. </div>

Produce este resultado:

Como vemos, el párrafo cuarto recibe los estilos de tres reglas (p, id="id_negrita", class="clase_rojo") sin embargo no hay colisión, ya que no hay intersección de atributos, los atributos son distintos (font-style: italic, font-weight: bold, color: red). Como decíamos, a cada etiqueta se le pueden aplicar varias reglas de forma acumulativa y ello no tiene porqué producir ninguna colisión.

Un buen diseño debe evitar al máximo posible las colisiones. Una colisión no es un error en el sentido que incumpla una norma, ni la página web mostrará ningún error. CSS tiene definidas las pautas para resolver las colisiones sin producir ambigüedades o errores. Sin embargo, la existencia de colisiones puede hacer más difícil mantener una página web y provocar efectos de diseño inesperados.


Enero-2019 (V 2.2)
Pág. 9.11
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.