WebThings - by Jan Weijers
Alle hoofdstukken...
Inhoudsopgave
Inleiding
Een eenvoudig HTML document
Afbeeldingen
Lijsten
Links
Tabellen
Frames
Formulieren
Cascading stylesheets
JavaScript
PHP programmeren
Server side includes
CGI & Perl
Speciale tekens
Kleurvoorbeelden
Meer informatie
Software
Recente toevoegingen
Alfabetische index
In dit hoofdstuk...
Inleiding
Een extern stylesheet gebruiken
Een STYLE element gebruiken
Een STYLE attribuut gebruiken
Wat is beter: extern, element, of attribuut?
Inhoud, ruimte, rand en marge
Achtergrondkleur
Een afbeelding als achtergrond
Kleur voorgrond
Randen
Ruimte
Marges
Lettertype
Vetgedrukt
Letterstijl
Varianten op lettertypes
Lettergrootte
Letterafstand
Regelafstand
Uitlijnen van tekst
Kleuren van links
Nieuwe pagina bij afdrukken

 

 

Language choice...
You have chosen to use Dutch as your preferred language.Nederlands vlaggetje Click here to switch to English.

Cascading stylesheets

Inleiding

Als je HTML 4 gebruikt, heb je de mogelijkheid alle opmaak in aparte "cascading style sheets" (CSS) te bewaren. Het voordeel hiervan is dat je zo'n style sheet in een apart document kunt bewaren. Je kunt dan de opmaak van je hele website wijzigen door alleen dat stylesheet aan te passen.

Er zijn drie manieren om CSS te gebruiken:

  1. in een apart bestand, een zogenaamd extern stylesheet
  2. in een style element in je HTML bestand
  3. in een style attribuut bij bijna alle elements

Alle drie de methoden worden in dit hoofdstuk behandeld. De volledige specificatie van CSS vind je op de website van het world wide web consortium, http://www.w3c.org/.

Het gebruikt van een extern stylesheet heeft duidelijke voordelen. Je kunt vanuit meerdere HTML documenten verwijzen naar dezelfde stylesheet. Als je dus de opmaak van je site wilt veranderen, hoef je maar één document, het stylesheet, aan te passen. Je hoeft dus niet langer alle bestanden een voor een te openen en aan te passen.

Een stylesheet is een verzameling van regels. Een regel begint met aan te geven waarop die van toepassing is en vervolgens informatie over de toe te passen opmaak. Bijvoorbeeld:

TD.mrn {background:maroon; color:white;}

Deze regel geeft aan dat alle cellen in tabellen van de klasse "mrn" een donkerrode achtergrond moeten krijgen. Je kunt op een regel net zoveel informatie over de opmaak kwijt als je wilt. Je kunt dus alle onderstaande voorbeelden over kleuren, lettertypen, enz. samenvoegen op één regel. Het gedeelte "TD.mrn" noem je de selector. Het gedeelte "background:maroon" heet de stijldeclaratie. Een stijldeclaratie bestaat uit één of meer eigenschappen (background en color,in dit voorbeeld), met elk een waarde (maroon en white). De selector geeft aan waarop de stijldeclaratie van toepassing is. De stijldeclaratie is de opmaak zelf. Je past regels op de volgende manier toe:

<TABLE><TR><TD CLASS="mrn">
Voorbeeld
</TD></TR></TABLE>

Voorbeeld

Het CLASS attribuut legt de koppeling met de selector TD.mrn uit het stylesheet. Je kunt zo verschillende stijldeclaraties voor de TD element definiëren en die toepassen op verschillende cellen. Je kunt ook een ID attribuut gebruiken om een stijl te kiezen:

<P ID="yellowgreen">Lelijk: gele tekst op een groene achtergrond.</P>

In je stylesheet staat dan de volgende regel:

#yellowgreen {color:yellow; text-align:center; background:green;}

En dit is het resultaat:

Lelijk: gele tekst op een groene achtergrond.

Het verschil tussen CLASS en ID is dat ID uniek moet zijn in een document. Dezelfde ID (yellowgreen in dit voorbeeld) mag dus maar één keer voorkomen. CLASS kunt je net zo vaak gebruiken als nodig.

