Tipos de listas numeradas com CSS

Para aprender a fazer listas numeradas, visite primeiro o post Como criar listas numeradas. Aqui vou mostrar apenas 19 opções de numeração que temos em CSS usando a propriedade list-style-type.

Esse é um modelo de lista com dez itens que você pode usar para todos os exemplos abaixo, mudando apenas o valor destacado:

<ol style='list-style-type:VALOR'>
<li>Avant</li>
<li>Chrome</li>
<li>Epiphany</li>
<li>Firefox</li>
<li>Flock</li>
<li>Maxthon</li>
<li>Netscape</li>
<li>Opera</li>
<li>Rockmelt</li>
<li>Torch</li>
</ol>

1. Decimal
2. Decimal com zero à esquerda
3. Números invisíveis
4. Alfabeto minúsculo
5. Alfabeto maiúsculo
6. Algarismo romano minúsculo
7. Algarismo romano maiúsculo
8. Alfabeto grego minúsculo
9. Alfabeto grego maiúsculo
10. Alfabeto hebraico
11. Alfabeto armênio minúsculo
12. Alfabeto armênio maiúsculo
13. Alfabeto georgiano
14. Alfabeto de ideogramas CJK
15. Alfabeto hiragana
16. Alfabeto hiragana-iroha
17. Alfabeto katakana
18. Alfabeto katakana-iroha
19. Nota de rodapé
20. Definir numeração de um único item

Decimal:

É a numeração padrão, você só precisa definir esse valor para a lista se a numeração da folha de estilos for outra.

<ol style='list-style-type:decimal'>
1. Amor Amor
2. Anaïs Anaïs
3. Lou Lou
4. Noa

Decimal com zero à esquerda:

<ol style='list-style-type:decimal-leading-zero'>
1. Amor Amor
2. Anaïs Anaïs
3. Lou Lou
4. Noa

Números invisíveis:

É difícil imaginar uma situação em que seja conveniente usar uma lista numerada sem os números, talvez fosse melhor uma lista não-numerada, mas se um dia você precisar, tá na mão:

<ol style='list-style-type:none'>
1. Amor Amor
2. Anaïs Anaïs
3. Lou Lou
4. Noa

Alfabeto minúsculo:

<ol style='list-style-type:lower-alpha'>
1. Amor Amor
2. Anaïs Anaïs
3. Lou Lou
4. Noa

Não sei se tinham alguma intenção diferente quando criaram, mas o valor lower-latin tem o mesmo resultado nos navegadores atuais.

Alfabeto maiúsculo:

<ol style='list-style-type:upper-alpha'>
1. Amor Amor
2. Anaïs Anaïs
3. Lou Lou
4. Noa

Algarismo romano minúsculo:

<ol style='list-style-type:lower-roman'>
1. Amor Amor
2. Anaïs Anaïs
3. Lou Lou
4. Noa

Algarismo romano maiúsculo:

<ol style='list-style-type:upper-roman'>
1. Amor Amor
2. Anaïs Anaïs
3. Lou Lou
4. Noa

Alfabeto grego minúsculo:

<ol style='list-style-type:lower-greek'>
1. Chrome
2. Firefox
3. Flock
4. Maxthon
5. Opera
6. Rockmelt
7. Torch

Alfabeto grego maiúsculo:

Não funciona no Firefox nem no Opera. Testei com sucesso no Safari, no Chrome e no Internet Explorer.

<ol style='list-style-type:upper-greek'>
1. Chrome
2. Firefox
3. Flock
4. Maxthon
5. Opera
6. Rockmelt
7. Torch

Alfabeto hebraico:

<ol style='list-style-type:hebrew'>
1. Chrome
2. Firefox
3. Flock
4. Maxthon
5. Opera
6. Rockmelt
7. Torch

Alfabeto armênio minúsculo:

Funciona apenas no Chrome e no Safari. Testei sem sucesso nos navegadores Firefox, Internet Explorer e Opera.

<ol style='list-style-type:lower-armenian'>
1. Chrome
2. Firefox
3. Flock
4. Maxthon
5. Opera
6. Rockmelt
7. Torch

Alfabeto armênio maiúsculo

<ol style='list-style-type:armenian'>
1. Chrome
2. Firefox
3. Flock
4. Maxthon
5. Opera
6. Rockmelt
7. Torch

Alfabeto georgiano

Não entendo uma letra, mas achei esses caracteres redondinhos muito engraçadinhos.

<ol style='list-style-type:georgian'>
1. Avant
2. Chrome
3. Epiphany
4. Firefox
5. Flock
6. Maxthon
7. Netscape
8. Opera
9. Rockmelt
10. Torch

Alfabeto de ideogramas CJK (Chinês, Japonês e Coreano)

<ol style='list-style-type:cjk-ideographic'>
1. Avant
2. Chrome
3. Epiphany
4. Firefox
5. Flock
6. Maxthon
7. Netscape
8. Opera
9. Rockmelt
10. Torch

Alfabeto hiragana

<ol style='list-style-type:hiragana'>
1. Avant
2. Chrome
3. Epiphany
4. Firefox
5. Flock
6. Maxthon
7. Netscape
8. Opera
9. Rockmelt
10. Torch

Alfabeto hiragana-iroha

<ol style='list-style-type:hiragana-iroha'>
1. Avant
2. Chrome
3. Epiphany
4. Firefox
5. Flock
6. Maxthon
7. Netscape
8. Opera
9. Rockmelt
10. Torch

Alfabeto katakana

<ol style='list-style-type:katakana'>
1. Avant
2. Chrome
3. Epiphany
4. Firefox
5. Flock
6. Maxthon
7. Netscape
8. Opera
9. Rockmelt
10. Torch

Alfabeto katakana-iroha

<ol style='list-style-type:katakana-iroha'>
1. Avant
2. Chrome
3. Epiphany
4. Firefox
5. Flock
6. Maxthon
7. Netscape
8. Opera
9. Rockmelt
10. Torch

Nota de rodapé

Essa é uma das numerações mais divertidas, mas só funciona no Chrome e no Safari. Tentei também no Firefox, Opera e no Internet Explorer.

<ol style='list-style-type:footnotes'>
1. Avant
2. Chrome
3. Epiphany
4. Firefox
5. Flock
6. Maxthon
7. Netscape
8. Opera
9. Rockmelt
10. Torch

Definir numeração de um único item

A propriedade list-style-type também pode ser aplicada no próprio item de lista. Dessa forma você pode criar uma lista com dois ou mais tipos de numeração:

<ol>
<li style="list-style-type:katakana">Amor Amor</li>
<li style="list-style-type:georgian">Anaïs Anaïs</li>
<li style="list-style-type:upper-roman">Lou Lou</li>
<li style="list-style-type:armenian">Noa</li>
<ol>
1. Amor Amor
2. Anaïs Anaïs
3. Lou Lou
4. Noa

Até mais!