CSS Lijsten

CSS list properties allow you to place, change the list item marker, or use an image as the list item marker.

CSS Lijsten

In a sense, any content that is not descriptive text can be considered a list. Census, solar system, family tree, visit menu, even all your friends can be represented as a list or a list of lists.

Since lists are so diverse, this makes lists quite important, so it is indeed a pity that CSS list styles are not rich enough.

List type

To affect the list style, the simplest (and most fully supported) method is to change the marker type.

For example, in an unordered list, the list item marker (marker) is a dot appearing next to each list item. In an ordered list, the marker may be a letter, number, or another symbol in a counting system.

To change the marker type used for list items, you can use the property list-style-type:

ul {list-style-type: square}

The above statement sets the list item marker in an unordered list to a square.

List item image

Sometimes, the conventional markers are not enough. You may want to use an image for each marker, which can be achieved by using list-style-image The attribute does:

ul li {list-style-image: url(xxx.gif)}

You can use an image as a marker simply by using a url() value.

List marker position

CSS2.1 can determine whether the marker appears outside or inside the list item content. This is achieved by using list-style-position Completed.

Abbreviated list style

For simplicity, the above 3 list style properties can be merged into a convenient property:list-styleJust like this:

li {list-style: url(example.gif) square inside}

The values of list-style can be listed in any order, and these values can be ignored. As long as a value is provided, the others will be filled in with their default values.

CSS list example:

Different types of list markers in an unordered list
Dit voorbeeld demonstreert de verschillende types van lijstitem markers in CSS.
Different types of list item markers in an ordered list
Dit voorbeeld demonstreert de verschillende types van lijstitem markers in CSS.
Alle lijststijltypen
Dit voorbeeld demonstreert alle verschillende types van lijstitem markers in CSS.
Gebruik van een afbeelding als lijstitem marker
Dit voorbeeld demonstreert hoe een afbeelding als lijstitem marker kan worden gebruikt.
Plaatsing van lijstmarkeringen
Dit voorbeeld demonstreert waar de lijstmarkeringen moeten worden geplaatst.
Definieer alle lijsteigenschappen in één verklaring
Dit voorbeeld demonstreert het instellen van alle lijsteigenschappen in een korte eigenschap.

CSS Lijst Eigenschappen (list)

Eigenschap Beschrijving
list-style Korte eigenschap. Gebruikt om alle eigenschappen voor lijsten in één verklaring te stellen.
list-style-image Stel een afbeelding in als lijstitem marker.
list-style-position Stel de positie van de lijstitem marker in.
list-style-type Stel het type van de lijstitem marker in.
marker-offset