Vorige   Volgende   Inhoud   Eigenschappen   Index  

2 Introductie tot CSS2

Inhoud

2.1 Een korte CSS2 tutorial voor HTML

In deze tutorial laten we zien hoe makkelijk het kan zijn om simpele stijlbladen te maken. Voor deze tutorial zul je een beetje kennis van HTML moeten hebben (zie [HTML40]) en van de standaard desktop terminologie.

We beginnen met een klein HTML document:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  </HEAD>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

Om de kleur van de tekst van de H1 elementen blauw te maken kun je de volgende CSS regel schrijven:

  H1 { color: blue }

Een CSS regel bestaat uit de volgende twee voornaamste gedeeltes: een selector ('H1') en de declaratie ('color: blue'). De declaratie bestaat uit twee gedeeltes: de eigenschap ('color') en de waarde die je aan de eigenschap toekent ('blue'). Ondanks dat het voorbeeld hierboven alleen één van de eigenschappen probeert te beïnvloeden die nodig zijn voor de vorming van een HTML document, is het op zichzelf een geldig stijlblad. Gecombineerd met andere stijlbladen (een fundamentele eigenschap van CSS is dat stijlbaden kunnen worden gecombineerd) zal het de uiteindelijke opmaak van het document bepalen.

De HTML 4.0 specificatie zegt hoe stijlbladen gekoppeld kunnen worden aan documenten: Binnen het HTML document of via een extern stijlblad. Om het stijlblad binnen het document in te voegen, gebruik het STYLE element:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  <STYLE type="text/css">
    H1 { color: blue }
  </STYLE>
  </HEAD>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

Wij raden auteurs voor maximale flexibiliteit om externe stijlbladen te gebruiken; dit omdat de stijlbladen veranderd kunnen worden zonder de bron van het HTML document aan te hoeven passen, daarnaast kan een extern stijlblad gebruikt worden voor verschillende documenten.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  <LINK rel="stylesheet" href="bach.css" type="text/css">
  </HEAD>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

Het LINK element specificeert:

Om te laten zien hoe nauw een stijlblad en de gestructureerde opmaak verbonden zijn gaan we door met het gebruiken van het STYLE element in deze tutorial. Laten we een paar kleuren toevoegen: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  <STYLE type="text/css">
    BODY { color: red }
    H1 { color: blue }
  </STYLE>
  </HEAD>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

Het stijlblad bevat nu twee regels: de eerste bepaald de kleur (rood) van het BODY element en de tweede maakt het H1 element blauw. Omdat er geen kleur is gespecificeerd voor het P element, zal deze de kleur van het bovenstaande element (BODY) overerven (inheritance). Het H1 element is ook een dochter element van de BODY, maar de tweede regel overstemt de overgeërfde waarde. In CSS zijn er vaak zulke conflicten tussen verschillende waardes, deze specificatie beschrijft hoe deze problemen moet worden opgelost.

CSS2 heeft meer dan 100 verschillende eigenschappen, waaronder 'color'. Laten we naar een paar andere kijken: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  <STYLE type="text/css">
    BODY { 
      font-family: "Gill Sans", sans-serif;
      font-size: 12pt;
      margin: 3em; 
    }
  </STYLE>
  </HEAD>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

Het eerste wat opvalt is dat verschillende declaraties worden gegroepeerd door plaatsing tussen accolades ({...}), en worden gescheiden door punt-komma's. Ook de laatste declaratie kan worden gevolgd door een puntkomma.

De eerste declaratie van het BODY element bepaalt de lettertype familie: "Gill Sans". Als dit font niet beschikbaar is, gebruikt de user agent meestal standaard de 'sans-serif' lettertype familie. 'Sans-serif' is een van de 5 lettertype families welke alle user agenten kennen. Dochter elementen van de BODY zullen de waarde van de 'font-family' eigenschap overerven.

De tweede declaratie bepaalt de grootte van de letters behorende tot het BODY element op 12 punten. De eenheid 'punt' is een voorbeeld van een eenheid welke de grootte van een element absoluut bepaald en niet aan de hand van de omgeving.

De derde declaratie gebruikt een relatieve eenheid welke de grootte van de marges bepaald aan de hand van de omgeving. De eenheid "em" verwijst naar de grootte van het lettertype van het element. In dit geval is het resultaat dat de marges rond het BODY element drie keer zo groot als de grootte van de letters.

2.2 Een korte CSS2 tutorial voor XML

CSS kan gebruikt worden in alle talen gebaseerd op opmaak structuren, zoals applicaties geschreven in de eXtensible Markup Language [XML10]. Eigenlijk is XML meer afhankelijk van stijlbaden dan HTML omdat auteurs hun elementen beter kunnen opmaken. Dit voorkomt dat user agenten niet weten om te gaan met sommige elementen.

Een simpel XML fragment: 

<ARTICLE>
  <HEADLINE>Fredrick the Great meets Bach</HEADLINE>
  <AUTHOR>Johann Nikolaus Forkel</AUTHOR>
  <PARA>
    One evening, just as he was getting his 
    <INSTRUMENT>flute</INSTRUMENT> ready and his
    musicians were assembled, an officer brought him a list of
    the strangers who had arrived.
  </PARA>
</ARTICLE>

Om dit fragment goed weer te kunnen geven, moeten we eerst declareren welke elementen inline-level (veroorzaken geen afbraak van de lijn) en welke block-level (veroorzaken wel afbraak van de lijn) zijn. 

INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }

De eerste regel declareert INSTRUMENT als inline en de tweede regel declareert de rest van de door komma's gescheiden lijst selectoren als block-level.

