12 - CSS - lijsten

• ICT
• MBO
• Studiejaar 1,2

Lijsten en CSS

Leerdoel

Aan het einde van de les kun je uitleggen welke CSS eigenschappen gebruikt kunnen worden voor geordende en ongeordende lijsten in HTML.

Wat weet je al over CSS eigenschappen voor geordende en ongeordende lijsten in HTML?

Geordende en ongeordende lijsten

HTML biedt de mogelijkheid om geordende en ongeordende lijsten te maken.

• item1
• item2
• item3
  

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
</ul>

1. item1
2. item2
3. item3
   

<ol>

    <li>item1</li>

    <li>item2</li>
    <li>item3</li>

</ol>

CSS eigenschappen

Voor het stylen van geordende en ongeordende lijsten kunnen verschillende CSS eigenschappen worden gebruikt.

list-style-type

Met de 'list-style-type' eigenschap kun je het type opsommingsteken of nummering van een lijst bepalen.

ul {

    list-style-type: square;

}

ol {

    list-style-type: upper-roman;

}

        Coffee
        Tea
        Coca Cola

      I. Coffee
     II. Tea
    III. Coca Cola

List-style-image

Met de 'list-style-image' eigenschap kun je een aangepaste afbeelding gebruiken als opsommingsteken.

ul {

    list-style-image: url('image.jpg');

}

List-style

De 'list-style' eigenschap is een verkorte notatie voor het instellen van alle stijleigenschappen van een lijst tegelijk.

ul {
  list-style: square inside url("sqpurple.gif");
}

Oefening

Maar verschillende lijsten waarbij je het lijst symbool aanpast naar iets anders, gebruik hierbij ook een image.
Maar hierbij drie lijsten:

• 1 met vierkantjes
• 1 met Romeinse cijfers
• 1 met plaatjes
  

Samenvatting

Tijdens deze les hebben we geleerd welke CSS eigenschappen gebruikt kunnen worden om geordende en ongeordende lijsten in HTML te stylen.

Stel 1 vraag over iets dat je nog niet zo goed hebt begrepen.

De leerlingen geven hier (in vraagvorm) aan met welk onderdeel van de stof ze nog moeite. Voor de docent biedt dit niet alleen inzicht in de mate waarin de stof de leerlingen begrijpen/beheersen, maar ook een goed startpunt voor een volgende les.