Imprimir

Manual de HTML: Listas

Listas

Las listas son unos elementos de maquetación muy eficaces a la hora de dar formato al contenido de una web. Las listas se pueden utilizar para varias cosas:

  • creación de índices y esquemas.
  • corregir el exceso de contenido de una página.
  • corregir la falta de contenido de una página.
  • romper la monotonía de contenidos de la página.

Recursos

  • <ul></ul>

    La etiqueta <ul> (Unordered List, Lista sin ordenar) muestra una lista sin numerar donde las filas (definidas con la etiqueta <li>) pueden ir precedidas de una viñeta, que puede ser diferente en cada fila.

    Propiedades CSS:

    Ejemplo: este código:

    <h4>debemos comprar:</h4>
    <ul>
      <li>camisas para jose</li>
      <li>locion para daniel</li>
    </ul>

    ... se ve así:

    debemos comprar:

    • camisas para jose
    • locion para daniel
  • <ol> </ol>

    La etiqueta <ol> (Ordered List, Lista ordenada) muestra una lista numerada donde las filas (definidas con la etiqueta <li>) pueden ir precedidas de un número, que puede tener diferente estilo en cada fila.

    Atributos:

    • start: define el primer secuenciador de la serie de elementos de la lista (debe ser un número entero a partir de 1).

    Propiedades CSS:

    Ejemplo: este código:

    <h4>estudiar para mañana:</h4>
    <ol type="1" start="3">
      <li>geometria</li>
      <li>ciencias sociales</li>
    </ol>
     
    <h4>actividades de la semana:</h4>
    <ol type="i" start="3">
      <li>asistir a la universidad</li>
      <li>comprar disco</li>
      <li>llevar el auto al mecanico</li>
    </ol>

    ... se ve así:

    estudiar para mañana:

    1. geometria
    2. ciencias sociales

    actividades de la semana:

    1. asistir a la universidad
    2. comprar disco
    3. llevar el auto al mecanico
  • <li></li>

    La etiqueta <li> define las líneas de las listas, tanto numeradas (<ol>) como sin numerar (<ul>).

    Propiedades CSS:

Anidamiento de listas

Las listas son elementos tipo block, de los que insertan retorno de carro (como los párrafos p y los títulos h1) y se pueden anidar unas en otras sin ningún problema cuantos niveles queramos, con tan sólo respetar la sintaxis y tener cuidado de cerrar las etiquetas.

La forma de anidar listas es sencilla: dentro de una etiqueta <li></li> se introduce el bloque completo de la lista anidada (por ejemplo <ol></ol>), cuidando de cerrar a continuación el elemento padre con su correspondiente </li>.

Ejemplo de listas anidadas: este código:

<ul>
  <li>primer elemento</li>
  <li>segundo elemento
    <ol>
      <li>primer sub-elemento</li>
      <li>segundo sub-elemento</li>
      <li>tercer sub-elemento</li>
    </ol>
  </li>
  <li>tercer elemento</li>
</ul>

... se ve así:

  • primer elemento
  • segundo elemento
    1. primer sub-elemento
    2. segundo sub-elemento
    3. tercer sub-elemento
  • tercer elemento

Menús flotantes con CSS

Combinando las listas con estilos CSS se pueden conseguir efectos realmente espectaculares, como menús de navegación, pestañas, etc.

Ejemplo de menú flotante con CSS: este código:

<style>
.flotante li ul {
  display: none;
}
.flotante li:hover > ul {
  display: block;
}
</style>
<div class="flotante">
  <ul>
    <li><a href="#">Menu</a>
      <ul>
        <li><a href="#">Sub-menu 1</a></li>
        <li><a href="#">Sub-menu 2</a></li>
      </ul>
    </li>
  </ul>
</div>

... se ve así (pasa el ratón por encima del enlace!):

Listas numeradas automáticamente con CSS

Las propiedades CSS counter-reset, counter-increment y content junto con la función counters() permiten crear listas numeradas automáticamente con CSS.

Ejemplo de listas numeradas automáticamente con CSS: este código:

<style>
.numera ol {
  counter-reset: item;
}
.numera ol > li {
  list-style:none;
}
.numera ol > li:before {
  content: counters(item, ". ") ".- ";counter-increment: item;
}
</style>
<div class="numera">
  <ol type="1">
    <li>elemento 1</li>
    <li>elemento 2
      <ol type="1">
        <li>elemento 2-1</li>
        <li>elemento 2-2
          <ol type="1">
            <li>elemento 2-2-1</li>
            <li>elemento 2-2-2</li>
            <li>elemento 2-2-3</li>
          </ol>
        </li>
        <li>elemento 2-3</li>
      </ol>
    </li>
    <li>elemento 3</li>
  </ol>
</div>

... se ve así:

  1. elemento 1
  2. elemento 2
    1. elemento 2-1
    2. elemento 2-2
      1. elemento 2-2-1
      2. elemento 2-2-2
      3. elemento 2-2-3
    3. elemento 2-3
  3. elemento 3

Recursos

Deja un comentario