CSS Lijst

Ongesorteerde lijst:

  • Koffie
  • Thee
  • Coca Cola
  • Koffie
  • Thee
  • Coca Cola

Gesorteerde lijst:

  1. Koffie
  2. Thee
  3. Coca Cola
  1. Koffie
  2. Thee
  3. Coca Cola

HTML lijst en CSS lijst-eigenschappen

In HTML zijn er voornamelijk twee soorten lijsten:

  • Ongesorteerde lijst (ul) - de lijstitems worden gemarkeerd met bullettekens
  • Gesorteerde lijst (ol) - de lijstitems worden gemarkeerd met cijfers of letters

CSS lijst-eigenschappen maken het mogelijk om:

  • Verschillende itemtekens instellen voor gesorteerde lijsten
  • Verschillende itemtekens instellen voor ongesorteerde lijsten
  • Afbeelding instellen als itemteken voor de lijstitems
  • Achtergrondkleur toevoegen aan lijst en lijstitems

Verschillende itemtekens

list-style-type De eigenschap specificeert het type itemteken.

Het volgende voorbeeld toont enkele beschikbare itemtekens:

Voorbeeld

ul.a {
  list-style-type: circle;
}
ul.b {
  list-style-type: square;
}
ol.c {
  list-style-type: upper-roman;
}
ol.d {
  list-style-type: lower-alpha;
}

Probeer het zelf

Opmerking:Sommige waarden worden gebruikt voor ongesorteerde lijsten, terwijl andere waarden worden gebruikt voor gesorteerde lijsten.

Afbeelding als itemteken

list-style-image De eigenschap specificeert een afbeelding als itemteken voor de lijstitems:

Voorbeeld

ul {
  list-style-image: url('sqpurple.gif');
}

Probeer het zelf

Locatie van het itemteken bepalen

list-style-position De eigenschap specificeert de positie van het itemteken (itemteken).

"list-style-position: outside;" betekent dat het itemteken van de lijst buiten de lijstitems zal worden geplaatst. De beginletters van elke regel van de lijstitems zullen verticaal uitgelijnd zijn. Dit is de standaard:

  • Koffie - een gezoete drank bereid van gerookte koffiebonen
  • Thee
  • Coca-cola

"list-style-position: inside;" Betekent dat de lijsttekenen binnen het lijstitem moeten worden weergegeven. Omdat het een deel van het lijstitem is, wordt het onderdeel van de tekst en wordt het aan het begin van de tekst weergegeven:

  • Koffie - een gezoete drank bereid van gerookte koffiebonen
  • Thee
  • Coca-cola

Voorbeeld

ul.a {
  list-style-position: outside;
}
ul.b {
  list-style-position: inside;
}

Probeer het zelf

Verwijder standaard instellingen

list-style-type:none Deze eigenschappen kunnen ook worden gebruikt om markeringen/tekenen te verwijderen. Let op, lijsten hebben ook standaard marges en inspringingen. Om deze inhoud te verwijderen, voeg je toe aan <ul> of <ol>: margin:0 en padding:0 :

Voorbeeld

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Probeer het zelf

Lijst - verkorte eigenschap

list-style Een eigenschap is een verkorte eigenschap. Het wordt gebruikt om alle lijsteigenschappen in één verklaring in te stellen:

Voorbeeld

ul {
  list-style: square inside url("sqpurple.gif");
}

Probeer het zelf

Bij het gebruik van verkorte eigenschappen is de volgorde van de eigenschapswaarden:

  • list-style-type(Als de lijstitem markering niet kan worden weergegeven vanwege een of andere reden, wordt de waarde van deze eigenschap weergegeven)
  • list-style-position(Specificeren waar de lijstitem markering moet worden weergegeven, binnen of buiten de inhoudsstroming)
  • list-style-image(Het beeld specificeren als lijstitem markering)

Als een van de hierboven vermelde eigenschappen ontbreekt, wordt de standaardwaarde van het ontbrekende eigenschap ingevoegd (indien beschikbaar).

Lijst kleurstijlen instellen

We kunnen ook kleuren gebruiken om lijststijlen te stellen, zodat ze interessanter lijken.

Elke stijl die je toevoegt aan de <ol> of <ul> tags beïnvloedt de hele lijst, terwijl eigenschappen die je toevoegt aan de <li> tags de individuele lijstitems beïnvloeden:

Voorbeeld

ol {
  achtergrond: #ff9999;
  padding: 20px;
}
ul {
  achtergrond: #3399ff;
  padding: 20px;
}
ol li {
  achtergrond: #ffe5e5;
  padding: 5px;
  margin-left: 35px;
}
ul li {
  achtergrond: #cce5ff;
  margin: 5px;
}

Resultaat:

  1. Koffie
  2. Thee
  3. Coca Cola
  • Koffie
  • Thee
  • Coca Cola

Probeer het zelf

Meer voorbeelden

Aangepaste lijst met rode linker rand
Dit voorbeeld demonstreert hoe je een lijst met een rode linker rand kunt maken.
Volledige scherm breedte lijst rand
Dit voorbeeld demonstreert hoe je een lijst met geen lijstpunten en randen kunt maken.
Alle verschillende lijstitemmarkeringen van de lijst
Dit voorbeeld demonstreert alle verschillende lijstitemmarkeringen in CSS.

Alle CSS lijst eigenschappen

Eigenschap Beschrijving
list-style Korte eigenschap. Stel alle eigenschappen van de lijst in één verklaring in.
list-style-image Een afbeelding als lijstitemmarkering specificeren.
list-style-position De positie van de lijstitemmarkering (bullet) regelen.
list-style-type Het type van de lijstitemmarkering vaststellen.