Las listas en CSS constituyen un elemento muy importante dentro de una página web que pretenda respetar los estándares.
Los navegadores muestran, por defecto, las listas el mismo color y fuente que el body. A continuación os enseño la forma de hacer vuestras listas más atractivas, de forma rápida y sencilla, utilizando solamente listas (ol) y parrafos (p) para diseñarlas.
1. Introducción
La manera correcta de presentar una lista es utilizando las etiquetas ul, ol y el elemento de párrafo p. Como explica el siguiente ejemplo:
2. Cambiando el estílo
Gracias a CSS podemos dar formato a nuestras listas sin tocar el código HTML.
Código CSS
#lista1 { font: italic 1em Georgia, "Times New Roman", Times, serif; color: #999; } #lista1 p { font: normal 0.8em Arial, "Helvetica", sans-serif; color: #000; }
Código HTML
<ol id="lista1"> <li> <p>Primera línea de la lista.</p> </li> <li> <p>Segunda línea de la lista.</p> </li> <li> <p>Tercera línea de la lista.</p> </li> </ol>
3. Utilizando imágenes
Además de poder variar el estilo de nuestras listas con los valores que proporciona CSS, también podemos utilizar imágenes en su lugar. Es muy sencillo, tan solo tenemos que cambiar el valor de list-style, en este caso por la url del archivo que queremos mostrar, como se muestra a continuación:
Código CSS
list-style: url('img/bullet.gif') outside;
Este tutorial está inspirado en Style Your Ordered List, publicado por WebDesignerWall.
