Eenvoudige <style>-sheets voor tekst
Voor het opmaken van de afzonderlijke pagina's op je website kun je gebruik maken van Cascading Style Sheets (.CSS). Hiermee kun je op een betrekkelijk eenvoudige manier je website op een consistente manier opmaken en onderhouden.
Het onderwerp "Cascading Style Sheets" is ruimschoots groot genoeg om een complete website aan te wijden. Dat voert voor deze site te ver; de bespreking is hier heel summier gehouden. Alleen de belangrijkste dingen voor het opmaken van tekst worden genoemd. Voor het overige verwijs ik naar de vele dikke boeken die hierover zijn geschreven en naar de Engelstalige site W3Schools.
- Deze bladzijde beperkt zich tot het opmaken van tekst, links en de achtergrond-kleur van de bladzijde. Zie echter ook het item: "Tekst benadrukken met <span style="...;">".
- De kleuren van tekst, links en achtergrond kun je ook instellen in de <body>-tag. Dat doe je met:
<body bgcolor="#..." link="#..." vlink="#..." alink="#...">
Deze aanpak werkt goed in HTML 4, in HTML5 ben je aangewezen op een stylesheet. - Als je in de <HEAD> een stylesheet plaatst worden de instellingen die je in de <body>-tag
maakt genegeerd. Het zelfde geldt overigens als je in de <HEAD> een JavaScript hebt staan waarin
tekst- en achtergrondkleuren onvoorwaardelijk worden ingesteld.
- Er worden drie items besproken:
- De tag <style>
- Stylesheet in een apart .CSS bestand met <LINK>
- Opbouw van een style-sheet
- Je kunt meerdere Stylesheets in een .HTML-code zetten. Het maakt daarbij niet uit of dat met STYLE-tags of met LINK-tags wordt gedaan.
- Als je voor een bepaald item twee keer een instelling maakt geldt de laatste.
De tag <style>
De HTML-code ziet er als volgt uit:
<style>Dit style-sheet zet je in de HEAD van je HTML-code. De commentaar-tags <!-- .... --> zorgen er voor dat browsers die niet met STYLE-tags overweg kunnen, de style-inhoud niet op het scherm tonen. Browsers die wel STYLE kunnen gebruiken (en dat doen de moderne browsers allemaal) negeren deze commentaren.
.
.
. style definities
.
.
</style>
Stylesheet in een apart .CSS bestand met <LINK>
De HTML-code ziet er als volgt uit:
<link rel="stylesheet" href="bbstyles.css">In dit geval bevat het bestand bbstyles.css de stylesheet.
Deze code zet je in de HEAD van je HTML-code. Browsers die niet met de tag <LINK> kunnen werken negeren deze. Het style-sheet wordt dan niet gebruikt.
Opbouw van een style-sheet
Hoewel je met een <style> ook het-en-ander kunt instellen aan plaatjes (afmetingen, plaats, enz.) gaat het hier alleen over tekst, links en de achtergrondkleuren.
De style-definities worden ook wel aangeduid met de term stijlblok. Een stylesheet
bevat gewoonlijk meerdere stijlblokken.
Een stijlblok ziet er als volgt uit:
Element { opmaakregels }De elementen zijn eigenlijk gewoon de elementen van HTML. Als meerdere elementen dezelfde opmaakregels hebben zet je ze gewoon bij elkaar, gescheiden door komma's.
De stylesheet voor "gewone tekst" van deze site ziet er als volgt uit:
body,td,p,div,span,th {Als er meer dan één regel in een definitie zit worden die gescheiden door een puntkomma.
font-family : verdana, arial, helvetica, sans-serif;
font-size : 10pt;
font-weight: normal;
color: #000000;
text-decoration: none
}
Merk op dat er geen voorschrift is voor de achtergrond-kleur. Dat is op deze site geregeld in de <BODY>-tag. De opmaakregel voor deze bladzijde zou zijn:
{ background-color : #E4E9F6; }
Behalve de elementen zijn er ook nog Pseudo-elementen. Hiermee stel je o.a. de opmaak van hyperlinks in,
zie de tabel:
| Pseudo-element | | | Betekenis |
|---|---|---|
| a:link | | | Link |
| a:active | | | Actieve link |
| a:visited | | | Bezochte link |
| a:hover | | | Link waar de muis boven zit |
Voor het tijdelijk wijzigen van tekst-attributen kun je gebruik maken van Class en ID. De mogelijkheden voor tekstopmaak van class en ID zijn vrijwel identiek. Met id kun je echter veel meer dan alleen het regelen van opmaak. Denk hierbij aan het wijzigen van een tekst-veld door JavaScript, zie het item Tekst-invoer.
ID's moeten uniek zijn binnen een document om er goed mee te kunnen werken.
Een class kan meer dan eenmaal voorkomen in een document, namelijk als deel van een andere class.
Dat kan overigens verwarring geven over hoe een class is gedefinieerd.
Ikzelf gebruik alleen classes tenzij het niet anders kan; daarbij zorg ik er voor dat alle namen van classes
binnen een document uniek zijn.
Je definieert een ID in een stylesheet door een # voor de naam te zetten, bijvoorbeeld:
#Mooi { ....}Je refereert aan een ID met bijvoorbeeld:
<p ID="Mooi"> ...... </p>Je defineert een class in een stylesheet door een punt voor de naam te zetten. De kopjes op deze bladzijde zijn "Kop3":
.Kop3 {De referentie is:
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11pt;
font-weight: normal;
color: #990000;
text-decoration: none
}
<p class="Kop3">Kopjes op deze pagina</p>
Tenslotte volgt hier een zeer beknopt overzicht van de opmaak-regels. Altijd geldt in een stylesheet dat een default-waarde wordt genomen voor een regel die niet is gegeven.
| regel: | Betekenis en Mogelijkheden |
|---|---|
| background-color | Hexadecimale kleurcode |
| background-image | Naam van het .GIF- of .JPG-bestand dat op de achtergrond moet komen. Gelijkwaardig aan het attribuut background="..." van de <body>-tag. |
| font-family | Dit een groep letter-types waaruit de browser
kiest om de pagina weer te geven. De eerstgenoemde wordt het eerst gebruikt. Als de eerste niet beschikbaar is,
wordt de tweede geprobeerd, enz. Als geen van deze fonts beschikbaar is, gebruikt Windows zijn eigen default. Een paar veel gebruikte font-families zijn:
|
| font | Naam van het te gebruiken font. Als dat niet beschikbaar is wordt de font-family gebruikt. |
| font-size | Groote van de letters. Deze kan o.a. worden opgegeven in pixels en in punten: 12px of 12pt. Een percentage kan ook: 40%. |
| font-weight | Zwaarte van de letters: normal, bold, bolder, lighter. |
| font-style | Stijl: normal, italics, oblique. |
| color | Kleur van de tekst, hexadecimale code. |
| text-decoration | "Versiering" van de tekst: none, underline, overline, line-through. |
Commentaren in een stylesheet zet je tussen /* ..... */, net zoals in JavaScript.
Downloaden:
Dit is een voorbeeld van een eenvoudig style-sheet, zoals hierboven is besproken.
Druk op de knop:
File: voorb046.zip, 661 bytes.
Opmerking:
Een verhaal over het instellen van kleuren met hexadecimale kleurcodes vind je in het item "Kleurcodes voor tekst, links en achtergrond".
Zie ook: Zij-effecten bij het werken met style-sheets.
