Listas CSS (Listas)

as propriedades da lista são usadas para controlar a exibição do marcador do item da lista.

tipos de lista HTML

Existem três tipos diferentes de listas no HTML:

• lista não ordenada — lista de itens, onde cada item está marcado com um símbolo de lista.

• lista ordenada — lista de itens, onde cada item está marcado com um número.

• lista definida -lista de itens, onde cada item contém uma descrição.

Para obter mais informações sobre as listas, consultelista HTMLdo tutorial.

estilo de lista CSS

O CSS oferece várias propriedades para estilizar as listas não ordenadas e ordenadas mais usadas. Essas propriedades de CSS listas geralmente permitem que você:

• controlar a forma ou a aparência do marcador.

• especificar a imagem do marcador em vez de um ponto de lista ou número.

• definir o espaço entre o marcador e o texto da lista.

• especifica se o marcador ou o ponto de lista aparecerão dentro ou fora da caixa que contém a lista não ordenada ou ordenada.

o tipo de estilo da lista

Por padrão,lista ordenadaos itens são marcados com números arábicos (1、2、3e) numeradas, enquanto emna lista não ordenada，os itens são marcados com símbolos de lista circulares. Mas, você pode usar o list-style-A propriedade type altera o tipo de marcador de lista padrão para qualquer outro tipo, como circular, quadrado, romano, letras latinas, etc.

ul {
　　　　list-style-type: square;
}
ol {
　　　　list-style-type: upper-roman;
}

mudar a posição do marcador da lista

Por padrão, os marcadores de lista estão localizados no exterior da caixa do item da lista. Mas, você pode usar o list-style-A propriedade position para especificar se o marcador ou o ponto de lista aparecem dentro ou fora da borda do item da lista.

Este atributo usa os valores inside ou outside, e outside é o valor padrão. Se usar o valor inside, essas linhas serão围绕着标记而不是缩进。

ul.in li {
　　　　list-style-position: inside;
}
ul.out li {
　　　　list-style-position: outside;
}

usar a imagem como marcador da lista

Você também pode usar list-style-A propriedade image define a imagem como marcador da lista.

As regras de estilo exibidas no exemplo a seguir atribuem a todos os itens da lista não ordenada uma imagem PNG transparente chamada “arrow.png” como marcador da lista.

ul li {
　　　　list-style-image: url("arrow.png");
}

O exemplo acima não gera a mesma saída em todos os navegadores. O Internet Explorer e o Opera mostram uma marca de imagem um pouco mais alta do que o Firefox, Chrome e Safari.

Solução de problema de marcador de imagem cross-browser

Quando usar o list-style-Quando usar a propriedade image, o marcador de lista não pode alinhar o texto exatamente no navegador. A solução é usar background-image O atributo do CSS alinha corretamente as imagens de marcador dos itens.

Os seguintes exemplos mostram a exibição igual de imagens de marcador em todos os navegadores:

ul {
　　　　list-style-type: none;
}
ul li {
　　　　background-image: url("arrow.png");
　　　　background-position: 0px　5px;　　　　/*　X-pos Y-pos (from top-left)　*/
　　　　background-repeat: no-repeat;
　　　　padding-left:　20px;
}

Atributo abreviado do estilo da lista

Este list-A propriedade style é um atalho para definir todos os três atributos list-style-type, list-style-image e list-style-position em uma lista no mesmo lugar.

Esta regra de estilo define o marcador de lista da lista ordenada como letras latinas maiúsculas, que aparecem no início da lista item:

ol {
　　　　list-style: upper-latin inside;
}