W3.CSS- kleuren
Het standaardkleurenschema dat in W3.CSS wordt gebruikt, is geïnspireerd op Material Design Colors (kleuren die worden gebruikt in marketing, verkeersborden en plaknotities).
HTML-elementen inkleuren
De klassen w3 - color en w3- text- color kunnen worden gebruikt om elk HTML-element te kleuren:
containers:
Londen is de dichtstbevolkte stad van het Verenigd Koninkrijk, met een grootstedelijk gebied van meer dan 9 miljoen inwoners.
Londen is de dichtstbevolkte stad van het Verenigd Koninkrijk, met een grootstedelijk gebied van meer dan 9 miljoen inwoners.
Toetsen:
Tekst:
Grenzen:
rood
Groente
Blauw
Geel
Grijs
zwart
Tafels:
| Naam | Punten |
|---|---|
| Jill Smith | 50 |
| Eve Jackson | 94 |
| Adam Johnson | 67 |
Kaarten:
Een auto is een zelfaangedreven motorvoertuig op wielen dat wordt gebruikt voor transport. De meeste definities van de term specificeren dat auto's zijn ontworpen om voornamelijk op de weg te rijden, om plaats te bieden aan één tot acht personen en om vier wielen te hebben. (Wikipedia)
Achtergrondkleuren
De w3 -kleurklassen stellen de achtergrondkleur in voor elk HTML-element:
Londen
Londen is de dichtstbevolkte stad van het Verenigd Koninkrijk, met een grootstedelijk gebied van meer dan 9 miljoen inwoners.
Londen
Londen is de dichtstbevolkte stad van het Verenigd Koninkrijk, met een grootstedelijk gebied van meer dan 9 miljoen inwoners.
Londen
Londen is de dichtstbevolkte stad van het Verenigd Koninkrijk, met een grootstedelijk gebied van meer dan 9 miljoen inwoners.
Voorbeeld
<div class="w3-red">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
<div class="w3-yellow">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
<div class="w3-gray">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
De kleuren grijs en grijs zijn uitwisselbaar in alle W3.CSS klassen.
Tekstkleuren
De klassen w3- text- color stellen de tekstkleur van elk HTML-element in:
Londen
Londen is de dichtstbevolkte stad van het Verenigd Koninkrijk, met een grootstedelijk gebied van meer dan 9 miljoen inwoners.
Londen
Londen is de dichtstbevolkte stad van het Verenigd Koninkrijk, met een grootstedelijk gebied van meer dan 9 miljoen inwoners.
Voorbeeld
<div class="w3-text-red">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
Zweefkleuren
De klassen w3-hover- color definiëren de achtergrondkleur voor elk HTML-element:
Londen
Londen is de dichtstbevolkte stad van het Verenigd Koninkrijk, met een grootstedelijk gebied van meer dan 9 miljoen inwoners.
Voorbeeld
<div class="w3-container w3-orange w3-hover-red">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.</p>
</div>
De klassen w3-hover- text- color definiëren de tekst-hover-kleur voor elk HTML-element:
Londen
Londen is de dichtstbevolkte stad van het Verenigd Koninkrijk, met een grootstedelijk gebied van meer dan 9 miljoen inwoners.
Voorbeeld
<div class="w3-container w3-orange w3-hover-text-white">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.</p>
</div>
Kleurenbibliotheken
Naast standaard W3.CSS-kleuren, kan W3.CSS ook kleuren gebruiken uit veel verschillende kleurenbibliotheken:
Windows-kleuren:
Klik hier voor meer informatie over Windows-kleuren
Mode Kleuren:
Geel
spar
Pioen
Port
Klik hier om meer te leren over modekleuren
Snelweg kleuren:
Klik hier voor meer informatie over kleurenbibliotheken
In latere hoofdstukken van deze tutorial leer je veel meer over kleuren.