Paso 12: Listas

Las listas en HTML tienen las siguientes características:

• Pueden ser numeradas <OL> (Ordered List) o no numeradas <UL> (Unordered List). Ambas son jerárquicas.
• En el caso de las <OL>, disponemos del campo <type="$"> donde podremos sustituir el $ por los valores 1, A, a, I y i.
• En el caso de las <UL>, podemos reemplazar los bolitos por imágenes creando un estilo semejante al siguiente:
    ul.menu1 {list-style: url([ruta de la imagen que queremos poner].jpg) disc;}
  Así sólo tendríamos que añadir el tag <CLASS> a la <UL> para aplicar el estilo:
    <ul class="menu1">
    <li>...</li>
    <li>...</li>
    </ul>
  Por ejemplo:
  
  • Elemento 1
  • Elemento 2
• Para que siempre aparezca la misma viñeta independientemente del nivel en que estemos, insertaremos el tag DISC. Si no, NO-REPEAT. Por ejemplo:
  ul.menu2{
   list-style: url(http://www.icex.es/icex/cda/images_icexv3/flecha_n.gif) disc;
  }
  ul.menu3{
   list-style: url(http://www.icex.es/icex/cda/images_icexv3/bullet_flecha.gif) disc;
  }
  Por ejemplo:
  
  • Elemento 1
  • Elemento 1.1
  • Elemento 2
• En el caso de que no queramos que haya viñetas creamos un estilo como el siguiente:
    ul.menu0 {
     list-style: none;
     text-align: left;
    }
  Por ejemplo:
  
  • Elemento 1
  • Elemento 2
• Disponemos también de los campos ALT y TITLE.