Listas
Profesor: Javier López
Volver
Listas
Listas no ordenadas
Listas ordenadas
Listas con imágenes en vez de viñetas
Viñetas de colores
Listas
Las listas son muy útiles cuando queremos ofrecer una lista de elementos, palabras, frases o enlaces uno debajo del otro. Si estos elementos van encabezados por una bolita o un cuadrado son listas no ordenadas, si por el contrario van encabezados por números (correlativos: 1, 2...), letras ordenadas alfabeticamente (A, B...) o números romanos (I, II...) son listas ordenadas.

Así, para crear listas utilizamos dos etiquetas.

En ambos casos, cada uno de los términos (ordenados o no) que hay dentro de las etiquetas del párrafo anterior, se deben encerrar entre las etiquetas <li> y </li>.

Para mostrar algunos ejemplos vamos a utilizar la muy útil, interesante, actual, cónica y boreal lista de los Reyes Godos recortada en versión remix.

Ejemplo de lista no ordenada
Esto es una lista no ordenada de los primeros Reyes Godos (del Reino Tolosano):
<ul>
    <li> Ataúlfo (410-415) </li>    
    <li> Sigérico (415) </li>    
    <li> Walia (415-418) </li>    
    <li> Teodorico I (418-451) </li>
</ul>
El resultado en el navegador es:

Esto es una lista no ordenada de los primeros Reyes Godos (del Reino Tolosano):
Ejemplo de lista ordenada
Esto es una lista ordenada de los primeros Reyes Godos (del Reino Visigodo-Católico):
<ol>    
    <li> Recaredo (586-601) </li>
    <li> Liuva II (601-603) </li>
    <li> Witérico (603-610) </li>
    <li> Gundemaro (610-612) </li>
</ol>
El resultado en el navegador es:

Esto es una lista ordenada de los primeros Reyes Godos (del Reino Visigodo-Católico):
  1. Recaredo (586-601)
  2. Liuva II (601-603)
  3. Witérico (603-610)
  4. Gundemaro (610-612)

Listas no ordenadas
De manera predefinida delante de cada línea de la lista se coloca automáticamente como viñeta un pequeño círculo negro (llamado disc). Si queremos otro tipo de viñeta podemos especificarlo en la etiqueta <ul> añadiendo el parámetro type, seguido de los valores circle para utilizar círculos sin relleno o square para cuadrados.

<ul type="circle"> (visualiza círculos sin relleno como viñetas).


Lista (no ordenada) con viñetas de circulos blancos de los primeros Reyes Godos (del Reino Arriano):
<ul type="square"> (visualiza cuadrados como viñetas).

Lista (no ordenada) con viñetas de cuadrados de los últimos Reyes Godos (de todos los reinos):

Listas ordenadas
Por defecto, para numerar las listas ordenadas se utilizan números que por defecto empiezan por el 1. Para utilizar letras mayúsculas, minúsculas o números romanos podemos añadir el parámetro type, seguido de uno de los siguientes valores:
Por ejemplo, utilizando el código:
<ol type="A"> (se crea una lista ordenada alfabeticamente por letras mayúsculas).

Lista (ordenada) con letras mayúsculas de los Reyes Godos con los nombres más in del momento:
  1. Sisebuto (612-621)
  2. Atanagildo (555-567)
  3. Leovigildo (571/72-586)


Además, podemos indicar por qué número o letra tiene que empezar a "contar", añadiendo el parámetro start:
<ol start="4"> (empezará la lista por el número 4 y utilizará números ya que no hemos especificado ningún valor en type).

Lista (ordenada) que se inicia en el número 4 de los Reyes Godos con los nombres más in del momento (bis):
  1. Ervigio (680-687)
  2. Sisenando (631-636)
  3. Gundemaro (610-612)


Por último, también es posible utilizar de manera conjunta los parámetros type y start:
<ol type="a"" start="2"> (crea una lista ordenada alfabeticamente por letras minúsculas que empiezan por la segunda letra).

Lista (ordenada) que se inicia en el número 4 de los últimos Reyes Godos del Reino Tolosano:
  1. Turismundo (451-453)
  2. Theudiselo (548-549)
  3. Teodorico II (453-466)


Listas con imágenes en vez de viñetas
Tenemos la posibilidad de sustituir las viñetas predeterminadas (círculos o cuadros) por imágenes gif o png añadiendo un poco de código CSS.

Aunque lo normal y habitual sería añadir este código CSS dentro del apartado dedicado al CSS, como todavía no hemos llegado a ese punto vamos a introducir este código directamente en la etiqueta html correspondiente.

Vamos a añadir un icono de una flecha en formato gif () que tenemos en la carpeta 'img' delante de cada elemento de la lista:

   <ul style="list-style:none;list-style-image:url('img/flecha.gif')">
	<li> Ataúlfo (410-415) </li>
	<li> Sigérico (415) </li>
	<li> Walia (415-418) </li>
	<li> Teodorico I (418-451) </li>
   </ul>
El código no cambia respecto a los anteriores, excepto por el añadido del estilo CSS, que en este caso, lo hemos añadido directamente en la etiqueta.
Así, con list-style:none eliminamos las viñetas, mientras que con list-style-image especificamos qué imagen se debe utilizar.
Viñetas de colores

Mis Reyes Godos preferidos:
Normalmente el texto y la viñeta (círculo o cuadrado) de cada elemento de la lista comparten el mismo color, el tipo y el tamaño de la fuente, por lo que si queremos independizar a estos dos elementos para darles a cada uno de ellos por separado un estilo diferente, vamos a tener que encerrar al texto dentro de una etiqueta <span>, para que de esta manera podamos hacer referencia a este tipo de etiqueta en el código CSS.

Vamos a hacer un ejemplo con una versión muy interesante y resumida de una lista de mis Reyes Godos preferidos.

   <ul>
	<li> <span>Ataúlfo (410-415)</span> </li>
	<li> <span>Sigérico (415)</span> </li>
	<li> <span>Walia (415-418)</span> </li>
	<li> <span>Teodorico I (418-451)</span> </li>
   </ul>
El único cambio es que el texto de cada elemento de la lista está encerrado en una etiqueta <span>, para posteriormente en el CSS decir algo así como 'todo el contenido que esté marcado con un <span> que sea de un color y un tamaño determinado' .

Así, el código CSS, que puede ir en un fichero CSS externo o bien dentro de la sección <head> del propio fichero html, es el siguiente:

<style type="text/css">

    ul li{
       color:red;
       font-weight:bold;
       font-size:8px;
    }

    ul li span{
       color:black;
       font-size:15px;
    }
    
</style>
En el primer selector del CSS: 'ul li{' estamos haciendo referencia a cada uno de los elementos <li> de la lista <ul>. En este caso se hace referencio a las viñetas (bolitas o cuadrados).

El segundo selector CSS: 'ul li span{' apunta a todas las etiquetas de tipo <span> que se encuentren dentro de etiquetas de tipo <li> y que a su vez éstas estén dentro de etiquetas <ul>. En este caso se refiere a los textos de las viñetas, a los que se les aplica un color negro y un tamaño de 15 píxeles.