Comentaremos en este capítulo las propiedades de los listados. Desde CSS podemos estilizar los marcadores de nuestros listados para darles exactamente la apariencia que deseemos. Para ello simplemente debemos usar la propiedad list-style en sus diferentes variantes y aplicada siempre a los tags propios de las listas (ul, ol, li):

list-style-type:

Por defecto los navegadores suelen mostrar unos pequeños círculos rellenos a cada uno de los elementos de nuestra lista <ul> o valores decimales para las listas <ol>.  List-style-type nos permite escoger que tipo de dibujo o valor queremos usar para mostrar nuestra lista:

• disc: círculo relleno.
• circle: círculo vacio.
• square: cuadrado.
• decimal: números decimales a partir de uno (1,2,3,…)
• decimal-leading-zero: números decimales añadiendo ceros a la izquierda para que todos los números ocupen el mismo espacio (001,002,003,… 998, 999)
• lower-roman: números romanos en minúsculas (i,ii,iii,iv,…)
• upper-roman: números romanos en mayúsculas (I,II,III,IV)
• georgian: números georgianos.
• armenian: números armenios.
• lower-latin o lower-alpha: letras minúsculas del alfabeto occidental (a,b,c,d,…)
• upper-latin y upper-alpha: letras mayúsculas del alfabeto occidental (A,B,C,D….)
• lower-geek: letras minúsculas del alfabeto griego.
• none: para no mostrar ningún tipo de imagen frente a nuestras listas.

list-style-image

Además de las posibilidades que nos ofrece el list-style-type, puede interesarnos usar una imagen propia para hacer de marcador de los elementos de nuestra lista (como por ejemplo flechas, guiones u otro dibujo que queramos poner) Para ello usaremos la propiedad list-style-image de la siguiente forma:

list style-image: url(“img/imagenlistado.jpg”);

Debemos tener en cuenta que en este caso, el espaciado entre líneas de nuestro listado se verá afectado por el alto del tamaño de esta imagen en caso de ser demasiado grande. Además en este caso, la posición de la imagen no puede retocarse, de f0rma que en ocasiones debemos editar directamente la imagen para que se muestre exactamente en la posición que deseemos haciéndola más alta, o mas ancha para que se coloque donde deseemos.

Una recomendación que suele hacerse es usar también el list-style-type cuando usemos el list-style-image dado que algunos navegadores pueden no mostrar correctamente la imagen. De esta manera nos aseguramos que siempre se muestra algún signo o señal que delimita los elementos de nuestra lista.

list-style-position

Esta propiedad nos permite escoger el posicionado del marcador respecto al listado, pero no en alto o ancho (ya hemos dicho que no podía posicionarse así) sino la posición que ocuparán los listados respecto al marcador. Dado que es un poco liante de explicar una imagen os lo aclarará completamente:

Como veis en el primer caso, los listados empiezan a partir del marcador aunque sean de más de una línea. En el segundo caso, el marcador se situa como flotando respecto al texto de la lista, entrando sobre este. Para hacerlo usaremos los siguientes valores:

• outside: para crear marcadores externos (como en el primer caso del ejemplo).
• inside: para marcadores internos (como en el segundo caso)

list-style

Como pasa con otro tipo de propiedades, list style nos permite definir los valores diferentes de list-style-type, list-style-image y list style-position en una sola instrucción de la siguiente manera:

list-style: outside disc url(“img/imagenlistado.jpg”);

De esta forma en una sola instrucción hemos establecido los tres posibles valores para list-style.