Yo he estudiado casos de estilos en CSS Zen Garden, y la verdad, según creo, si deseas tener una web muy reutilizable para aplicar diferentes estilos (es decir, dejar que los usuarios puedan elegir skins o como lo quieras llamar, o cambiar fácilmente de un estilo a otro porque te cansas), creo que es mejor usar los divs. Así puedes, dependiendo del estilo elegido, usar una imagen en un <div>, o un texto formateado. Y gracias a las etiqueta <span> rodeando el texto de un <div>, puedes optar por:
- no poner imagen al selector del <div>, para que aparezca el texto formateado,
- o bien, poner una imagen en el selector del <div>, y poner al <span> del texto la regla
display:none, para deshabilitar el texto y que sólo aparezca la imagen.
Esto es muy útil por ejemplo si los títulos de las secciones de una web quieres que sean de texto con un estilo determinado (fuente, color, fondo de texto, separación, sangrado, etc), o bien imágenes gif, jpg o png con el texto del título incluido ya en la propia imagen.
P.ej:
Caso 1: (títulos de secciones de texto formateado)
Código HTML:
#tituloSeccion1 {
....
}
.tituloSecciones {
font-family:...;
color:....;
background-color:...;
stretch:....;
}
...
<div id="tituloSeccion1">
<h3 class="tituloSecciones"><span>Sección1</span></h3>
</div> Caso 2: (títulos de secciones mediante imágenes que contengan el texto)
Código HTML:
#tituloSeccion1 {
background: url(/imagenes/imgTituloSeccion1.gif);
}
.tituloSecciones span{
display: none; /* Hace desaparecer el texto rodeado por span en el fichero HTML fuente*/
}
...
<div id="tituloSeccion1">
<h3 class="tituloSecciones"><span>Sección1</span></h3>
</div>
Como veis, el fichero estructural HTML no cambia, pero su apariencia sí, sin tener que hacer arreglos en el HTML