Per defecte, quan un navegador web mostra una llista no ordenada en una pàgina web, cada element de la llista té una vinyeta anterior. Aquest comportament no sempre és desitjable i pot ser que no s’adapti al disseny general de la pàgina. Amb CSS, podeu crear una classe per eliminar les vinyetes de llistes específiques de la vostra pàgina o podeu orientar directament l'etiqueta HTML "ul" per eliminar les vinyetes de totes les llistes de la pàgina.
1
Creeu una nova pàgina HTML en un editor de text o una aplicació de desenvolupament web.
2
Creeu una llista senzilla sense ordenar afegint l'HTML següent al cos de la pàgina:
- Tema 1
- Tema 2
- Tema 3
Deseu la pàgina i visualitzeu-la en un navegador web. Veureu que el navegador mostra una vinyeta al costat de cada element de la llista.
3
Afegiu el codi següent a la secció de la pàgina:
Això elimina les vinyetes de qualsevol llista mitjançant la classe "myList". Deseu la pàgina i torneu a carregar-la al navegador web per veure els canvis.
4
Canvieu la regla CSS:
.myList {list-style-type: none;}
Per a:
ul {list-style-type: none; }
Això s'orienta a l'etiqueta HTML "ul" i elimina les vinyetes de totes les llistes no ordenades de la vostra pàgina. Afegiu una segona llista d'exemple i visualitzeu la pàgina al navegador web per verificar que les dues llistes es mostrin sense vinyetes.
