Structuur CSS

In dit onderdeel komen aan de orde: Stijlregels, Element selectors, Attribuut selectors, Contextgebonden selectors, Pseudo-classes, Pseudo-elementen, Het erven van stijleigenschappen en Commentaar.

Stijlregels

Een stijl is een verzameling regels, die bepalen hoe (een deel van) een document moet worden weergegeven.

Een stijlregel wordt als volgt opgebouwd:

selector { stijldeclaratie }

De selector bepaalt op welke deel van een document de stijl betrekking heeft en is dus de verbinding tussen het HTML-document en de stijl. Er zijn verschillende soorten selectors. De belangrijkste zijn de element selectors en de attribuut selectors. Een bijzondere vorm is de contextgebonden selector. Daarnaast zijn er nog de pseudo-classes en pseudo-elementen, welke als selector kunnen worden gebruikt.

De stijldeclaratie wordt in een stijlregel in een stijlblad of stijlblok geplaatst tussen accolades (gekrulde haken) en heeft de volgende opbouw:

eigenschap: waarde

In het volgende voorbeeld wordt gebruik gemaakt van de color eigenschap. Daarmee wordt de kleur van de tekst van het door de selector bepaalde deel van een document vastgelegd. Als waarde kan gebruikt worden één van de standaardkleuren of kleurwaarden.

color: red

Een stijldeclaratie kan meerdere eigenschappen met hun waarde bevatten, welke worden opgenomen in een punt-komma gescheiden lijst. Bijvoorbeeld:

background-color: red; color: yellow

Hier worden nu eerst de verschillende selectors beschreven. Daarna wordt ingegaan op het erven van stijleigenschappen en het opnemen van commentaar. De verschillende eigenschappen en hun waarden komen in aparte documenten aan de orde.

Element selectors

Bij de element selectors is, zoals de naam al aangeeft, de selector een element.
De opbouw is:

Element { stijldeclaratie }

Elk element kan gebruikt worden als selector.

Element selectors, waarvoor de stijldeclaratie hetzelfde is, kunnen gegroepeerd worden in een komma gescheiden lijst. Daarmee kan de omvang van een stijlblad of stijlblok worden beperkt.
De opbouw is:

Element1, Element2, Element3 { stijldeclaratie }

In het volgende voorbeeld wordt bepaald dat de tekst ingesloten door de elementen H1, H2 en H3 in rood moet worden weergegeven:

H1, H2, H3 { color: red }

De naam van het element is case-insensitive, dat wil zeggen dat geen onderscheid gemaakt wordt tussen hoofd- en kleine letters.

Attribuut selectors

De attribuut selectors danken hun naam aan het feit dat ze via het CLASS of ID attribuut gekoppeld worden aan een element.

Bij gebruik van het CLASS attribuut bestaat de selector uit een punt gevolgd door een class-naam:

.class-naam { stijldeclaratie }

Met de hiervoor gegeven opbouw kan de class-naam aan elk element in een document worden toegevoegd. Wanneer een stijl slechts voor één type element geldt, kan aan de selector (voor de .class-naam) de naam van het element worden toegevoegd. De stijl wordt dan alleen gebruikt indien aan dat type element het CLASS attribuut is toegevoegd met de betreffende class-naam.
De opbouw van de stijlregel is:

Element.class-naam { stijldeclaratie }

In het volgende voorbeeld wordt de stijl alleen toegepast, wanneer aan het H1 element het CLASS attribuut met de class-naam "speciaal" is toegevoegd.

H1.speciaal { color: red; }

De class-naam is case-sensitive, dat wil zeggen dat onderscheid wordt gemaakt tussen hoofd- en kleine letters. Microsoft Internet Explorer wijkt evenwel af van deze regel en maakt dit onderscheid niet.
Door veel browsers worden alleen class-namen ondersteund, welke uitsluitend letters (A-Z of a-z), cijfers (0-9) en verbindingsstreepjes (-) bevatten.
Een class-naam mag meerdere keren in een document voorkomen en gelijktijdig voor verschillende elementen gebruikt worden.

Bij gebruik van het ID attribuut bestaat de selector uit het hekje-teken gevolgd door een id-waarde:

#id-waarde { stijldeclaratie }

