MDN will be in maintenance mode on Wednesday September 20th, starting at 10 AM Pacific / 5 PM UTC, for about 1 hour.

Er zijn veel soorten waarden voor CSS eigenschappen: gaande van numerieke waarden, via kleuren tot functies die een bepaalde actie uitvoeren (zoals een element roteren of een achtergrondafbeelding invoegen).  Een aantal van deze waarden gebruiken specifieke eenheden om de waarden uit te drukken — wil je dat je doos 30 pixels breed is, 30 centimeter of 30 ems?  In deze gids kijken we naar veel voorkomende waarden zoals lengte, kleur en eenvoudige functies.  Maar we verkennen ook de minder gebruikelijke eenheden zoals graden en zelfs eenheidsloze numerieke waarden.

Vereisten: Algemene computervaardigheden, de basissoftware geïnstalleerd hebben, algemene kennis van hoe met files werken, en een basiskennis van HTML (bekijk Introductie tot HTML.)
Doelstelling: Leren over de meest voorkomende soorten waarden voor CSS eigenschappen en de geassocieerde eenheden.

Er zijn veel soorten waarden in CSS, sommigen komen veel voor en andere zelden of nooit.  We zullen ze niet allemaal exhaustief behandelen in dit artikel, enkel diegenen die je waarschijnlijk zal tegenkomen tijdens je streven naar volledige beheersing van CSS.  In dit artikel zullen we volgende CSS waarden behandelen:

  • Numerieke waarden: waarden om bv. de breedte van een element in te stellen, de dikte van een rand, de tekstgroote en eenheidsloze gehele getallen om bv. de relatieve lijnbreedte te specifiëren (of het aantal keer dat een animatie afgespeeld worden). 
  • Percentages: Ook deze kunnen gebruikt worden om lengte of breedte te specifiëren — relatief ten opzichte van een oudercontainer's breedte of hoogte bijvoorbeeld.
  • Kleuren: Om achtergrondkleuren, tekstkleuren, enz. in te stellen.
  • Coordinaten: om bv. de positie van een element relatief te bepalen ten opzichte van de linkerbovenhoek van het scherm.
  • Functies: Om bv. de achtergrondafbeeldingen of achtergrondafbeeldings-helling te bepalen.

Je zal ook van deze waarden ook voorbeelden zien doorheen alle CSS voorbeelden en hulpmiddelen die je tegenkomt.  Je zal er dus in geen tijd aan wennen!

Opmerking: Je kan een exhaustieve behandeling vinden van CSS eenheden in de CSS Referentie; de artikelen over de eenheden zijn omringd door punthaken, bv. <color>.

Numerieke waarden

Je zal veel nummers zien gebruikt worden voor CSS eenheden.  Deze sectie bespreekt de meest voorkomende klassen van numerieke waarden.

Lengte en grootte

Je zal lengte/grootte eenheden (zie <length> voor een uitgebreide bespreking) doorlopend  gebruiken in je CSS, onder andere voor layouts, typografie. Laten we kijken naar een eenvoudig voorbeeld.  Eerst de HTML:

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

Dan de CSS:

p {
  margin: 5px;
  padding: 10px;
  border: 2px solid black;
  background-color: cyan;
}

p:nth-child(1) {
  width: 150px;
  font-size: 18px;
}

p:nth-child(2) {
  width: 250px;
  font-size: 24px;
}

p:nth-child(3) {
  width: 350px;
  font-size: 30px;
}

Het resultaat is als volgt:

In deze code gebeurt het volgende:

  • De margin, padding en border-width van elke paragraaf wordt ingesteld op respectievelijk 5 pixels, 10 pixels en 2 pixels.  Een enkele waarde voor de marge en vulling betekent dat alle vier de zijden die toegewezen krijgen.  De breedte van de rand werd ingesteld middels de border korte notatie.
  • De width van de drie paragraven wordt ingesteld op steeds grotere pixelwaarden, wat betekent dat de dozen wijder worden naarmate je naar beneden gaat.
  • De font-size van de drie paragraven wordt ingesteld op steeds grotere pixelwaarden, wat betekent dat de tekst groter wordt naarmate je naar beneden gaat.  De font-size verwijst naar de hoogte van elk letterteken.

