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.