CSS 2: Listas

La propiedad compuesta list-style

La propiedad compuesta list-style permite establecer en una sola propiedad los valores de las propiedades list-style-type, list-style-image y list-style-position.

Tipo predefinidos de marcador: list-style-type

El marcador de las listas ordenadas (<ol>) o no ordenadas (<ul>) se modifica con la propiedad list-style-type.

Hueco
ul {
  list-style-type: none;
}
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
Hueco
ul {
  list-style-type: disc;
}
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
Hueco
ul {
  list-style-type: circle;
}
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
Hueco
ul {
  list-style-type: square;
}
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
Hueco
ul {
  list-style-type: decimal;
}
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
Hueco
ul {
  list-style-type: decimal-leading-zero;
}
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
Hueco
ul {
  list-style-type: lower-roman;
}
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
Hueco
ul {
  list-style-type: upper-roman;
}
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
Hueco
ul {
  list-style-type: lower-greek;
}
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
Hueco
ul {
  list-style-type: lower-alpha;
}
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
Hueco
ul {
  list-style-type: lower-latin;
}
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
Hueco
ul {
  list-style-type: upper-alpha;
}
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
Hueco
ul {
  list-style-type: upper-latin;
}
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
Correcto en Chrome Correcto en Firefox Incorrecto en Edge
ul {
  list-style-type: hebrew;
}
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
Hueco
ul {
  list-style-type: georgian;
}
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
Hueco
ul {
  list-style-type: armenian;
}
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
Correcto en Chrome Correcto en Firefox Incorrecto en Edge
ul {
  list-style-type: cjk-ideographic;
}
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
Correcto en Chrome Correcto en Firefox Incorrecto en Edge
ul {
  list-style-type: hiragana;
}
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
Correcto en Chrome Correcto en Firefox Incorrecto en Edge
ul {
  list-style-type: katakana;
}
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
Correcto en Chrome Correcto en Firefox Incorrecto en Edge
ul {
  list-style-type: hiragana-iroha;
}
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
Correcto en Chrome Correcto en Firefox Incorrecto en Edge
ul {
  list-style-type: katakana-iroha;
}
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista

Las listas ordenadas y no ordenadas son equivalentes. Los navegadores muestran números en las listas ordenadas y símbolos en las listas no ordenadas, pero desde la hoja de estilo se puede invertir la presentación:

<ul>
  <li>Esto es un punto de una lista no ordenada</li>
  <li>Esto es otro punto de la misma lista no ordenada
    <ol>
      <li>Esto es un punto de una sublista ordenada</li>
      <li>Esto es otro punto de la misma sublista ordenada</li>
    </ol>
  </li>
</ul>
  • Esto es un punto de una lista no ordenada
  • Esto es otro punto de la misma lista no ordenada
    1. Esto es un punto de una sublista ordenada
    2. Esto es otro punto de la misma sublista ordenada
ul {
  list-style-type: decimal;
}

ol {
   list-style-type: disc;
}
  • Esto es un punto de una lista no ordenada
  • Esto es otro punto de la misma lista no ordenada
    1. Esto es un punto de una sublista ordenada
    2. Esto es otro punto de la misma sublista ordenada

Los estilos lower-latin y lower-alpha son los mismos, así como los estilos upper-latin y upper-alpha.

Si no están instaladas las fuentes necesarias, Firefox muestra un cuadro con el código Unicode del carácter no mostrado. Cuando no es capaz de representar el estilo, Edge muestra la lista como una lista no ordenadas estándar.

La recomendación CSS 2 no especifica qué debe hacerse cuando se utiliza un estilo alfabético y la lista tiene más elementos que el alfabeto correspondiente. los navegadores hacen como en las antiguas matrículas de los coches, es decir, después de Z ponen AA (y después de ZZ ponen AAA), como puede comprobarse en esta página de ejemplo de lista larga con upper-alpha.

En el estilo decimal-leading-zero, los navegadores sólo ponen un cero delante de los primeros nueve elementos (los que llevan los números del 1 al 9), aunque la lista tenga más de 100 elementos, como puede comprobarse en esta página de ejemplo de lista larga con decimal-leading-zero.

Los estilos hebrew, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha no aparecen en la recomendación CSS 2.1, aunque sí en la futura recomendación CSS 3: Listas (actualmente -octubre de 2014- en elaboración).

Imágenes como marcador: list-style-image

La propiedad list-style-image permite utilizar la imagen que se quiera como marcador de una lista. El único inconveniente es que el tamaño del marcador no cambia al cambiar desde el navegador el tamaño de la fuente.

ul {
  list-style-image: url("cruz7x7.png");
}
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
ul {
  list-style-image: url("smiley.png");
}
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista

Posición del marcador: list-style-position

La propiedad list-style-position establece la posición del marcador con respecto al resto del elemento de la lista: dentro (inside) o fuera (outside). los navegadores aplican por omisión el valor outside.

ul {
}

li {
  background-color: lightblue;
}
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
ul {
  list-style-position: inside;
}

li {
  background-color: lightblue;
}
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
ul {
  list-style-position: outside;
}

li {
  background-color: lightblue;
}
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista

Icono del elemento <summary> de <details>

El icono que muestra el elemento interactivo <summary> de <details> se puede establecer con las propiedades de lista.

Incorrecto en Chrome Correcto en Firefox Incorrecto en Edge
summary {
  list-style-type: circle;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Incorrecto en Chrome Correcto en Firefox Incorrecto en Edge
summary {
  list-style-image: url("../smiley.png");
}
  
ERROR (no puede mostrarse el objeto)
Enlace externo