Pixels (px) zijn absolute eenheden omdat ze altijd dezelfde grootte zullen zijn, ongeacht andere verwante instellingen.  Andere absolute eenheden zijn:

  • mm, cm, in: Millimeters, centimeters, of inches.
  • pt, pc: Punten (1/72 van een inch) of picas (12 points.)

Je zal vermoedelijk enkel pixels regelmatig tegenkomen in het wild.

Er zijn ook relatieve eenheden, die relatief zijn ten opzichte van het huidig element zijn font-size of de viewport grootte:

  • em: 1em is gelijk aan de tekstgrootte van het huidige element (meer specifiek de breedte van de hoofdletter M).  De standaard font-size die aan webpagina's gegeven wordt door browsers voor CSS stijlen worden toegepast is 16 pixels, wat betekent dat de berekende waarde voor 1em standaard 16 pixels is.  Maar, aangezien tekstgrootte wordt overgeërft van het ouderelement, kan de waarde van 1em ingewikkeld worden indien de tekstgrootte van de ouders geen 16 pixels is.  Maak je daar voorlopig nog niet te veel zorgen over: we bespreken overerving en tekstgrootte in meer detail in de volgende artikelen en modules.  ems zijn de meest voorkomende relatieve eenheid die je zal gebruiken in web development.
  • ex, ch: Dit is respectievelijk de hoogte van de letter x en de breedte van het nummer 0.  Deze zijn niet zo vaak gebruikt of zo breed ondersteunt als ems.
  • rem: De rem (root em) werkt op dezelfde manier als de em, behalve dat die altijd gelijk is aan de standaard font-size; overgeërfde tekstgrootte heeft geen effect.  Dit is dan ook een betere optie dan ems, ook al worden rems niet ondersteund in oudere versies van Internet Explorer (je kan meer te weten komen over cross-browser ondersteuning in CSS Debuggen).
  • vw, vh: Deze eenheden zijn respectievelijk 1/100ste van de breedte van de viewport en 1/100ste van de hoogte van de viewport.  Deze worden niet zo breed ondersteunt als rems.

Relatieve eenheden gebruiken is vaak zeer handig — je kan je HTML elementen een grootte geven die relatief is ten opzicht van je tekstgrootte of viewport grootte.  Dat betekent dat de layout er correct zal blijven uitzien als bv. de tekstgrootte verdubbeld wordt voor de volledige site door een visueel beperkte gebruiker.

Eenheidsloze waarden

Soms zal je eenheidsloze waarden tegenkomen in CSS.  Dit is niet altijd een fout, in sommige omstandigheden is dit perfect ok.  Als je bijvoorbeeld de marge en vulling van een element compleet wil verwijderen, can je gewoon de eenheidsloze 0 gebruiken: 0 is 0 ongeacht welke eenheden voorheen werden gebruikt!

margin: 0;

Eenheidsloze lijnhoogte

Een ander voorbeeld is line-height, welks de hoogte instelt van een regel tekst in een element.  Je kan eenheden gebruiken om een specifieke regelhoogte in te stellen, maar het is vaak eenvoudiger om een eenheidsloze waarde te gebruiken die dient als een multiplicator.  Neem bijvoorbeeld deze HTML:

<p>Blue ocean silo royal baby space glocal evergreen relationship housekeeping
native advertising diversify ideation session. Soup-to-nuts herding cats resolutionary
virtuoso granularity catalyst wow factor loop back brainstorm. Core competency 
baked in push back silo irrational exuberance circle back roll-up.</p>

En deze CSS:

p {
  line-height: 1.5;
}

Die geven samen volgende output:

De font-size is hier 16px; de regelhoogte zal 1.5 keer die waarde zijn (dus 24px).

Aantal animaties

CSS Animaties stellen je in staat om HTML elementen op een pagina te animeren.  Laat ons beginnen met een simpel voorbeeld dat er voor zorgt dat een paragraaf roteert wanneer de muis erover komt.  De HTML voor dit voorbeeld is bijzonder eenvoudig:

<p>Hello</p>

