Erfelijkheid en cascade

 

Stijlregels worden niet alleen door ontwerpers van webpagina's gemaakt: bladerprogramma's hebben ingebouwde stijlregels en ook pc-gebruikers kunnen het uitzicht van pagina's op hun beeldscherm mee bepalen. Een element kan gelijktijdig eigenschappen toegewezen krijgen via inline stijlregels, via een stijlblok, via een geïmporteerd of extern stijlblad en deze eigenschappen zijn omzeggens altijd tegenstrijdig. Welke eigenschappen halen het uiteindelijk?

De logica van CSS zit verscholen in de naam "Cascading Style Sheets". Als stijlregels conflicten geven halen de regels van de auteur het van die van de lezer en de stijlregels van het bladerprogramma moeten het afleggen tegen die van de lezer en van de auteur. CSS werkt volgens het principe van de waterval. Het is de laatste hindernis die de loop van het water bepaalt. M.a.w., de laatste of meest specifieke regel krijgt prioriteit.

Child-parent

HTML-tags die andere tags insluiten fungeren als "parent" en kunnen hun eigenschappen doorgeven. In ons voorbeeld is <span> "parent" en <p> is "child".

<span STYLE="color:blue"> Hij zong voor haar <p>"Twee ogen zo blauw".</p></span>

Resultaat:

  1. Hij zong voor haar "Twee ogen zo blauw".
    <p> erft de teksteigenschappen van <span>

  2. Hij zong voor haar "Twee ogen zo blauw".
    Als <p> eigenschappen kreeg toegewezen in een stijlblok of stijlblad {color:fuchsia} erft het niet langer de teksteigenschappen van <span> maar die van het stijlblok/-blad!

Niet alle eigenschappen druppelen mee naar beneden in de waterval. Gelukkig maar: de eigenschap <margin-top> mag natuurlijk alleen gelden voor <body> en niet voor de opeenvolgende paragrafen. Het lettertype, daarentegen, dat voor <body> bepaald wordt, zal ook door paragrafen overgenomen worden. In de Referentietabellen lees je welke eigenschappen kunnen geërfd worden en dus overgaan op "lagere" niveaus

Schema van de cascade

(5 is prioritair t.o.v.4, enz.)

  1. geïmporteerd of extern stijlblad
  2. HTML-element in stijlblok
  3. CLASS in stijlblok
  4. ID in stijlblok
  5. inline stijlregel

Opgelet: de positie van een stijlregel of stijlverwijzing binnen <head> is bepalend. Wat lager staat primeert. Zo krijgen kenmerken van een extern stijlblad meer gewicht dan declaraties van een stijlblok als de verwijzing naar het stijlblad in <head> onder het stijlblok wordt geplaatst.

Specificiteit van de selector

Het conflict tussen tegenstrijdige stijlregels wordt beslecht door het "niveau van de selector-specificiteit". Hoe bereken je deze specificiteit?

  stijlregel   specificiteit
tel het aantal HTML-tagnamen van de selector (c) LI {...} a=0 b=0 c=1 001
UL LI {...} a=0 b=0 c=2 002
tel het aantal CLASS-attributen van de selector (b) LI.class1 {...} a=0 b=1 c=1 011
UL UL LI.class1 {...} a=0 b=1 c=3 013
tel het aantal ID-attributen van de selector (a) #id1 {...} a=1 b=0 c=0 100
LI#ID1 {...} a=1 b=0 c=1 101

De stijlregels met het grootste specificiteitsgetal halen het van de andere.

! important

Een stijlregel die aangeduid wordt als "belangrijk" zal het halen van een tegenstrijdige regel die anders evenwaardig zou zijn.

Een voorbeeld:

BODY { background: url(bar.gif) white; background-repeat: repeat-x !important }

Als deze stijlregel via een geïmporteerd stijlblad in een document wordt opgenomen zal dit document een witte achtergrond krijgen of een afbeelding die horizontaal eenmaal herhaald wordt… welke stijlregels er ook mogen bepaald zijn i.v.m. "achtergrond" in andere geïmporteerde stijlbladen.