Listas com bullets

Se preferir avance para:

1. Os bullets pré-definidos
2. Usando imagens como bullets

Todo dia vejo em blogs e sites "listas" assim:

Paulo:
Farinha
Açúcar

Adriana:

Café

Leite em pó

Beto:

Creme dental
Sabonete

Júnior:

Macarrão
Extrato de tomate

Se você quer fazer um post bonito e ainda facilitar a vida do leitor, faça assim:

Exemplo	Código
Paulo: Farinha Açúcar Adriana: Café Leite em pó Beto: Creme dental Sabonete Júnior: Macarrão Extrato de tomate	<ul><li>Paulo: <ul><li>Farinha <li>Açúcar</ul> <li>Adriana: <ul><li>Café <li>Leite em pó</ul> <li>Beto: <ul><li>Creme dental <li>Sabonete</ul> <li>Júnior: <ul><li>Macarrão <li>Extrato de tomate</ul></ul>

Assim como ocorre com as listas numeradas, a diferença entre um post desmantelado e um post organizado são apenas duas tags: <ul> e <li>.

A tag <ul> abre a lista e a tag <li> abre um ítem da lista. A tag </li> ao final do ítem não é obrigatória, mas a tag </ul> ao final da lista sim.

1. Os bullets pré-definidos

No exemplo anterior usei lista dentro de lista. Observe que, quando muda o nível da lista, além da indentação (que é o que mantém a lista visivelmente mais clara), mudam os bullets, que são essas "bolinhas" que aparecem antes de cada ítem. Vamos ver o que ocorre se fizermos uma lista com mais níveis:

• Izabel é mãe de:
  • Joverci, que é mãe de:
    • Maria José, que é mãe de:
      • Joceane, que é mãe de:
        • Ninguém
      • Rilbert
    • Cida, que é mãe de
      • Pedro
  • Antônio, que é pai de:
    • Adriana, que é mãe de:
      • Adriane
    • Andréa, que é mãe de:
      • Aline
      • Bruna
  • Helena, que é mãe de:
    • Helen Fernanda
    • Herica

Por padrão, as listas utilizam três bullets nessa ordem: disc ("bolinha", círculo preenchido), circle (círculo não-preenchido) e square (quadrado preenchido). Depois do terceiro nível todas as listas passam a usar square.

Definindo qual bullet usar

Com o atributo type fica fácil escolher:

Exemplo	Código
Qualidades: Bonito Inteligente Simpático Defeitos: Ciumento Teimoso Guloso	<ul type='square'> <li>Qualidades: <ul type='circle'> <li>Bonito <li>Inteligente <li>Simpático </ul> <li>Defeitos: <ul type='disc'> <li>Ciumento <li>Teimoso <li>Guloso </ul> </ul>

Se preferir fazer isso na própria folha de estilos do site para poupar trabalho, também não tem segredo:

<!--
ul {list-style:circle;}
ul ul {list-style:square;
ul ul ul {list-style:disc;}
ul ul ul ul {list-style:circle;}
ul ul ul ul ul {list-style:square;}
-->

2. Usando imagens como bullets

Agora o segredo é CSS. Observe:

Exemplo	Código
Pessoas Animais Computadores Plantas Cosméticos	<ul style='list-style:url(http://www.websitebullets.com/bullets/215.gif)'> <li>Pessoas <li style='list-style:url(http://www.websitebullets.com/bullets/213.gif)';>Animais <li>Computadores <li>Plantas <li>Cosméticos</ul>

No exemplo acima eu defini uma imagem como bullet para toda a lista colocando a classe list-style na tag <ul>. Porém, quis destacar um único ítem com um bullet diferente, então usei novamente a classe list-style, porém dentro da tag <li> do ítem que eu escolhi.

Também posso usar as imagens para diferenciar os vários níveis da lista. Veja:

Exemplo

Código

Frutas favoritas: Maçã Morango Coco Graviola Pratos favoritos: Arroz com pequi. Galinhada com guariroba. Bife com couve.

<ul style='list-style:url(http://www.clickbusca.com.br/images/Bullets/000000901.gif);'> <li>Frutas favoritas: <ul style='list-style:url(http://www.clickbusca.com.br/images/Bullets/000001142.gif); line-height:24px;'> <li>Maçã <li>Morango <li>Coco <li>Graviola </ul> <li>Pratos favoritos: <ul style='list-style:url(http://www.clickbusca.com.br/images/Bullets/000001142.gif); line-height:24px;'> <li>Arroz com <a href='http://pt.wikipedia.org/wiki/Pequi' target='_blank'>pequi</a>. <li>Galinhada com <a href='http://pt.wikipedia.org/wiki/Guariroba_(Palmeira)' target='_blank'>guariroba</a>. <li>Bife com couve. </ul> </ul>

Para fazer isso na folha de estilos e definir uma imagem padrão para todas as listas com bullets do seu site, siga o exemplo:

<--
ul {list-style:url(http://www.websitebullets.com/bullets/245.gif);}
ul ul {list-style:url(http://www.websitebullets.com/bullets/241.gif);}
-->

O importante é que o tamanho da imagem que vai ser o bullet não seja muito maior que o tamanho da fonte da lista.

Bullet fantasminha

Para que sua lista não mostre nenhum bullet, o código é o seguinte:

Exemplo	Código
Exemplo de lista sem bullet	<ul style="list-style:none;">

Na folha de estilos:

<--
ul {list-style:none;}
ul ul {list-style:none;}
-->

Fontes:
HTML Dog, Super Tráfego e Website Bullets.