Een mogelijkheid om een stijlblad aan een XML document te linken is het gebruik van een proces instructie: 

<?xml-stylesheet type="text/css" href="bach.css"?<
<ARTICLE>
  <HEADLINE>Fredrick the Great meets Bach</HEADLINE>
  <AUTHOR>Johann Nikolaus Forkel</AUTHOR>
  <PARA>
    One evening, just as he was getting his 
    <INSTRUMENT>flute</INSTRUMENT> ready and his
    musicians were assembled, an officer brought him a list of
    the strangers who had arrived.
  </PARA>
</ARTICLE>

Een visuele user agent zou het bovenstaande voorbeeld als volgt weer kunnen geven:

Example rendering   [B]

Schenk hierbij aandacht aan het feit dat het woord "flute" binnen de paragraaf blijft omdat het de content is van het inline-element INSTRUMENT.

De tekst is echter nog steeds niet opgemaakt als je zou verwachten. Bijvoorbeeld de lettergrootte van de headline zou groter moeten zijn dan de rest van de tekst, en je kunt de naam van de auteur cursief weergeven. 

INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
HEADLINE { font-size: 1.3em }
AUTHOR { font-style: italic }
ARTICLE, HEADLINE, AUTHOR, PARA { margin: 0.5em }

Een visuele user agent zou het bovenstaande voorbeeld als volgt weer kunnen geven:

Example rendering   [B]

Door meer regels toe te voegen aan het stijlblad kun je de presentatie van het document nog verder verbeteren.

2.3 CSS2 verwerkingsmodel voor User Agenten

Deze sectie probeert u een idee te geven hoe user agenten die CSS ondersteunen te werk kunnen gaan bij de opbouw van een document. Het hier weergegeven model is alleen een concept; echte implementaties kunnen sterk afwijken.

In dit model verwerkt een user agent de broncode van een document in de volgende stappen:

  1. Ontleedt de broncode van het document en maak een 'stamboom van het document', de hiërarchische structuur van het document.
  2. Identificeer het media type van het document.
  3. Verzamel alle stijlbaden die bij het media type van het document horen.
  4. Ken aan iedere eigenschap die beschikbaar is voor dit media type een waarde toe. Aan eigenschappen worden waardes toegekend volgens het mechanisme dat is beschreven in de sectie over het watervaleffect en overerving.

    Een gedeelte van de berekening van de waardes hangt af van het algoritme dat hoort bij het gebruikte media type. Bijvoorbeeld, als het uitvoer medium het scherm is, gebruiken user agenten het 'visuele opmaak model', als het medium een geprinte pagina is, dan gebruiken ze het 'pagina model' en als er mondelinge uitvoer moet plaatsvinden (zoals bijvoorbeeld een spraakvormer), wordt het 'spraakvormings model' gebruikt.

  5. Uit de stamboom wordt er een layout-structuur gevormd. Vaak lijkt de layout-structuur op de stamboom van het document, maar soms wijkt deze juist beduidend af. Dit komt vooral voor als auteurs gebruik maken van pseudo-elementen en een gegenereerde content. Om te beginnen hoeft de formatting structure helemaal niet een boom structuur te hebben; de vorm van de structuur is afhankelijk van de implemantatie. Ten tweede kan de formatting structuur meer of minder informatie bevatten dan de stamboom van het document. Bijvoorbeeld als een element in de stamboom de waarde 'none' heeft voor de eigenschap 'display', dan zal dit element niet voorkomen in de layout-structuur. Daarentegen kan een lijst element weer veel meer informatie in de layout-structuur genereren: naast de informatie over opmaak (bijv. het opsommingsteken) wordt ook de content van het list element aan de layout-structuur toegevoegd.

    In deze fase wijzigt de user agent de stamboom van het document niet. Met name content die gegenereerd is door stijlbaden wordt niet teruggeleid naar de uitvoerder van het document (bijvoorbeeld voor taalkundig herleiding).

  6. Stuur de layout-structuur door naar het uitvoerende medium (bijv. het printen, weergeven op het scherm en het omzetten in spraak van de resultaten, enz.).

Stap 1 wordt niet behandeld in deze specificatie (zie bijvoorbeeld [DOM]).

Stappen 2-5 worden behandeld in het grootste gedeelte van deze specificatie.

Step 6 wordt niet behandeld in deze specificatie.

2.3.1 Het canvas

Voor alle media beschrijft de term canvas "de ruimte waar de layout-structuur wordt uitgevoerd." Net zoals het doek van een schilder, waarop het idee in zijn hoofd vorm krijgt. De grootte van het canvas is onbegrensd, wel wordt de vorming van het document meestal uitgevoerd binnen een begrensd gebied van het canvas, zoals ingesteld door de User Agent passend bij het medium van uitvoer. Zo kiezen user agenten bijvoorbeeld meestal een minimale breedte en een standaard breedte gebaseerd op de dimensies van de zogenaamde viewport. user agenten die uitvoeren naar een pagina leggen meestal de maximale hoogte en breedte van elementen vast. User agenten met mondelinge uitvoer kunnen limieten leggen aan de amplitude van het geluid, maar niet aan de tijd.

2.3.2 Het addresserings model van CSS2

Met de CSS2 selectoren en eigenschappen kunnen de volgende gedeeltes van een document of user agent aangesproken worden:

2.4 CSS ontwerp principes

CSS2 is net als CSS1 gebaseerd op een aantal ontwerp principes:

Vorige   Volgende   Inhoud   Eigenschappen   Index