logo

TechCodeview

CSS-listestiler

Listen i CSS bestemmer hvordan innholdet eller elementene er oppført på en bestemt måte, det vil si at de kan ordnes enten pent eller tilfeldig, noe som hjelper til med å lage en ren nettside. Fordi de er tilpasningsdyktige og enkle å håndtere, kan de brukes til å organisere store mengder materiale. Listens standardstil er kantløs. Listen kan deles inn i to kategorier:

    Uordnet liste:Som standard er listeelementene i uordnede lister merket med kuler, som er bittesmå svarte sirkler.Bestilt liste:Listeelementene i ordnede lister identifiseres med tall og bokstaver.

Følgende CSS-listeegenskaper er tilgjengelige for bruk for å kontrollere CSS-listene:

    Liste-stil-type:Denne egenskapen brukes til å bestemme utseendet til listeelementmarkøren, for eksempel en plate, et tegn eller en egendefinert tellerstil.Liste-stil-bilde:Bildene som vil tjene som listeelementmarkører kan spesifiseres ved hjelp av denne parameteren.Liste-stil-posisjon:Den beskriver hvor markeringsboksen skal være om hovedblokkboksen.Listestil:Listestilen er konfigurert med dette attributtet.

Vi skal nå lære mer om disse egenskapene gjennom eksempler.

Liste-stil-type egenskap

Standard listetype markør kan endres til en rekke andre typer, inkludert firkant, sirkel, romertall, latinske bokstaver og mange flere. Oppføringene i en uordnet liste er merket med runde kuler (•), mens elementene i en ordnet liste er nummerert som standard med arabiske tall (1, 2, 3, osv.).

Merkene eller kulene vil bli fjernet hvis vi setter verdien til ingen.

Syntaks:

liste-stil-type:verdi;

ulemper med nettbank

Vi kan bruke verdien som følger:

  1. sirkel
  2. desimal, f.eks.:1,2,3 osv
  3. desimal-ledende-nuller , f.eks. :01,02,03,04 osv.
  4. lavere-romersk
  5. øvre-romersk
  6. lavere alfa, f.eks. a,b,c, etc
  7. øvre alfa, f.eks. A, B, C osv
  8. torget

Merk: Standard utfylling og marg er også inkludert i listen. Det er nødvendig å legge til padding:0 og margin:0 til
    og
      tagger for å eliminere dette.

Eksempel

Dette eksemplet viser en CSS-liste med flere listestiltyper og verdier satt til kvadratisk og øvre alfa og mange.

 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>

Produksjon

CSS-listestiler