Tipo predefinidos de marcador: list-style-type
El marcador de las listas ordenadas (<ol>) o no ordenadas (<ul>) se modifica con la propiedad list-style-type.
En esta lección se muestran los tipos de marcador "clásicos", incluidos en la recomendación CSS 2.1. En la lección CSS Listas (2) se muestran los tipos de marcador añadidos en la futura recomendación CSS Counter Styles Level 3, correspondientes en su mayoría a lenguas orientales.
ul {
list-style-type: none;
}
ul {
list-style-type: disc;
}
ul {
list-style-type: circle;
}
ul {
list-style-type: square;
}
ul {
list-style-type: decimal;
}
ul {
list-style-type: decimal-leading-zero;
}
ul {
list-style-type: lower-roman;
}
ul {
list-style-type: upper-roman;
}
ul {
list-style-type: lower-greek;
}
ul {
list-style-type: lower-alpha;
}
ul {
list-style-type: lower-latin;
}
ul {
list-style-type: upper-alpha;
}
ul {
list-style-type: upper-latin;
}
Las listas ordenadas y no ordenadas son equivalentes. Los navegadores muestran números en las listas ordenadas y símbolos en las listas no ordenadas, pero desde la hoja de estilo se puede invertir la presentación:
<ul>
<li>Esto es un punto de una lista no ordenada</li>
<li>Esto es otro punto de la misma lista no ordenada
<ol>
<li>Esto es un punto de una sublista ordenada</li>
<li>Esto es otro punto de la misma sublista ordenada</li>
</ol>
</li>
</ul>
ul {
list-style-type: decimal;
}
ol {
list-style-type: disc;
}
Los estilos lower-latin y lower-alpha son los mismos, así como los estilos upper-latin y upper-alpha.
La recomendación CSS 2 no especifica qué debe hacerse cuando se utiliza un estilo alfabético y la lista tiene más elementos que el alfabeto correspondiente. los navegadores hacen como en las antiguas matrículas de los coches, es decir, después de Z ponen AA (y después de ZZ ponen AAA), como puede comprobarse en esta página de ejemplo de lista larga con upper-alpha.
En el estilo decimal-leading-zero, los navegadores sólo ponen un cero delante de los primeros nueve elementos (los que llevan los números del 1 al 9), aunque la lista tenga más de 100 elementos, como puede comprobarse en esta página de ejemplo de lista larga con decimal-leading-zero.