domingo, 15 de agosto de 2010

Listas HTML: 'ul', 'ol' y 'li'

logo COEPALas listas es otro tipo de contenido típico en los documentos HTML, las hay de dos tipos, listas ordenadas y listas desordenadas, para las primeras se usa a etiqueta HTML <ol>

, mientras que para las desordenadas se emplea <ul>, y por último, para definir cada uno de los elementos de las listas (tanto las ordenadas como las desordenadas) se usa el atributo <li>:
  • Listas ordendas:
    <ol>
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
    </ol>

    El código anterior genera la siguiente lista:

    1. Elemento 1
    2. Elemento 2
    3. Elemento 3
  • Listas desordenadas:
    <ul>
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
    </ul>

    El código anterior genera la siguiente lista:

    • Elemento 1
    • Elemento 2
    • Elemento 3

Reglas CSS para listas

En nuestra Guía de referencia rápida CSS podemos encontrar varias propiedades para usar con las listas, a continuación, algunos ejemplos con la propiedad list-style-type y probando diferentes valores:

  • Primero algunos atributos para listas desordenadas:
    Parece que la plantilla CSS de este Blog tiene otras reglas para las listas ul y las modificaciones de estilo CSS quí no se ven reflejadas, pero el código ha sido probado en otros entornos y se visualiza correctamente.

    En el archivo de estilo CSS: podemos crear una clase para las listas que queramos que se muestren con un estilo elegido por nosostros:

    ul {
    list-style-type: square;
    }

    En el documento HTML:

    <ul>
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
    </ul>

    Y el código anterior se visualizará así:

    Debería mostrarse un cuadrado pequeño en cada elemento de la lista

    • Elemento 1
    • Elemento 2
    • Elemento 3
    Otros valores para la propiedad list-style-type en las listas desordenadas pueden ser: circle, disc (este último es el que se muestra por defecto), etc...

    Si queremos que todas las listas desordenadas de nuestra web su muestren del mismo tipo, en lugar de crear una regla CSS con un selector definido por nosotros, deberemos unas la etiqueta HTML ul como selector en el fichero CSS:

    ul {
    list-style-type: square;
    }

    Y el documento HTML, al abrir la etiqueta de la lista, no es necesario especificar ninguna clase, ya que todas las listas desordenadas del documento se mostrarán con el mismo valor:

    <ul>
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
    </ul>
  • Para usar la propiedad list-style-image, en el valor url, hay que indicarle la dirección url de una imagen (pequeña):

    En el archivo de estilo CSS:

    .lista_imagen {
    list-style-image: url(http://www.sm.com.gt/sm/p/templates/yoo_pinboard/images/emailButton.png);
    }

    En el documento HTML:

    <ul class="lista_imagen">
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
    </ul>
  • Y para las listas ordenadas:

    Aplicando la propiedad list-style-type con el valor lower-roman en el archivo CSS:

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

    En el documento HTML:

    <ol class="lista_lower-roman">
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
    </ol>

    Y el código anterior se visualizará con cada elemento de la lista en números romanos con las letras en minúscula:

    1. Elemento 1
    2. Elemento 2
    3. Elemento 3
No es correcto modificar estilos de listas ordenadas con atributos de listas desordenadas ni modificar estilos de listas desordenas con atrubutos de listas ordenadas

No hay comentarios:

Publicar un comentario en la entrada