Lista CSS

Las propiedades de lista CSS le permiten colocar, cambiar el marcador del elemento de lista o usar una imagen como marcador del elemento de lista.

Lista CSS

En cierto sentido, cualquier contenido que no sea texto descriptivo puede considerarse una lista. Censo, sistema solar, genealogía, menú de visitas, e incluso todos tus amigos pueden representarse como una lista o una lista dentro de una lista.

Dado que las listas son tan diversas, esto hace que las listas sean bastante importantes, por lo que, que el estilo de lista en CSS no sea muy rico es realmente una gran lástima.

Tipo de lista

Para influir en el estilo de la lista, la manera más simple (y que admite lo más plenamente) es cambiar el tipo de marcador.

Por ejemplo, en una lista desordenada, el marcador del elemento de lista (marker) es un punto ubicado junto a cada elemento de lista. En una lista ordenada, el marcador puede ser una letra, un número o algún otro símbolo de un sistema de numeración.

Para modificar el tipo de marcador utilizado para los elementos de lista, se puede usar la propiedad list-style-type:

ul {list-style-type : square}

La declaración anterior establece el marcador del elemento de lista en una lista desordenada como cuadrado.

Imagen del elemento de lista

A veces, los símbolos convencionales no son suficientes. Puede que desee usar una imagen para cada símbolo, lo que se puede hacer utilizando list-style-image hacerlo con la propiedad:

ul li {list-style-image : url(xxx.gif)}

Basta con usar un valor url() simplemente para usar una imagen como marcador.

Posición del marcador de lista

CSS2.1 puede determinar si el símbolo aparece fuera o dentro del contenido del elemento de lista. Esto se hace utilizando list-style-position completado.

Estilo de lista abreviado

Por simplicidad, se pueden combinar los 3 atributos de estilo de lista en un atributo conveniente:list-stylecomo así:

li {list-style : url(example.gif) square inside}

Los valores de list-style pueden estar enumerados en cualquier orden y pueden ser omitidos. Basta con proporcionar un valor, los otros se llenarán con sus valores predeterminados.

Ejemplo de lista CSS:

Los marcadores de tipo diferente en una lista desordenada
Este ejemplo muestra todos los tipos diferentes de marcadores de lista en CSS.
Los elementos de lista de tipo diferente en una lista ordenada
Este ejemplo muestra todos los tipos diferentes de marcadores de lista en CSS.
Todos los tipos de estilo de lista
Este ejemplo muestra todos los tipos diferentes de marcadores de lista en CSS.
Usar la imagen como marcador de lista
Este ejemplo muestra cómo usar la imagen como marcador de lista.
Colocar el marcador de lista
Este ejemplo muestra dónde colocar el marcador de lista.
Definir todos los atributos de lista en una declaración
Este ejemplo muestra cómo establecer todos los atributos de lista en un atributo abreviado.

Atributos de lista CSS (list)

Atributo Descripción
list-style Atributo abreviado. Se utiliza para establecer todos los atributos utilizados para la lista en una declaración.
list-style-image Establecer la imagen como marcador de lista.
list-style-position Establecer la posición del marcador de lista en la lista.
list-style-type Establecer el tipo de marcador de lista.
marker-offset