Propiedad list-style-type

La propiedad list-style-type permite para la lista ul en lugar de marcadores de puntos hacer cuadrados o círculos. Para la lista ol en lugar de los números habituales se pueden hacer números romanos, numeración en forma de letras: latinas o griegas.

Sintaxis

selector {
	list-style-type: valor;
}

Valores para ul

Valor	Descripción
`circle`	Crea marcadores en forma de círculos.
`disc`	Crea marcadores en forma de círculos rellenos.
`square`	Crea marcadores en forma de cuadrados.
`none`	Elimina los marcadores.

Valor por defecto: disc.

Valores para ol

Valor	Descripción
`armenian`	Numeración armenia tradicional.
`decimal`	Números arábigos.
`decimal-leading-zero`	Números arábigos con un cero delante para dígitos menores de diez.
`georgian`	Numeración georgiana tradicional.
`lower-alpha`	Letras latinas en minúsculas.
`lower-greek`	Letras griegas en minúsculas.
`lower-latin`	Este valor es análogo a lower-alpha.
`lower-roman`	Números romanos en minúsculas.
`upper-alpha`	Letras latinas en mayúsculas.
`upper-latin`	Este valor es análogo a upper-alpha.
`upper-roman`	Números romanos en mayúsculas.
`none`	Elimina los marcadores.

Valor por defecto: decimal.

Ejemplo

<ul>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
</ul>

ul {
	list-style-type: disc;
}

Ejemplo

<ul>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
</ul>

ul {
	list-style-type: circle;
}

Ejemplo

<ul>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
</ul>

ul {
	list-style-type: square;
}

Ejemplo

<ul>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
</ul>

ul {
	list-style-type: none;
}

Ejemplo

<ol>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
</ol>

ol {
	list-style-type: decimal;
}

Ejemplo

<ol>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
</ol>

ol {
	list-style-type: armenian;
}

Ejemplo

<ol>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
</ol>

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

Ejemplo

<ol>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
</ol>

ol {
	list-style-type: georgian;
}

Ejemplo

<ol>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
</ol>

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

Ejemplo

<ol>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
</ol>

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

Ejemplo

<ol>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
</ol>

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

Ejemplo

<ol>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
</ol>

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

Ejemplo

<ol>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
</ol>

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

Ejemplo

<ol>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
</ol>

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

Ejemplo

Este ejemplo muestra que la propiedad color afecta no solo al color del texto, sino también al color de los marcadores:

<ul>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
</ul>

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

Véase también

la propiedad list-style-image,
que establece marcadores en forma de imágenes dadas
la propiedad list-style-position,
que establece la posición de los marcadores
la propiedad list-style,
que es una abreviatura para los marcadores