To the top

Een extern stylesheet gebruiken

Elk HTML document dat een extern stylesheet gebruikt verwijst daar op de volgende manier naar:

<HTML><HEAD>
<LINK HREF="parts/guide.css" REL="style sheet" TYPE="text/css">
...
...
</HEAD>

Een stylesheet is een eenvoudig tekstbestand dat gemaakt kan worden in een programma zoals BBEdit voor de Mac of Kladblok voor Windows. Een HTML document kan verwijzen naar meerdere stylesheets. Je kunt bijvoorbeeld algemene opmaak voor je hele site in een stylesheet zetten en aanvullende stijlen voor een bepaald hoofdstuk in een ander.

To the top

Een STYLE element gebruiken

Je kunt CSS ook gebruik door een STYLE element in de kop van je document te zetten. Die stijl is dan alleen beschikbaar binnen dat ene document. Hier is een voorbeeld:

<HEAD>
<STYLE TYPE="text/css"><!--
H1.green { color:green; text-align:center;}
--></STYLE>
</HEAD>

<H1 CLASS="green">Testcase</H1>

Testcase

De aanduidingen <!-- en --> voor commentaar dienen hier om browsers die niet om kunnen gaan met de STYLE element niet in verwarring te brengen. Ook bij dit type CSS kun je alle onderstaande voorbeelden toepassen. Het STYLE element moet in de kop van je document staan, dus tussen <HEAD> en </HEAD>.

To the top

Een STYLE attribuut gebruiken

Het gebruikt van een STYLE attribuut gaat op de zelfde manier als andere attributen.

<P STYLE="color:maroon; text-align:center;">Een donkerrode paragraaf</P>

Een donkerrode paragraaf

Je kunt op deze manier alle onderstaande voorbeelden en regels toepassen. Je kunt ook een SPAN element met STYLE attribuut. De SPAN element dient dan alleen om de opmaak op te slaan.

<SPAN STYLE="color:red;">Rode</SPAN> tekst

Rode tekst

In de rest van dit hoofdstuk zie je meer voorbeelden waarin het SPAN element gebruikt wordt.

To the top

Wat is beter: extern, element, of attribuut?

Wat is nu beter om te gebruiken: een extern stylesheet, een STYLE element of een STYLE attribuut? Daarvoor kun je de volgende regel hanteren:

  • Gebruik een extern stylesheet (dus een apart document) voor alle opmaak die geldt voor meerdere HTML documenten.
  • Gebruik een STYLE element voor opmaak die je wilt gebruiken op meerdere plekken binnen één document.
  • Gebruik een STYLE attribuut voor opmaak die je maar op één plek binnen één document wilt gebruiken.

In de praktijk zul je een combinatie van de verschillende manieren gebruiken. Meestal is dat een extern stylesheet voor opmaak die in je hele site gebruikt wordt en een combinatie van elementen en attributen voor uitzonderingen daarop.

To the top

Inhoud, ruimte, rand en marge

Elk element op je pagina kent vier ruimtes:
- de inhoud ("content" in het Engels);
- daar omheen, de ruimte ("padding");
- daar omheen, de randen ("border");
- daar omheen, de marges ("margin").
Dat ziet er schematisch dus ongeveer zo uit:

Contents, Padding, Borders and Margins

In dit voorbeeld is de inhoud tekst maar die inhoud kan evengoed een afbeelding of een tabel zijn. De volgende subkopjes gaan over de voorgrond- en achtergrond kleur van de inhoud, die daarna over de ruimte, de randen en de marges.

To the top

Achtergrondkleur

Om de achtergrondkleur voor je hele document in te stellen neem je dit op in je stylesheet

BODY {background:yellow;}

Hiermee krijgt je hele pagina een gele achtergrond. Voor een selectie van kleuren kijk je op de pagina met kleurcodes. Je kunt de background eigenschap gebruiken bij elk element: A, P, H1, TD, enz. Hier is een voorbeeld met het P element:

<P STYLE="background:gray; text-align:center;">Dit is een grijze achtergrond</P>

Dit is een grijze achtergrond

