Listas de CSS

Lista no ordenada:

  • Café
  • Coca Cola
  • Café
  • Coca Cola

Lista ordenada:

  1. Café
  2. Coca Cola
  1. Café
  2. Coca Cola

Listas HTML y propiedades de lista de CSS

En HTML, hay dos tipos principales de lista:

  • Lista no ordenada (ul) - Los elementos de lista utilizan marcadores de lista
  • Lista ordenada (ol) - Los elementos de lista utilizan números o letras como marcadores

Las propiedades de lista de CSS le permiten:

  • Establecer diferentes marcadores de elementos de lista para listas ordenadas
  • Establecer diferentes marcadores de elementos de lista para listas no ordenadas
  • Establecer una imagen como marcador del elemento de lista
  • Agregar color de fondo a la lista y los elementos de lista

Diferentes marcadores de elementos de lista

list-style-type La propiedad especifica el tipo de marcador del elemento de lista.

El siguiente ejemplo muestra algunos marcadores de elementos de lista disponibles:

Ejemplo

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;
}

Prueba por tu cuenta

Notas:Algunos valores se utilizan para listas no ordenadas, mientras que otros valores se utilizan para listas ordenadas.

La imagen como marcador del elemento de lista

list-style-image La propiedad designa una imagen como marcador del elemento de lista:

Ejemplo

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

Prueba por tu cuenta

Ubicación del marcador del elemento de lista

list-style-position La propiedad especifica la posición del marcador del elemento de lista (ícono de lista).

"list-style-position: outside;" indica que el punto del ícono de lista estará fuera del elemento de lista. El inicio de cada línea del elemento de lista se alineará verticalmente. Esto es el valor predeterminado:

  • Café - Bebida infundida con granos de café tostados
  • Coca-cola

"list-style-position: inside;" Representa que los puntos de lista estarán dentro del elemento de lista. Ya que es parte del elemento de lista, se convertirá en parte del texto y se desplazará al principio del texto:

  • Café - Bebida infundida con granos de café tostados
  • Coca-cola

Ejemplo

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

Prueba por tu cuenta

Eliminar la configuración predeterminada

list-style-type:none Estas propiedades también se pueden usar para eliminar los marcadores/símbolos. Tenga en cuenta que la lista también tiene márgenes y rellenos predeterminados. Para eliminar este contenido, agregue en <ul> o <ol>. margin:0 y padding:0 :

Ejemplo

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

Prueba por tu cuenta

Lista - Propiedad abreviada

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

Ejemplo

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

Prueba por tu cuenta

Al usar propiedades abreviadas, el orden de los valores de las propiedades es:

  • list-style-type(Si se especifica list-style-image y la imagen no se puede mostrar por alguna razón, se mostrará el valor de esta propiedad)
  • list-style-position(Especificar si el marcador de lista debe mostrarse dentro o fuera del flujo de contenido)
  • list-style-image(Especificar la imagen como marcador de lista)

Si falta uno de los valores de las propiedades anteriores, se insertará el valor predeterminado de la propiedad缺失 (si lo hay).

Configurar el estilo de color de la lista

También podemos usar configuraciones de color para ajustar la estilo de la lista, haciendo que se vea más interesante.

Cualquier estilo añadido a las etiquetas <ol> o <ul> afectará toda la lista, mientras que las propiedades añadidas a la etiqueta <li> afectarán a cada elemento de la lista:

Ejemplo

ol {
  background: #ff9999;
  padding: 20px;
}
ul {
  background: #3399ff;
  padding: 20px;
}
ol li {
  background: #ffe5e5;
  padding: 5px;
  margin-left: 35px;
}
ul li {
  background: #cce5ff;
  margin: 5px;
}

Resultados:

  1. Café
  2. Coca Cola
  • Café
  • Coca Cola

Prueba por tu cuenta

Más ejemplos

Lista personalizada con borde izquierdo rojo
Este ejemplo muestra cómo crear una lista con borde izquierdo rojo.
Lista de borde de ancho completo
Este ejemplo muestra cómo crear una lista con borde sin viñetas.
Todos los diferentes tipos de marcadores de lista de la lista
Este ejemplo muestra todos los diferentes tipos de marcadores de lista en CSS.

Todos los atributos de lista CSS

Atributo Descripción
list-style Atributo abreviado. Establece todas las propiedades de la lista en una declaración.
list-style-image Especifica una imagen como marcador de lista.
list-style-position Especifica la posición del marcador de lista (punto de lista).
list-style-type Especifica el tipo de marcador de lista para los elementos de lista.