Lista do CSS

As propriedades de lista CSS permitem que você coloque, mude o marcador do item da lista ou use uma imagem como marcador do item da lista.

Lista do CSS

De certa forma, qualquer conteúdo que não seja texto descritivo pode ser considerado uma lista. Censo, sistema solar, genealogia, menu de visita, até todos seus amigos podem ser representados como uma lista ou uma lista dentro de uma lista.

Devido à variedade das listas, isso torna-as bastante importantes, então, a falta de riqueza dos estilos de lista no CSS realmente é uma grande falta.

Tipo de lista

Para influenciar o estilo da lista, a maneira mais simples (e que oferece o suporte mais amplo) é alterar o tipo de sinal.

Por exemplo, em uma lista não ordenada, o sinal do item da lista (marker) é um ponto ao lado de cada item da lista. Em uma lista ordenada, o sinal pode ser uma letra, um número ou um símbolo de qualquer sistema de contagem.

Para modificar o tipo de sinal usado pelos itens da lista, você pode usar o atributo list-style-type:

ul {list-style-type : square}

A declaração acima define o marcador do item da lista da lista não ordenada como quadrado.

Imagem do item da lista

Às vezes, os sinais convencionais não são suficientes. Você pode querer usar uma imagem para cada sinal, o que pode ser feito usando list-style-image A propriedade faz:

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

Basta usar simplesmente um valor url() para usar uma imagem como sinal.

Posição do sinal da lista

CSS2.1 pode determinar se o sinal aparece fora ou dentro do conteúdo da lista. Isso é feito usando list-style-position Concluído.

Estilo de lista abreviado

Para simplificar, os três atributos de estilo de lista acima podem ser combinados em um atributo conveniente:list-stylecomo assim:

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

Os valores de list-style podem ser listados em qualquer ordem e todos eles podem ser ignorados. Basta fornecer um valor, os outros serão preenchidos com seus valores padrão.

Exemplo de lista CSS:

Marcadores de tipos diferentes em uma lista não ordenada
Este exemplo demonstra os diferentes tipos de sinalizadores de itens de lista no CSS.
Marcadores de itens de lista de tipos diferentes em uma lista ordenada
Este exemplo demonstra os diferentes tipos de sinalizadores de itens de lista no CSS.
Todos os tipos de estilos de lista
Este exemplo demonstra todos os tipos diferentes de sinalizadores de itens de lista no CSS.
Usar a imagem como sinalizador da lista de itens
Este exemplo demonstra como usar a imagem como sinalizador da lista de itens.
Colocar o sinalizador da lista
Este exemplo demonstra onde colocar o sinalizador da lista.
Definir todas as propriedades de lista em uma declaração
Este exemplo demonstra como definir todas as propriedades de lista em uma propriedade abreviada.

Propriedades de Lista do CSS (list)

Propriedade Descrição
list-style Propriedade abreviada. Usada para definir todas as propriedades de lista em uma declaração.
list-style-image Define a imagem como sinalizador da lista de itens.
list-style-position Define a posição do sinalizador da lista de itens no contexto da lista.
list-style-type Define o tipo de sinalizador da lista de itens.
marker-offset