Handleiding HTML Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin

Inhoud onderdeel: Introductie weergave tekst | Fysieke tekstopmaak-elementen | Logische tekstopmaak-elementen | Lettertypen | Het gebruik van stijlen | Afkortingen | Revisie-informatie | Citeren | Woordafbreken | Tekst bij elkaar houden

Gerelateerde elementen: ABBR | ACRONYM | B | BASEFONT | BIG | CITE | CODE | DEL | DFN | EM | FONT | I | INS | KBD | NOBR | Q | S | SAMP | SMALL | STRIKE | STRONG | SUB | SUP | TT | U | VAR

Het gebruik van stijlen

Om te komen tot een betere scheiding tussen de structuur van een document en de presentatie ervan, heeft een aantal van de fysieke tekstopmaak-elementen (S, STRIKE en U) en de elementen FONT en BASEFONT in HTML 4.0 het label afgekeurd gekregen. In plaats daarvan is het de bedoeling dat gebruik gemaakt wordt van stijlen.

Cascading Style Sheets is de taal, waarmee je stijlen kunt definiëren voor HTML-elementen. Er zijn stijleigenschappen, welke hetzelfde effect hebben als de beschreven fysieke tekstopmaak-elementen en de elementen FONT en BASEFONT. Hierna wordt dat in een aantal voorbeelden gedemonstreerd.

In het volgende voorbeeld is met behulp van het STYLE attribuut een inline stijl gedefinieerd, die bepaalt dat de tekst ingesloten door het STRONG element niet alleen met extra nadruk, maar via de background-color eigenschap ook met een gele achtergrond moet worden weergegeven. Omdat het verstandig is altijd een combinatie van voor- en achtergrondkleur te gebruiken, is bovendien de color eigenschap opgenomen.

<P>Met <STRONG STYLE="color: #000000; background-color: #FFFF99">Cascading Style Sheets</STRONG> krijg ...</P>

Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.

In het volgende voorbeeld worden de eigenschappen font-size, color (gecombineerd met background-color) en font-family gebruikt in plaats van het FONT element met de attributen SIZE, COLOR en FACE.

<P STYLE="font-size: 18px; color: #FF0000; background-color: #FFFFFF; font-family: Arial, sans-serif;">Deze opmaak is ...</P>

Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.

In plaats van de fysieke tekstopmaak-elementen B, I, U, TT en BIG kunnen de eigenschappen font-weight, font-style, text-decoration, font-family en font-size gebruikt worden.

<P>Dit is <SPAN STYLE="font-weight: bold;">vet</SPAN>, <SPAN STYLE="font-style: italic;">cursief</SPAN>, <SPAN STYLE="text-decoration: underline;">onderstreept</SPAN>, <SPAN STYLE="font-family: monospace;">vaste letterafstand</SPAN> en <SPAN STYLE="font-size: large;">groot</SPAN></P>

Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.

Wanneer de stijlen betrekking hebben op het hele document of op meerdere documenten, dan ligt het niet voor de hand ze vast te leggen via een inline stijl. Je kunt ze dan beter opnemen in een stijlblok in de head van het document, of in een extern stijlblad.

In het volgende voorbeeld is in het stijlblok met de eigenschappen font-family, color en background-color een stijl gedefinieerd voor het BODY element. Daarmee worden het lettertype en de voorgrond- en achtergrondkleur voor het document vastgelegd. Voor het P element is daarnaast de lettergrootte gedefinieerd met de font-size eigenschap.

<STYLE TYPE="text/css">
<!--
BODY { font-family: Arial, Helvetica, sans-serif;
       color: #000000; background-color: #FFFF99; }
P    { font-size: 13px; }
-->
</STYLE>

Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.

Vervolg: Afkortingen

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

Handleiding HTML (https://www.handleidinghtml.nl/)
Copyright © 1995-2024 Hans de Jong
Laatste wijziging: 15 juni 2024