logo

TechCodeview

CSS-lijststijlen

De Lijst in CSS bepaalt hoe de inhoud of items op een bepaalde manier worden weergegeven, dat wil zeggen dat ze netjes of willekeurig kunnen worden gerangschikt, wat helpt bij het creëren van een overzichtelijke webpagina. Omdat ze aanpasbaar en eenvoudig te hanteren zijn, kunnen ze worden gebruikt om grote hoeveelheden materiaal te ordenen. De standaardstijl van de lijst is randloos. De lijst kan in twee categorieën worden verdeeld:

    Ongeordende lijst:Standaard worden de lijstelementen in ongeordende lijsten aangegeven met opsommingstekens, dit zijn kleine zwarte cirkels.Bestelde lijst:De lijstelementen in geordende lijsten worden geïdentificeerd door cijfers en letters.

De volgende CSS-lijsteigenschappen zijn beschikbaar voor gebruik bij het beheren van de CSS-lijsten:

    Lijststijltype:Deze eigenschap wordt gebruikt om het uiterlijk van de lijstitemmarkering te bepalen, zoals een schijf, teken of aangepaste tellerstijl.Lijststijlafbeelding:De afbeeldingen die als lijstitemmarkeringen zullen dienen, kunnen met deze parameter worden gespecificeerd.Lijststijl-positie:Het beschrijft waar het markeringsvak zich moet bevinden rond het hoofdblokvak.Lijststijl:De lijststijl wordt geconfigureerd met dit attribuut.

We zullen nu meer over deze kenmerken leren aan de hand van voorbeelden.

Eigenschap van het type lijststijl

Het standaardlijsttype van markering kan worden gewijzigd in een aantal andere typen, waaronder vierkant, cirkel, Romeinse cijfers, Latijnse letters en nog veel meer. De items in een ongeordende lijst worden aangegeven met ronde kogels (•), terwijl de items in een geordende lijst standaard worden genummerd met Arabische cijfers (1, 2, 3, enz.).

De markeringen of opsommingstekens worden verwijderd als we hun waarde op nul instellen.

Syntaxis:

lijststijltype:waarde;

hrithik roshan

We kunnen de waarde als volgt gebruiken:

  1. cirkel
  2. decimaal, bijvoorbeeld:1,2,3, enz
  3. decimale voorloopnullen, bijvoorbeeld:01,02,03,04,enz.
  4. lager-romeins
  5. Opper-Romeins
  6. lagere alfa, bijvoorbeeld a, b, c, enz
  7. bovenste alfa, bijvoorbeeld A, B, C, enz
  8. vierkant

Opmerking: De standaardopvulling en marge zijn ook opgenomen in de lijst. Het is noodzakelijk om opvulling:0 en marge:0 toe te voegen aan het
    En
      tags om dit te elimineren.

Voorbeeld

Dit voorbeeld toont een CSS-lijst met verschillende typen lijststijlen en waarden ingesteld op vierkant en hogere alfa en veel.

 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>

Uitvoer

CSS-lijststijlen