Se preferir avance para:
- Os bullets pré-definidos
- 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:
- Adriana:
- Beto:
- 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:
- Rilbert
- Cida, que é mãe de
- Antônio, que é pai de:
- Adriana, que é mãe de:
- Andréa, que é mãe de:
- Helena, que é mãe de:
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:
| <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:
|
<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 |
|---|
|
| <ul style="list-style:none;">
|
Na folha de estilos:
<--
ul {list-style:none;}
ul ul {list-style:none;}
-->