De CSS is iets ingewikkelder:

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

p {
  color: red;
  width: 100px;
  font-size: 40px;
  transform-origin: center;
}

p:hover {
  animation-name: rotate;
  animation-duration: 0.6s;
  animation-timing-function: linear;
  animation-iteration-count: 5;
}

Hier kan je een aantal interesante eenheden zien die we niet expliciet bespreken in dit artikel (<angle>s, <time>s, <timing-function>s, <string>s...).  De enige waarde waar we in geïnteresseerd zijn is deze declaratie animation-iteration-count: 5;: deze bepaalt hoeveel keer de animatie zal gebeuren indien die wordt getriggerd (in dit geval dus wanneer de muis erover beweegt).  Het is een eenvoudig eenheidsloos geheel getal (of "integer" in computertaal).

Het resultaat van deze code ziet er zo uit:

Percentages

Je kan de meeste numerieke waarden ook vervangen door percentages.  Dit laat ons, bijvoorbeeld, toe om dozen te maken wiers breedte altijd mee zal veranderen om een bepaald percentage te zijn van de breedte van de oudercontainer.  Dit in tegenstelling tot dozen van wie de breedte is ingesteld op een absolute waarde (zoals px of ems), wier breedte altijd dezelfde zal zijn, ook al verandert de breedte van de oudercontainer.

Laten we dit bekijken in een voorbeeld.

Eerst maken we twee gelijkaardige dozen in de HTML:

<div>
  <div class="boxes">Fixed width layout with pixels</div>
  <div class="boxes">Liquid layout with percentages</div>
</div>

En dan voegen we wat stijlen toe met CSS:

div .boxes {
  margin: 10px;
  font-size: 200%;
  color: white;
  height: 150px;
  border: 2px solid black;
}

.boxes:nth-child(1) {
  background-color: red;
  width: 650px;
}

.boxes:nth-child(2) {
  background-color: blue;
  width: 75%;
}

We krijgen dan volgend resultaat:

Eerst geven we beide div-elementen een margin, height, font-size, border en color. Vervolgens geven we de eerste en tweede div een verschillende background-color zodat we ze gemakkelijk uit elkaar kunnen houden.   We stellen ook de width van de eerste div in op 650px, en die van de tweede div op 75%.  Het resultaat hiervan is dat de eerste div altijd dezelfde hoogte zal hebben, zelfs indien de viewport aangepast wordt qua grootte (de div zal verdwijnen wanneer de viewport kleiner wordt dan de breedte van de div),.  De breedte van de tweede div zal mee veranderen met de breedte van de viewport, zodanig dat die altijd 75% van de breedte van de ouder zal zijn.  In dit geval is de ouder van de div het <body> element, dat standaard 100% van de breedte van de viewport inneemt.

Opmerking: Je kan dit effect in actie zien door het browservenster te veranderen van grootte; je kan dat ook uitproberen op de broncode die je vindt op Github.

We hebben de font-size ook ingesteld op een percentage: 200%. Dit werkt iets anders dan je zou verwachten, maar dit is logisch: de nieuwe grootte isrelatief ten opzicht van de tekstgrootte van de ouder, net zoals bij ems. In dit geval is de tekstgrootte van de ouder 16px, of de standaard voor de pagina, dus zal de berekende waarde 200% hiervan bedragen ... of 32px.  Dit werkt op een zeer gelijkaardige manier als de ems: 200% is in essentie het equivalent van 2 ems.

Deze twee verschillende doos layoutsoorten worden dikwijls omschreven als vloeiende layout of liquid layout (die dus veranderen als de viewportgrootte verandert) en vaste layout of  fixed width layout (die gelijk blijven ongeacht wat).  Beiden worden gebruikt in andere omstandigheden, bv.:

  • Een vloeiende layout kan gebruikt worden om er voor te zorgen dat een document altijd zal passen op het scherm en dat het er goed zal uit zien ongeacht de grootte van dat scherm.
  • Een vaste layout kan gebruikt worden om een online kaart een stabiele grootte te geven.  De browser viewport kan dan op die kaart rondscrollen, zodat er slechts een deel van de kaart zichtbaar is per keer.  De hoeveelheid die zichtbaar is hangt dan af van de grootte van de viewport.

