Busca

Carregando...

sexta-feira, 20 de julho de 2012

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. É 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

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

  5. Números invisíveis:
  6. É 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

  7. Alfabeto minúsculo:
  8. <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.

  9. Alfabeto maiúsculo:
  10. <ol style='list-style-type:upper-alpha'>
    1. Amor Amor
    2. Anaïs Anaïs
    3. Lou Lou
    4. Noa

  11. Algarismo romano minúsculo:
  12. <ol style='list-style-type:lower-roman'>
    1. Amor Amor
    2. Anaïs Anaïs
    3. Lou Lou
    4. Noa

  13. Algarismo romano maiúsculo:
  14. <ol style='list-style-type:upper-roman'>
    1. Amor Amor
    2. Anaïs Anaïs
    3. Lou Lou
    4. Noa

  15. Alfabeto grego minúsculo:
  16. <ol style='list-style-type:lower-greek'>
    1. Chrome
    2. Firefox
    3. Flock
    4. Maxthon
    5. Opera
    6. Rockmelt
    7. Torch

  17. Alfabeto grego maiúsculo:
  18. 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

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

  21. Alfabeto armênio minúsculo:
  22. 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

  23. Alfabeto armênio maiúsculo
  24. <ol style='list-style-type:armenian'>
    1. Chrome
    2. Firefox
    3. Flock
    4. Maxthon
    5. Opera
    6. Rockmelt
    7. Torch

  25. Alfabeto georgiano
  26. 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

  27. Alfabeto de ideogramas CJK (Chinês, Japonês e Coreano)
  28. <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

  29. Alfabeto hiragana
  30. <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

  31. Alfabeto hiragana-iroha
  32. <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

  33. Alfabeto katakana
  34. <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

  35. Alfabeto katakana-iroha
  36. <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

  37. Nota de rodapé
  38. 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

  39. Definir numeração de um único item
  40. 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!

Posts relacionados