CSS Listas

Las propiedades CSS de listas funcionan de la siguiente manera:

• Establecer diferentes marcadores de elementos de lista para listas ordenadas
• Establecer diferentes marcadores de elementos de lista para listas desordenadas
• Establecer la imagen como marcador de elemento de lista

Listas

En HTML, hay dos tipos de listas:

• Lista desordenadaul- El marcador del elemento de lista usa gráficos especiales (como pequeños puntos negros, pequeños cuadrados, etc.)
• Lista ordenadaol- El marcador del elemento de lista usa números o letras

Con CSS, se pueden aplicar estilos adicionales y se pueden usar imágenes como marcadores de elementos de lista.

Una lista desordenada se muestra a continuación:

• Coffee
• Tea
• Coca Cola

• Coffee
• Tea
• Coca Cola

Una lista ordenada se muestra a continuación:

1. Coffee
2. Tea
3. Coca Cola

1. Coffee
2. Tea
3. Coca Cola

Diferentes marcadores de elementos de lista

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

Algunos valores son para listas desordenadas y algunos son para listas ordenadas.

Imagen como marcador de elemento de lista

Para especificar una imagen como marcador de elemento de lista, use la propiedad list-style-image:

El ejemplo anterior no se muestra igual en todos los navegadores; IE y Opera muestran el marcador de imagen un poco más arriba que Firefox, Chrome y Safari.

Si desea colocar el mismo marcador de imagen en todos los navegadores, debe usar una solución de compatibilidad con navegadores, el proceso es el siguiente:

Solución de compatibilidad con navegadores

El siguiente ejemplo mostrará el marcador de imagen igualmente en todos los navegadores:

Explicación del ejemplo:

• ul:
  • Establecer el tipo de lista sin marcador de elemento de lista
  • Establecer relleno y margen a 0px (compatibilidad con navegadores)
• Todos los li en ul:
  • Establecer la URL de la imagen y configurarla para que se muestre solo una vez (sin repetición)
  • Necesita posicionar la imagen (izquierda 0px y arriba/abajo 5px)
  • Use la propiedad padding-left para colocar el texto dentro de la lista

Listas - Propiedad abreviada

Todas las propiedades de lista se pueden especificar en una sola propiedad. Esto se denomina propiedad abreviada.

Para usar la propiedad abreviada en listas, la propiedad list-style se establece de la siguiente manera:

Las siguientes propiedades se pueden establecer en orden:

• list-style-type
• list-style-position (para obtener más información, consulte la tabla de propiedades CSS a continuación)
• list-style-image

Si falta uno de los valores anteriores, no importa, el resto permanece en el orden especificado.

Más ejemplos

Todos los diferentes marcadores de elementos de lista
Este ejemplo demuestra todos los diferentes marcadores de elementos de lista de CSS.

Eliminar la configuración predeterminada

list-style-type:noneLa propiedad se puede usar para eliminar los marcadores. De forma predeterminada, las listas <ul> o <ol> también establecen relleno y margen, que se pueden eliminar usandomargin:0ypadding:0para eliminar:

Todas las propiedades CSS de listas