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

CSS

 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.

HTML

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

CSS

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

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

HTML

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

CSS

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

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:

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

Item um
Item dois
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;
	}
/* mais cinco marcadores  */
</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.