Listas: Viñetas (o bullets) personalizadas (list-style-type)

Por defecto, los navegadores muestran los elementos de las listas no ordenadas con una viñeta formada por un pequeño círculo de color negro. Los elementos de las listas ordenadas se muestran por defecto con la numeración decimal utilizada en la mayoría de países.

No obstante, CSS proporciona varias propiedades para controlar el tipo de viñeta que muestran las listas. Dicha propiedad es list-style-type.

Si se especifica list-style-type:none, las viñetas de la lista se eliminarán. Se trata de un valor muy utilizado, pues es imprescindible para crear menús basados en listas.

El resto de valores de la propiedad list-style-type se dividen en tres tipos: gráficos, numéricos y alfabéticos:

list-style-type: valores gráficos

Los valores gráficos podrán ser:

list-style-type: disc: muestra como viñeta un círculo relleno.

list-style-type: circle: muestra como viñeta un círculo vacío.

list-style-type: square: muestra como viñeta un cuadrado relleno.

List-style-type: valores numéricos

Los valores numéricos podrán ser:

list-style-type: decimal: 1,2,3...

list-style-type: decimal-leading-zero: 01, 02, 03...

list-style-type: lower-roman: i,ii,iii,iv...

list-style-type: upper-roman: I, II, III...

list-style-type: armenian (alfabeto armenio)

list-style-type: georgian

List-style-type: valores alfanuméricos

Los valores alfanuméricos se controlan mediante:

list-style-type: lower-latin: a, b, c...

list-style-type: lower-alpha: a, b, c...

list-style-type: upper-latin: A, B, C...

list-style-type: upper-alpha: A, B, C...

list-style-type: lower-greek.


REFERENCIA

CSS

SELECTORES

COLORES

BOX MODEL

FONDOS

POSICIONAMIENTO

VISUALIZACIÓN

TIPOGRAFÍA

TEXTO

ENLACES

IMÁGENES

LISTAS

TABLAS

FORMULARIOS

LAYOUT

Ejercicios

ANEXO