Estilo de listas

No Laboratório Belavista, a lista de materiais do workshop precisa de marcadores claros. CSS controla o ::marker, a posição e a imagem do item.

O exemplo está em pacote de exemplos/50-listas-css/. Abra index.html. Ciclo: ler → copiar → mudar uma coisa → prever → recarregar → conferir.

O que você vai aprender

• Manter HTML semântico (ul, ol, li).
• Usar list-style-type, list-style-position e list-style-image.
• Estilizar ::marker com cuidado.
• Quando zerar marcadores (navegação) sem perder significado.

Lista semântica primeiro

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Listas — Belavista</title>
    <link rel="stylesheet" href="estilos.css">
  </head>
  <body>
    <main>
      <h1>Materiais do workshop</h1>
      <ul class="materiais">
        <li>Papel vergê A3</li>
        <li>Tinta à base d’água</li>
        <li>Espátula de borracha</li>
        <li>Luvas descartáveis</li>
      </ul>
      <ol class="passos">
        <li>Preparar a mesa</li>
        <li>Fixar o papel</li>
        <li>Aplicar a tinta</li>
      </ol>
    </main>
  </body>
</html>

.materiais {
  list-style-type: square;
  list-style-position: outside;
  padding-inline-start: 1.5rem;
}
.materiais li::marker {
  color: #c45c26;
}
.passos {
  list-style-type: decimal;
  padding-inline-start: 1.5rem;
}
.passos li::marker {
  font-weight: 700;
  color: #1a3a4a;
}

Mude uma coisa. Em .materiais, troque square por disc. Preveja bolinhas. Recarregue. Confira.

Posição e imagem

outside (padrão) coloca o marcador fora do bloco de texto. inside embute o marcador na primeira linha — útil em layouts apertados, menos alinhado.

list-style-image: url("marca.svg") troca o marcador por imagem. Se a imagem falhar, defina também um list-style-type de reserva.

Atalho: list-style: square outside;

Navegação sem bullets

Em menus, list-style: none e padding ajustado são comuns. O HTML continua sendo lista — leitores de tela entendem a estrutura. Não troque ul por div só por estética.

Erro comum: remover padding-inline-start e cortar os marcadores fora da tela, ou usar ::before com conteúdo decorativo sem manter a lista semântica.

Lista de definição

<dl>, <dt> e <dd> descrevem termos (glossário de papéis do ateliê). Não usam ::marker como li. Estilize espaçamento entre termos e descrições; mantenha a ordem termo → definição.

Arquivo no disco. Teste em 127.0.0.1.

Confira o exemplo completo

A captura mostra o exemplo desta etapa. Abra a pasta completa, mude uma coisa e confira no navegador antes de seguir.

Atividades

1. Qual elemento HTML deve envolver itens de materiais: div ou ul?
2. O que list-style-position: inside muda na aparência?
3. Por que list-style: none em um menu não apaga a semântica da lista?

Respostas comentadas

1. ul (ou ol se a ordem importar), com li filhos.
2. O marcador passa a fazer parte do fluxo da primeira linha do item.
3. Porque o HTML continua sendo ul/li; só a pintura do marcador some.