Je zal meer leren over web layouts later in de cursus, met name in de CSS layouts en Responsief Design modules (nog niet klaar).

Actief leren: Spelen met lengtes

Voor deze actieve leeroefening zijn er geen juiste antwoorden.  We zouden gewoon willen dat je speelt met de breedte/hoogte van de .inner en .outer divs om te zien welk effect de verschillende waarden hebben.  Probeer een percentage voor de .inner div en zie hoe die zich aanpast wanneer de breedte van de .outer div verandert.  Probeer ook enkele vaste waarden, zoals pixels en ems.

Als je een fout maakt kan je altijd herbeginnen door op de Reset knop te duwen.

Kleuren

Er zijn verschillende manieren om kleur te specifiëren in CSS, sommige daarvan werden recenter geïmplementeerd dan andere.  De kleurwaarden kunnen eender waar gebruikt worden in CSS, ongeacht of het nu gaat om tekstkleuren, achtergrondkleuren of eender welke andere kleur die je instelt.

Het standaard kleursysteem dat beschikbaar is in moderne computers is 24 bit, wat toelaat om zo'n 16,7 miljoen verschillende kleuren te tonen via een combinatie van rood, groen en blauw (256 combinaties per kanaal => 256 x 256 x 256 = 16,777,216.)

Laten we de verschillende mogelijkheden voor kleurwaarden overlopen.

Opmerking:  Om te schakelen tussen de verschillende kleursystemen die hieronder besproken worden heb je een kleuromzetter nodig.  Er zijn een pak gemakklijk te gebruiken omzetters te vinden online, zoals HSL to RGB / RGB to HSL / Hex Colour Converter.

Sleutelwoorden

Het eenvoudigste, oudste systeem voor kleuren in CSS zijn de sleutelwoorden.  Dit zijn specifieke strings die elke en bepaalde kleurwaarde vertegenwoordigen.  Zo zal de volgende code:

<p>This paragraph has a red background</p>
p {
  background-color: red;
}

Dit resultaat geven:

Dit is gemakkelijk te begrijpen, ook al beperkt het ons tot een zeer beperkte set van kleurprimitieven.  Er zijn zo'n 165 verschillende sleutelwoorden beschikbaar voor gebruik in moderne browsers.  Voor een volledige lijst kan je hier kijken.

Je wil waarschijnlijk zuivere kleuren zoals rood, zwart en wit regelmatig gebruiken in je werk.  Maar voor andere kleuren zal je voorkeur uitgaan naar een ander kleursysteem.

Hexadecimale waarden

