Cómo deshacerse de las viñetas en CSS

De forma predeterminada, cuando un navegador web muestra una lista desordenada en una página web, cada elemento de la lista tiene una viñeta anterior. Este comportamiento no siempre es deseable y es posible que no se ajuste al diseño general de la página. Con CSS, puede crear una clase para eliminar las viñetas de listas específicas en su página, o puede apuntar a la etiqueta HTML "ul" directamente para eliminar las viñetas de todas las listas de la página.

1

Cree una nueva página HTML en un editor de texto o una aplicación de desarrollo web.

2

Cree una lista desordenada simple agregando el siguiente HTML al cuerpo de la página:

  • Artículo 1
  • Artículo 2
  • Artículo 3

Guarde la página y visualícela en un navegador web. Verá que el navegador muestra una viñeta junto a cada elemento de la lista.

3

Agregue el siguiente código a la sección de la página:

.myList {tipo de estilo de lista: ninguno;}

Esto elimina las viñetas de cualquier lista que utilice la clase "myList". Guarde la página y vuelva a cargarla en su navegador web para ver los cambios.

4

Cambie la regla CSS:

.myList {tipo de estilo de lista: ninguno;}

A:

ul {tipo de estilo de lista: ninguno; }

Esto apunta a la etiqueta HTML "ul" y elimina las viñetas de todas las listas desordenadas de su página. Agregue una segunda lista de ejemplo y vea la página en su navegador web para verificar que ambas listas se muestren sin viñetas.