Hoofdstuk 6: Opmaak verzorgen met CSS
In de voorgaande hoofdstukken zagen we dat we documenten al een behoorlijke structuur konden meegeven enkel via de XHTML 1.0. De combinatie XHTML en CSS (Cascading Style Sheets) is uitstekend om de lay-out van het document nog meer tot haar recht te doen komen. Nu behandelen we CSS 2.1 en later in dit werk gaan we in op XML (eXtensible Markup Language).
Een CSS document kan men bovendien op meerdere XHTML pagina's toepassen. Hierdoor kunnen we met een minimum aan werk een maximum aan resultaat bereiken. Bovendien is het later vrij gemakkelijk om het uitzicht van een volledige website te wijzigen en dit enkel en alleen door enkele CSS code regeltjes te wijzigen. Als dit niet veelbelovend is!
1. Overerving en de boomstructuur
CSS maakt optimaal gebruik van de boomstructuur van een XHTML document. Dit is de reden waarom de combinatie XHTML en CSS zo bijzonder krachtig is. Als je document goed gestructureerd is, kan je met een minimum aan CSS regels het grotendeels vormgeven. Waarom? In een XHTML document is er overerving (inheritance) tussen parents en childs. De childs erven de eigenschappen van de parents. We illustreren dit aan de hand van een voorbeeld.
XHTML code
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
<head>
<title>De boomstructuur</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
</head>
<body>
<h1>De boomstructuur van een XHTML
document</h1>
<p>Als we het hebben over
<em>XHTML</em> hebben we
steeds de boomstructuur in gedachten. Wenst u meer te weten over deze
structuur klik dan op <a
href="boompagina.htm">boomstructuur</a>.</p>
<p>Hieronder sommen we de belangrijkste zaken
op</p>
<ul>
<li>Het ontstaan van XHTML</li>
<li>Wat is een boomstructuur?</li>
<li>Hoe maken we een boomstructuur.</li>
<li>Voor concrete voorbeelden verwijzen we u naar
<a
href="allebomen.htm">alles over de
boomstructuur</a>.</li>
</ul>
<p>Dit was het dan. Beetje weinig?
Sorry!</p>
</body>
</html>
Weergave in webbrowser
Het eerste element uit onze boomstructuur is <html>, daarom heten we dit het root-element.
<head> en <body> zijn de children (kinderen) van <html>.
<title> is het enige child element van <head>.
De grootste child is <body> Dit zal in zowat alle XHTML bestanden zo zijn.
De tag <body> heeft als children: <h1>, <p>, <p>, <ul> en nog eens <p>
De eerste alinea <p> heeft op haar beurt 2 children: <em> en <a>.
De ongeordende lijst <ul> heeft 4 children: 4 X <li>
De laatste <li> heeft op haar beurt een child: <a>
De 2de en de laatst alinea hebben geen children.
Schematische voorstelling
Het kunnen omzetten van een XHTML document in een correcte boomstructuur vormt de basis voor het correct kunnen invoegen van CSS regels. Indien u voorgaande hoofdstukken (hoofdstukken 1 t.e.m. 5) goed begrepen hebt, moet u in staat zijn om aan de hand van de XHTML code zelf deze boomstructuur op te stellen. CSS 2.1 is ontworpen door het W3C en zij hebben ook de regels van CSS 2.1 op hun site geplaatst. U vindt deze regels in een afzonderlijke map van hun site namelijk op http://www.w3.org/TR/CSS21/
2. De selector
We maken in CSS steeds gebruik van een selector. Dit is een referentie die we nodig hebben om een brug te slaan tussen XHTML en CSS. Vanuit de XHTML code wordt immers verwezen naar deze referentie (voorbeelden verderop).
Soms is de selector een XHTML element (vb'n: h1, p, a, ul, ol, li, ...) maar we kunnen ook zelf een nieuwe naam verzinnen.
De selector is heel belangrijk en de Nederlandstalige vakliteratuur is hierover helaas niet altijd eenduidig. Daarom verwijs ik tevens naar het gezaghebbend W3C: http://www.w3.org/TR/CSS21/selector.html
Algemene notatie in CSS
selector + accolade openen {
Instructieregel 1;
Instructieregel 2;
Instructieregel 3;
Enz.
}
Deze algemene notatie is een minimum waarbij het aantal instructieregels kan herleid worden tot 1. Het is tevens belangrijk dat elke instructieregel eindigt met een puntkomma (;). Als we dit niet doen dan wordt de instructieregel niet uitgevoerd. Natuurlijk mogen we ook de verwijzing in ons XHTML document niet vergeten.
2.1 Universal selector
Zoals de naam het zelf zegt is dit de meest algemene selector. Deze kunnen we op elk element toepassen.
Syntax: asterisk (*) + punt (.) + selector + accolade openen {
Instructieregel 1;
Instructieregel 2;
Instructieregel 3;
Enz.
}
Na de selector openen we de accolade en geven 1 of meer instructieregels. De instructieregels worden telkens op het eind afgesloten met een puntkomma (;) Om de universal sector te gebruiken mogen we zelfs de asterisk weglaten.
Voorbeeld
* .groot{
font-size: 18pt;
}
Tevens goed
.groot{
font-size: 18pt;
}
Overal waar we in ons XHTML element verwijzen naar groot, wordt het element en de daaronder liggende elementen weergegeven met een puntgrootte van 18!
2.2 Element selector
Dit is de meest elementaire selector zowel door haar vorm als door haar betekenis. Ze beïnvloedt alle children van het element. Zoals we eerder zagen aan de hand van de boomstructuur is dit ook heel normaal. Deze selector wordt ook type selector genoemd.
Voorbeeld
h1{color: red;} (in het CSS document)
<h1>Rode tekst</h1> (in het XHTML document)
2.3 Grouping selector
Als we bovenstaande selector (punt 2.2) gebruiken in combinatie met meer dan 1 element spreken we van een grouping selector. Ook deze beïnvloed alle children van de betreffende elementen. Hieruit blijkt alweer hoe belangrijk de boomstructuur is.
vb. h1, h2, h3{color: red;}
2.4 Descendant selector
Het Engelse woord descendant betekent afstammend of afdalend. De descendant selector slaat op het afstammend element binnen de boomstructuur van het XHTML document.
CSS code
h1 { color: red }
em { color: red }
h1 em { color: blue }
XHML code
<h1>This headline is <em>very</em> important</h1>
<p>Is it<em> realy</em> important?</p>
Conclusie
Very staat in het blauw omdat het binnen de tag em staat en tevens ondergeschikt is aan de tag h1. Het woord realy komt in het rood daar het ondergeschikt is aan de tag p. We hebben hiervoor geen descendant selector maar een element selector nl. em { color: red }
2.5 Child selector
Bij een child selector is een bepaald element de child van een ander element. We verduidelijken dit met een voorbeeld.
Voorbeeld
CSS code
body > p { line-height: 1.3 }
XHTML code
<h1>Boek over XHTML, CSS en XML</h1>
<h3>Hoofdstuk 6: Opmaak verzorgen met CSS</h3>
<p>In de voorgaande hoofdstukken zagen we dat we documenten al een behoorlijke structuur konden meegeven enkel via de XHTML 1.0.</p>
Conclusie
De rijhoogte binnen de alinea wordt aangepast aan een hoogte van 1.3. Dit is het geval omdat de alinea (p) rechtstreeks de child is van body.
2.6 Adjacent sibling selector
Adjacent sibling selector heeft de volgende syntax: E1 + E2, waarbij E2 het onderwerp is van de selector.
Voorbeeld
CSS code
h1 + h2 { margin-top: -5mm }
XHTML code
<h1>Boek over XHTML, CSS en XML</h1>
<h2>Hoofdstuk 1: Basisbegrippen in XHTML</h2>
Conclusie
Tussen de kopjes h1 en h2 zal er 5mm minder afstand zijn door invoeging van bovenstaande CSS regel. De betekenis van margin zullen we echter pas volledig kunnen begrijpen na het bestuderen van het box model (verderop in dit werk).
2.7 Class selector
De selector uit de generische class (alternatief voor universal selector nl. in 2.1) kunnen we koppelen aan een bepaald element. We bekijken de voorbeelden hieronder.
Voorbeeld 1
CSS code
p.rijhoogte{
line-height: 1.3;
}
Voorbeeld 2
CSS code
div.rand{
border: solid black 2px;
}
XHTML code
<div class="rand"><p>Daar we geregeld aanpassingen zullen moeten doen aan onze webpagina (hier: testB.htm) is het belangrijk dat we het document kunnen oproepen en laten verschijnen in onze teksteditor. Wij roepen ze opnieuw op in onze rudimentaire teksteditor (vb. kladblok) </p></div>
Conclusie
In de XHTML code dienen we bij het desbetreffende element te verwijzen naar de klasse. Dit doen we met class="naam v/d klasse". De instructie zoals border vinden we achteraan in appendix 5.
2.8 Id selector
Met de id selector verbinden we de CSS code aan maximaal één element.
Voorbeeld
CSS code
#speciaal{
font-weight: bolder;
font-variant: small-caps;
}
XHTML code
<div id="speciaal"><p>Daar we geregeld aanpassingen zullen moeten doen aan onze webpagina (hier: testB.htm) is het belangrijk dat we het document kunnen oproepen en laten verschijnen in onze teksteditor. Wij roepen ze opnieuw op in onze rudimentaire teksteditor (vb. kladblok) </p></div>
Conclusie
In de XHTML code gebruiken we opnieuw div maar nu in combinatie met id en niet in combinatie met class.
Algemeen besluit
Het gebruik van de gepaste selector zal het mogelijk maken om ons document een fraai uitzicht te geven met beperkte code. Natuurlijk zullen we ook steeds de inheritance in gedachte moeten houden. We hebben immers een boomstructuur in ons document.
3. Wijzigen boomstructuur
Door het toevoegen van het element div kunnen we deze boomstructuur wijzigen. Rond de lijst (ul) en de titel erboven willen we een rand (schematische voorstelling, vooraan hoofdstuk) . De paragraaf <p> en de ongeordende lijst <ul> staan op hetzelfde niveau in de boomstructuur (schematische voorstelling, vooraan hoofdstuk). Indien ze niet naast maar ondergeschikt waren aan elkaar zou de zaak veel eenvoudiger zijn. In dat geval zouden we aan het bovenste element een rand toekennen en het daaronder liggende element zou dit dan automatisch erven.
Deze elementen staan niet ondergeschikt aan elkaar maar los van elkaar. Door gebruik te maken van div (staat voor division (E) en dit betekent afdeling (NL)) kunnen we gemakkelijk de boomstructuur wijzigen. Onze nieuwe code wordt:
CSS code
.rand{
border: solid black 2px;
}
Gewijzigd codeblok in XHTML
<div class="rand"><p>Hieronder sommen we de
belangrijkste zaken op:</p>
<ul>
<li>Het ontstaan van XHTML</li>
<li>Wat is een boomstructuur?</li>
<li>Hoe maken we een boomstructuur.</li>
<li>Voor concrete voorbeelden verwijzen we u naar
<a href="allebomen.htm">alles over de
boomstructuur</a>.</li>
</ul>
</div>
Nieuwe structuur
Conclusie
Door het toevoegen van het de code <div class="rand"> en </div> verandert onze boomstructuur integraal. Het gevraagde kader komt inderdaad op de juiste plaats.
Onervaren programmeurs zullen in dit geval vaak een tabel gebruiken omdat ze deze instructie niet of onvoldoende kennen. Het gebruik van een tabel is echter veel te omslachtig. We raden dan ook aan om de tabel enkel te gebruiken als we aan de gebruiker ook effectief een tabel willen tonen.
4. Replaced en non-replaced elements
Niet alle tags binnen een XHTML-document behoren tot dezelfde soort. We kunnen ze opdelen in de replaced en non-replaced elements.
Replaced elements
Bij replaced elements word enkel naar het element verwezen vanuit de (X)HTML code.
Voorbeeld
<img src=”afbeelding.gif” alt='''' />
Non-placed elements
In tegenstelling tot de replaced elements bevindt het element zich rechtstreeks in het XHTML document.
Voorbeeld
<p>En maar praten, praten, praten ...</p>
Dit is slechts een gedeelte van hoofdstuk 6. De rest van dit hoofdstuk vindt u in het volledige werk dat u tevens kunt bestellen.
© Marc Vandenbussche d.d. 26 augustus 2008