En algunos casos, debemos eliminar las viñetas de listas ordenadas y desordenadas. La eliminación de las viñetas de la lista no es una tarea compleja utilizando CSS. Se puede hacer fácilmente configurando el CSS estilo de lista o tipo de estilo de lista propiedad a ninguno .
El tipo de estilo de lista La propiedad CSS se utiliza para establecer el marcador (como un disco, carácter o el estilo de contador personalizado) de un lista elemento del artículo. Esta propiedad CSS nos ayuda a crear la lista sin viñetas. Sólo se puede aplicar a aquellos elementos cuyo valor de visualización esté establecido en elemento de lista. El tipo de estilo de lista La propiedad se hereda, por lo que se puede aplicar al elemento padre (como o
) para que se aplique a todos los elementos de la lista.
De forma predeterminada, los elementos de la lista ordenada están numerados con números arábigos (1, 2, 3, etc.) y los elementos de una lista desordenada están marcados con viñetas redondas (•). El tipo de estilo de lista La propiedad CSS nos permite cambiar el tipo de marcador de lista predeterminado a cualquier otro tipo, como cuadrado, círculo, números romanos, letras latinas y muchos más.
Si fijamos su valor en ninguno , eliminará los marcadores/balas. En lugar de eliminar las viñetas de una lista, podemos reemplazarlas con las imágenes. Hace que el sitio sea visualmente más atractivo. Se puede hacer utilizando el imagen-estilo-lista propiedad.
Entendamos cómo eliminar viñetas usando un ejemplo.
Ejemplo
En este ejemplo, utilizamos listas ordenadas y desordenadas y aplicamos la tipo de estilo de lista propiedad con el valor ninguno para eliminar las viñetas de los elementos de la lista.
ol { list-style-type: none; font-weight: bold; font-size: 20px; } ul { list-style-type: none; font-weight: bold; font-size: 20px; } <h2>Ordered list</h2> <ol> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> </ol> <h2>Unordered list</h2> <ul> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> </ul> Pruébalo ahora Producción
