| NOTA : Muchas de las definiciones son extraidas tal cual o simplificadas de la Recomendación de W3C sobre las Hojas de Estilo en Cascada, Nivel 2 Revisión 1 (CSS2.1), y de la Recomendación del W3C "HTML 4.01 Specification" que están en la Sección HTML/CSS de esta web. |
| En este tutorial vamos a aprender a utilizar listas. Dentro de éstas trabajaremos con las listas de definiciones y con las listas propiamente dichas, en sus dos versiones: ordenadas y no ordenadas. |
| Para ello vamos a ir utilizando conceptos que ya hemos aprendido en anteriores tutoriales (asi vamos afianzando nuestros conocimientos), a la vez que vamos describiendo y aprendiendo los nuevos. |
| Intercalaremos definiciones y conceptos tanto de HTML (las Definiciones y las Listas) como en CSS (propiedades para formatear visualmente las listas que utilicemos). |
| |
 Lista de Definiciones:
|
| Es un tipo de listas muy particular y restringido. Sólo consta de una lista de términos con sus descriciones respectivas. También es cierto que es muy facil de utilizar. |
< DL > < / DL > |
| Son las etiquetas de apertura y cierre de una lista de definiciones. Ambas son obligatorias. Entre la primera y la última, escribiremos los datos de nuestra lista. |
< DT > |
| Es la etiqueta de los términos a definir en la lista. Podemos escribir tantos como queramos. Estos términos aparecen alineados al borde izquierdo de su bloque contenedor. Tiene etiqueta de cierre < / DT > pero es opcional. |
< DD > |
| Es la etiqueta de las definiciones de cada término. Éstos aparecen alineados a la izquierda, pero con una sangría hacia la derecha. Tambien tiene etiqueta de cierre < / DD > pero como en el caso anterior, es opcional. |
| |
|
| Pongamos un fichero html con la siguiente estructura: |
 |
| Al ejecutar el EJEMPLO, vemos que en el bloque amarillo, aparece una lista de definiciones sin ningun tipo de formateo visual, es decir, sin ningun código CSS asociado. En el bloque naranja he añadido unas mejoras visuales a los términos. Asi queda el resultado de las dos listas. |
| |
Listas no ordenadas y ordenadas: |
| Las listas, como su nombre indica son listas de varios elementos, que pueden estar o no ordenados. Para especificar su orden o no, existen dos etiquetas distintas, siendo la etiqueta que describe el contenido de la lista, la misma para ambos casos. |
< UL > < / UL > |
| Son las etiquetas de apertura y cierre de las listas NO ordenadas. Ambas son obligatorias. Entre la primera y la última, escribiremos los elementos de nuestra lista no ordenada. En este caso, cada elemento de la lista irá precedido de un simbolito a modo de marcador, que variaremos a nuestro antojo cuando veamos las propiedades CSS correspondientes. |
< OL > < / OL > |
| Son las etiquetas de apertura y cierre de las listas ORDENADAS. Ambas son obligatorias. Entre la primera y la última, escribiremos los elementos de nuestra lista ordenada. En este caso, cada elemento de la lista irá precedido de un número ascendente empezando desde el 1 a modo de marcador, que variaremos a nuestro antojo cuando veamos las propiedades CSS correspondientes. |
< LI > |
| Son los objetos o elementos de la lista. Tiene etiqueta de cierre < / LI > pero es opcional. |
| |
|
| Pongamos un fichero html con la siguiente estructura: |
 |
| Al ejecutar el EJEMPLO, en el bloque amarillo, hay dos listas. La superior es NO ORDENADA y la inferior es una doble lista encadenada, esta vez ordenada. En el bloque naranja, de nuevo hay dos listas. La superior es una ordenada y la inferior es una doble lista encadenada NO ORDENADA. Tanto la numeracion en las ordenadas, como los marcadores gráficos en las no ordenadas, se especifican via CSS. |
| Pasamos ahora al formateo de las listas ordenadas, no ordenadas y de definiciones por medio de propiedades CSS. |
| |
LIST-STYLE-TYPE |
| Especifica el tipo de marcador que se visualiza antes del elemento de la lista si la propiedad list-style-image tiene el valor none (en caso contrario, esta ultima tiene prioridad y el list-style-type no tiene efecto). Veremos ahora despues la propiedad list-style-image. Existen tres tipos de marcadores, los gráficos (glyphs), los numericos y los alfabeticos. |
| Los valores que puede tomar son los siguientes: |
|
 disc, circle, square |
|
Disco hueco, circulo relleno y cuadrado respectvamente. Su representación puede variar dependiendo del navegador que se utilice. |
|
decimal |
|
Numero decimal enpezando por el 1. |
|
decimal-leading-zero |
|
Decimal empezando en 1 pero complementado con ceros a la izquierda 01, 02, 03... |
|
decimal-leading-zero |
|
Decimal empezando en 1 pero complementado con ceros a la izquierda 01, 02, 03... |
|
lower-roman |
|
Numeros romanos en minúsculas. |
|
upper-roman |
|
Numeros romanos en mayusculas. |
|
georgian |
|
Numeracion georgiana. |
|
armenian |
|
Numeracion armenia. |
|
lower-latin o lower-alpha |
|
Letras minusculas en ASCII |
|
upper-latin o upper-alpha |
|
Letras mayusculas en ASCII |
|
lower-greek |
|
Letras minúsculas griegas clásicas. |
|
|
| NOTA: Estas propiedades se utilizan para dar formato a listas UL o a listas OL completas, pero tambien se pueden utilizar para formatear un elemento concreto LI. Tambien hay que tener en cuenta, que un elemento UL puede formatearse para que use una numeracion decimal, y que un elemento OL puede formatearse para que utilice marcadores glyphs, pero no es lo correcto. Debemos utilizar marcadores que denoten orden en listas OL y marcadores solo representativos en listas UL. |
| El siguiente código muestra dos listas encadenadas, una ordenada y otra desordenada. He escrito ciertas propiedades CSS en una misma linea para que el codigo no sea tan largo. |
 |
| La ejecucion del EJEMPLO de dicho código, deja ver claramente el efecto de la propiedad list-style-type. |
| El siguiente muestra todos los formatos existentes. |
 |
| Puedes ejecutar el EJEMPLO , pero como en IExplorer no se ven todas las posibilidades, aqui os dejo un pantallazo modificado para que aparezca en dos columnas, de la salida por pantalla de Mozilla Firefox. |
 |
Español
English
