Cascading en erving in CSS PDF  | Afdrukken |  E-mail
Geschreven door Rinie Hooijer   
woensdag, 31 december 1997 05:00
Inhoudsopgave
Cascading en erving in CSS
Conflict in CSS
Alle Pagina's
De specificatie CSS bestaat eigenlijk uit twee gedeelten. Het eerste gedeelte is visueel van aard en voor iedereen te begrijpen. Het gaat hier namelijk om de code zoals die in de style sheets wordt gedefinieerd. Als designer kunt u die code aanpassen of verwijderen totdat het aan uw behoeften voldoet. Of de webpagina met de bijbehorende style sheet vervolgens door een andere gebruiker net zo wordt gezien is echter zeer de vraag.
De specificatie CSS bestaat eigenlijk uit twee gedeelten. Het eerste gedeelte is visueel van aard en voor iedereen te begrijpen. Het gaat hier namelijk om de code zoals die in de style sheets wordt gedefinieerd. Als designer kunt u die code aanpassen of verwijderen totdat het aan uw behoeften voldoet. Of de webpagina met de bijbehorende style sheet vervolgens door een andere gebruiker net zo wordt gezien is echter zeer de vraag.

Behalve dat uw pagina door een andere browser moet worden geïnterpreteerd heeft u ook nog eens te maken met de wensen van de gebruiker en van eventuele medemakers. Stel, u maakt een pagina waarin alle koppen de kleur blauw hebben. U werkt samen met een collega en die maakt een style sheet met alleen maar rode koppen. De browser van de eindgebruiker geeft standaard zwarte koppen en de eindgebruiker zelf heeft in zijn persoonlijke style sheet groene koppen gedefinieerd. Wat gebeurt er dan met de opmaak? Wie of wat heeft er voorrang? En hoe kunt u dat beïnvloeden?

Het tweede en grootste gedeelte van CSS bestaat dan ook uit afspraken die conflicten in cascading en erving moeten oplossen. Bij cascading praten we over een horizontale structuur. Verschillende style sheets moeten via dit mechanisme tot één worden gesmeed. Bij cascading komt er uiteindelijk altijd één waarde als winnaar naar boven. Om die winnaar te vinden moet er goed worden gezocht, omdat cascading met vier verschillende conflicten te maken kan krijgen. Het meest duidelijke conflict wordt veroorzaakt door de verschillen in designers en gebruikers style sheets. Daarnaast treden er conflicten op tussen de style sheets van de browser en die van de gebruiker. Als deze conflicten zijn opgelost kan er binnen de style sheets nog verwarring optreden als er verschillende rules worden geven aan dezelfde elementen. Het laatste opstakel wordt veroorzaakt doordat bepaalde rules meer gewicht krijgen toegediend dan andere. Hierdoor moet van de normale regels worden afgeweken.

Nadat de problemen van cascading zijn opgelost wordt er nog gekeken naar de erving ('inheritance'). Het mechanisme van erving treedt alleen op wanneer er geen rules zijn gedefinieerd voor bepaalde eigenschappen in het cascading mechanisme. Een bepaald element zal dan automatisch de eigenschappen overnemen van de ouder (parent). Bij erving praten we dan ook altijd over een verticale structuur. Met een aantal voorbeelden zullen we het principe van cascading en erving verduidelijken.
Als uitgangspunt nemen we de volgende webpagina:


Voorbeeld 1, geen conflicten

Dit is een tussenkop


Hier staat een deel van uw tekst.




Aan deze webpagina worden twee style sheets gekoppeld, die van de browser en die van de ontwerper. De style sheet van de browser geeft aan dat de gebruikte font-family van de tag sans serif moet zijn, terwijl de style sheet van de designer aangeeft dat de

tag de font-family serif krijgt.
Allereerst kijkt het cascading mechanisme of de elementen conflicterende rules hebben. Dit blijkt niet het geval omdat geen enkel element meer dan één rule heeft. Vervolgens treedt het ervingsmechanisme in werking. Omdat aan de
tag geen waarde zijn gekoppeld, erft deze de eigenschappen van de ouder. De
tag zal dus als font-family sans serif krijgen. Verder treden er geen conflicten op.






Laatst aangepast op dinsdag, 01 september 2009 13:15