|
Lijsten
Lijsten maken in CSS is weer met andere tags als het maken van lijsten
in HTML. In CSS gebruiken we de volgende tags:
Ongeordende lijst
Voor de voorbeelden moet je de volgende tags in de <head>
zien/of zelf plaatsen:
(zonder deze gedefinieerde tags in de header van het document komen de
lijsten er niet zo uit te zien.)
<style type="text/css">
ul.disc
{
list-style-type: disc
}
ul.circle
{
list-style-type: circle
}
ul.square
{
list-style-type: square
}
ul.none
{
list-style-type: none
}
</style>
Mocht je een extern bestand hebben dan gewoon de <style>
tags weer weglaten want die behoren niet in een extern .css-bestand.
Hoop dat het bij de volgende voorbeelden duidelijk wordt.
| Functie: |
Uitleg: |
Voorbeeld: |
Code: |
| disc |
- Gevulde rondjes!
|
|
<ul
class="disc">
<li>1</li>
<li>2</li>
<li>3</li>
</ul> |
| circle |
Lege rondjes |
|
<ul
class="circle">
<li>1</li>
<li>2</li>
<li>3</li>
</ul> |
| square |
Gevulde blokjes |
|
<ul
class="square">
<li>1</li>
<li>2</li>
<li>3</li>
</ul> |
| none |
Geen ordering |
|
<ul
class="none">
<li>1</li>
<li>2</li>
<li>3</li>
</ul> |
Geordende lijsten:
Voor de geordende lijsten moet je de volgende tags weer in de <head>
zien/of zelf plaatsen:
<style type="text/css">
ol.decimal
{
list-style-type: decimal
}
ol.lroman
{
list-style-type: lower-roman
}
ol.uroman
{
list-style-type: upper-roman
}
ol.lalpha
{
list-style-type: lower-alpha
}
ol.ualpha
{
list-style-type: upper-alpha
}
</style>
Nogmaals: mocht je een extern bestand hebben dan gewoon de <style>
tags weer weglaten want die behoren niet in een extern .css-bestand.
| Functie: |
Uitleg: |
Voorbeeld: |
Code: |
| decimal |
Cijfers |
- 1
- 2
- 3
|
<ol
class="decimal">
<li>1</li>
<li>2</li>
<li>3</li>
</ol> |
| lower-roman |
Kleine Romeinse cijfers |
- 1
- 2
- 3
|
<ol
class="lroman">
<li>1</li>
<li>2</li>
<li>3</li>
</ol> |
| upper-roman |
Grote Romeinse cijfers |
- 1
- 2
- 3
|
<ol
class="uroman">
<li>1</li>
<li>2</li>
<li>3</li>
</ol> |
| lower-alpha |
Kleine abcletters |
- 1
- 2
- 3
|
<ol
class="lalpha">
<li>1</li>
<li>2</li>
<li>3</li>
</ol> |
| upper-alpha |
Grote ABCletters |
- 1
- 2
- 3
|
<ol
class="ualpha">
<li>1</li>
<li>2</li>
<li>3</li>
</ol> |
Als je goed hebt opgelet merk je dat het dezelfde codes zijn als HTML
daarom raad ik ook aan om de lijsten gewoon in HTML
lijsten te schrijven. Dit scheelt veel typewerk en is makkelijker
te overzien!
|
