CSS para los estilos de las etiquetas

12/2/08 - Utilizaremos CSS para definir los estilos de la nube y de las etiquetas que vamos a colocar dentro. Hemos realizado esta declaración de estilos intentando que sea lo más versátil posible, adaptable a todos los sitios y de modo que se puedan colocar varias nubes en la página con el mismo estilo.

La declaración de estilos se compone por dos capas. Primero la capa donde vamos a colocar la nube, con estilos generales a la nube. Segundo la capa donde van las etiquetas y por último los distintos estilos de para cada uno de los tamaños posibles de las etiquetas.

<style type="text/css">
.nube{
   border: solid 1px #aaaacc;
   background-color: #ddddff;
   color: #666666;
   width: 335px;
   text-align: center;
}
.nube div.etiquetas{
   font-family: verdana,arial,helvetica;
   font-size:8pt;
   padding:5px;
}
.nube div.etiquetas span{
   float: left;
   margin: 0 3px 0 3px;
   height: 20pt;
   white-space: nowrap;
}
.nube div.etiquetas span.etiquetatam1{
   font-size: 110%;   
}
.nube div.etiquetas span.etiquetatam2{
   font-size: 120%;   
}
.nube div.etiquetas span.etiquetatam3{
   font-size: 130%;   
}
div.etiquetas span.etiquetatam4{
   font-size: 140%;   
}
.nube div.etiquetas span.etiquetatam5{
   font-size: 150%;   
}
.nube div.etiquetas span.etiquetatam6{
   font-size: 160%;   
}
.nube div.etiquetas span.etiquetatam7{
   font-size: 170%;   
}
.nube div.etiquetas span.etiquetatam8{
   font-size: 180%;   
}
.nube div.etiquetas span.etiquetatam9{
   font-size: 190%;   
}
.nube div.etiquetas span.etiquetatam10{
   font-size: 200%;   
}
</style>

Esto lo vamos a colocar en la cabecera de la página o en la declaración de estilos global d nuestro sitio.

Si nos fijamos, hemos utilizado 10 diferentes estilos para definir los distintos tamaños de las etiquetas de la nube. Cada una con un porcentaje superior del tamaño del texto.

Autoría, licencia y acciones sobre este artículo

Informe de Miguel Angel Alvarez* Director de DesarrolloWeb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

Comentarios sin revisar

Añadir un comentario del artículo Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.

 Se ha encontrado un comentario sin revisar

Ver los comentarios no revisados

Añadir un comentario del artículo

Enlaces:

Maestrosdelweb

  Ir arriba