Propriedade list-style-type

A propriedade list-style-type permite para a lista ul em vez de marcadores de pontos fazer quadrados ou círculos. Para a lista ol em vez de números normais, é possível fazer algarismos romanos, numeração em forma de letras: latinas ou gregas.

Sintaxe

seletor {
	list-style-type: valor;
}

Valores para ul

Valor	Descrição
`circle`	Cria marcadores em forma de círculos.
`disc`	Cria marcadores em forma de círculos preenchidos.
`square`	Cria marcadores em forma de quadradinhos.
`none`	Remove os marcadores.

Valor padrão: disc.

Valores para ol

Valor	Descrição
`armenian`	Numeração armênia tradicional.
`decimal`	Algarismos arábicos.
`decimal-leading-zero`	Algarismos arábicos com zero à frente para dígitos menores que dez.
`georgian`	Numeração georgiana tradicional.
`lower-alpha`	Letras latinas minúsculas.
`lower-greek`	Letras gregas minúsculas.
`lower-latin`	Este valor é análogo a lower-alpha.
`lower-roman`	Algarismos romanos em minúsculas.
`upper-alpha`	Letras latinas maiúsculas.
`upper-latin`	Este valor é análogo a upper-alpha.
`upper-roman`	Algarismos romanos em maiúsculas.
`none`	Remove os marcadores.

Valor padrão: decimal.

Exemplo

<ul>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
</ul>

ul {
	list-style-type: disc;
}

Exemplo

<ul>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
</ul>

ul {
	list-style-type: circle;
}

Exemplo

<ul>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
</ul>

ul {
	list-style-type: square;
}

Exemplo

<ul>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
</ul>

ul {
	list-style-type: none;
}

Exemplo

<ol>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
</ol>

ol {
	list-style-type: decimal;
}

Exemplo

<ol>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
</ol>

ol {
	list-style-type: armenian;
}

Exemplo

<ol>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
</ol>

ol {
	list-style-type: decimal-leading-zero;
}

Exemplo

<ol>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
</ol>

ol {
	list-style-type: georgian;
}

Exemplo

<ol>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
</ol>

ol {
	list-style-type: lower-alpha;
}

Exemplo

<ol>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
</ol>

ol {
	list-style-type: lower-greek;
}

Exemplo

<ol>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
</ol>

ol {
	list-style-type: lower-latin;
}

Exemplo

<ol>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
</ol>

ol {
	list-style-type: lower-roman;
}

Exemplo

<ol>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
</ol>

ol {
	list-style-type: upper-alpha;
}

Exemplo

<ol>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
</ol>

ol {
	list-style-type: upper-roman;
}

Exemplo

Este exemplo mostra que a propriedade color influi não apenas na cor do texto, mas também na cor dos marcadores:

<ul>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
</ul>

ul {
	list-style-type: disc;
	color: red;
}

Veja também

a propriedade list-style-image,
que define marcadores como imagens especificadas
a propriedade list-style-position,
que define a posição dos marcadores
a propriedade list-style,
que é uma abreviação para os marcadores