logo

TechCodeview

CSS-liststilar

Listan i CSS bestämmer hur innehållet eller föremålen listas på ett visst sätt, det vill säga de kan ordnas antingen snyggt eller slumpmässigt, vilket hjälper till att skapa en ren webbsida. Eftersom de är anpassningsbara och enkla att hantera, kan de användas för att organisera stora mängder material. Listans standardstil är kantlös. Listan kan delas in i två kategorier:

    Oordnad lista:Som standard är listelementen i oordnade listor betecknade med punkter, som är små svarta cirklar.Beställd lista:Listelementen i ordnade listor identifieras med siffror och bokstäver.

Följande CSS-listegenskaper är tillgängliga för användning för att kontrollera CSS-listorna:

    Liststilstyp:Den här egenskapen används för att bestämma utseendet på listobjektsmarkören, till exempel en skiva, tecken eller anpassad räknarstil.List-stil-bild:Bilderna som kommer att fungera som markörer för listobjekt kan specificeras med denna parameter.Liststil-position:Den beskriver var markeringslådan ska vara om huvudblocklådan.Liststil:Liststilen är konfigurerad med detta attribut.

Vi ska nu lära oss mer om dessa egenskaper genom exempel.

Egenskap av liststilstyp

Standardlistans typ av markör kan ändras till en mängd andra typer, inklusive kvadrat, cirkel, romerska siffror, latinska bokstäver och många fler. Posterna i en oordnad lista betecknas med runda kulor (•), medan objekten i en ordnad lista är numrerade som standard med arabiska siffror (1, 2, 3, etc.).

Markeringarna eller kulorna kommer att tas bort om vi ställer in deras värde till inget.

Syntax:

list-stil-typ:värde;

hur man konverterar från int till sträng i java

Vi kan använda värdet enligt följande:

  1. cirkel
  2. decimal, t.ex.:1,2,3 osv
  3. decimal-ledande-nollor , t.ex. :01,02,03,04,etc
  4. lägre-romersk
  5. övre-romerska
  6. lägre alfa, t.ex. a,b,c, etc
  7. övre alfa, t.ex. A, B, C, etc
  8. fyrkant

Obs! Standardutfyllnaden och marginalen ingår också i listan. Det är nödvändigt att lägga till padding:0 och margin:0 till
    och
      taggar för att eliminera detta.

Exempel

Det här exemplet visar en CSS-lista med flera liststilstyper och värden inställda på kvadratisk och övre alfa och många.

 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-liststilar