CSS - hoofdstuk 4

-

De Klasse selector


De klasse selector wordt voornamelijk gebruikt voor het inrichten van de basiselementen op je webpagina. Het grote kenmerk is dat je ze meerdere keren kunt gebruiken. Je kunt het vergelijken met een opmaakstijl in Word.
Stel dat we boven elke alinea van de webpagina een kopje willen zetten. Dit is een mooi voorbeeld van het gebruik van een klasse (class).
Gebruik weer het bestand voorbeeld2.html

Zet boven elk alinea nu deel1, deel2, deel3:

 

We maken nu een klasse tussenkop. De stappen verlopen vergelijkbaar als bij de h1-tag.
Kies weer New CSS Rule uit het CSS-Panel. Kies nu voor class in het volgende venster:

figuur 12

Maak voor deze klasse de volgende kenmerken aan:

figuur 13

 

Kijk nu met de Codeview naar de uitbreiding van het style sheet:

.tussenkop {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.8em;
}


 

Een klassennaam begin dus altijd met een punt (in het Engels meestal een period genoemd). Kies herkenbare namen voor een klasse!
Ook in het CSS-Panel zie je de nieuwe stijlregel terug.
Nu moeten we nog de tussenkopjes de stijlkenmerken meegeven. Het snelst gaat dat door met de muis in het kopje te klikken en vervolgens in het Properties-Panel de style toe te wijzen (let er op dat in CS4 de HTML-modus geselecteerd is) :

 

In de Codeview kun je nu zien dat er een klasse tussenkop wordt gebruikt :

<p class="tussenkop">deel 1</p>

Deze klasse heeft betrekking op alle tekst die tussen <p> en </p> staat.

Opdracht:
  1. Open een nieuw bestand en sla dit op als CSS4
  2. Voeg 5 alinea's Lorem Ipsum in.
  3. Geef de body deze achtergrond.
  4. Maak een apart CSS-bestand en koppel dit aan CSS4
  5. Maak een klasse aan waarmee de eerste alinea een grijze achtergrond krijgt.
  6. Maak een klasse aan waarmee je de tweede alinea een blauwe achtergrond geeft en de letters geel maakt.
  7. Maak een klasse aan die er voor zorgt dat de derde alinea een gele achtergrond krijgt, de letterkleur wit wordt en het lettertype scheef (italic) met grootte 30 pt.
  8. Maak een klasse aan die er voor zorgt dat de vierde alinea de letters zijn onderstreept en de kleur blauw is. De achtergrond van de alinea moet roze zijn.
  9. Maak een klasse aan waarmee je van alinea 5 de lettergrootte verandert in 100 px en de kleur blauw wordt met een panda als achtergrond
  10. Sla het bestand nogmaals op en koppel het via een hyperlink aan je index-pagina.

 

 

 

 

 

 

 

 

 

 

©jw webdesign