Listas con CSS

Name: Listas con CSS
Brand: Jose Aguilar
SKU: joseaguilarblog-1963
Availability: InStock
Rating: 0 (0 reviews)

El objetivo de este artículo es definir que aspecto le quieres dar a las listas de tu sitio: numerado, con letras, números romanos, un pequeño gráfico, etc.

Las propiedades de las listas nos permiten establecer el estilo de las mismas, la imagen, número o letra de los diferentes Items y la posición de la misma.

Por ejemplo, podríamos definir una lista con una imagen como icono de los elementos de la lista aplicando el siguiente estilo o regla CSS:

<style type="text/css"> 
ul{list-style-image: url('punto.gif')} 
</style>

Donde estamos indicando que nuestras listas tengan la imagen «punto.gif» como icono de los elementos.

También tenemos las siguientes opciones:

Propiedad	Descripción	Valores	Detalles
list-style	Permite establecer el estilo de la lista, la imagen y/o la posición.	list-style-type	Tipos de listas
		list-style-position	Posición de la lista
		list-style-image	Imagen de la lista
list-style-type	Estilo aplicable a los marcadores visuales de las listas.	disc	Disco
		circle	Círculo
		square	Cuadrado
		decimal	Nro.decimal
		decimal-leading-zero	Nro.decimal comenzando de 0 No funciona en IE 5, 6 y 7
		lower-roman	Nro.romano minúscula
		upper-roman	Nro.romano mayúscula
		lower-greek	Letra griega minúscula No funciona en IE 5, 6 y 7
		lower-latin	Letra latina minúscula No funciona en IE 5, 6 y 7
		upper-latin	Letra latina mayúscula No funciona en IE 5, 6 y 7
		armenian	Letra armenia No funciona en IE 5, 6 y 7
		georgian	Letra gregoriana No funciona en IE 5, 6 y 7
		lower-alpha	Letra alfabeto en minúscula
		upper-alpha	Letra alfabeto en mayúscula
		none	Nada
list-style-image	Imagen aplicable a los elementos de las listas.	URL	URL
list-style-image	Imagen aplicable a los elementos de las listas.	none	Nada
list-style-position	Posición dentro de la lista de los elementos marcadores de las listas.	inside	Dentro
list-style-position		outside	Fuera