05. lijsten

lijsten

list-style-type

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;}

ul (= unordered list): none | disc (= standaard-waarde) | circle | square; ol (= ordered list): decimal (1 2 3) | decimal-leading-zero (01 02 03) | lower-alpha (a b c) | upper-alpha (A B C) | lower-roman (i. ii. iii.) | upper-roman (I II III)

try it yourself: https://www.w3schools.com/css/tryit.asp?filename=trycss_list-style-type_ex

list-style-image

ul {
    list-style-image: url("../images/star.png");}
li {
    margin: 10px 0px 0px 0px;}

list-style-image: none (= standaardwaarde) | url;

try it yourself: https://www.w3schools.com/css/tryit.asp?filename=trycss_list-style-image

list-style-position

ul {

    width: 150px;}

li {

    margin: 10px;}

ul.illuminations {

    list-style-position: outside;}

ul.season {

    list-style-position: inside;}

list-style-position: outside (= standaard-waarde) | inside;

outside: De markering bevindt zich links van de blok tekst. Indien de list-style-position niet uitdrukkelijk vermeld wordt, is dit de standaard weergave. inside: De marker zit vervat binnenin het tekstkader zelf.

try it yourself: https://www.w3schools.com/css/tryit.asp?filename=trycss_list-style-position

list-style

ul {

    list-style: inside circle;

    width: 300px;}
li {

    margin: 10px 0px 0px 0px;}

Bij list-style kunne zowel list-style-type, list-style-position en list-style-image benoemd worden.