|
Style Sheets
Met stijlbladen (style sheets) kun je de algemene kenmerken van HTML-documenten
instellen. Je hebt ook geleerd dat er verschillende soorten stijlbladen
zijn, hieronder nogmaals een overzicht van de stijlbladen.
In de toekomst komt er een manier om een stijlblad uit te brengen die
de voorkeur krijgt boven de andere stijlbladen die zijn opgenomen in het
HTML-document. Tot die tijd negeren de browsers die geen stijlbladen ondersteunen
de stijlbladen, de bezoeker ziet er dus niets van.
Er zijn drie verschillende soorten stijlbladen (afhankelijk van de manier
waarop ze gebruikt worden):
- in-line stijlbladen
- ingesloten stijlbladen
- gekoppelde stijlbladen
Deze volgorde is tevens de volgorde waarop de stijlen worden voorgetrokken!
De in-line stijlbladen gaan voor op de ingesloten stijlbladen en staan
er in-line stijlbladen dan worden de ingesloten stijlbladen genegeerd.
Ik zal de verschillende soorten stijlbladen hieronder uitleggen met diverse
voorbeelden:
In-line stijlbladen:
In-line stijlbladen zijn bladen die door de hele pagina te vinden zijn.
Ze staan door en naast de codes en geven per element aan hoe die weergegeven
moet worden. Een voorbeeld van een in-line stijlblad is dit:
<body>
<h1 style="font-size: 18pt; font-style: italic; color: red">Dit
is dan de tekst die bij het H1 element hoort</h1>
Ingesloten stijlbladen:
Ingesloten stijlbladen zijn van toepassing op de hele HTML-pagina en
worden opgenomen in de <head> sectie
van het document. Begin een ingesloten stijlblad altijd met: <style
type="text/css"> Hier een voorbeeld van een ingesloten
stijlblad:
<html>
<head>
<title>Weblessen.nl - Voor iedereen die wat wil leren.</title>
<style type="text/css"> //Geef nu de elementen
aan en wat voor een stijl je wilt dat het element krijgt.
body { background:
gray; color: CCCCCC; text-align: center }
b { font-size: 18pt; font-style: bold }
p { font-size: 12pt; font-style: italic; color: red }
i { font-size: 15pt; font-style: italic }
</style>
</head>
<body> Hier de HTMLcodes van de pagina ..
Een element op deze pagina nou weer anders weer laten geven gaat best
makkelijk. Een in-line stijlblad gaat (zoals we geleerd hebben) voor op
de ingesloten en de gekoppelde stijlbladen! Dus één of meer
elementen anders laten weergeven is geen probleem. Dit gebeurd met een
In-line stijl. Voorbeeld van een Italic element nu bold
laten weergeven:
<i style="font-style: bold">Italic
tekst</i>
Gekoppelde stijlbladen:
Het belangrijkste voordeel van gekoppelde CSS-stijlbladen is dat ze toegepast
kunnen worden op meerdere documenten, welke taal dan ook. Op die manier
kunt u documenten snel hetzelfde uiterlijk geven, of snel een ander uiterlijk
geven voor bijvoorbeeld een open dag of een speciale gelegenheid. Een
voordeel van een gekoppeld stijlblad is dat je hem zeer gemakkelijk toe
kunt voegen, en ook weer zeer gemakkelijk kunt aanpassen. Een pagina in
een andere stijl weergeven is met gekoppelde stijlbladen ook niet moeilijk
want een gekoppeld stijlblad zal altijd voorrang moeten geven aan een
ingesloten of een in-line stijlblad. Is dit het geval dan wordt dat gekoppelde
element genegeerd. De andere elementen die voorgedefinieerd zijn in het
gekoppelde stijlblad worden wel zo weergegeven. Zeer handig dus.
Hoe roep je een gekoppeld stijlblad op, dat doe je zo:
<html>
<head>
<title>Weblessen.nl - Voor iedereen die wat wil leren.</title>
<link rel="stylesheet" href="http://www.weblessen.nl/ss.css"
type="text/css">
</head>
<body> Hier de HTMLcodes van de pagina ..
Een gekoppeld bestand ziet er bijvoorbeeld zo uit:
body
{
font-size: 1;
color:#000000;
background-color:#cccccc;
margin-top:2px;
margin-left:2px;
margin-right:0px;
margin-bottom:0px;
font-family: Verdana, Tahoma, Arial; font-size: 8pt;
}
body
{
font-family: verdana,helvetica,arial,sans-serif;
}
body, table, input, textarea
{
font-size: 11;
color:#003366;
}
hr
{
background-color:transparent;
color:#000000;
height:1px;
}
table.front
{
color:#000000;
background-color:#f1f1f1;
}
th.front
{
color:#ffffff;
background-color:#666666;
}
td.front
{
color:#000000;
background-color:#f1f1f1;
}
a.nounderline{text-decoration:none}
a:link {color:#0033669; background-color:transparent;
size: 11}
a:visited {color:#0033cc; background-color:transparent; size: 11}
a:active {color:#99ccff; background-color:transparent; size: 11}
a:hover {color:#ffffff; background-color:transparent; size: 11}
all.clsMenuItemNS{font: bold x-small Verdana; color:
black; text-decoration: none;}
.clsMenuItemIE{text-decoration: none; font: bold xx-small Verdana; color:
black; cursor: hand;}
A:hover {color: white;}
body{
scrollbar-face-color:#ccc;
scrollbar-highlight-color:#ccc;
scrollbar-3dlight-color:#666;
scrollbar-darkshadow-color:#666;
scrollbar-shadow-color:#ccc;
scrollbar-arrow-color:#fff;
scrollbar-track-color:#eee;
}
|