De achtergrond kleur geld zowel voor de inhoud als voor de ruimte daaromheen maar niet voor de rand en de marge:

<P STYLE="background:aqua; color:red; padding:5px; border-style:solid; border-width:1px; margin:5px; text-align:center;">Dit is een aqua achtergrond</P>

Dit is een aqua achtergrond

In het bovenstaande voorbeeld zie je dat de achtergrond alleen het gebied binnen de rand, dus de inhoud en de ruimte, bedekt. De marges zijn transparant.

To the top

Een afbeelding als achtergrond

Met stylesheets kun je een afbeelding als achtergrond gebruiken. Dat kan bij het BODY element maar bij elk willekeurig ander element ook. Je kunt dus een afbeelding gebruiken als achtergrond bij één paragraaf:

<P STYLE="background: url(parts/valid-html401.png) no-repeat white;">Semper ubi ... periculo deicerentur.</P>

Semper ubi sub ubi. Quone modo nunc, fulve bos? Si hoc non legere potes, tu asinus es. Tua mater tam antiqua ut linguam latinam loquatur. Itaque cum adpropinquarent Britanniae et ex castris viderentur, tanta tempestas subito coorta est ut nulla earum cursum tenere posset, sed aliae eodem unde erant profectae referrentur, aliae ad inferiorem partem insulae, quae est propius solis occasum, magno suo cum periculo deicerentur.

De gespecificeerde achtergrondkleur wit wordt gebruikt voor die delen van de achtergrond die de afbeelding niet bedekt. Normaal gesproken plaatst de browser de afbeelding linksboven. Dat kun je veranderen:

<P STYLE="background: url(parts/valid-html401.png) no-repeat bottom right white;">Semper ubi ... periculo deicerentur.</P>

Semper ubi sub ubi. Quone modo nunc, fulve bos? Si hoc non legere potes, tu asinus es. Tua mater tam antiqua ut linguam latinam loquatur. Itaque cum adpropinquarent Britanniae et ex castris viderentur, tanta tempestas subito coorta est ut nulla earum cursum tenere posset, sed aliae eodem unde erant profectae referrentur, aliae ad inferiorem partem insulae, quae est propius solis occasum, magno suo cum periculo deicerentur.

"no-repeat" betekent dat de afbeelding maar één keer wordt getoond. Als je in plaats daarvan "repeat" gebruikt wordt de afbeelding net zo vaak herhaald als nodig is om de hele achtergrond te bedekken. Je kunt ook "repeat-y" gebruiken om de afbeelding alleen verticaal te herhalen of "repeat-x" om de afbeelding alleen horizontaal te herhalen.

<P STYLE="background: url(parts/valid-html401.png) repeat white;">Semper ubi ... periculo deicerentur.</P>

<P STYLE="background: url(parts/valid-html401.png) repeat-y white; width:300px;">Semper ubi ... periculo deicerentur.</P>

<P STYLE="background: url(parts/valid-html401.png) repeat-x white;">Semper ubi ... periculo deicerentur.</P>

Semper ubi sub ubi. Quone modo nunc, fulve bos? Si hoc non legere potes, tu asinus es. Tua mater tam antiqua ut linguam latinam loquatur. Itaque cum adpropinquarent Britanniae et ex castris viderentur, tanta tempestas subito coorta est ut nulla earum cursum tenere posset, sed aliae eodem unde erant profectae referrentur, aliae ad inferiorem partem insulae, quae est propius solis occasum, magno suo cum periculo deicerentur.

Semper ubi sub ubi. Quone modo nunc, fulve bos? Si hoc non legere potes, tu asinus es. Tua mater tam antiqua ut linguam latinam loquatur. Itaque cum adpropinquarent Britanniae et ex castris viderentur, tanta tempestas subito coorta est ut nulla earum cursum tenere posset, sed aliae eodem unde erant profectae referrentur, aliae ad inferiorem partem insulae, quae est propius solis occasum, magno suo cum periculo deicerentur.

