Lista do CSS
- Página Anterior Fonte do CSS
- Próxima Página Visão Geral do Modelo de Caixa 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 |
- Página Anterior Fonte do CSS
- Próxima Página Visão Geral do Modelo de Caixa do CSS