Listas

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

La propiedad compuesta list-style

La propiedad compuesta list-style permite establecer en una sola propiedad los valores de las propiedades list-style-type, list-style-image y list-style-position.

Tipo predefinidos de marcador: list-style-type

El marcador de la lista se modifica con la propiedad list-style-type. Hay muchos tipos de marcadores predefinidos, aunque algunos navegadores no muestran todos los estilos existentes. 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 Firefox le da lo mismo uno que otro, es mejor utilizar sólo lower-alpha y upper-alpha.

Firefox 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, Firefox 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 Firefox 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 Firefox 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, Firefox 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.

Los estilos hebrew, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha no aparecen en la recomendación CSS 2.1 (actualmente -octubre de 2007- en fase de borrador), aunque sí en el módulo CSS3: listas (actualmente -octubre de 2007- en fase de borrador). Amaya muestra un mensaje de error cuando se utiliza alguno de estos estilos.

Los navegadores suelen utilizar estilos de marcadores distintos para las sublistas no ordenadas, pero no en las listas ordenadas:

		Esto es un punto de una lista Esto es otro punto de la misma lista Esto es un punto de una sublista Esto es otro punto de la misma sublista Esto es un punto de una sub-sublista Esto es otro punto de la misma sub-sublista Esto es un punto de una sub-sub-sublista Esto es otro punto de la misma sub-sub-sublista
		Esto es un punto de una lista Esto es otro punto de la misma lista Esto es un punto de una sublista Esto es otro punto de la misma sublista Esto es un punto de una sub-sublista Esto es otro punto de la misma sub-sublista Esto es un punto de una sub-sub-sublista Esto es otro punto de la misma sub-sub-sublista

Las listas ordenadas y no ordenadas son equivalentes. Los navegadores muestran números en las listas ordenadas y símbolos en las listas no ordenadas, pero desde la hoja de estilo se puede invertir la presentación:

		Esto es un punto de una lista no ordenada Esto es otro punto de la misma lista no ordenada Esto es un punto de una sublista ordenada Esto es otro punto de la misma sublista ordenada
	ul { list-style-type: decimal; } ol { list-style-type: disc; }	Esto es un punto de una lista no ordenada Esto es otro punto de la misma lista no ordenada Esto es un punto de una sublista ordenada Esto es otro punto de la misma sublista ordenada

Volver al índice

Imágenes como marcador: list-style-image

La propiedad list-style-image permite utilizar la imagen que se quiera 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: list-style-position

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

Distancia del marcador: marker-offset

La propiedad marker-offset establece la distancia del marcador al elemento de la lista. Esta propiedad afecta a los marcadores creados con los pseudo-elementos :before y :after.

ul { list-style-type: none; } li:before { content: "***"; display: marker; marker-offset: 40px; }

Esto es un punto de una lista Esto es otro punto de la misma lista

Ni Firefox ni Internet Explorer son capaces de interpretar esta propiedad (Internet Explorer ni siquiera es capaz de mostrar el contenido generado con los pseudo-elementos :before y :after). Además, esta propiedad no está incluida en la recomendación CSS 2.1 (actualmente -octubre de 2007- en fase de borrador), por lo que no tiene sentido utilizarla.

Volver al índice