Terug naar beginpagina Homepage-Maken.nl
Vimexx Webhosting   

Classes Combineren in CSS 2

Dit artikel gaat over het combineren van classes in CSS 2. Deze mogelijkheid is nieuw in CSS 2 en was dus nog niet aanwezig in CSS level 1. Het voordeel van het combineren van classes is dat je minder code nodig hebt om een bepaald stijleffect te bereiken. Het is een handige tip voor iedereen die met Cascading Style Sheets werkt.

Het lijkt me het beste om het bovenstaande maar met een paar voorbeelden te verduidelijken.

Hieronder zie je twee vakken met tekst:

Dit is het groene tekstvak, dat we hebben gemaakt met behulp van Cascading Style Sheets.
En hier zie je het paarse tekstvak, opnieuw gemaakt door middel van CSS.

Als er alleen CSS 1 zou zijn dan zou je voor ieder van bovenstaande tekstvakken een aparte class moeten maken. De classes zouden bestaan uit dezelfde code, alleen de achtergrondkleuren zouden verschillen.

Je kreeg dan deze code:

.groentekstvak {
   width: 150px;
   background-color: #99ffcc;
   border: solid 1px black;
   padding: 3px;
   margin: 4px 2px 4px 2px;
}

.paarstekstvak {
   width: 150px;
   background-color: #cc99ff;
   border: solid 1px black;
   padding: 3px;
   margin: 4px 2px 4px 2px;
}

Dit is natuurlijk niet erg efficiënt. Daarom is er in CSS 2 dus de mogelijkheid geschapen om verschillende classes te combineren.

In CSS 2 kunnen we nu de code voor het tekstvak in één class zetten en aparte classes maken voor de verschillende achtergrondkleuren.

.tekstvak {
   width: 150px;   
   border: solid 1px black;
   padding: 3px;
   margin: 4px 2px 4px 2px;
}

.groen { background-color: #99ffcc; }
.paars { background-color: #cc99ff; }
.geel { background-color: #ff99ff; }

We kunnen nu de classes "tekstvak" en de classes voor de achtergrondkleur eenvoudig combineren. Met deze HTML code:

<div class="tekstvak groen">
Dit is het groene tekstvak.
</div>

<div class="tekstvak paars">
En dit het paarse tekstvak.
</div>

<div class="tekstvak geel">
En nog een geel tekstvak.
</div>

Je zet de classes dus gewoon achter elkaar in de HTML code. Je moet er wel een spatie tussen zetten. Het maakt verder niet uit welke class je voorop zet: "tekstvak geel" en "geel tekstvak" zijn dus allebei correct.

We krijgen dan het volgende resultaat op het scherm:

Dit is het groene tekstvak gemaakt met Cascading Style Sheets level 2.
En dit het paarse tekstvak ook weer door het combineren van classes.
En tenslotte ook nog een geel tekstvak.

Je ziet hoe handig dit is. Er zijn natuurlijk nog veel meer mogelijkheden voor het combineren van classes. Hierboven hebben we de achtergrondkleur in een tekstvak als voorbeeld gebruikt, maar je kunt bijvoorbeeld op deze manier ook eenvoudig een aparte class maken voor vetgedrukte tekst, onderstreepte tekst en nog veel meer dingen. Je kunt op deze manier een hoop tijd en code besparen.

Homepage-Maken Tip

De makkelijkste manier om je eigen website te maken?
Dat is via een website bouwer als Weebly. Hiermee kun je eenvoudig via je browser door middel van drag-en-drop een website bouwen. Je kunt volledig gratis beginnen met 500MB webruimte voor je site. Zo nodig kun je een betaald pakket nemen met eigen domeinnaam, "onbeperkte" opslag (fair use policy) en e-commerce mogelijkheden.

Weebly is daarom een prima optie als je snel een website in elkaar wilt zetten. Kennis van HTML of het installeren van een eigen content management systeem is niet nodig bij Weebly.

Klik hier om te starten met je Weebly website!

Zoekfunctie en Overige Info


Copyright © Homepage-Maken.nl 2000-2018 · Privacybeleid

Deze pagina voldoet aan de XHTML 1.0 richtlijnen     Deze pagina voldoet aan de CSS richtlijnen

[Naar boven]  [Home]