Handleiding HTML - Stylesheets

HTML		Stylesheets

Handleiding HTML Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin

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

Extern stijlblad

Een extern stijlblad is een document, waarin stijlen zijn beschreven waarvan in één of meer HTML-documenten gebruik gemaakt kan worden. De verwijzing vanuit een HTML-document naar een stijlblad gebeurt met behulp van het LINK element, dat wordt opgenomen in de head van het document. Aan het LINK element worden in ieder geval de attributen HREF, REL en TYPE toegevoegd. Het HREF attribuut specificeert welk stijlblad geopend moet worden. Bij Cascading Style Sheets gaat het om een bestand, waarvan de bestandsnaam de extensie "css" heeft. Het REL attribuut geeft aan dat het bij het gerelateerde bestand gaat om een stylesheet en heeft dan ook als waarde "stylesheet". Het TYPE attribuut definieert het Internet Media (MIME) type van het bestand waarnaar verwezen wordt. Voor Cascading Style Sheets is dat "text/css".
Het LINK element mag een onbeperkt aantal malen opgenomen worden in een document.

In het volgende voorbeeld wordt een extern stijlblad aan een HTML-document gekoppeld. Het stijlblad heeft de naam "basis.css" en bevindt zich in een subdirectory met de naam "stijl".

<HEAD> <LINK HREF="stijl/basis.css" REL="stylesheet" TYPE="text/css"> ... </HEAD>

Een stijlblad bevat geen HTML-code, maar uitsluitend stijlregels. Bij Cascading Style Sheets zijn deze stijlregels 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.

Het volgende voorbeeld van een stijlblad 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).

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; }

Het MEDIA attribuut kan aan het LINK element toegevoegd worden, 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 worden de stijlregels in het stijlblad alleen toegepast bij het afdrukken:

<LINK HREF="stijl/afdrukken.css" REL="stylesheet" TYPE="text/css" MEDIA="print">

Wanneer je verschillende stijlbladen hebt voor bijvoorbeeld weergave op het scherm en afdrukken, dan neem je het LINK element eenvoudig meerdere keren op.

<LINK HREF="stijl/scherm.css" REL="stylesheet" TYPE="text/css" MEDIA="screen"> <LINK HREF="stijl/afdrukken.css" REL="stylesheet" TYPE="text/css" MEDIA="print">

Wanneer een stijlblad op meerdere apparaten betrekking heeft, dan neem je meerdere waarden voor het MEDIA attribuut op, gescheiden door een komma.

<LINK HREF="stijl/basis.css" REL="stylesheet" TYPE="text/css" MEDIA="screen, print">

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 stijlblad opgenomen stijlen door Netscape Navigator 4 genegeerd.

Cascading Style Sheets biedt de mogelijkheid om in een stijlblad met behulp van de @import-regel een ander extern stijlblad te importeren.

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

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

Een stijlblad 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 stijlblad met een @import-regel en een gewone stijlregel ziet er bijvoorbeeld als volgt uit

@import url("stijl/formulier.css"); H1 {color: #FFFFFF; background-color: #336699; }

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.

Microsoft Internet Explorer t/m versie 5.5 en Opera t/m versie 7.0 negeren het MEDIA attribuut van het LINK 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 stijlblad wordt wel de opgegeven waarde van het MEDIA attribuut aangehouden.

Vervolg: CLASS en ID

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