CSS: Listas (1)

En esta lección se comentan propiedades CSS definidas en la recomendación CSS 2.1, publicada en junio de 2011. En la lección CSS Listas (2) se comentan propiedades CSS definidas en la futura recomendación CSS Counter Styles Level 3. Aunque actualmente (mayo de 2022) esta recomendación no está formalmente aprobada, se considera parte de la definición oficial de CSS en CSS Snapshot 2021.

Estas propiedades se aplican a las listas (<ul>, <ol>), pero también a cualquier elemento que tenga la propiedad display con el valor list-item, como por ejemplo el elemento <summary>.

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.

En esta lección se muestran los tipos de marcador "clásicos", incluidos en la recomendación CSS 2.1. En la lección CSS Listas (2) se muestran los tipos de marcador añadidos en la futura recomendación CSS Counter Styles Level 3, correspondientes en su mayoría a lenguas orientales.

ul {
  list-style-type: none;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
ul {
  list-style-type: disc;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
ul {
  list-style-type: circle;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
ul {
  list-style-type: square;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
ul {
  list-style-type: decimal;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
ul {
  list-style-type: decimal-leading-zero;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
ul {
  list-style-type: lower-roman;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
ul {
  list-style-type: upper-roman;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
ul {
  list-style-type: lower-greek;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
ul {
  list-style-type: lower-alpha;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
ul {
  list-style-type: lower-latin;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
ul {
  list-style-type: upper-alpha;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
ul {
  list-style-type: upper-latin;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

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>
ERROR (no puede mostrarse el objeto)
Enlace externo
ul {
  list-style-type: decimal;
}

ol {
   list-style-type: disc;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

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

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.

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");
}
ERROR (no puede mostrarse el objeto)
Enlace externo
ul {
  list-style-image: url("smiley.png");
}
ERROR (no puede mostrarse el objeto)
Enlace externo

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;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
ul {
  list-style-position: inside;
}

li {
  background-color: lightblue;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
ul {
  list-style-position: outside;
}

li {
  background-color: lightblue;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Icono del elemento <summary> de <details>

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

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