Linea de Codigo

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

<style type="text/css">
.romanos_upper{list-style-type:upper-roman;}
.romanos_lower{list-style-type:lower-roman;}
</style>

Ya solo nos quedará utilizar el atributo class del elemento OL para asignarles un estilo u otro. Veamos como quedaría el código:

<ol class="romanos_upper">
<li>Primer elemento</li>
<li>Segundo elemento</li>
<li>Tercer elemento</li>
<li>Cuarto elemento</li>
<li>Quinto elemento</li>
</ol>

Visualizar el ejemplo | Descargar el código