As 3 propriedade CSS para estilização de marcadores de listas e seus segredos

Postado por em
Original disponível em maujor.com

Estilizando listas ordenadas e não ordenadas

As propriedades para as listas, definem as características das listas e são as listadas a seguir:

 
 list-style-image......define uma imagem como marcador da lista;
 list-style-position...define a posição do marcador de lista; 
 list-style-type.......define o tipo do marcador da lista;
 list-style............maneira abreviada para definir DUAS propriedades.

Valores válidos para as propriedades do lista

  • list-style-image:
    1. none
    2. URL: url(caminho/marcador.gif)
  • list-style-position:
    1. outside: marcador fora do alinhamento do texto
    2. inside: marcador alinhado com texto
  • list-style-type:
    1. none: sem marcador
    2. disc: círculo (bolinha cheia)
    3. circle: circunferência (bolinha vazia)
    4. square: quadrado cheio
    5. decimal: números 1, 2, 3, 4, ...
    6. decimal-leading-zero: decimal com 0 no início
    7. lower-roman: romano minúsculo i, ii, iii, iv, ...
    8. upper-roman: romano maiúsculo I, II, III, IV, ...
    9. lower-alpha: letra minúscula a, b, c, d, ...
    10. upper-alpha: letra maiúscula A, B, C, D, ...
    11. lower-greek
    12. lower-latin
    13. upper-latin
    14. hebrew
    15. armenian
    16. georgian
    17. cjk-ideographic
    18. hiragana
    19. katakana
    20. hiragana-iroha
    21. katakana-iroha

Sintaxe

A definição dos marcadores de listas pode ser feita com uso do seletor-pai da lista (ul ou ol) ou com uso do seletor-filho (li), conforme mostrado no exemplo a seguir:

 ul { list-style-type: circle; }
 ol { list-style-type: circle; }
 li { list-style-type: circle; }

Usando-se o seletor-pai a declaração será válida para todos os items da lista. Usando-se o seletor-filho a declaração será válida somente para um item da lista.

Exemplos práticos

Vejamos a seguir alguns exemplos práticos.

list-style-image

Este exemplo demonstra como definir uma imagem para servir de marcador de listas.

...
<style rel="stylesheet">
ul {
  list-style-image: url("seta.gif");
  }
</style>
</head>
<body>
<ul>
 <li>Item um</li>
 <li>Item dois</li>
 <li>Item três</li>
</ul>
</body>
</html>

Este é o efeito da folha de estilo acima:

  • Item um
  • Item dois
  • Item três

list-style-position

Este exemplo demonstra como posicionar os marcadores de listas

...
<style rel="stylesheet">
ul.inside {
  list-style-position: inside;
  }
ul.outside {
  list-style-position: outside;
  }
</style>
</head>
<body>
<ul class="inside">
 <li>Este texto destina-se a demonstrar o valor: "inside" dos marcadores de listas.</li>
 <li>E aqui continuamos com mais texto para  demonstrar o valor:"inside" dosmarcadores de listas.</li>
</ul>
<ul class="outside">
 <li>Este texto destina-se a demonstrar o  valor: "outside" dos marcadores de listas.</li>
 <li>E aqui continuamos com mais texto para  demonstrar o valor:"outside" dos marcadores de listas.</li>
</ul>
</body>
</html>

Este é o efeito da folha de estilo acima:

  • Este texto destina-se a demonstrar o valor: "inside" dos marcadores
  • E aqui continuamos com mais texto para demonstrar o valor:"inside" dos marcadores de listas.
  • Este texto destina-se a demonstrar o valor: "outside" dos marcadores
  • E aqui continuamos com mais texto para demonstrar o valor:"outside" dos marcadores de listas.

list-style-type

Definir marcadores de listas não ordenadas

Este exemplo demonstra como definir marcadores de listas nõo ordenadas.

...
<style rel="stylesheet">
ul.none {
 list-style-type: none;
 }
ul.disc {
 list-style-type: disc;
 }
ul.circle {
 list-style-type: circle;
 }
ul.square {
 list-style-type: square;
 }
</style>
</head>
<body>
<ul class="none">
 <li>Item um</li>
 <li>Item dois</li>
 <li>Item três</li>
</ul>
<ul class="disc">
 <li>Item um</li>
 <li>Item dois</li>
 <li>Item três</li>
</ul>
<ul class="circle">
 <li>Item um</li>
 <li>Item dois</li>
 <li>Item três</li>
</ul>
<ul class="square">
 <li>Item um</li>
 <li>Item dois</li>
 <li>Item três</li>
