Lists
1. List-style-type
2. List-style-image
3. List-style-position
1. List-style-type
Er zijn een paar list stijl elementen die ons toelaten de look van onze lijst te wijzigen.
Mogelijke waarden zijn:
disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | none |
Probeer zelf een paar van deze waarden uit om te zien wat het resultaat er van is.
Een voorbeeld:
<head>
<style type="text/css">
ol { list-style-type: upper-roman }
ul { list-style-type: circle }
</style>
</head>
<body>
<ol>
<li> eerste item.
<li> tweede item.
<li> derde item.
</ol>
<br>
<ul>
<li> eerste item.
<li> tweede item.
<li> derde item.
</ul>
</body> |
Geeft ons de volgende lijst:
- eerste item.
- tweede item.
- derde item.
- eerste item.
- tweede item.
- derde item.
|
 top
2. List-style-image
Laat ons toe een afbeelding voor onze lijst te gebruiken.
Een voorbeeld:
|
<head>
<style type="text/css">
ul { list-style-image: url("arrow.gif") }
</style>
</head>
<body>
<ul>
<li> eerste item
<li> tweede item
<li> derde item
</ul>
</body>
|
Ziet er zo uit:
- eerste item
- tweede item
- derde item
|
In bovenstaand voorbeeld heb ik de afbeelding "arrow.gif" gebruikt. Deze afbeelding bevindt zich in dezelfde directory (map) als mijn HTML document. Als de afbeelding zich niet in dezelfde directory (map) bevindt dan moet dit gespecifieerd worden. Veronderstel dat de afbeelding kan gevonden worden op dit web adres (URL): http://www.mijnadres.com/afbeeldingen/ dan moeten we deze vorm gebruiken:
list-style-image: url("http://www.mijnadres.com/afbeeldingen/arrow.gif")
top
3. List-style-position
Mogelijke waarden:
inside | outside
Een voorbeeld maakt alles duidelijk:
|
<head>
<style type="text/css">
ul.outside { list-style-position: outside }
ul.inside { list-style-position: inside }
</style>
</head>
<body>
<ul class="outside">
<li>het eerste lijst item komt eerst
<li>het tweede lijst item komt als tweede
</ul>
<ul class="inside">
<li>het eerste lijst item komt eerst
<li>het tweede lijst item komt als tweede
</ul>
</body>
|
Resultaat:
- het eerste lijst item komt eerst
- het tweede lijst item komt als tweede
- het eerste lijst item komt eerst
- het tweede lijst item komt als tweede
|
De verkorte vorm is ook mogelijk. In dat geval gebruiken we het list-style element.
Een voorbeeld:
|
<head>
<style type="text/css">
ul { list-style: square }
</style>
</head>
<body>
<ul>
<li> eerste item
<li> tweede item
<li> derde item
</ul>
</body
|
Resultaat:
- eerste item
- tweede item
- derde item
|
top
|
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
(4) 