Listas

En esta lección aprenderás las propiedades que se pueden aplicar a una lista:

• Tipo de marcador: tipos predefinidos
• Tipo de marcador: imágenes
• Posición del marcador

Tipo de marcador: tipos predefinidos

El marcador de la lista se modifica con la propiedad list-style-type. Hay muchos tipos de marcadores predefinidos, aunque los navegadores no muestran necesariamente todos. Estos son algunos de ellos:

	ul { list-style-type: none; }	Esto es un punto de una lista Esto es otro punto de la misma lista
	ul { list-style-type: disc; }	Esto es un punto de una lista Esto es otro punto de la misma lista
	ul { list-style-type: circle; }	Esto es un punto de una lista Esto es otro punto de la misma lista
	ul { list-style-type: square; }	Esto es un punto de una lista Esto es otro punto de la misma lista
	ul { list-style-type: decimal; }	Esto es un punto de una lista Esto es otro punto de la misma lista
	ul { list-style-type: decimal-leading-zero; }	Esto es un punto de una lista Esto es otro punto de la misma lista
	ul { list-style-type: lower-roman; }	Esto es un punto de una lista Esto es otro punto de la misma lista
	ul { list-style-type: upper-roman; }	Esto es un punto de una lista Esto es otro punto de la misma lista
	ul { list-style-type: lower-greek; }	Esto es un punto de una lista Esto es otro punto de la misma lista
	ul { list-style-type: lower-alpha; }	Esto es un punto de una lista Esto es otro punto de la misma lista
	ul { list-style-type: lower-latin; }	Esto es un punto de una lista Esto es otro punto de la misma lista
	ul { list-style-type: upper-alpha; }	Esto es un punto de una lista Esto es otro punto de la misma lista
	ul { list-style-type: upper-latin; }	Esto es un punto de una lista Esto es otro punto de la misma lista
	ul { list-style-type: hebrew; }	Esto es un punto de una lista Esto es otro punto de la misma lista
	ul { list-style-type: georgian; }	Esto es un punto de una lista Esto es otro punto de la misma lista
	ul { list-style-type: armenian; }	Esto es un punto de una lista Esto es otro punto de la misma lista
	ul { list-style-type: cjk-ideographic; }	Esto es un punto de una lista Esto es otro punto de la misma lista
	ul { list-style-type: hiragana; }	Esto es un punto de una lista Esto es otro punto de la misma lista
	ul { list-style-type: katakana; }	Esto es un punto de una lista Esto es otro punto de la misma lista
	ul { list-style-type: hiragana-iroha; }	Esto es un punto de una lista Esto es otro punto de la misma lista
	ul { list-style-type: katakana-iroha; }	Esto es un punto de una lista Esto es otro punto de la misma lista

Los estilos lower-latin y lower-alpha son los mismos, así como los estilos upper-latin y upper-alpha. El Internet Explorer no es capaz de representar lower-latin ni upper-latin, y como a Mozilla le da lo mismo uno que otro, es mejor utilizar sólo lower-alpha y upper-alpha.

Mozilla es capaz de representar todos los estilos, pero en algunos casos es necesario tener instaladas las fuentes correspondientes. Si no están instaladas las fuentes, Mozilla muestra un signo de interrogación (?). Internet Explorer muestra un punto cuando no es capaz de representar el estilo. En la página sobre bugs de Mozilla hay un bug sobre este tema (bug 14713).

La recomendación CSS 2 no especifica qué debe hacerse cuando se utiliza un estilo alfabético y la lista tiene más elementos que el alfabeto correspondiente. Tanto Mozilla como Internet Explorer y Amaya hacen como en las matrículas de los coches, es decir, después de Z ponen AA.

En el estilo decimal-leading-zero, Mozilla sólo pone un cero delante de los primeros nueve elementos (los que llevan los números del 1 al 9), aunque la lista tenga más de 100 elementos.

Volver al índice

Tipo de marcador: imágenes

La propiedad list-style-image te permite utilizar la imagen que quieras como marcador de una lista. El único inconveniente es que el tamaño del marcador no cambia al cambiar desde el navegador el tamaño de la fuente.

	ul { list-style-image: url("cruz7x7.png"); }	Esto es un punto de una lista Esto es otro punto de la misma lista
	ul { list-style-image: url("smiley.png"); }	Esto es un punto de una lista Esto es otro punto de la misma lista

Volver al índice

Posición del marcador

La propiedad list-style-position establece la posición del marcador con respecto al resto del elemento de la lista: dentro (inside) o fuera (outside)

	ul { list-style-position: inside; } li { background-color: lightblue; }	Esto es un punto de una lista Esto es otro punto de la misma lista
	ul { list-style-position: outside; } li { background-color: lightblue; }	Esto es un punto de una lista Esto es otro punto de la misma lista

Volver al índice