- café
- Chá
- Coca Cola
- café
- Chá
- Coca Cola
Listas de HTML e propriedades da lista de CSS
Em HTML, existem dois principais tipos de listas:
- listas não ordenadas (<ul>) - os itens da lista são marcados com balas
- listas ordenadas (<ol>) - os itens da lista são marcados com números ou letras
As propriedades da lista de CSS permitem que você:
- Definir diferentes marcadores de item de lista para listas ordenadas
- Definir diferentes marcadores de item de lista para listas não ordenadas
- Definir uma imagem como o marcador de item de lista
- Adicionar cores de fundo a listas e itens de lista
Diferentes marcadores lista de itens
O list-style-type propriedade especifica o tipo de marcador item da lista.
O exemplo a seguir mostra alguns dos marcadores de item de lista disponíveis:
Exemplo
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
} Tente você mesmo " Nota: Alguns dos valores são para listas não ordenadas, e alguns para listas ordenadas.
Uma imagem como A Lista de Itens Marcador
O list-style-image propriedade especifica uma imagem como marcador de item da lista:
Posicionar a lista de itens Markers
O list-style-position propriedade especifica se os marcadores de item de lista deve aparecer dentro ou fora do fluxo de conteúdo:
Lista - propriedade estenográfica
O list-style propriedade é uma propriedade de taquigrafia. Ele é usado para definir todas as propriedades de lista em uma declaração:
Ao usar a propriedade abreviada, a ordem dos valores de propriedade são:
-
list-style-type(se um list-style-image for especificado, o valor dessa propriedade será exibido se a imagem por algum motivo não pode ser exibida) -
list-style-position(especifica se os marcadores de item de lista deve aparecer dentro ou fora do fluxo de conteúdo) -
list-style-image(especifica uma imagem como marcador de item de lista)
Se um dos valores de propriedade acima estiver faltando, o valor padrão para a propriedade ausente será inserido, se houver.
Lista Styling Com Cores
Podemos também listas de estilo com cores, para torná-los um pouco mais interessante.
Qualquer coisa adicionada à <ol> ou <ul> tag, afeta toda a lista, enquanto as propriedades adicionadas à <li> tag irá afetar os itens de lista individuais:
Exemplo
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}
ol li {
background:
#ffe5e5;
padding: 5px;
margin-left: 35px;
}
ul li {
background:
#cce5ff;
margin: 5px;
}Resultado:
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
mais Exemplos
De largura total lista delimitada
Este exemplo demonstra como criar uma lista delimitada sem balas.
Todos os diferentes marcadores de item de lista para as listas
Este exemplo demonstra os diferentes marcadores de item de lista em CSS.
Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 »
Todas as propriedades da lista de CSS
| Propriedade | Descrição |
|---|---|
| list-style | Define todas as propriedades para uma lista em uma declaração |
| list-style-image | Especifica uma imagem como marcador de item de lista |
| list-style-position | Especifica se os marcadores de item de lista deve aparecer dentro ou fora do fluxo de conteúdo |
| list-style-type | Especifica o tipo de marcador de lista |