Volver al índice Listas

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


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:

Ejemplo para MozillaEjemplo para Internet Explorer ul { list-style-type: none; }
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
Ejemplo para MozillaEjemplo para Internet Explorer ul { list-style-type: disc; }
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
Ejemplo para MozillaEjemplo para Internet Explorer ul { list-style-type: circle; }
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
Ejemplo para MozillaEjemplo para Internet Explorer ul { list-style-type: square; }
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
Ejemplo para MozillaEjemplo para Internet Explorer ul { list-style-type: decimal; }
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
Ejemplo para Mozilla ul { list-style-type: decimal-leading-zero; }
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
Ejemplo para MozillaEjemplo para Internet Explorer ul { list-style-type: lower-roman; }
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
Ejemplo para MozillaEjemplo para Internet Explorer ul { list-style-type: upper-roman; }
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
Ejemplo para Mozilla ul { list-style-type: lower-greek; }
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
Ejemplo para MozillaEjemplo para Internet Explorer ul { list-style-type: lower-alpha; }
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
Ejemplo para Mozilla ul { list-style-type: lower-latin; }
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
Ejemplo para MozillaEjemplo para Internet Explorer ul { list-style-type: upper-alpha; }
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
Ejemplo para Mozilla ul { list-style-type: upper-latin; }
  • Esto es un punto de una lista
  • Esto es otro punto de la misma lista
Ejemplo para Mozilla 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.

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

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