CSS: Listas

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
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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-type
  • list-style-position
  • list-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.

← Artículo anterior
Artículo siguiente →