2 min de lectura

Viñetas personalizadas

CSS define varias propiedades para controlar el tipo de viñeta que muestran las listas, además de poder controlar la posición de la propia viñeta. La propiedad básica es la que controla el tipo de viñeta que se muestra y que se denomina list-style-type.

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

  • Los valores gráficos son disc, circle y square y muestran como viñeta un círculo relleno, un círculo vacío y un cuadrado relleno respectivamente.
  • Los valores numéricos están formados por decimal, decimal-leading-zero, lower-roman, upper-roman, armenian y georgian.
  • Por último, los valores alfanuméricos se controlan mediante lower-latin, lower-alpha, upper-latin, upper-alpha y lower-greek.

Posición de las viñetas

La propiedad list-style-position permite poner la viñeta por dentro o fuera del párrafo con las propiedades inside | outside

List-style-position

Viñetas con imágenes

Cuando se requiere personalizar el aspecto de las viñetas, se debe emplear la propiedad list-style-image, que permite mostrar una imagen propia en vez de una viñeta automática.

Las imágenes personalizadas se indican mediante la URL de la imagen. Si no se encuentra la imagen o no se puede cargar, se muestra la viñeta automática correspondiente (salvo que explícitamente se haya eliminado mediante la propiedad list-style-type).

Shorthand para viñetas

La propiedad se denomina list-style donde se indica en cualquier orden tipo, posición e imagen.

En el siguiente ejemplo se indica una imágen y una viñeta automática en caso que no se pueda cargar la imagen

En el ejemplo siguiente se quitan las viñetas

Compartir
Licenciada en Informática con Maestría en Tecnologías de la Información. Docente por convicción con trece años de experiencia, desarrolladora desde hace nueve años trabajando actualmente con desarrollo WEB para alta disponibilidad, además de ser consultor independiente y capacitador. Participe del movimiento del software libre como fiel apasionada, reconocida por su actividad en la comunidad y su participación en la inclusión.

DEJA UNA RESPUESTA

Please enter your comment!
Please enter your name here