CAPÍTULO XIII. LISTAS.

A) LISTAS NO ORDENADAS.

Estas listas comienzan con el elemento <u>. Cada ítem de la lista debe comenzar por la etiqueta <li>. Por defecto, estos ítems vendrán marcados por pequeños círculos negros:

Si queremos cambiar el estilo del marcador podemos utilizar el atributo type:

B) LISTAS ORDENADAS.

Una lista ordenada comienza con el elemento <ol>. Cada ítem de la lista debe comenzar por la etiqueta <li>. Los ítems de la lista serán marcados por defecto con números:

Si queremos modificar la numeración, por ejemplo, si queremos que nuestra lista empiece por un número cualquiera, podemos escribir lo siguiente:

También valdría:

El atributo type definirá el tipo de marcador de los ítems:

C) LISTAS DE DESCRIPCIÓN.

Se trata de una lista de términos, con una descripción de cada término:

D) LISTAS ANIDADAS.

Los ítems de una lista pueden contener otra lista, así como otros elementos HTML, como imágenes, enlaces,...

D) LISTAS CON IMÁGENES EN VEZ DE VIÑETAS.

Tenemos la posibilidad de sustituir las viñetas predeterminadas (círculos negros) por imágenes gif o png añadiendo un poco de código. Aunque lo normal y habitual sería añadir este código dentro del apartado dedicado al CSS, como todavía no hemos llegado a ese punto, vamos a introducir este código directamente en la etiqueta correspondiente.

Vamos a añadir un icono de una flecha en formato gif (que tendremos en la carpeta 'img') delante de cada elemento de la lista:

Con list-style:none eliminamos las viñetas, mientras que con list-style-image especificamos qué imagen se debe utilizar.