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

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

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

Autor: Bartolomé Sintes Marco
Última modificación: 6 de noviembre de 2003