Se preferir avance para:
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 |
|---|---|
|
<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
- Joceane, que é mãe de:
- Cida, que é mãe de
- Pedro
- Maria José, que é mãe de:
- Antônio, que é pai de:
- Adriana, que é mãe de:
- Adriane
- Andréa, que é mãe de:
- Aline
- Bruna
- Adriana, que é mãe de:
- Helena, que é mãe de:
- Helen Fernanda
- Herica
- Joverci, 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 |
|---|---|
| <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 |
|---|---|
| <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 |
|---|---|
<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;}
-->
