Home Ontwerp je site CSS Kleur- en achtergrondeigenschappen in CSS
Kleur- en achtergrondeigenschappen in CSS

Kleurtjes maken het leven zo veel vrolijker. Dat geldt natuurlijk ook voor websites. Mochten websites alleen maar in zwart-wit bestaan, zouden ze zeker niet zo aantrekkelijk zijn. Je moet echter altijd de gedachte in je achterhoofd houden om niet te veel te overdrijven.

CSS biedt zeer veel mogelijkheden om tekst of achtergronden een kleur te geven.

Een hexadecimale kleurcode bestaat uit 3 groepen van ieder 2 tekens. Deze 3 groepen vertegenwoordigen de RGB-waarden, oftwel de 3 kleuren Rood, Groen en Blauw. Als de 2 tekens van een kleur dezelfde zijn, kun je deze inkorten door maar 1 teken te schrijven. Enkele voorbeelden:

  • #000000 wordt #000
  • #669999 wordt #699
  • #eeddff wordt #edf
  • ...

Tekstkleur

Kenmerk: color
Waarde: Engelse kleurnaam of hexadecimale code
Voorbeeld:

p { color: red; }

p { color: #FF0000; }

Achtergrondkleur

Kenmerk: background-color
Waarde: Engelse kleurnaam of hexadecimale code
Voorbeeld:

h4 { background-color: #green; }

h4 { background-color: #00FF00; }

Achtergrondafbeelding

Kenmerk: background-image
Waarde: url naar een afbeelding die je wenst te gebruiken als achtergrond
Voorbeeld:

body { background-image: url(bg4.gif); }

Kenmerk: background-repeat
Waarde: repeat (zowel horizontaal als verticaal), repeat-x (horizontale herhaling), repeat-y (verticale herhaling), no-repeat
Voorbeeld:

body { background-repeat: no-repeat; background-image: url(bg4.gif); }

Kenmerk: background-attachment
Waarde: scroll, fixed
Voorbeeld:

body { background-attachment: scroll; background-image: url(bg4.gif);}

Ga naar het volgende deel van de CSS basiscursus : Teksteigenschappen in CSS



 
5 + 9 =
 

Verdien meer met je website