Het tweede meest gebruikte kleursysteem zijn hexadecimale waarden of hex waarden.  Elke hex waarde bestaat uit een hashtag (#) gevolgd door zes hexadecimale nummers (die een waarde kunnen nemen van 0 tot f, f = 15, dus 0123456789abcdef).  Elk paar waarden vertegenwoordigt één van de kanalen (rood, groen en blauw) en laat ons toe om elk van de beschikbare 256 waarden te gebruiken (16 x 16 = 256). 

Dus, deze code:

<p>This paragraph has a red background</p>
<p>This paragraph has a blue background</p>
<p>This paragraph has a kind of pinky lilac background</p>
/* equivalent to the red keyword */
p:nth-child(1) {
  background-color: #ff0000;
}

/* equivalent to the blue keyword */
p:nth-child(2) {
  background-color: #0000ff;
}

/* has no exact keyword equivalent */
p:nth-child(3) {
  background-color: #e0b0ff;
}


Geeft het volgende resultaat:

Deze waarden zijn iets complexer en wat moeilijker te begrijpen, maar ze geven een pak meer mogelijkheden dan sleutelwoorden: je kan elke mogelijke kleur gebruiken.

RGB

De derde mogelijkheid die we gaan bespreken is RGB. Een RGB waarde is een functie — rgb() — die drie parameters mee krijgt die de waarden voor het rode, groene en blauwe kanaal vertegenwoordigen.  Het verschil met de hexadecimale waarden is dat elk kanaal wordt weergegeven door een decimaal cijfer tussen 0 en 255, ipv. door twee hexadecimale nummers.

Laat ons een laatste voorbeeld schrijven om de RGB-kleuren te gebruiken:

<p>This paragraph has a red background</p>
<p>This paragraph has a blue background</p>
<p>This paragraph has a kind of pinky lilac background</p>
/* equivalent to the red keyword */
p:nth-child(1) {
  background-color: rgb(255,0,0);
}

/* equivalent to the blue keyword */
p:nth-child(2) {
  background-color: rgb(0,0,255);
}

/* has no exact keyword equivalent */
p:nth-child(3) {
  background-color: rgb(224,176,255);
}

Die geeft het volgende resultaat:

Het RGB systeem is bijna zo goed ondersteund als de hex waarden — je zal vermoedelijk geen enkele browser tegenkomen die ze niet ondersteund.  De RGB waarden zijn voor velen een pak eenvoudiger / intuïtiever in gebruik dan de hex waarden.

Opmerking: Waarom 255 ipv. 256? Computersystemen tellen meestal beginnend vanaf 0, niet vanaf 1.  Dus om 256 mogelijke waarden toe te laten moeten RGB kleuren waarden aanvaarden in de reeks van 0-255, ipv. in de reeks van 1-256.

HSL

Iets minder goed ondersteund dan RGB is het HSL model (dit wordt niet ondersteund op oude versies van IE), dat vooral werd ingevoerd na veel interesse van designers.  In plaats van rood, groen en blauwe waarden; aanvaardt de hsl() functie tint (hue), verzadiging (saturation), en lichtheid (lightness) waarden, die dan gebruikt worden om te bepalen welk van de 16,7 miljoen kleuren bedoeld worden:

  1. tint: de basisschakering van de kleur.  Dit neemt een waarde tussen 0 en 360, wat een hoek vertegenwoordigt op een kleurenwiel.
  2. verzadiging: hoe verzadigd is de kleur?  Dit neemt een waarde tussen 0-100%, waar 0 geen kleur is (een grijsschakering) en 100% volledige kleurverzadiging.
  3. lichtheid: hoe licht of helder is de kleur?  Dit neemt een waarde van 0-100%, waar 0 geen licht is (zwart) en 100% volledig helder is (wit).

Opmerking: Een HSL cylinder is nuttig om te visualiseren hoe dit kleurmodel werkt.  Zie het HSL en HSV artikel op Wikipedia.

We herschrijven ons voorbeeld zodat het HSL kleuren gebruikt:

<p>This paragraph has a red background</p>
<p>This paragraph has a blue background</p>
<p>This paragraph has a kind of pinky lilac background</p>
/* equivalent to the red keyword */
p:nth-child(1) {
  background-color: hsl(0,100%,50%);
}

/* equivalent to the blue keyword */
p:nth-child(2) {
  background-color: hsl(240,100%,50%);
}

/* has no exact keyword equivalent */
p:nth-child(3) {
  background-color: hsl(276,100%,85%);
}

Wat volgend resultaat geeft:

Het HSL kleurmodel is intuïtief voor designers, die gewend zijn om ermee te werken.  Het is nuttig om, bv., een set van schakeringen te vinden die beter tezamen passen in een monochroom kleurschema:

/* three different shades of red*/
background-color: hsl(0,100%,50%);
background-color: hsl(0,100%,60%);
background-color: hsl(0,100%,70%);

RGBA en HSLA

RGB en HSL hebben allebei overeenkomstige modussen  — RGBA en HSLA — die je toelaten om niet enkel de kleur in te stellen die je wil, maar ook welke transparantie je die kleur wil geven.  Deze overeenkomstige functies aanvaarden dezelfde parameters, plus een vierde waarde in de reeks van 0 tot 1, die de transparantie of het alpha kanaal instelt.  0 is volledig transparant, 1 is volledig ondoorzichtig.

Bekijken we een ander kort voorbeeld — eerst de HTML:

<p>This paragraph has a transparent red background</p>
<p>This paragraph has a transparent blue background</p>

Nu de CSS — hier bewegen we de eerste paragraaf neerwaards met wat positionering, om het effect te tonen van de overlappende paragrafen (je leert later meer over positionering):

p {
  height: 50px;
  width: 350px;
}

/* Transparent red */
p:nth-child(1) {
  background-color: rgba(255,0,0,0.5);
  position: relative;
  top: 30px;
  left: 50px;
}

/* Transparent blue */
p:nth-child(2) {
  background-color: hsla(240,100%,50%,0.5);
}

Dit is het resultaat:

Transparente kleuren zijn zeer bruikbaar voor rijke visuele effecten — het mengen van achtergronden, semi-doorzichtige UI-elementen, enz.

Ondoorzichtigheid (opacity)

Er is een andere manier om de transparantie in te stellen via CSS — de opacity eigenschap.  In plaats van de transparantie in te stellen van een bepaalde kleur, stelt dit de transparantie in van een geselecteerd element en al zijn kinderen.  We bekijken opnieuw een voorbeeld om het verschil te zien.

<p>This paragraph is using RGBA for transparency</p>
<p>This paragraph is using opacity for transparency</p>

Nu de CSS:

/* Red with RGBA */
p:nth-child(1) {
  background-color: rgba(255,0,0,0.5);
}

/* Red with opacity */
p:nth-child(2) {
  background-color: rgb(255,0,0);
  opacity: 0.5;
}

En het resultaat:

Bemerk het verschil  — de eerste doos die de RGBA kleur gebruikt heeft enkel een semi-transparante achtergrond, waar bij de tweede doos alles transparant is ... ook de tekst.  Je zal goed moeten nadenken waar je welke optie gebruikt — zo is RGBA, bv., nuttig wanneer je een overlay gebruikt om een onderschrift leesbaar boven een afbeelding te zetten zodanig dat de tekst nog leesbaar is.  Ondoorzichtigheid  van zijn kant is nuttig wanneer je een animatie creëert waar het volledige element van zichtbaar naar onzichtbaar gaat.

Actief leren: Spelen met kleuren

Dit is een actieve leersessie zonder juiste antwoorden: we willen gewoon dat je de waarde van de achtergrondkleur veranderd voor de drie dozen die elkaar licht overlappen.  Probeer sleutelwoorden, hex, RGB/HSL/RGBA/HSLA, en ondoorzichtigheid. Kijk hoeveel plezier je ermee kan beleven. 

Als je een fout maakt, kan je altijd herbeginnen door op de Reset knop te drukken.

Functies

 In programmeren is een function een herbruikbaar deel code dat meerdere keren kan uitgevoerd worden om een repetititieve taak te vervolledigen met een minimum aan moeite van de developper en de computer.  Functies worden geassocieerd met talen zoals JavaScript, Python, of C++, maar ze bestaan ook in CSS als eigenschap-waarden. We hebben functies al in actie gezien in de Colors sectie, met rgb(), hsl(), enz.:

background-color: rgba(255,0,0,0.5);
background-color: hsla(240,100%,50%,0.5);

Deze functies berekenen welke kleur er moet gebruikt worden.

Maar je zal functies ook op andere plaatsen tegenkomen: elke keer je een naam ziet met een haakjes achter, die één of meer waarden bevatten gescheiden door komma's, gaat het om een functie.  Bijvoorbeeld:

/* calculate the new position of an element after it has been rotated by 45 degress */
transform: rotate(45deg);
/* calculate the new position of an element after it has been moved across 50px and down 60px */
transform: translate(50px, 60px);
/* calculate the computed value of 90% of the current width minus 15px */
width: calc(90%-15px);
/* fetch an image from the network to be used as a background image */
background-image: url('myimage.png');

Er zijn veel toffe stukjes functionaliteit die je kan gebruikken in CSS, die je te gepaste tijde zal leren!

Samenvatting

Hopelijk vond je het interessant om bij te leren over CSS waarden en eenheden — geen zorgen als je nog niet alles begrijpt momenteel; je zal nog veel kunnen oefenen met dit belangrijke onderdeel van de CSS syntax in het vervolg van deze cursus!

Documentlabels en -medewerkers

 Aan deze pagina hebben bijgedragen: Badlapje
 Laatst bijgewerkt door: Badlapje,