Clases en CSS | Oloblogger En ocasiones necesitamos destacar alguna parte de nuestras entradas o simplemente que se muestre de una forma diferente al resto. Para que t...

15 de diciembre de 2007

Clases en CSS

En ocasiones necesitamos destacar alguna parte de nuestras entradas o simplemente que se muestre de una forma diferente al resto. Para que todas esas partes nos queden dentro de un mismo estilo y, sobre todo, para no tener que teclear el mismo código una y otra vez, podemos usar las CLASES.

Una CLASE se formula de la siguiente manera:

<div class="resaltar" align="justify">El sexo forma parte de la naturaleza. Y yo me llevo de maravilla con la naturaleza.
* Marilyn Monroe</div>

Lo que se quiera resaltar tiene que ir de esta manera, entre <div> o <span> e indicando la CLASE con la que queremos que se muestre.

Previamente hay que crear la CLASE (en el ejemplo, RESALTAR) en nuestra hoja de estilo (CSS) para que funcione.

Para ello, antes de ]]></b:skin> hay que colocar el código necesario para ello. Las CLASES comienzan por un punto y no pueden contener ciertos caracteres, por lo cual usar letras que no puedan dar problemas (como pudiera pasar con la ñ). Por lo demás, le podeis dar el nombre que querais.

.resaltar {
border:3px groove #666699;
text-align:left;
font-family:Trebuchet;
margin:10px 20px 10px 20px;
padding:10px 20px 10px 20px;
color:#666699;
background-image:url(http://farm2.static.flickr.com/1201/533649270_a8c3fc3bed_m.jpg);
}

Esta configuración de ejemplo daría este resultado:

El sexo forma parte de la naturaleza. Y yo me llevo de maravilla con la naturaleza.
* Marilyn Monroe

Todo lo demás depende de vuestra creatividad. Jugando con el borde que puede ser total o sólo en algún lado, la tipografía, el color, imagen de fondo, márgenes, etc. se pueden conseguir resultados muy buenos.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

2 comentarios :

  1. .-Muy bien, Oloman. Una clase sencilla y muy práctica.

    .-En los textos siempre se necesitan este tipo de herramientas.

    .-Saludos desde Cosas y Casos.

    ResponderEliminar
  2. Hola,
    Antes de nada felicitarte por tu gran trabajo.
    Hace poco he cambiado a una plantilla que ofrecían en Btemplates, se llama 'Aspire'. Se trata de esas plantillas adaptadas desde WordPress.

    Mi problema está con la fecha de cada post, el recuadrito que debiera de mostrarla, no lo hace. He ido a configuración y formato y no encuentro nada que esté mal, en cuanto a formato de fecha.

    Otra problema es que no deja ver en cada entrada nada más que los comentarios. Fui a Diseño y en elementos de la página lo traté de configurar en "entradas del blog", de hecho, se deja configurar perfectamente; sin embargo, nada aparece en las entradas del blog.

    Por cierto, mi blog es este:
    Navegantes
    Te agradecería un montón si puedes ayudarme

    Gracias por la atención

    ResponderEliminar