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

Tutorial listas CSS: CSS List tutorial

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

Menu
- Sub-menu 1
- Sub-menu 2

Recursos

Listamatic: Listamatic, the Power of CSS applied to List

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>