JMiur [E]

Por lo general asignamos una clase CSS a una etiqueta pero, no hay nada que nos impida asignarle varias simultáneamente. Por ejemplo:
<p class="claseUno"> ... contenido ... </p>

<p class="claseUno claseDos"> ... contenido ... </p>
Cuando utilizamos varias clases juntas, simplemente las separamos con un espacio.

Supongamos que tenemos dos clases, con una definimos el color y con la otra el tipo de fuente:
<style>
.claseFuente {font-size: 20px; font-family: Tahoma;}
.claseColor {color: lightblue;}
</style>
Un párrafo con la clase llamada claseColor, mostrará el texto con el color que hayamos elegido y con la fuente por defecto:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.


Un párrafo con la clase llamada claseFuente, mostrará el texto con el color por defecto y con la fuente que hayamos determinado:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.


Un párrafo con las dos clases claseColor y claseFuente, mostrará el texto con el color y con el tipo de fuente definidas en ambas:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.


¿Y si ambas clases tienen propiedades similares?

Supongamos que tenemos una clase que define al color como rojo y otra como verde.
<style>
.claseColorVerde {color: lightgreen;}
.claseColorRojo {color: lightCoral;}
</style>
Si el atributo es class="claseColorRojo claseColorVerde" veremos esto:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.


Y si el atributo es class="claseColorVerde claseColorRojo" veremos esto:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.


¿No hay diferencias? ¿Por qué no sale verde?

Porque el orden en que las coloquemos en el atributo es indiferente.

Cuál es la regla que se ejecutará depende de la forma en que las hayamos definido en la etiqueta STYLE. En este caso siempre se verá en rojo porque aparece después; si el orden fuera:
<style>
.claseColorRojo {color: lightCoral;}
.claseColorVerde {color: lightgreen;}
</style>
Siempre se verá en verde porque la prioridad la tendrá la última que hayamos definido.

Este tipo de combinaciones es bastante común en las plantillas de Blogger y es algo que a veces puede causar problemas a la hora de cambiar algo si no tenemos en cuenta esas combinaciones.

¿Para qué sirve esto? Como cualquier otra herramienta, depende de como la usemos. Por ejemplo, algo que puede ser útil es crear una clase que contenga un recuadro de algún tipo y aplicarla a diferentes elementos que ya tienen propiedades:
<style>
.claseRecuadro {
padding: 10px;
color: white;
background: #336699;
border-top: 2px solid Silver;
border-bottom: 4px groove DarkSlateBlue;
border-left: 5px ridge LightBlue;
border-right: 5px groove DarkSlateBlue;
}
</style>
Así se vería un párrafo con cualquier clase:
<p class="unaClaseCualquiera"> ... contenido ... </p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Y así se vería el mismo párrafo si le "sumamos" claseRecuadro:
<p class="unaClaseCualquiera claseRecuadro"> ... contenido ... </p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

3 comentarios:

Gem@  

Excelente explicación :)

Responder
JMiur  

Gracias Gem@

No es algo que usemos habitualmente pero en Blogger está por todos lados y es una de esas cosas que hace que no entendamos por qué ciertos cambios no parecen tener efecto :)

Responder
egoloco  

Yo sabía que sí o sí tenías que tener una entrada que explicase esto!!! Gracias!!

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR