KOMPOOS.NL

list-style-type

home » manuals » css » list-style-type.html

sitemap | terug naar het CSS-properties menu

uitleg list-style-type

Lijsten kunnen voorzien worden van verschillende (voorlopende) zaken. Deze pagina spreekt voor zichzelf. Plaats de desbetreffende css-code in jouw stylesheet en geef een ul of een ol de "bijbehorende class". Het resultaat is zichtbaar hieronder. De gehele style-sheet is geplaatst met één voorbeeld van de html-code.

<ul>unordered list</ul>

• disc

• cirkel

• vierkant

<ol>ordered list</ol>

1. ol - decimaal
2. ol - decimaal
3. ol - decimaal

1. ol - decimaal voorloop 0
2. ol - decimaal voorloop 0
3. ol - decimaal voorloop 0

1. ol - lower-roman
2. ol - lower-roman
3. ol - lower-roman

1. ol - upper-roman
2. ol - upper-roman
3. ol - upper-roman

1. ol - lower-greek
2. ol - lower-greek
3. ol - lower-greek

1. ol - lower-alpha
2. ol - lower-alpha
3. ol - lower-alpha

1. ol - upper-alpha
2. ol - upper-alpha
3. ol - upper-alpha

één voorbeeld van de html-code

<ol class="decimal-leading-zero">
        <li>ol - decimaal voorloop 0</li>
        <li>ol - decimaal voorloop 0</li>
        <li>ol - decimaal voorloop 0</li>
</ol>

stylesheet van de list-style-type pagina

<style type="text/css">
        ul.disc{list-style-type:disc}
        ul.circle{list-style-type:circle}
        ul.square{list-style-type:square}
        ol.decimal{list-style-type:decimal}
        ol.decimal-leading-zero{list-style-type:decimal-leading-zero}
        ol.lower-roman{list-style-type:lower-roman}     
        ol.upper-roman{list-style-type:upper-roman}     
        ol.lower-greek{list-style-type:lower-greek}     
        ol.lower-alpha{list-style-type:lower-alpha}
        ol.upper-alpha{list-style-type:upper-alpha}
</style>

Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.