</ul>
</body>
</html>

Este é o efeito da folha de estilo acima:

  • Item um
  • Item dois
  • Item três
  • Item um
  • Item dois
  • Item três
  • Item um
  • Item dois
  • Item três
  • Item um
  • Item dois
  • Item três

Definir marcadores de listas ordenadas

Este exemplo demonstra como definir marcadores de listas ordenadas.

...
<style rel="stylesheet">
ol.decimal {
 list-style-type: decimal;
 }
ol.lroman {
 list-style-type: lower-roman;
 }
ol.uroman {
 list-style-type: upper-roman;
 }
ol.lalpha {
 list-style-type: lower-alpha;
 }
ol.ualpha {
 list-style-type: upper-alpha;
 }
</style>
</head>
<body>
<ol class="decimal">
 <li>Item um</li>
 <li>Item dois</li>
 <li>Item três</li>
</ol>
<ol class="lroman">
 <li>Item um</li>
 <li>Item dois</li>
 <li>Item três</li>
</ol>
<ol class="uroman">
 <li>Item um</li>
 <li>Item dois</li>
 <li>Item três</li>
</ol>
<ol class="lalpha">
 <li>Item um</li>
 <li>Item dois</li>
 <li>Item três</li>
</ol>
<ol class="ualpha">
 <li>Item um</li>
 <li>Item dois</li>
 <li>Item três</li>
</ol>
</body>
</html>

Este é o efeito da folha de estilo acima:

  1. Item um
  2. Item dois
  3. Item três
  1. Item um
  2. Item dois
  3. Item três
  1. Item um
  2. Item dois
  3. Item três
  1. Item um
  2. Item dois
  3. Item três
  1. Item um
  2. Item dois
  3. Item três

Mais marcadores de listas ordenadas

Este exemplo demonstra como definir mais marcadores de listas ordenadas.

...
<style rel="stylesheet">
ol.lower-greek {
 list-style-type: lower-greek;
 }
ol.lower-latin {
 list-style-type: lower-latin;
 }
ol.lower-latin {
 list-style-type: upper-latin;
 }
ol.hebrew {
 list-style-type: hebrew;
 }
ol.armenian {
 list-style-type: armenian;
 }
ol.georgian {
 list-style-type: georgian;
 }

</style>
</head>
<body>
<ol class="lower-greek">
 <li>Item um</li>
 <li>Item dois</li>
 <li>Item três</li>
</ol>
<ol class="lower-latin">
 <li>Item um</li>
 <li>Item dois</li>
 <li>Item três</li>
</ol>
<ol class="upper-latin">
 <li>Item um</li>
 <li>Item dois</li>
 <li>Item três</li>
</ol>
<ol class="hebrew">
 <li>Item um</li>
 <li>Item dois</li>
 <li>Item três</li>
</ol>
<ol class="armenian">
 <li>Item um</li>
 <li>Item dois</li>
 <li>Item três</li>
</ol>
<ol class="georgian">
 <li>Item um</li>
 <li>Item dois</li>
 <li>Item três</li>
</ol>

</body>
</html>

Este é o efeito da folha de estilo acima:

lower-greek
  • Item um
  • Item dois
  • Item três
lower-latin
  • Item um
  • Item dois
  • Item três
upper-latin
  • Item um
  • Item dois
  • Item três
hebrew
  • Item um
  • Item dois
  • Item três
armenian
  • Item um
  • Item dois
  • Item três
georgian
  • Item um
  • Item dois
  • Item três
cjk-ideographic
  • Item um
  • Item dois
  • Item três
hiragana
  • Item um
  • Item dois
  • Item três
katakana
  • Item um
  • Item dois
  • Item três
hiragana-iroha
  • Item um
  • Item dois
  • Item três
katakana-iroha
  • Item um
  • Item dois
  • Item três

list-style

Esta é a maneira abreviada de se escrever uma só declaração para duas das propriedades para listas:

A sintaxe geral é esta: list-style: list-position list-image ou list-style: list-position list-type podendo-se inverter a ordem dos dois valores.

Observe o exemplo a seguir:

...
<style rel="stylesheet">
ul {
 list-style: inside url("seta.gif");
 }
</style>
</head>
<body>
<ul>
 <li>Texto para demonstrar a propriedade de declaraçãoo única  para listas;</li>
 <li>Item dois;</li>
 <li>Item três.</li>
</ul>
</body>
</html>

Este é o efeito da folha de estilo acima:

  • Texto para demonstrar a propriedade de declaração única para listas;
  • Item dois;
  • Item três.

Comentários

Postar um comentário