logo

TechCodeview

CSS-listestile

Listen i CSS bestemmer, hvordan indholdet eller elementerne er opført på en bestemt måde, dvs. de kan arrangeres enten pænt eller tilfældigt, hvilket hjælper med at skabe en ren webside. Fordi de er tilpasningsdygtige og nemme at håndtere, kan de bruges til at organisere store mængder materiale. Listens standardstil er uden kant. Listen kan opdeles i to kategorier:

    Uordnet liste:Som standard er listeelementerne i uordnede lister angivet med punkttegn, som er små sorte cirkler.Bestilte liste:Listeelementerne i ordnede lister er identificeret med tal og bogstaver.

Følgende CSS-listeegenskaber er tilgængelige til brug ved styring af CSS-listerne:

    Liste-stil-type:Denne egenskab bruges til at bestemme udseendet af listeelementmarkøren, såsom en disk, et tegn eller en brugerdefineret tællerstil.Liste-stil-billede:De billeder, der vil fungere som listeelementmarkører, kan angives ved hjælp af denne parameter.Liste-stil-position:Den beskriver, hvor markeringsboksen skal være omkring hovedblokkassen.Liste-stil:Listestilen er konfigureret med denne attribut.

Vi skal nu lære mere om disse karakteristika gennem eksempler.

Liste-stil-type egenskab

Standardlistetypen af ​​markør kan ændres til en række andre typer, herunder firkant, cirkel, romertal, latinske bogstaver og mange flere. Indtastningerne i en uordnet liste er angivet med runde punkttegn (•), mens punkterne i en ordnet liste er nummereret som standard med arabertal (1, 2, 3 osv.).

Mærkerne eller kuglerne vil blive fjernet, hvis vi sætter deres værdi til ingen.

Syntaks:

liste-stil-type:værdi;

javascript variabel global

Vi kan bruge værdien som følger:

  1. cirkel
  2. decimal, f.eks.:1,2,3 osv
  3. decimal-førende nuller, f.eks. :01,02,03,04 osv.
  4. lavere-romersk
  5. øvre-romersk
  6. lavere alfa, f.eks. a,b,c osv
  7. øvre alfa, f.eks. A, B, C osv
  8. firkant

Bemærk: Standardudfyldningen og -margenen er også inkluderet i listen. Det er nødvendigt at tilføje padding:0 og margin:0 til
    og
      tags for at fjerne dette.

Eksempel

Dette eksempel viser en CSS-liste med flere listetypetyper og værdier sat 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>

Produktion

CSS-listestile