A propriedade CSS list

Introdução

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

<ul>
	<li>Item um</li>
	<li>Item dois</li>
	<li>Item três</li>
</ul>

ul {
  list-style-image: url("seta.gif");
}

Este é o efeito da folha de estilo acima:

list-style-position

Este exemplo demonstra como posicionar os marcadores de listas

<ul class="inside square">
	<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 square">
	<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>

.inside {
  list-style-position: inside;
}
.outside {
  list-style-position: outside;
}

Este é o efeito da folha de estilo acima:

list-style-type

Definir marcadores de listas não ordenadas

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

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

ul.none {
	list-style-type: none;
	}
ul.disc {
	list-style-type: disc;
	}
ul.circle {
	list-style-type: circle;
	}
ul.square {
	list-style-type: square;
	}

Este é o efeito da folha de estilo acima:

Definir marcadores de listas ordenadas

Este exemplo demonstra como definir marcadores de listas ordenadas.

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

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;
	}

Este é o efeito da folha de estilo acima:

Mais marcadores de listas ordenadas

Este exemplo demonstra como definir mais marcadores de listas ordenadas.

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

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;
	}
/* mais cinco marcadores  */

Este é o efeito da folha de estilo acima:

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:

<ul>
	<li>Texto para demonstrar a propriedade de declaraçãoo única  para listas;</li>
	<li>Item dois;</li>
	<li>Item três.</li>
</ul>

ul {
	list-style: inside url("seta.gif");
	}

Compartilhe essa matéria com seus amigos