Het gebruik van lijsten bullets en stijlen in html

Een list is gewoon dat, een lijst van items. Deze kan de meest uiteenlopende informatie bevatten en op allerlei manieren worden gepresenteerd. We beginnen met eenvoudige lijsten en gaan in de loop van de cursus meer geavanceerde lijsten maken.

We beginnen met het verkennen van de HTML-tags waaruit een lijst bestaat en de 2 basistypen lijsten die op een webpagina voorkomen.

De lijst of listtags ul

Hoewel het niet belangrijk is om HTML te kennen om te bloggen of WordPress te gebruiken, betekent WordPress van binnenuit leren kennen ook van binnenuit leren hoe webpublicatie werkt. Maak je geen zorgen. Ik zal het je makkelijk maken. NIET.

Er zijn twee basistypen lijsten op een webpagina: genummerde en ongenummerde (bullet).

<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>

Het bovenstaande is een ongeordende lijst die bekend staat als een bullet of opsommingsteken, en de naam van de HTML-tag zijn de initialen voor Ongenummerde Lijst: ul tussen haakjes

geordende lijst met nummers – ol

Het geordende lijst heeft een opsomming van items in een opeenvolgende volgorde, één, twee, drie, enzovoort. Geordende lijsten worden gebruikt voor alles wat een telling of stapsgewijze volgorde vereist, zoals rij-instructies, kookinstructies, of de technische instructies die hieronder worden uitgelicht en die laten zien hoe je lijsten maakt in WordPress.

<ol>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ol>

Lijst maken int WordPress

Om een lijst te maken int WordPress gebruik je het lijst of list blok. Zie hieronder het list icon:

Waarden voor lijst-stijl-type

De list-style-type eigenschap definieert het type lijst door de inhoud van elke markering, of opsommingsteken, in de lijst in te stellen. Aanvaardbare trefwoordwaarden voor list-style-type zijn onder andere:

disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-greek
lower-latin
upper-latin
armenian
georgian
lower-alpha
upper-alpha
none

See the Pen list-style-type examples by Louis Lazaris (@impressivewebs) on CodePen.

Deze list vind ik ook leuk en handig

ul {
  list-style-type: "→";
}

Waarden voor list-style-position

De list-style-position eigenschap definieert waar de lijstmarkering moet komen en aanvaardt twee waarden: binnen of buiten. Deze worden hieronder gedemonstreerd met de padding verwijderd uit de lijsten en een linker rode rand toegevoegd:

ul:nth-of-type(1) {
  list-style-position: inside;
  padding: 0;
  border-left: solid 2px red;
}

ul:nth-of-type(2) {
  list-style-position: outside;
  padding: 0;
  border-left: solid 2px red;
}

See the Pen list-style-position examples by Louis Lazaris (@impressivewebs) on CodePen.

Waarden voor lijst-stijl-afbeelding

De eigenschap list-style-image bepaalt of de lijstmarkering wordt ingesteld met een afbeelding en accepteert een waarde van “none” of een URL die naar de afbeelding wijst:

ul {
  list-style-image: url(afbeeldingen/cursus.png);
}

See the Pen HTML List Demos by Matt West (@matt-west) on CodePen.

Uitgebreide list / lijsten voor gevorderden

Voorbeeld lijsten maken voor gevorderden:

See the Pen Flexbox list grid by Lottejackson (@lottejackson) on CodePen.

Op de onderstaande website vond ik ook een mooi voorbeeld van een list:
https://24ways.org

Info lijsten maken: https://drafts.csswg.org/css-lists/

Lijst teken maken op maat met pseudo class

Je kan ook een lijst teken maken met een pseudo class

ul { list-style: none;}

li { position: relative;}

li:before {
    position: absolute;  
    top: 8px;  
    margin: 8px 0 0 -8px;    
    vertical-align: middle;
    display: inline-block;
    width: 4px;
    height: 4px;
    background: #dd0000;
    content: "";
}