feed twitter facebook LinkedIn facebook

CSS » Lista CSS de números romanos

enero 5, 2008 por Víctor Cuervo 11 Comentarios Imprimir Imprimir

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:

  1. <style type="text/css">
  2. .romanos_upper{list-style-type:upper-roman;}
  3. .romanos_lower{list-style-type:lower-roman;}
  4. </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:

  1. <ol class="romanos_upper">
  2. <li>Primer elemento</li>
  3. <li>Segundo elemento</li>
  4. <li>Tercer elemento</li>
  5. <li>Cuarto elemento</li>
  6. <li>Quinto elemento</li>
  7. </ol>

Visualizar el ejemplo | Descargar el código

tags: , , , , ,

Artículos relacionados:

11 comentarios »

RSS feed para los comentarios de esta entrada. TrackBack URI

1 2
  1. Miguel de Rancagua
    enero 15, 2008 #

    Genial !! Excelente !!

  2. kata
    abril 5, 2008 #

    superrr estuuupendoooO****************************

  3. CAROL
    abril 5, 2008 #

    Oliiiiiiiiiiiii

    QUE ES ESTO?????????????

  4. KITHIIIIIIII DE ALERCE WIIIIIIIIIIIIIIIIIIII
    abril 5, 2008 #

    OLIII SALUDINES A TOOOS LOS GENIOS QUEICERON ESTA VESTUPENDA PAGINA

    BUENUU ME DESPIDOo VESOS

    xauuussss

  5. wotan
    mayo 22, 2008 #

    Es mas práctico así : n_n

    Amores Perros
    Amarte Duele
    Don de Dios

    V.Amores Perros
    VI.Amarte Duele
    VIIDon de Dios

  6. wotan
    mayo 22, 2008 #

    ups no salio, pero en el link del nick esta la referencia xD

  7. lu
    mayo 27, 2008 #

    q es estoo?

  8. julia
    junio 9, 2008 #

    no me sirve de nada ya

  9. MOSE HERMOXIXIMA
    septiembre 18, 2008 #

    nO0 ME ZIRVE PARA nADA OKKKK

  10. vero
    noviembre 6, 2008 #

    necesito todos los números 09 en romano hasta el 3000

1 2

Deja un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*