Semper ubi sub ubi. Quone modo nunc, fulve bos? Si hoc non legere potes, tu asinus es. Tua mater tam antiqua ut linguam latinam loquatur. Itaque cum adpropinquarent Britanniae et ex castris viderentur, tanta tempestas subito coorta est ut nulla earum cursum tenere posset, sed aliae eodem unde erant profectae referrentur, aliae ad inferiorem partem insulae, quae est propius solis occasum, magno suo cum periculo deicerentur.

Als je een afbeelding als achtergrond van het BODY element gebruikt, kun je die vast positioneren. Dat betekent dat de afbeelding op z'n plek blijft als je door de pagina loopt:

<BODY STYLE="background: url(parts/valid-html401.png) no-repeat white fixed;">

De afbeelding blijft zo in de linkerbovenhoek van het venster, ook als je door de pagina heen loopt.

To the top

Kleur voorgrond

Op een vergelijkbare manier kun je de voorgrondkleur instellen. In je externe stylesheet neem je deze twee regels op:

P.first {color:maroon; background:yellow; text-align:center;}
P.second {color:#008B8B; text-align:center;}

De kleurcodes zouden er zo langzamerhand bekend uit moeten zien. In je HTML document gebruik je:

<P CLASS="first">De eerste paragraaf</P>
<P CLASS="second">De tweede paragraaf</P>

De eerste paragraaf

De tweede paragraaf

Je ziet hier het gebruik van een CLASS attribuut om een stijl te kiezen bij een paragraaf.

To the top

Randen

Als je alle randen van je element dezelfde stijl, kleur en dikte wilt geven ben je snel klaar:

<P STYLE="border: dashed navy thick; text-align:center;">Kijk nou eens!</P>

Kijk nou eens!

Voor de kleuren kun je de gebruikelijke kleurnamen of -codes gebruiken. Voor de dikte van de randen kun je "thin", "medium", "thick" of een getal gebruiken. Een getal is de dikte van de lijn in pixels. Je kunt de attributen ook voor iedere rand apart instellen:

<P STYLE="border-top-width:thin; border-right-width:thick; border-bottom-width:medium; border-left-width:medium; border-color:red; border-style: solid; text-align:center;">Verschillende randen!</P>

Verschillende randen!

Datzelfde kan ook een op compactere manier:

<P STYLE="border-width:thin thick medium medium; border-color:red; border-style: solid; text-align:center;">Verschillende randen!</P>

Verschillende randen!

Als je één border-width eigenschap gebruikt met 4 waarden, worden die achtereenvolgens toegepast op de bovenkant, rechtkant, onderkant en linkerkant. Dus bovenaan beginnen en met de klok mee. Als je twee waarden gebruikt wordt de eerste gebruikt voor de onder- en bovenkant en de tweede waarde voor de linker- en rechterkant:

<P STYLE="border-width:thick; border-color:red navy; border-style: solid; text-align:center;">Verschillend gekleurde randen!</P>

Verschillend gekleurde randen!

To the top

Ruimte

Bij de meeste bovenstaande voorbeelden, ligt de rand strak om de inhoud heen. Daarom komt de padding eigenschap in beeld. Daarmee voeg je ruimte in tussen de inhoud en de rand:

<P STYLE="background:aqua; text-align:center; padding:5px; border: thin solid black;">Een beetje bewegingsruimte</P>

Een beetje bewegingsruimte

Ook padding kun je verschillend instellen voor bovenkant, onderkant en zijkanten:

<P STYLE="background:teal; text-align:center; padding-top:5px; padding-right:50px; padding-bottom:20px; padding-left:20px; border: thin solid black;">Verschillende bewegingsruimte...</P>

Semper ubi sub ubi. Quone modo nunc, fulve bos? Si hoc non legere potes, tu asinus es. Tua mater tam antiqua ut linguam latinam loquatur. Itaque cum adpropinquarent Britanniae et ex castris viderentur, tanta tempestas subito coorta est ut nulla earum cursum tenere posset, sed aliae eodem unde erant profectae referrentur, aliae ad inferiorem partem insulae, quae est propius solis occasum, magno suo cum periculo deicerentur.

Ook dit kan korter, op een manier die vergelijkbaar is met het instellen van de randen.

<P STYLE="background:teal; text-align:justify; padding:5px 20px 20px 20px; border: thin solid black;">Semper ubi ... latinam loquatur.</P>

Semper ubi sub ubi. Quone modo nunc, fulve bos? Si hoc non legere potes, tu asinus es. Tua mater tam antiqua ut linguam latinam loquatur.

Je ziet hier nogmaals dat de achtergrond ook de ruimte (padding) vult maar niet de marges.

To the top

Marges

De marges kunnen ingesteld worden op een manier die vergelijkbaar is met de ruimte en de randen. De marges zijn altijd transparant en dienen om je object afstand te geven tot omringende objecten.

<P STYLE="background:#99F; text-align:center; margin-top:5px; margin-right:50px; margin-bottom:5px; margin-left:50px;">Ruime marges!</P>

<P STYLE="background:#99F; text-align:center; margin:5px 100px 5px 100px;">Ruimere marges!</P>

Ruime marges!

Ruimere marges!

Je ziet dat de marges de afstand tot het omringende object bepalen, in dit geval de lichtgrijze rand. De paragraaf met grotere marges wordt dus smaller.

To the top

Lettertype

Je kunt op twee manieren het lettertype kiezen: een font bij naam noemen of een algemeen schriftsoort benoemen. De algemene schriftsoorten zijn:

  • serif (met schreef, zoals Times)
  • sans-serif (schreefloos, zoals Arial)
  • cursive (cursief, zoals Zapf-Chancery)
  • fantasy (zoals Western)
  • monospace (zoals Courier)

Als je een algemeen font-soort kiest, zoekt de browser iets wat daarbij past. Als je een lettertype met naam noemt probeert de browser precies dat lettertype te vinden. Je kunt beide mogelijkheden ook combineren:

P.font1 { font-family:times,times new roman,serif; text-align:center;}
P.font2 { font-family:helvetica,sans-serif; text-align:center;}
P.font3 { font-family:courier,profont,monospace; text-align:center;}

In je HTML document gebruik je dan:

<P CLASS="font1">Eerste voorbeeld met lettertypes</P>
<P CLASS="font2">Tweede voorbeeld met lettertypes</P>
<P CLASS="font3">Derde voorbeeld met lettertypes</P>

Eerste voorbeeld met lettertypes

Tweede voorbeeld met lettertypes

Derde voorbeeld met lettertypes

De browser zoekt nu eerst naar de lettertypes die je bij naam noemt en als die niet gevonden worden een algemeen lettertype wat een goede vervanging is.

To the top

Vetgedrukt

De font-weight eigenschap wordt gebruikt om verschillende gradaties van vetgedrukt aan te geven:

<SPAN STYLE="font-weight:lighter;">lighter: een lichtere regel</SPAN>
<SPAN STYLE="font-weight:normal;">normal: een normale regel</SPAN>
<SPAN STYLE="font-weight:bold;">bold: een vetgedrukte regel</SPAN>
<SPAN STYLE="font-weight:bolder;">bolder: een vetter gedrukte regel</SPAN>

lighter: een lichtere regel
normal: een normale regel
bold: een vetgedrukte regel
bolder: een vetter gedrukte regel

In deze voorbeelden zie je meteen ook het nut van het SPAN element. Dat kan gebruikt worden om een STYLE of CLASS attribuut onder te brengen.

Je kunt ook een getal gebruiken om aan te geven hoe vet een regel moet worden. Je kunt alleen de getallen gebruiken uit de voorbeelden hier onder, en geen andere waarden. 400 is hetzelfde als "normal" en 700 is hetzelfde als "bold"

<SPAN STYLE="font-weight:100;">font-weight waarde 100</SPAN>
<SPAN STYLE="font-weight:200;">font-weight waarde 200</SPAN>
<SPAN STYLE="font-weight:300;">font-weight waarde 300</SPAN>
<SPAN STYLE="font-weight:400;">font-weight waarde 400 (normal)</SPAN>
<SPAN STYLE="font-weight:500;">font-weight waarde 500</SPAN>
<SPAN STYLE="font-weight:600;">font-weight waarde 600</SPAN>
<SPAN STYLE="font-weight:700;">font-weight waarde 700 (bold)</SPAN>
<SPAN STYLE="font-weight:800;">font-weight waarde 800</SPAN>
<SPAN STYLE="font-weight:900;">font-weight waarde 900</SPAN>

font-weight waarde 100
font-weight waarde 200
font-weight waarde 300
font-weight waarde 400 (normal)
font-weight waarde 500
font-weight waarde 600
font-weight waarde 700 (bold)
font-weight waarde 800
font-weight waarde 900

Niet alle regels zien er verschillend uit. Dat kan komen door de browser of door het gebruikte lettertype. Niet alle waarden van 100 t/m 900 zijn altijd beschikbaar.

To the top

Letterstijl

Er zijn drie stijlen beschikbaar: normal, italic en oblique. Je kunt er maar één tegelijk gebruiken.

<SPAN STYLE="font-style:italic;">italic: schuingedrukt</SPAN>
<SPAN STYLE="font-style:normal;">normal: gewone tekst</SPAN>
<SPAN STYLE="font-style:oblique;">oblique: schuingedrukt</SPAN>

italic: schuingedrukt
normal: gewone tekst
oblique: schuingedrukt

Hoe de drie stijlen er precies uitzien kan verschillen per browser en gebruikt lettertype. "normal" is de standaard waarde maar soms wil je die toch gebruiken:

<P STYLE="font-style:italic">Soms wil je in een schuingedrukte paragraaf één <SPAN STYLE="font-style:normal;">normaal</SPAN> woord.</P>

Soms wil je in een schuingedrukte paragraaf één normaal woord.

Zo zie je hoe je normaal toch wilt gebruiken ondanks dat het de default waarde is.

To the top

Varianten op lettertypes

Met font-variant kunnen kleine letters als kleine hoofdletters (small caps) worden getoond.

<SPAN STYLE="font-variant:small-caps;">Kleine hoofdletters</SPAN>
<SPAN STYLE="font-variant:normal;">Gewone tekst</SPAN>

Kleine hoofdletters
Gewone tekst

"Normal" is de beginwaarde en die heb je dus alleen nodig als je normale tekst wilt tonen in een object wat "small caps" overgenomen heeft van het omringende element.

To the top

Lettergrootte

Er zijn verschillende manieren om lettergrootte te definiëren. Je kunt dat doen door absolute groottes met namen te kiezen:

<SPAN STYLE="font-size:xx-small;">Extra, extra kleine tekst</SPAN>
<SPAN STYLE="font-size:x-small;">Extra kleine tekst</SPAN>
<SPAN STYLE="font-size:small;">Kleine tekst</SPAN>
<SPAN STYLE="font-size:medium;">Normale tekst</SPAN>
<SPAN STYLE="font-size:large;">Grote tekst</SPAN>
<SPAN STYLE="font-size:x-large;">Extra grote tekst</SPAN>
<SPAN STYLE="font-size:xx-large;">Extra, extra grote tekst</SPAN>

Extra, extra kleine tekst
Extra kleine tekst
Kleine tekst
Normale tekst
Grote tekst
Extra grote tekst
Extra, extra grote tekst

Je kunt de grootte ook instellen met absolute waarden in millimeters, centimeters, inches, point, pixel, pica, x-height (de hoogte van een kleine letter x) of em (de hoogte van het lettertype). Het ligt voor de hand dat die grootte niet negatief kan zijn.

<SPAN STYLE="font-size:6mm;">6 Millimeter</SPAN>
<SPAN STYLE="font-size:1cm;">1 Centimeter</SPAN>
<SPAN STYLE="font-size:0.5in;">0,5 Inch</SPAN>
<SPAN STYLE="font-size:12pt;">12 Points (12/72 van een inch)</SPAN>
<SPAN STYLE="font-size:14px;">14 Pixels</SPAN>
<SPAN STYLE="font-size:2pc;">2 Pica (24 points)</SPAN>

6 Millimeter
1 Centimeter
0,5 Inch
12 Points (12/72 van een inch)
14 Pixels
2 Pica (24 points)

Een alternatief is relatieve groottes te gebruiken:

<P STYLE="font-size:large;">Dit is een voorbeeld van <SPAN STYLE="font-size:smaller;">kleiner (smaller)</SPAN> en <SPAN STYLE="font-size:larger;">groter (larger)</SPAN> als tekstgrootte.</P>

Dit is een voorbeeld van kleiner (smaller) en groter (larger) als tekstgrootte.

In het bovenstaande voorbeeld heeft de paragraaf een grote letter, en krijgen twee kleine stukjes tekst een grotere en kleinere letter. als je dit vergelijkt met het eerste voorbeeld zie je dat "smaller" en "larger" resulteert in een maatje kleiner of groter op die schalen.

Tenslotte kunt je de grootte ook opgeven als een percentage van de grootte van de tekst van het omringende element:

<P STYLE="font-size:large;">Dit is een voorbeeld van <SPAN STYLE="font-size:50%;">vijftig procent</SPAN> en <SPAN STYLE="font-size:150%;">honderdvijftig procent</SPAN>.</P>

Dit is een voorbeeld van vijftig procent en honderdvijftig procent.

To the top

Letterafstand

Met CSS kun je ook de afstand tussen letters controleren. Die afstand kan worden ingesteld in millimeters, centimeters, inch, punten, pixels, pica, x-hoogte en letterhoogte:

<SPAN STYLE="letter-spacing:2mm">2 millimeter</SPAN>
<SPAN STYLE="letter-spacing:0.5cm">0,5 centimeter</SPAN>
<SPAN STYLE="letter-spacing:0.5in">0,5 inch</SPAN>
<SPAN STYLE="letter-spacing:3pt">3 punts</SPAN>
<SPAN STYLE="letter-spacing:3px">3 pixels</SPAN>
<SPAN STYLE="letter-spacing:1pc">1 pica</SPAN>
<SPAN STYLE="letter-spacing:0.5ex">0.5 x-hoogte</SPAN>
<SPAN STYLE="letter-spacing:0.5em">0.5 lettertypehoogte</SPAN>

2 millimeter
0,5 centimeter
0,5 inch
3 punts
3 pixels
1 pica
0.5 x-hoogte
0.5 lettertypehoogte

Het is overduidelijk dat je tekst niet erg leesbaar wordt door een grote letterafstand. De waarde "normal" kan gebruikt worden om de letterafstand weer terug te zetten naar de beginwaarde voor dat lettertype. Dat is nuttig als het omringende object een grote letterafstand heeft:

<P STYLE="letter-spacing:0.5cm;">Grote en <SPAN STYLE="letter-spacing:normal;">normale</SPAN> afstand.</P>

Grote en normale afstand.

To the top

Regelafstand

Deze eigenschap geeft de afstand tussen regels tekst. De waarde kan een getal zijn, waarmee de regelafstand de lettergrootte vermenigvuldigd met het getal wordt.

<P STYLE="line-height:2.0;">Semper ubi sub ubi ... periculo deicerentur.</P>

Semper ubi sub ubi. Quone modo nunc, fulve bos? Si hoc non legere potes, tu asinus es. Tua mater tam antiqua ut linguam latinam loquatur. Itaque cum adpropinquarent Britanniae et ex castris viderentur, tanta tempestas subito coorta est ut nulla earum cursum tenere posset.

Je kunt de regelafstand ook instellen in millimeters, centimeters, inch, punten en pixels. Omdat deze voorbeelden nogal veel ruimte innemen geef ik er maar een:

<P STYLE="line-height:8mm;">Semper ubi sub ubi ... periculo deicerentur.</P>

Semper ubi sub ubi. Quone modo nunc, fulve bos? Si hoc non legere potes, tu asinus es. Tua mater tam antiqua ut linguam latinam loquatur. Itaque cum adpropinquarent Britanniae et ex castris viderentur, tanta tempestas subito coorta est ut nulla earum cursum tenere posset.

Je kunt ook een negatief getal gebruiken voor de regelafstand waarmee je overlappende tekst maakt. Je kunt ook een percentage gebruiken, de regelafstand wordt dan dat percentage van de hoogte van het lettertype.

To the top

Uitlijnen van tekst

Met de text-align eigenschap geef je aan hoe tekst uitgelijnd moet worden. Er zijn vier mogelijke waarden: left, right, center of justify.

<P STYLE="text-align:left">Links uitgelijnde tekst</P>
<P STYLE="text-text-align:center">Gecentreerde tekst</P>
<P STYLE="text-align:right">Rechts uitgelijnde tekst</P>
<P STYLE="text-align:justify">Semper ubi ... periculo deicerentur.</P>

Links uitgelijnde tekst

Gecentreerde tekst

Rechts uitgelijnde tekst

Semper ubi sub ubi. Quone modo nunc, fulve bos? Si hoc non legere potes, tu asinus es. Tua mater tam antiqua ut linguam latinam loquatur. Itaque cum adpropinquarent Britanniae et ex castris viderentur, tanta tempestas subito coorta est ut nulla earum cursum tenere posset, sed aliae eodem unde erant profectae referrentur, aliae ad inferiorem partem insulae, quae est propius solis occasum, magno suo cum periculo deicerentur.

To the top

Kleuren van links

In het stylesheet voor deze gids gebruik ik de volgende kleuren:

A:link {color:black;}
A:visited {color:black;}
A:active {color:red;}
A:hover {color:red;}

De eerste drie regels bepalen de kleuren voor een link, een link die je recentelijk hebt bezocht en een actieve link. Een link is actief op het moment dat je er met de muis boven hangt en de (linker) knop ingedrukt houdt. De vierde regel geeft aan hoe de link er uit ziet als je er met de muis boven hangt zonder de knop in te drukken.

Op de volgende manier kun je meerdere, verschillende stijlen voor links gebruiken op je pagina:

A:link.one {color:black; font-family:sans-serif; font-style:italic;}
A:link.two {color:green; font-family:serif; font-weight:bold;}
A:hover.two {color:red; font-family:serif; font-weight:bold;}
A:link.three {color:red; font-family:monospace; text-decoration:none;}

In je HTML document gebruik je vervolgens dit:

<P><A HREF="xxx.html" CLASS="one">non-existent file</A><BR>
<A HREF="yyy.html" CLASS="two">another non-existent file</A><BR>
<A HREF="zzz.html" CLASS="three">the last non-existent file</A></P>

non-existent file
another non-existent file
the last non-existent file

Een alternatief is om een STYLE attribuut te gebruiken bij elk A element

<A HREF="xxx.html" STYLE="color:black; font-family:sans-serif; font-style:italic;">non-existent file</A>
<A HREF="yyy.html" STYLE="color:green; hover:red; font-family:serif; font-weight:bold;">another non-existent file</A>
<A HREF="zzz.html" STYLE="color:red; font-family:monospace; text-decoration:none;">the last non-existent file</A>

non-existent file
another non-existent file
the last non-existent file

To the top

Nieuwe pagina bij afdrukken

Middels stylesheets kun je bij het afdrukken een nieuwe pagina afdwingen op door jou gekozen plekken. De titel van deze sectie ziet er zo uit:

<H2 STYLE="page-break-before:always;">Nieuwe pagina bij afdrukken</H2>

Als je dit document afdrukt of voorvertoning van afdrukken bekijkt, zul je zien dat deze sectie steeds op een nieuwe pagina begint. Je kunt ook een nieuwe pagina na een bepaald element afdwingen:

<P STYLE="page-break-after:always;">Nieuwe pagina na deze paragraaf...</P>

Nieuwe pagina na deze paragraaf...

Helaas ondersteunen lang niet alle browsers deze eigenschappen.

To the top

 

Reacties welkom...

Ik hoor graag je mening over deze gids, informatie die je graag toegevoegd zou willen zien of eventuele fouten die je hebt ontdekt. Klik hier.

 

Open standaarden...

Deze site is volledig conform de open standaarden van het World Wide Web Consortium (W3C). Je kunt op de logo's klikken om dat te verifiëren.

HTML 4 logo

CSS logo

 

 

©1995-2017 Jan Weijers, the Netherlands. All rights reserved.
No reproduction by any means or in any language without prior permission of the author.