La Lista en CSS determina cómo se enumeran los contenidos o elementos de cierta manera, es decir, se pueden organizar de forma ordenada o aleatoria, lo que ayuda a crear una página web limpia. Al ser adaptables y fáciles de manejar, pueden utilizarse para organizar grandes cantidades de material. El estilo predeterminado de la lista no tiene bordes. La lista se puede dividir en dos categorías:

Lista desordenada:De forma predeterminada, los elementos de la lista en listas desordenadas se indican con viñetas, que son pequeños círculos negros.Lista ordenada:Los elementos de la lista en listas ordenadas se identifican mediante números y letras.

Las siguientes propiedades de lista CSS están disponibles para su uso en el control de listas CSS:

Tipo de estilo de lista:Esta propiedad se utiliza para determinar el aspecto del marcador de elementos de la lista, como un disco, un carácter o un estilo de contador personalizado.Imagen-estilo-lista:Las imágenes que servirán como marcadores de elementos de la lista se pueden especificar utilizando este parámetro.Posición-estilo-lista:Describe dónde debe estar el cuadro de marcador con respecto al cuadro de bloque principal.Estilo de lista:El estilo de lista se configura con este atributo.

Ahora aprenderemos más sobre estas características a través de ejemplos.

Propiedad de tipo estilo lista

El tipo de marcador de lista predeterminado se puede cambiar a una variedad de otros tipos, incluidos cuadrados, círculos, números romanos, letras latinas y muchos más. Las entradas en una lista desordenada se indican con viñetas redondas (•), mientras que los elementos en una lista ordenada se numeran de forma predeterminada utilizando números arábigos (1, 2, 3, etc.).

Las marcas o viñetas se eliminarán si establecemos su valor en ninguno.

Sintaxis:

tipo-estilo-lista:valor;

anfitrión de Linux

Podemos usar el valor de la siguiente manera:

1. círculo
2. decimal, por ejemplo: 1,2,3, etc.
3. Ceros decimales a la izquierda, por ejemplo: 01,02,03,04, etc.
4. bajo romano
5. alto-romano
6. Alfa inferior, por ejemplo, a,b,c, etc.
7. Alfa superior, por ejemplo, A, B, C, etc.
8. cuadrado

Nota: El margen y el relleno predeterminados también se incluyen en la lista. Es necesario agregar padding:0 y margin:0 al

y
etiquetas para eliminar esto.

Ejemplo

Este ejemplo muestra una lista CSS con varios tipos de estilos de lista y valores establecidos en cuadrado y alfa superior y muchos.

 Example for CSS Lists .num{ list-style-type:decimal; } .alpha{ list-style-type:upper-alpha; } .circle{ list-style-type:circle; } .square{ list-style-type:square; } .disc{ list-style-type:disc; } <h2> Ordered Lists </h2> <ol class="order"> <li>ONE</li> <li>TWO</li> </ol> <h2> Unordered lists </h2> <ul> <li>ONE</li> <li>TWO</li> </ul> 

Producción