Listas

Tipo de Marcador

La propiedad list-style-type permite establecer el marcador que se usará para señalar el item de una lista. Las palabras reservadas que se admiten como posibles valores para la propiedad son múltiples, destacando los siguientes:

• disc : Círculo relleno. Valor por defecto de las listas no ordenadas.

• circle : Círculo sin rellenar.

• none : Sin símbolo marcador.

• square : Cuadrado relleno.

• decimal : El marcador es un número decimal. Valor por defecto de las listas ordenadas.

• decimal-leading-zero : El marcador es un número decimal con un zero delante.

• lower-latin : El marcador es una letra del alfabeto latino en mínuscula.

• upper-latin : El marcador es una letra del alfabeto latino en mayúscula.

• lower-roman : El marcador es un número romano en minúsculas.

• upper-roman : El marcador es un número romano en mayúsculas.

Veamos algunos ejemplos de uso:

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-latin;}

Ejemplo de lista con list-style-type: circle;

Ejemplo de lista con list-style-type: square;

Ejemplo de lista con list-style-type: upper-roman;

Ejemplo de lista con list-style-type: lower-latin;

Posición del Marcador

La propiedad list-style-position permite establecer la posición del marcador respecto el ítem de la lista. Las palabras reservadas que se admiten como posibles valores para la propiedad son :

• inside : El marcador se encuentra dentro del ítem de la lista.

• outside : El marcador se encuentra fuera del ítem de la lista. Es el valor por defecto de la propiedad.

Veamos algunos ejemplos de uso:

ul.a {
  list-style-position: outside;
}

ul.b {
  list-style-position: inside;
}

Ejemplo de lista con list-style-position: outside; (se pintan los bordes de los elementos de la lista para ver el efecto):

Ejemplo de lista con list-style-position: inside; (se pintan los bordes de los elementos de la lista para ver el efecto):

Imagen para el Marcador

La propiedad list-style-image permite establecer la imagen que se utilizará como marcador del ítem de la lista. El valor por defecto para esta propiedad es none, lo que significa que no se usa ninguna imagen personalizada. La sintaxis para esta propiedad es la siguiente:

 list-style-image: url('RUTA_DE_LA_IMAGEN');

Veamos algunos ejemplos de uso:

ul {
  list-style-image: url('https://cdn4.iconfinder.com/data/icons/fugue/icon_shadowless/open-source.png');
}

Tipo de Lista (Método Abreviado)

La propiedad list-style es un método abreviado que permite establecer el tipo, posición, e imagen del marcador para la lista seleccionada mediante una única asignación. El tipo se corresponde con la propiedad list-style-type, la posición con la propiedad list-style-position y la imagen con la propiedad list-style-image. Su sintaxis es la siguiente:

list-style: tipo posición imagen;

A continuación, se presentan algunos ejemplos de uso:

/* Se establece un marcador de tipo cuadrado, ubicado dentro del ítem de la lista y cuya imagen se encuentra en el fichero local sqpurple.gif */
ul.a {
  list-style: square inside url("sqpurple.gif");
}
/* Se establece un marcador de tipo circular y ubicado fuera del ítem de la lista */
ul.b {
   list-style: circle outside;
}