Websites met stijl
Naslag: lijst elementen
Op dit naslagblad
Ongenummerde lijst
- Element: ul
- Een ongenummerde lijst bevat lijst items;hiervoor wordt het element: li gebruikt.
voorbeeld 1: ongenummerde lijst
Html:
<ul>
<li>Ajax</li>
<li>Feyenoord</li>
<li>PSV</li>
</ul>
In de browser zie je:
Opsommingsteken definiëren
- In CSS kan je met de eigenschap list-style-type het opsommingsteken opgeven.
List-style-type kent de volgende waarden:
- ⚫ disc (standaard waarde)
- ⚬ circle
- ◾ square
- none (geen opsommingsteken)
Voorbeeld 1a: ongenummerde lijst van voorbeeld 1 met in het stijlblad: ul {list-style-type: circle;}
Genummerde lijst
voorbeeld 2: genummerde lijst
Html:
<ol>
<li>Ajax</li>
<li>Feyenoord</li>
<li>PSV</li>
</ol>
In de browser zie je:
- Ajax
- Feyenoord
- PSV
Het attribuut start
Met het attribuut start kan je opgeven bij welk nummer de lijst start.
Standaardwaarde is 1.
Voorbeeld 3: nummering start vanaf 15
<ol start="15">
De nummering definiëren
- In CSS kan je met de eigenschp list-style-type de nummering definiëren.
List-style-type kent voor nummeringen onder meer de volgende waarden:
- decimal (standaard): 1, 2, 3, 4, 5, 6
- lower-alpha: a, b, c, d, e, f
- upper-alpha: A, B, C, D, E, F
- lower-roman: i, ii, iii, iv, v, vi
- upper-roman: I, II, III, IV, V, VI
List-style-type kan dus worden gebruikt bij ongenummerde lijsten en genummerde lijsten.
Bij ongenummerde lijsten geef je het opsomteken op, bij genummerde lijsten de nummering.
Voorbeeld 4: nummering: upper-roman en start=14
In het stijlblad:
ol {list-style-type: upper-roman;}
Html:
<ol start="14">
<li>Ajax</li>
<li>Feyenoord</li>
<li>PSV</li>
</ol>
In de browser zie je:
- Ajax
- Feyenoord
- PSV
De voetbalclubs staan op alfabetische volgorde ;)
Definitielijst
Een definitielijst bestaat uit een lijst van begrippen en omschrijvingen van die begrippen.
- Het dl element bepaalt het begin en het eind van de lijst
- Het dt element definieert het begrip
- Het dd element definieert de omschrijving.
Voorbeeld 5: voorbeeld van een definitielijst
Html:
<dl>
<dt>Lijn</dt>
<dd>De kortste afstand tussen twee punten.</dd>
<dt>Cirkel</dt>
<dd>De verzameling van alle punten in een vlak die evenver van een middelpunt liggen.</dd>
<dt>Vierkant</dt>
<dd>Een rechthoek waarvan de zijden even lang zijn.</dd>
</dl>
In de browser zie je:
- Lijn
- De kortste afstand tussen twee punten.
- Cirkel
- De verzameling van alle punten in een vlak die evenver van een middelpunt liggen.
- Vierkant
- Een rechthoek waarvan de zijden even lang zijn.
In het stijlblad kan je opmaak van de elementen dt en dd naar believen aanpassen.