Listas em CSS
HTML dá a você ul e ol. CSS decide como essas listas aparecem — marcadores redondos, quadrados, números, letras, ou nenhum marcador quando você monta um menu de navegação.
Um kit de list-style
📊 Estilos de lista em um olhar
| Propriedade | Trabalho do dia a dia |
|---|---|
list-style-type |
Forma do marcador ou estilo de numeração (disc, square, decimal…) |
list-style-position |
Marcador dentro ou fora da caixa de conteúdo |
list-style-image |
Usar uma imagem como marcador |
list-style |
Atalho para tipo, posição e imagem |
list-style: none |
Remover marcadores (comum em menus de nav) |
Os marcadores pertencem ao item, mas você costuma definir estilos de lista em ul ou ol para cada li herdar o mesmo visual.
Tipos de marcador
Listas não ordenadas costumam começar com disc. Passe para circle ou square quando o design quiser uma marca mais calma ou mais nítida.
Tipos de marcador de lista
cssul.features {
list-style-type: square;
}
ul.notes {
list-style-type: circle;
}Listas numeradas e com letras
Listas ordenadas usam estilos de numeração. decimal é a escolha do dia a dia; lower-alpha ou upper-roman cabem em esquemas e passos formais.
Tipos de lista ordenada
cssol.steps {
list-style-type: decimal;
}
ol.outline {
list-style-type: lower-alpha;
}Posição do marcador — dentro ou fora
list-style-position: outside (padrão usual) deixa o marcador na margem. inside o coloca no fluxo do texto — útil em cartões estreitos.
Marcadores no fluxo
cssul.card-list {
list-style-position: inside;
padding-left: 0;
}Remover marcadores para menus
Listas de navegação raramente querem bullets. list-style: none limpa — depois ajuste espaçamento com padding/margin.
Lista de nav limpa
cssnav ul {
list-style: none;
margin: 0;
padding: 0;
}Marcadores de imagem e atalho
Uma imagem pequena pode substituir o bullet. Prefira assets minúsculos. O atalho list-style pode definir tipo, posição e imagem numa linha.
Marcador de imagem + atalho
cssul.custom {
list-style: square outside none;
}
ul.icons {
list-style-image: url("/icons/check.svg");
}Um hábito calmo de listas
Escolha um estilo de marcador claro por lista, mantenha imagens pequenas e, após none em menus, reinicie o padding para alinhar limpo.
Lista de artigo legível
cssarticle ul {
list-style-type: disc;
list-style-position: outside;
padding-left: 1.25rem;
line-height: 1.6;
}Experimente você
- Mude um
ulparalist-style-type: square. - Estilize um
olcomlower-alpha. - Defina
list-style-position: insidenuma lista curta de cartão. - Remova bullets de um
nav ulcomlist-style: nonee padding zero. - Teste um
list-style-imageminúsculo; volte ao type se a imagem falhar.
Erros comuns
- Esperar que
coloremlisozinho restilize marcadores personalizados em todo lugar - Usar
list-style: nonemas deixar padding padrão grande que parece quebrado - Arquivos enormes de
list-style-imageque dominam a linha - Numerar um
ulcom CSS em vez deolsemântico quando a ordem importa - Misturar esta lição com estados hover/visited de links (sessão anterior)
Resumo
list-style-typeescolhe bullets ou estilos de numeraçãolist-style-positioncoloca marcadores dentro ou foralist-style: nonelimpa marcadores para menuslist-style-imagee o atalholist-styleacrescentam opções- Mantenha marcadores calmos e padding intencional após remover bullets
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo