Como Criar Marcadores (Bullet Points) em HTML

Usar marcadores ajuda a dividir grandes blocos de texto e destacar listas de informações úteis. Marcadores são fáceis de criar em processadores de texto, mas ao digitar documento HTML, precisa saber o código para criá-los. Não muito código é necessário. Envolva cada item em tags <li> e depois envolva a lista toda em tags <ul> (lista não ordenada). Pode então estilizar a lista com CSS.

Passo 1

Escreva o texto para seus marcadores. Inicie cada ponto em sua própria linha. Envolva cada linha em tags <li> e </li> assim:

<li>Este é um ponto com marcador</li>
<li>Este é outro ponto com marcador</li>

Passo 2

Crie uma linha em branco acima da lista e digite uma tag de abertura <ul>. Encontre o final da lista e crie outra linha em branco. Digite tag de fechamento </ul>. Se quiser estilizar com CSS depois, adicione atributo class ou id na tag <ul> de abertura. Exemplo de lista curta com atributo ID:

<ul id="minhalista">
  <li>Marcador um</li>
  <li>Marcador dois</li>
</ul>

Passo 3

Use "style" para criar sua lista com CSS. Adicione código CSS entre tags <style> entre <head> e </head>, ou escreva CSS em arquivo .CSS externo e incorpore com tag como: <link rel="stylesheet" href="caminho/stylesheet.css">. Altere "caminho/stylesheet.css" pelo caminho do seu arquivo .CSS. Use ID ou class para selecionar suas listas, assim:

#minhalista li { font-style: italic; }

O código acima seleciona todas as tags <li> dentro de tag com ID "minhalista". Substitua o # por ponto ao selecionar por class.

Passo 4

Use a propriedade "list-style" no CSS para alterar o tipo de marcador. Tipos disponíveis incluem círculos abertos, discos preenchidos e quadrados para listas não numeradas. Exemplo para marcadores quadrados:

#minhalista li {list-style: square;}

Dica

Use tag <ol> em vez de <ul> para criar listas ordenadas. Pode definir "list-style-type" para vários tipos de números ou letras.

Crie marcadores com imagem especificando "none" para "list-style" e dê a cada tag <li> uma imagem de fundo não repetitiva, alinhada à esquerda. Adicione padding à esquerda de cada <li> para mover o texto, senão sobreporá a imagem.

• Como Adicionar 12 Semanas a uma Data no Excel
• Como Criar Relatório de Vendas Trimestrais no Excel 2007