La llista en CSS determina com s'enumeren els continguts o elements d'una manera determinada, és a dir, es poden organitzar de manera ordenada o aleatòria, cosa que ajuda a crear una pàgina web neta. Com que són adaptables i senzills de manejar, es poden utilitzar per organitzar grans quantitats de material. L'estil predeterminat de la llista és sense vores. La llista es pot dividir en dues categories:
Les següents propietats de llistes CSS estan disponibles per utilitzar-les per controlar les llistes CSS:
Ara aprendrem més sobre aquestes característiques mitjançant exemples.
Propietat d'estil de llista
El tipus de marcador de llista predeterminat es pot canviar a una varietat d'altres tipus, com ara quadrat, cercle, números romans, lletres llatines i molts més. Les entrades d'una llista no ordenada es denoten amb vinyetes rodones (•), mentre que els elements d'una llista ordenada estan numerats per defecte amb números aràbics (1, 2, 3, etc.).
Les marques o vinyetes s'eliminaran si establim el seu valor a cap.
Sintaxi:
llista-estil-tipus:valor;
convertir cadena int java
Podem utilitzar el valor de la següent manera:
- cercle
- decimal, per exemple:1,2,3, etc
- zeros-decimals, p. ex. :01,02,03,04, etc
- inferior-romà
- romà superior
- alfa inferior, per exemple, a,b,c, etc
- alfa superior, per exemple, A, B, C, etc
- quadrat
Nota: el farciment i el marge per defecte també s'inclouen a la llista. Cal afegir padding:0 i margin:0 alietiquetes per eliminar-ho.
- etiquetes per eliminar-ho.
Exemple
Aquest exemple mostra una llista CSS amb diversos tipus i valors d'estil de llista establerts a quadrat i alfa superior i molts.
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>
Sortida