CSS ofrece propiedades para aplicar estilos a los diferentes tipos de listas que se puede crear mediante los elementos HTML <ol> (listas ordenadas) y <ul> (listas no ordenadas). Los estilos permiten controlar el tipo de viñeta, por lo que se aplican sobre los elementos que forman la lista (elemento <li>).
Las listas son muy útiles para describir conjuntos de datos numerados o con viñetas. En este sentido, se puede afirmar que un buen diseño es una herramienta comunicativa. Con CSS se puede modificar el tipo de estilo de lista, la posición del estilo o definir una imagen. Estas son las propiedades:
| Propiedad | Descripción |
|---|---|
list-style-type | Define el tipo de estilo de una lista. |
list-style-position | Define la posición de estilo de una lista. |
list-style-image | Define la imagen de estilo de una lista. |
list-style | Abreviatura para definir el estilo de una lista. |
La propiedad ‘list-style-type’
La propiedad list-style-type permite controlar el tipo de viñeta que se muestra, por lo que se trata de una propiedad básica. Esta propiedad puede contener valores que se clasifican en tres categorías: valores gráficos, valores numéricos y valores alfabéticos. Además, puede ser inherit y none.
Cada uno de estos tres grupos puede usar cualquier tipo de lista. No obstante, se recomienda usar un valor que corresponda con el tipo de lista. Por ejemplo, sería el caso si usamos un valor numérico en una lista no ordenada (elemento <ul>) en vez de usarlo en una lista ordenada (<ol>).
Por defecto, los navegadores web utilizan el valor disc en las listas no ordenadas (elemento <ul>) y un número ordenado empezando por el uno en las listas ordenadas (elemento <ol>). A continuación se expone una tabla con los valores recomendados para cada tipo de lista.
Listas ordenadas
| Valor | Descripción | Ejemplo |
|---|---|---|
decimal | Números decimales. | 1, 2, 3 |
decimal-leading-zero | Números decimales con un 0. | 01, 02, 03 |
lower-roman | Números romanos en minúscula. | i, ii, iii |
upper-roman | Números romanos en mayúscula. | I, II, III |
lower-greek | Letras griegas en minúscula. | α, β, γ |
lower-latin | Letras ASCII en minúscula. | a, b, c |
upper-latin | Letras ASCII en mayúscula. | A, B, C |
armenian | Numeración armenia tradicional. | Ա, Բ, Գ |
georgian | Numeración georgiana tradicional. | ა, ბ, გ |
herbrew | Numeración hebrea tradicional. | א, ב, ג |
lower-alpha | Es igual que lower-latin. | a, b, c |
upper-alpha | Es igual que upper-latin. | A, B, C |
Listas no ordenadas
| Valor | Descripción | Ejemplo | Unicode |
|---|---|---|---|
disc | Símbolo de círculo. | • | U+2022 |
circle | Símbolo de circunferencia. | ◦ | U+25E6 |
square | Símbolo de cuadrado lleno. | ▪ | U+25AA |
Aunque parezca contradictorio, el valor circle representa una circunferencia en vez de un círculo, y para el círculo se usa el valor disc. No tuvieron en cuenta las diferencias entre círculo y circunferencia.
La propiedad ‘list-style-position’
Con la propiedad list-style-position se puede controlar la colocación de las viñetas. Lo que hace esta propiedad es establecer un sangrado a todos los elementos que forman una lista; se usa el valor inside. Por defecto, su valor es outside (sin sangrado). Veamos una tabla con sus valores:
| Valor | Descripción |
|---|---|
outside | Valor por defecto, sin sangrado. |
inside | Se añade un sangrado a cada elemento. |
inherit | Hereda la posición del elemento padre. |
Veamos un par de ejemplos:
.outside {
list-style-position: outside;
}
.inside {
list-style-position: inside;
}
Resultado:
| Lista sin sangrado | Lista con sangrado |
|
|
La propiedad ‘list-style-image’
La propiedad list-style-image permite personalizar el icono o viñeta de cada elemento de la lista, es decir, de cada elemento <li>. Para lograrlo se debe indicar una URL válida, que puede ser una ruta relativa o absoluta. Su valor por defecto es none. También se puede heredar con inherit.
Ejemplo de uso:
.icono {
list-style-image: url("icono.svg");
}
En caso de que la imagen indicada no esté disponible y no se pueda cargar, se mostrará la viñeta automática que corresponda según el tipo de lista (ordenada o no ordenada).
Cuando se usa una imagen para personalizar viñetas, es recomendable indicar un estilo de viñeta automática que se mostrará cuando no se pueda cargar la imagen. En el siguiente ejemplo, si la imagen no está disponible por el motivo que sea se mostrará una circunferencia en su lugar.
.icono {
list-style-image: url("icono.svg") circle;
}
La propiedad ‘list-style’
La propiedad list-style es una abreviatura (shorthand) que permite especificar de forma simultánea los parámetros de las tres propiedades de personalización de listas. A continuación se indica el orden correcto:
list-style-typelist-style-positionlist-style-image
En el siguiente ejemplo usamos la propiedad list-style para indicar una viñeta en forma de cuadrado lleno, sin sangrado y sin imagen:
.estilo {
list-style: square outside none;
}
Resultado:
- HTML
- CSS
- JS
También puede usarse el valor inherit para heredar todas las propiedades de listas del elemento contenedor superior (padre), y el valor none para indicar que no se quiere mostrar ningún tipo de viñeta.