Met de hiervoor gegeven opbouw kan de id-waarde aan elk element in een document worden toegevoegd. Wanneer een stijl slechts voor één type element geldt, kan aan de selector (voor de #id-waarde) de naam van het element worden toegevoegd. De stijl wordt dan alleen gebruikt indien aan dat type element het ID attribuut is toegevoegd met de betreffende id-waarde.
De opbouw van de stijlregel is:

Element#id-waarde { stijldeclaratie }

De id-waarde is case-sensitive, dat wil zeggen dat onderscheid wordt gemaakt tussen hoofd- en kleine letters. Microsoft Internet Explorer wijkt evenwel af van deze regel en maakt dit onderscheid niet.
De id-waarde moet beginnen met een letter (A-Z of a-z) en mag verder letters, cijfers (0-9), verbindingsstreepjes (-), underscores (_), dubbele punten (:) en punten (.) bevatten. Door veel browsers worden echter alleen id-waarden ondersteund, welke uitsluitend letters, cijfers en verbindingsstreepjes bevatten.

De id-waarde mag maar één keer in een document gebruikt worden en niet tegelijkertijd in hetzelfde document voorkomen als waarde van het NAME attribuut van het A element.

Zie voor de koppeling van een stijl via de attributen CLASS en ID aan een element het onderdeel Style sheets.

Contextgebonden selectors

Bij de contextgebonden selectors wordt de stijl alleen aan een element toegevoegd, wanneer deze een bepaalde samenhang heeft met een of meer andere elementen.
De opbouw is:

Element1 Element2 Element3 { stijldeclaratie }

De samenhang is dat Element3 een child element moet zijn van Element2, dat op zijn beurt weer een child element moet zijn van Element1.

Een voorbeeld van een contextgebonden selector is:

H1 U { color: red }

De onderstreepte tekst wordt alleen in rood weergegeven, wanneer deze onderdeel is van een kop gemaakt met het H1 element:

<H1> </H1>

De samenhang hoeft zich niet te beperken tot element selectors, maar kan ook een combinatie van element en attribuut selectors betreffen. In het volgende voorbeeld wordt de stijl alleen toegepast bij elementen, waaraan via het CLASS attribuut de class-naam "rood" is toegevoegd èn welke ingesloten zijn door het P element

P .rood { color: red }

Pseudo-classes

Voor de weergave van hyperlinks kunnen er enkele zogenaamde pseudo-classes gebruikt worden. Een pseudo-class is een selector (A) gevolgd door een dubbele punt en een pseudo-class naam. Van de pseudo-class namen zijn er vier: link (voor links die nog niet bezocht zijn), visited (voor links die al wel bezocht zijn), active (voor links die op het moment bezocht worden, bijvoorbeeld in een ander frame) en hover (voor een link waarboven de muisaanwijzer zich bevindt).
De opbouw van een stijlregel met een pseudo-class is:

A:link { stijldeclaratie } A:visited { stijldeclaratie } A:active { stijldeclaratie }

Stijlregels met pseudo-classes worden opgenomen in een stijlblad of in een stijlblok.

De volgende stijldeclaratie, waarin gebruik gemaakt wordt van de background-color en de color eigenschap, zorgt er bijvoorbeeld voor dat nog niet bezochte hyperlinks in geel op een rode ondergrond worden weergegeven:

A:link { background-color: red; color: yellow }

Pseudo-classes kunnen gecombineerd worden met een normale class-naam:

A.classnaam:link { stijldeclaratie }

Door bijvoorbeeld de volgende stijlregel in een stijlblad of stijlblok op te nemen:

A.extern:link { background-color: red; color: yellow }

kan in het document bij externe hyperlinks de stijl opgeroepen worden met behulp van het CLASS attribuut:

<A CLASS="extern" HREF="bestemming">Omschrijving bestemming</A>

Pseudo-classes kunnen ook gebruikt worden in contextgebonden selectors.
De pseudo-class naam is case-sensitive (er wordt onderscheid gemaakt wordt tussen hoofd- en kleine letters).

Niet elke stijleigenschap zal door de browser ondersteund worden voor de pseudo-classes. Zo zal de browser een document niet opnieuw opmaken bij het aanklikken van een hyperlink, wanneer voor een actieve link een groter letterformaat is gedefinieerd dan voor een niet bezochte link.

A:active wordt niet ondersteund door Microsoft Internet Explorer 3 en Netscape Navigator 4.

Een pseudo-class welke geen deel uitmaakt van Cascading Style Sheets level 1, maar wel opgenomen is in CSS2, is A:hover. Deze heeft als resultaat dat de weergave van een hyperlink wijzigt, wanneer de muis eroverheen gaat. Zo zorgt

A:hover { background-color: #FFFFCC }

er voor dat de achtergrond van de van de hyperlink wijzigt van de standaardkleur in lichtgeel als de cursor erboven staat.

De volgende afbeelding is een schermafdruk van de weergave van de A:hover pseudo-class:

Voorbeeld A:hover pseudo-class.

A:hover wordt ondersteund door Microsoft Internet Explorer 4.0 en hoger, Mozilla, Netscape Navigator 6.0 en hoger en Opera 4.0 en hoger.

Pseudo-elementen

Om enkele typografische effecten te bereiken, kan bij Style Sheets gebruik gemaakt worden van een tweetal zogenaamde pseudo-elementen: het first-line pseudo-element en het first-letter pseudo-element.

Het first-line pseudo-element zorgt ervoor dat de eerste regel van een element op blokniveau door de browser in een speciale stijl wordt weergegeven. Het first-line pseudo-element wordt opgenomen in een stijlblad of in een stijlblok.
De opbouw is:

Element:first-line { stijldeclaratie }

De volgende stijldeclaratie zorgt er bijvoorbeeld voor dat de eerste regel van een paragraaf vet wordt weergegeven:

P:first-line { font-weight: bold }

Bij het first-line pseudo-element kunnen alleen gebruikt worden de stijleigenschappen voor lettertypen, kleur en achtergrond, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height en clear.

Het first-letter pseudo-element zorgt ervoor dat de eerste letter van een element op blokniveau door de browser op een bijzondere manier wordt weergegeven. Het first-line pseudo-element wordt opgenomen in een stijlblad of in een stijlblok.
De opbouw is:

Element:first-letter { stijldeclaratie }

De volgende stijldeclaratie zorgt er bijvoorbeeld voor dat de eerste letter van een paragraaf in een groter formaat, in rood en in vet wordt weergegeven:

P:first-letter { font-size: 300%; font-weight: bold; background: silver; color: red; float: left }

Bij het first-letter pseudo-element kunnen alleen gebruikt worden de stijleigenschappen voor lettertypen, kleur en achtergrond, text-decoration, vertical-align (alleen als de waarde van de float eigenschap none is), text-transform, line-height, margin, border, padding, float en clear.

De volgende afbeelding is een schermafdruk van de weergave door Netscape Navigator 6 van de hiervoor gegeven voorbeelden van de first-line en first-letter pseudo-elementen. Klik op de afbeelding en bekijk in een nieuw venster of de browser de pseudo-elementen ondersteunt.

Pseudo-elementen kunnen gecombineerd worden met een class-naam:

Element.classnaam:first-letter { stijldeclaratie }

Door bijvoorbeeld de volgende stijlregel in een stijlblad of stijlblok op te nemen:

P.hoofdstuk:first-letter { font-size: 300%; font-weight: bold; background: silver; color: red; float: left }

kan in het document op de gewenste plaatsen de first-letter stijl opgeroepen worden met behulp van het CLASS attribuut:

 

Indien een pseudo-element gebruikt wordt in een contextgebonden selector, dan moet het als laatste element opgenomen worden.

Pseudo-elementen worden niet ondersteund door Microsoft Internet Explorer 3 en 4 en Netscape Navigator 4.

Het erven van stijleigenschappen

Bij het gebruik van stijlen moet je er rekening mee houden, dat bij een groot aantal eigenschappen de stijl van een parent element geërfd wordt door child elementen (ingesloten elementen van een lager niveau). Als bijvoorbeeld in het BODY element via een stijlregel een kleur voor de tekst gedefinieerd wordt, dan geldt deze ook elementen als P, PRE, Hx, TABLE en UL.
Wanneer je niet wilt dat voor bepaalde elementen de stijl van het parent element geërfd wordt, dan moet je voor die elementen een nieuwe stijl definiëren. Deze laatste stijl zal gelden, omdat deze meer specifiek is.

In de volgende voorbeelden, waarin gebruik gemaakt wordt van een inline stijl, is het principe van het erven van eigenschappen te zien.

Hier erft vet de kleur van de paragraaf

Dit wordt als volgt weergegeven:

Hier erft vet de kleur van de paragraaf

Wordt ook voor vet een kleur gedefinieerd:

Hier gaat de stijl van vet boven de stijl van de paragraaf

dan zie je:

Hier gaat de stijl van vet boven de stijl van de paragraaf

Commentaar

Soms is het handig aan een stijlregel een beschrijving toe te voegen, zodat je later nog weet waarvoor de stijl gebruikt wordt. Je kunt dat doen door na de stijlregel commentaar op te nemen. Dit commentaar is uiteraard niet zichtbaar in de browser.
De opbouw is:

/* commentaar */

Bijvoorbeeld:

.code { font-family: "Courier New" } /* voor HTML-code */

Inhoud Handleiding HTML