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
Líder técnico en equipos de desarrollo de software. Profesor de Desarrollo Web en la Universidad de Guadalajara. Emprendedora. Fundadora y CTO de CORB.mx. Ponente y tallerista. Colaboradora en proyectos de software libre y Open Source. Comprometida con la comunidad y la industria de la tecnología. Enfocada en el empoderamiento de las mujeres.

Deja tus comentarios

This site uses Akismet to reduce spam. Learn how your comment data is processed.