Las listas también tienen sus propiedades específicas para alterar el estilo o las características propias de este tipo de elementos HTML. Por ejemplo, las siguientes propiedades:
| Propiedad | Valor | Significado |
|---|---|---|
| list-style-image: | none | url(image.png) | Especifica una imagen para usar como «punto» o viñeta de ítem. |
| list-style-position: | inside | outside | Establece o elimina indentación de ítems sobre la lista. |
La primera propiedad, list-style-image permite indicar la URL de una imagen para utilizar de icono o viñeta en cada ítem de la lista. Con el valor none eliminamos el uso de cualquier imagen.
Por otro lado, la propiedad list-style-position permite establece una indentación a todos los ítems de la lista, estableciendolos desplazados a la derecha (inside) o sin desplazar (outside).
La tercera propiedad, list-style-type nos permite indicar que tipo de numeración tendrán las listas (en el caso de no estar utilizando ningun imagen). Se establecen tres grupos. El primero indicado para las listas que no requieren orden, el segundo para las listas numeradas y el tercero para las listas numeradas que queremos especificar con letras (números romanos, letras griegas, etc...).
Veamos cada uno de los valores posibles:
| Propiedad | Valor | Significado |
|---|---|---|
| list-style-type: | disc | circle | square | none | Viñetas sin orden |
| list-style-type: | decimal | decimal-leading-zero | lower-roman | upper-roman | Viñetas numéricas |
| list-style-type: | lower-alpha | | upper-alpha | lower-greek | Viñetas alfabéticas |
El primer grupo, indicado para listas sin orden <ul>:
Si lo que queremos es establecer una lista numerada <ol>, podemos utilizar valores como:
Existen otros valores como bengali, cambodian, hebrew, devanagari, gujarati, gurmukhi, kannada, lao, malayalam, mongolian, myanmar, oriya, persian, tamil, telugu. thai, tibetan, hiragana, hiragana-iroha, katakana, katakana-iroha, entre otros.
Es posible utilizar la propiedad de atajo list-style para especificar varias propiedades en una sola. El orden aconsejado es el siguiente:
div {
list-style: <type> <position> <image>
}Por ejemplo:
div {
list-style: circle inside none;
}