En HTML hay dos tipos de listas:

  • Listas ordenadas (<ol></ol>)
  • Listas desordenadas (<ul></ul>)

Las propiedades CSS de estas listas permiten:

  • Establecer diferentes marcadores de elementos de lista para listas ordenadas
  • Establezca diferentes marcadores de elementos de lista para listas desordenadas
  • Establecer una imagen como marcador de elemento de lista
  • Agregar colores de fondo a listas y elementos de lista

Marcadores de elementos de lista diferentes

La propiedad list-style-type especifica el tipo de marcador de elemento de lista. El siguiente ejemplo muestra algunos de los marcadores de elementos de lista disponibles.

Ej

ul.a {
  list-style-type: circle;
}

ul.b {
  list-style-type: square;
}

ol.c {
  list-style-type: upper-roman;
}

ol.d {
  list-style-type: lower-alpha;
}

Una imagen como marcador de elemento de lista

La propiedad list-style-image especifica una imagen como marcador de elemento de lista.

Ejm

ul {
  list-style-image: url('sqpurple.gif');
}

Posición de los marcadores de elementos de la lista

La propiedad list-style-position especifica la posición de los marcadores de elementos de lista (viñetas).

list-style-position: outside significa que las viñetas estarán fuera del elemento de la lista. El inicio de cada línea de un elemento de la lista se alineará verticalmente. Esto es predeterminado.

list-style-position: inside significa que las viñetas estarán dentro del elemento de la lista. Como es parte del elemento de la lista, será parte del texto y empujará el texto al principio.

Ejm

ul.a {
  list-style-position: outside;
}

ul.b {
  list-style-position: inside;
}

Eliminar configuración predeterminada

La propiedad list-style-type:none también se puede usar para eliminar los marcadores/viñetas. Ten en cuenta que la lista también tiene margen y relleno predeterminados. Para eliminar esto, agrega margin:0 y padding:0 a <ul> o <ol>.

Ejm

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Listas - modelo corto

La propiedad list-style es una propiedad abreviada. Se utiliza para establecer todas las propiedades de la lista en una declaración.

Ejm

ul {
  list-style: square inside url("sqpurple.gif");
}

Cuando se usa la propiedad abreviada, el orden de los valores de propiedad es:

  • list-style-type
  • list-style-position
  • list-style-image

Si falta uno de los valores de propiedad anteriores, se insertará el valor predeterminado para la propiedad faltante, si corresponde.

Colores

También podemos diseñar listas con colores, para que se vean un poco más interesantes. Todo lo que se agregue a la etiqueta <ol> o <ul> afecta a toda la lista, mientras que las propiedades agregadas a la etiqueta <li> afectarán a los elementos individuales de la lista.

Ejm

ol {
  background: #ff9999;
  padding: 20px;
}

ul {
  background: #3399ff;
  padding: 20px;
}

ol li {
  background: #ffe5e5;
  color: darkred;
  padding: 5px;
  margin-left: 35px;
}

ul li {
  background: #cce5ff;
  color: darkblue;
  margin: 5px;
}