logo

Estils de llista CSS

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:

    Llista no ordenada:Per defecte, els elements de la llista de les llistes no ordenades es denoten amb vinyetes, que són petits cercles negres.Llista ordenada:Els elements de la llista de les llistes ordenades s'identifiquen amb números i lletres.

Les següents propietats de llistes CSS estan disponibles per utilitzar-les per controlar les llistes CSS:

    Tipus d'estil de llista:Aquesta propietat s'utilitza per determinar l'aspecte del marcador d'elements de la llista, com ara un disc, un caràcter o un estil de comptador personalitzat.Imatge d'estil de llista:Les imatges que serviran com a marcadors d'elements de llista es poden especificar mitjançant aquest paràmetre.Llista-estil-posició:Descriu on hauria d'estar el quadre de marcador sobre el quadre de bloc principal.Estil de llista:L'estil de llista es configura amb aquest atribut.

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:

  1. cercle
  2. decimal, per exemple:1,2,3, etc
  3. zeros-decimals, p. ex. :01,02,03,04, etc
  4. inferior-romà
  5. romà superior
  6. alfa inferior, per exemple, a,b,c, etc
  7. alfa superior, per exemple, A, B, C, etc
  8. quadrat

Nota: el farciment i el marge per defecte també s'inclouen a la llista. Cal afegir padding:0 i margin:0 al
    i
      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

Estils de llista CSS