Apuntes Web
ApuntesWeb.net > Artículos >

Usando Multiples Clases CSS

06/02/2011

Es posible utilizar más de una clase para un mismo elemento, escribiendo cada clase separada por un espacio de este modo:

Código HTML
<div class="bloque importante">
<div class="bloque importante especial">
Código CSS
.bloque{}
.importante{}
.especial{}

Ejemplo práctico de utilización de multiclases

Tenemos cuatro columnas flotantes y deseamos separarlos con un borde entre ellos, para lo cual agregamos un borde al lado derecho, de este modo:

Código CSS
.columna{width:150px;height:120px;
        border-right:1px solid #000;
        margin:7px;padding:8px;float:left;}
.nb{border:none;}
.cb{border-left:1px solid #000;}
Código HTML
<div class="columna">bloque con class="columna"</div>
<div class="columna">bloque con class="columna"</div>
<div class="columna">bloque con class="columna"</div>

Eliminando el borde de la última columna

Si deseamos que solo haya divisiones con una línea entre columnas tenemos que eliminar la línea de la última columna del lado derecho. para lo cual agregaremos una clase adicional que elimine el borde de este modo:

Código CSS
.columna{width:150px;height:120px;
        border-right:1px solid #000;
        margin:7px;padding:8px;float:left;}
.nb{border:none;}
Código HTML
<div class="columna">bloque con class="columna"</div>
<div class="columna">bloque con class="columna"</div>
<div class="columna nb">bloque con class="columna nb"</div>
El resultado es:
Notar que las propiedades generales de la primera clase se siguen aplicando y la segunda clase aplica propiedades particulares.
Artículos relacionados:

ARTÍCULOS DESTACADOS

MANUAL CSS

Ejemplos de las propiedades css paso a paso, descargas, ejercicios.

MANUAL XHTML

Aprender HTML paso a paso con ejemplos, descargas, ejercicios, marcado básico.

HOSTING WEB

Alojamiento web gratis, soporte de php, mysql, Ftp, Panel de Control, .htacces y más.

GENERADOR DE COLORES

Programas para generar colores HTML, rgb, hexadecimal, capturar colores de pantalla.

Flotar Imágen con CSS

Flotar una imágen a un lado u otro de un parrafo, mientras el texto esta alrededor de él.

Enlaces

Web Hosting
CSS, HTML, XHTML, Recursos y mucho más, Prohibida su reproducción total o parcial.
© 2009 - 2012 ApuntesWeb.net