Listas en HTML (VIII)
por Luciano Moreno, del departamento de diseño web de BJS Software.

Listas con estilo (II).-

* Estilos de bloque.

Al ser una lista un elemento de bloque, podemos aplicarle los estilos característicos de este tipo de elementos. Así, podemos definir el color de fondo del bloque completo o sólo de alguno o todos los elementos de la lista:

<style type="text/css">
  .listadoC{background-color:yellow;}
</style>

<ol class="listadoC">   <li>primer elemento</li>   <li>segundo elemento</li>   <li>tercer elemento</li> </ol>

primer elemento segundo elemento tecer elemento

O asignar una imagen de fondo a la lista:

<style type="text/css">
  .listadoD{background-image:url("images/12.gif");}
</style>

<ol class="listadoD">   <li>primer elemento</li>   <li>segundo elemento</li>   <li>tercer elemento</li> </ol>

primer elemento segundo elemento tecer elemento

Podemos asignar un tipo cualquiera de bordes soportados por CSS al bloque:

<style type="text/css">
  .listadoE{border:solid 2px red;}
</style>

<ol class="listadoD">   <li>primer elemento</li>   <li>segundo elemento</li>   <li>tercer elemento</li> </ol>

primer elemento segundo elemento tecer elemento

* Configurando los topos:

Una de las mejores pociones que nos da CSS para las listas es la posibilidad de configurar los topos a nuestro gusto, ya que nos permite definir como tal cualquier imagen que deseemos. Veamos un ejemplo de la sintaxis adecuada y de su efecto en una lista:

<style type="text/css">
  .listadoF{list-style-image:url("images/topo_1.gif");}
</style>

<ol class="listadoD">   <li>primer elemento</li>   <li>segundo elemento</li>   <li>tercer elemento</li> </ol>

primer elemento segundo elemento tecer elemento

Observad atentamente la sintaxis:

list-style-image:url("ruta_imagen")

Si no ponemos la instrucción correctamente, la imagen no nos aparecerá.

Además de poder usar imágenes, CSS también permite configurar el topo estándar que se usará en una lista o elemento de ella, mediante la sintaxis:

list-style-type: tipo_topo

donde tipo_topo puede ser alguno de los ya vistos antes: square, disc, circle, A, I, 1, etc.

Ejemplo:

<style type="text/css">
  .listadoG{list-style-type: square;}
</style>

<ol class="listadoD">   <li>primer elemento</li>   <li>segundo elemento</li>   <li>tercer elemento</li> </ol>

primer elemento segundo elemento tecer elemento

Conclusión:

Podemos aplicar a las listas todas aquellos atributos de CSS pertenecientes a bloques o a texto, siempre que sea de sentido común dicha aplicación.