HTML Stylesheets


Handleiding HTML Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin


Inhoud onderdeel: Introductie stylesheets | Stijlen verbinden met HTML | Inline stijlen | Stijlblok | Extern stijlblad | CLASS en ID | DIV en SPAN | Alternatieve stijlbladen

Gerelateerde elementen: DIV | LINK | META | SPAN | STYLE


Stijlblok

Stijlen welke slechts op één document betrekking hebben, kunnen worden opgenomen in een stijlblok, dat geplaatst wordt in de head van dat document. Hiervoor wordt gebruik gemaakt van het STYLE element. Aan het STYLE element wordt minimaal het TYPE attribuut toegevoegd, dat het Internet Media (MIME) type definieert van het bestand waarnaar verwezen wordt. Voor Cascading Style Sheets is dat "text/css".
Het STYLE element mag een onbeperkt aantal malen opgenomen worden in een document.

Een stijlblok heeft de volgende opbouw:

<HEAD>
<STYLE TYPE="text/css">
stijlregels
</STYLE>
...
</HEAD>

Een browser die het STYLE element niet kent, zou de inhoud moeten negeren. Zeker bij oudere browsers is dat niet het geval en bestaat de kans dat de stijlregels als normale tekst worden weergegeven. Om dat te voorkomen, kunnen bij Cascading Style Sheets de stijlregels binnen de code voor commentaar geplaatst worden.

<STYLE TYPE="text/css">
<!--
stijlregels
-->
</STYLE>


De stijlregels in het stijlblok zijn bij Cascading Style Sheets opgebouwd volgens het selector-mechanisme, dat beschreven wordt in het onderdeel Selectors. De selector bepaalt op welk deel van een document de stijl betrekking heeft. Dat kan een element zijn, maar bijvoorbeeld ook een specifiek voorkomen van een element. In het laatste geval kan de stijl aan een element gekoppeld worden via onder meer de attributen CLASS en ID. Een toelichting op het gebruik van deze attributen wordt gegeven in het onderdeel CLASS en ID.

In het volgende voorbeeld bevat een stijlblok bevat een viertal stijlregels. In de eerste twee stijlregels is een element de selector (we spreken dan over een element-selector). In de derde stijlregel wordt gebruik gemaakt van een class-naam als selector (een CLASS-selector) en in de laatste regel is een id-waarde de selector (een ID-selector).

<STYLE TYPE="text/css">
<!--
BODY      { font-family: Arial, Helvetica, sans-serif;
            color: #000000; background-color: #FFFFFF; }
H1        { color: #FFFFFF; background-color: #336699; }
.code     { font-family: "Courier New", Courier, monospace;
            font-size: larger; }
#xyz987   { color: #FF0000; background-color: #FFFFFF; }
-->
</STYLE>


Aan het STYLE element kan het MEDIA attribuut worden toegevoegd, om aan te geven dat de stijlregels betrekking hebben op de weergave van het document door een bepaald apparaat. Als waarden (media beschrijvers) kent het MEDIA attribuut onder meer "screen" (voor de weergave zonder pagina-indeling op een computerscherm), "print" (voor de weergave in pagina-opmaak bij het afdrukken of als print-preview) en "aural" (voor de weergave door een spraaksynthesizer). Bij de waarde "all" worden de stijlregels toegepast bij de weergave door alle apparaten. De standaardwaarde van het MEDIA attribuut is "screen". Dat betekent dat de browser bij het ontbreken van het MEDIA attribuut de stijlen alleen op het scherm moet weergeven. De praktijk is echter dat de meeste browsers de stijlen in dat geval ook weergeven bij het afdrukken (alleen Opera met versienummer 6 en lager doet dit niet).

In het volgende voorbeeld zijn in de head van een document twee stijlblokken geplaatst. Voor het eerste stijlblok is het MEDIA attribuut niet opgenomen en dat moet dus gebruikt worden bij de weergave op het scherm. Voor het tweede stijlblok geldt MEDIA="print" en dat moet toegepast worden bij het afdrukken van het document.

<STYLE TYPE="text/css">
<!--
P   { font-style: italic; font-family: serif; }
-->
</STYLE>

<STYLE TYPE="text/css" MEDIA="print">
<!--
P   { font-style: normal; font-family: sans-serif; }
-->
</STYLE>

Bekijk in een nieuw venster of de browser het MEDIA attribuut ondersteunt.

Wanneer een stijlblok op meerdere apparaten betrekking heeft, dan worden meerdere waarden voor het MEDIA attribuut opgenomen, gescheiden door een komma.

<STYLE TYPE="text/css" MEDIA="screen, print">
<!--
P   { font-family: sans-serif; }
-->
</STYLE>

Door Netscape Navigator 4 wordt uitsluitend de waarde "screen" ondersteund. Wanneer de waarde "screen" gebruikt wordt in combinatie met een andere waarde, worden de in het stijlblok opgenomen stijlen door Netscape Navigator 4 genegeerd.


Cascading Style Sheets biedt de mogelijkheid om met behulp van de @import-regel een extern stijlblad in een stijlblok te importeren. Deze mogelijkheid is daarmee een alternatief voor de constructie waarbij het LINK element een extern stijlblad met een HTML-document verbindt.

Het volgende voorbeeld laat de @import-regel zien voor het importeren van een stijlblad dat de naam "basis.css" heeft en zich in een subdirectory met de naam "stijl" bevindt:

@import url("stijl/basis.css");

Een stijlblok mag meerdere @import-regels bevatten en daarnaast ook gewone stijlregels. De @import-regels moeten echter altijd vóór de gewone stijlregels geplaatst worden. Een @import-regel die na een gewone stijlregel is geplaatst, moet door de browser genegeerd worden.

Een stijlblok met een @import-regel en een gewone stijlregel ziet er bijvoorbeeld als volgt uit:

<STYLE TYPE="text/css">
<!--
@import url("stijl/basis.css");
H1 {color: #FFFFFF; background-color: #336699; }
-->
</STYLE>

Gewone stijlregels hebben (als ze betrekking hebben op hetzelfde element) prioriteit boven de stijlregels uit een geïmporteerde stijlblad. Indien meerdere stijlbladen geïmporteerd worden en in meerdere van deze stijlbladen stijlen betrekking hebben op hetzelfde element, dan wordt de stijl uit het laatste geïmporteerde stijlblad aangehouden.

Een uitgebreide toelichting over de @import-regel en informatie over de ondersteuning door browsers wordt gegeven in het CSS-gedeelte van deze handleiding.

De @import-regel wordt niet ondersteund door Microsoft Internet Explorer 3 en Netscape Navigator 4. Het importeren van een extern stijlblad met de @import-regel biedt daarmee een mogelijkheid om de stijlen voor de genoemde browsers te verbergen en op die manier de vele fouten in de weergave van Cascading Style Sheets te voorkomen.

Microsoft Internet Explorer t/m versie 5.5 en Opera t/m versie 7.0 negeren het MEDIA attribuut van het STYLE element voor een @import-regel. De stijlen uit een geïmporteerd stijlblad worden door deze browsers voor alle apparaten weergegeven. Voor gewone stijlregels in hetzelfde stijlblok wordt wel de opgegeven waarde van het MEDIA attribuut aangehouden.


Vervolg: Extern stijlblad



Inhoud onderdeel | Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin

Handleiding HTML (https://www.handleidinghtml.nl/)
Copyright © 1995-2021 Hans de Jong
Laatste wijziging: 16 januari 2005