As listas são elementos muito utilizados em páginas Web para organizar informações, menus, categorias e sequências de dados.
O CSS permite personalizar marcadores, espaçamentos, alinhamentos e estilos das listas.
| Tipo | Tag HTML |
|---|---|
| Lista não ordenada | <ul> |
| Lista ordenada | <ol> |
| Lista de definição | <dl> |
| Propriedade | Função |
|---|---|
| list-style-type | Define o marcador. |
| list-style-image | Utiliza imagem como marcador. |
| list-style-position | Controla posição. |
| list-style | Atalho para propriedades. |
A propriedade define o formato dos marcadores.
ul {
list-style-type:square;
}
| Valor | Resultado |
|---|---|
| disc | ● Marcador padrão. |
| circle | ○ Círculo vazio. |
| square | ■ Quadrado. |
| none | Remove marcador. |
A propriedade também funciona com listas numeradas.
ol {
list-style-type:upper-roman;
}
| Valor | Resultado |
|---|---|
| decimal | 1, 2, 3 |
| upper-alpha | A, B, C |
| lower-alpha | a, b, c |
| upper-roman | I, II, III |
ul {
list-style:none;
}
Muito utilizado em menus de navegação.
Podemos substituir o marcador padrão por uma imagem.
ul {
list-style-image:url("icone.png");
}
A propriedade list-style-position controla o posicionamento.
ul {
list-style-position:inside;
}
| Valor | Descrição |
|---|---|
| outside | Marcador fora do texto. |
| inside | Marcador dentro do texto. |
Podemos definir várias propriedades em uma única linha.
ul {
list-style:square inside;
}
Menus de sites normalmente utilizam listas sem marcadores.
nav ul {
list-style:none;
display:flex;
}
Utilizamos margem e espaçamento para melhorar a aparência.
li {
margin-bottom:10px;
}
Muito utilizadas em menus de navegação.
li {
display:inline;
margin-right:20px;
}
.menu {
list-style:none;
display:flex;
gap:20px;
}
.menu li {
padding:10px;
}
| Erro | Problema |
|---|---|
| Usar div no lugar de lista | Perde semântica. |
| Remover marcadores sem motivo | Pode prejudicar entendimento. |
| Espaçamento exagerado | Layout desorganizado. |
| Propriedade | Função |
|---|---|
| list-style-type | Tipo do marcador. |
| list-style-image | Imagem no marcador. |
| list-style-position | Posição. |
| list-style | Atalho. |