Las listas ordenadas en HTML se representan mediante la etiqueta OL. Y mediante el uso de CSS podemos alterar el tipo de lista ordenada que queremos que sea.
Para ello tenemos la propiedad list-style-type. Con ella podremos indicar que los números de la lista sean romanos. Además podemos indicar que sean en mayúsculas o minúsculas. Es por ello que tenemos dos valores para la propiedad list-style-type: upper-roman para las mayúsculas y lower-roman para las minúsculas.
Lo que vamos a hacer para definir una lista CSS de números romanos es definir dos estilos: «romanos_upper» y «romanos_lower», los cuales utilizaremos con las listas de nuestra página web.
La definición de los estilos quedará como sigue:
.romanos_upper{
list-style-type:upper-roman;
}
.romanos_lower{
list-style-type:lower-roman;
}Ya solo nos quedará utilizar el atributo class del elemento OL para asignarles un estilo u otro. Veamos como quedaría el código:
- Primer elemento
- Segundo elemento
- Tercer elemento
- Cuarto elemento
- Quinto elemento
Y de esta forma tan sencilla tenemos una lista CSS de números romanos.
