Sådan styler du lister med CSS

Opsummering af HTML-lister

Der er to hovedtyper af lister i HTML - Ordered og Unordered .

I ordnede lister (

    ), er rækkefølgen af ​​listeelementerne vigtig. Varerne kan vises i rækkefølge efter nummer, romertal, alfanumerelt eller en anden type markør. Standardmarkøren for bestilte lister er et tal (eller decimal):

    I uordnede lister (

      ), betyder rækkefølgen af ​​listen ikke noget. Varerne vises i kugleformat. Standardmarkøren for ikke-ordnede lister er et rundt punkt eller disc.

      Hvert listeelement på en ordnet eller ikke-ordnet liste oprettes med tagget.

      Liste-specifikke stilarter

      Der er tre fælles egenskaber specifikke for styling lister: list-style-type, list-style-position, og list-style-image. Der er også en stenografisk ejendom, der omfatter alle tre.

      list-style-type

      Markørerne (eller punkttegnene), der vises på ordnede og ikke-ordnede lister, kan styles på en række forskellige måder. CSS-egenskaben til styling af markørtypen er list-style-type. Standardværdien list-style-typefor en ordnet liste er decimal, mens standard for en ikke-ordnet liste er disc.

      Bestilt listeeksempel:

      /* css */ ol { list-style-type: upper-roman; }

      Uordnet listeeksempel:

      /* css */ ul { list-style-type: square; }

      Intet markøreksempel:

      /* css */ ul { list-style-type: none; }

      Accepterede værdier for list-style-typeejendommen inkluderer:

      Uordnet:

      • disk ( standard )
      • cirkel
      • firkant

      Bestilt:

      • decimal ( standard )
      • decimal-ledende-nul
      • lavere-romersk
      • over-romersk
      • lavere-græske
      • lavere latin
      • øvre latin
      • armenisk
      • georgisk
      • lavere alfa
      • øvre alfa

      Andet:

      • ingen

      Bemærk: alle egenskabsværdierne, der er anført ovenfor, kan bruges til styling af både ordnede og ikke-ordnede lister (f.eks. En ordnet liste med squarelistemarkører).

      list-style-position

      list-style-positionstyrer, om listemarkøren vises inden for eller uden for hvert element i listen ( ). Ejendommen accepterer to værdier, outside(standard) eller inside.

      Placer markøren outsidefor listeelementelementet, og alle tekstlinjer og underlinjer for hvert listeelement justeres lodret:

      /* css */ ul { list-style-position: outside; /* default */ }

      Placer markøren inside, og den første tekstlinje for hvert listeelement vil blive indrykket for at give plads til markøren. Eventuelle underlinjer af det samme listeelement justeres med markøren i stedet for den første tekstlinje:

      /* css */ ul { list-style-position: inside; }

      list-style-image

      Den list-style-imageejendom accepterer et billede url i stedet for listen markør. Standardværdien for denne egenskab er none.

      /* css */ ul { list-style-image: url(//url-to-image); }

      list-style Stenografi

      list-styleer en stenografisk ejendom for de tre ovennævnte typiske egenskaber. Rækkefølgen af værdierne list-styleaccepterer er list-style-type, list-style-positionog list-style-image. Hvis nogen værdi udelades, bruges standardværdien for den egenskab.

      Eksempel:

      /* css */ ul { list-style: circle inside none; }

      Mere listespecifik styling

      Ordnede listetags accepterer også attributter, der styrer flow-, antal- eller specifikke markørværdier for dets listeelementer. Disse omfatter start, reversedog valueattributter. Se MDN-ressourcerne nedenfor for yderligere detaljer.

      Generel styling

      Listeindhold kan designes ligesom andre peller divelementer. color, font-family, margin, padding, Eller borderer blot nogle få eksempler på egenskaber, der kan føjes til enten ul, oleller lielementer.

      Bemærk, at alle stilarter, der føjes til uleller olelementet, påvirker hele listen. Stil, der føjes direkte til lielementerne, påvirker de enkelte listeelementer. I eksemplet nedenfor er kant- og baggrundsfarveegenskaberne udformet forskelligt mellem liste- og listeelementelementerne:

      /* css */ ul { list-style-type: circle; border: 2px solid blue; background-color: lightblue; } li { margin: 5px; background-color: lightyellow; }

      Listeafstand

      Du bemærker muligvis ekstra afstand foran listeelementerne, når den list-style-typeer indstillet til none. Indstilling paddingtil 0(eller hvilken som helst afstand der foretrækkes) på listeelementet tilsidesætter denne standard polstring.

      /* css */ ul { list-style: none; padding: 0; } li { padding: 5px 10px; background-color: #EEEEEE; border: 1px solid #DDDDDD; }

      Kilder:

      Der er henvist til nedenstående links i udarbejdelsen af ​​oplysninger, der findes i denne artikel. Besøg dem for yderligere detaljer om dette emne.

      Mere information:

      MDN - Styling Lists

      W3Schools - CSS-lister

      CSS-tricks - liste-stil