Menu by:
Stu Nicholls
Menu by:
| februari 2012 | |||||||
| wk | zo | ma | di | wo | do | vr | za |
| 05 | 1 | 2 | 3 | 4 | |||
| 06 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 07 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 08 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 09 | 26 | 27 | 28 | 29 | |||
Kijk ook op de agenda-pagina.
Dit is het vervolg op de basiscursus in het bouwen van een home-page in HTML. Daarin bouwden we de website nog op de traditionele manier, met uitsluitend HTML. Dat had het nadeel dat er geen onderscheid werd gemaakt tussen inhoud en opmaak van de pagina's.
Met Cascading Style Sheets (CSS) is het mogelijk dat onderscheid wel aan te brengen. Bijkomend voordeel is, dat de hele site overzichtelijker en compacter wordt, en dus makkelijker te onderhouden. Je kunt namelijk één stylesheet maken, die je gebruikt voor alle pagina's van de site. De opmaak op één plek en de uiteindelijke pagina's met inhoud zelf zijn daardoor veel kleiner.
Net als bij de HTML basiscursus gaan we ook CSS niet tot in details behandelen, maar maken er vooral praktisch gebruik van.
Er zijn verschillende manieren om CSS toe te passen. De eerste en tevens slechtste methode is, de HTML
tags van style-attributen te voorzien. Hadden we vroeger in HTML bijvoorbeeld:
<body bgcolor="#ffffc0">
dan wordt dat in CSS:
<body style="background-color: #ffff00">
Dat schiet niet op. Het neemt alleen maar meer ruimte in en je moet het in elke pagina opnieuw opgeven.
En als we vaak van lettertype wisselen, wordt het alleen nog maar erger. Niet doen dus.
De beste methode is, in de HEAD-sectie van de pagina een link op te nemen naar een apart
style-bestand, waarin de stijlen van de verschillende elementen worden beschreven. Dat ziet er dan
ongeveer zo uit:
<html>
<head>
<link rel="stylesheet" href="course.css" type="text/css" title="Mijn Stijl" />
</head>
<body>
<h3>Pagina met CSS</h3>
....
</body>
</html>
Daarin is course.css het style-bestand. Dat ziet er dan zo uit:
body { background-color: #ffffc0; }
Er zijn nog andere manieren om de style-sheet te importeren, maar deze is de meest praktische, dus
daar gaan we in de tutorial van uit.
Op de eerste plaats kun je, zoals je hierboven zag, HTML-tags voorzien van stijl-attributen. Een
paar voorbeelden om mee te beginnen:
body {
background-color: #ffffc0; /* de achtergrondkleur */
color: #000000; /* de tekstkleur */
font-family: Calibri,Arial,Helvetica,sans-serif; /* het lettertype */
}
h1,h3 {
font-family: Verdana,sans-serif; /* lettertype voor header type 1 en 3 */
text-align: center; /* centreren */
}
p {
font-family: "Times New Roman",serif; /* lettertype voor paragrafen */
}
Pagina's die deze stylesheet bevatten, hebben dus een gele achtergrond met zwarte tekst. Als de
computer waarop de pagina wordt weergegeven het lettertype Calibri bevat, wordt dat gebruikt. Is dat
er niet, dan wordt Arial geprobeerd, enzovoorts. Paragrafen krijgen Times New Roman als lettertype en
H#-headers worden weergegeven in het type Verdana.
Naast de standaard HTML-tags kunnen we ook eigen definities toevoegen, de zgn. "classes". Die kunnen
vervolgens worden gebruikt om in bepaalde omstandigheden standaard-eigenschappen te vervangen. Laten
we eens een toepasselijk class toevoegen: "css". Een class-definitie begint altijd met een punt (.) :
body {
background-color: #ffffc0; /* de achtergrondkleur */
color: #000000; /* de tekstkleur */
font-family: Calibri,Arial,Helvetica,sans-serif; /* het lettertype */
}
h1,h3 {
font-family: Verdana,sans-serif; /* lettertype voor header type 1 en 3 */
text-align: center; /* centreren */
}
p {
font-family: "Times New Roman",serif; /* lettertype voor paragrafen */
}
.css {
background-color: #c0ffff;
}
Dat kunnen we vervolgens toepassen in de voorbeeld-pagina:
<html>
<head>
<link rel="stylesheet" href="course.css" type="text/css" title="Mijn Stijl" />
</head>
<body>
<h3>Pagina met CSS</h3>
<p>Deze paragraaf erft de achtergrondkleur van de body: #ffffc0.</p>
<p class="css">Deze paragraaf krijgt de css achtergrondkleur: #c0ffff.</p>
....
</body>
</html>
(Let op: in de stylesheet begint de classnaam met een punt, in de html-pagina niet!)
Eens kijken naar het resultaat tot nu toe!
Laten we de pagina uit de eerste HTML-cursus er eens bij pakken. De uiteindelijke versie zag er
zo uit:
<html>
<head>
<title>Vanessa's first home-page</title>
</head>
<body bgcolor="#ffffc0">
<center><h1>Vanessa's page!</h1></center>
<p align="center">
Hi, I'm Vanessa and this is my first home-page. It's very simple so far,
but that will change soon enough.<br />
I hope you like what you're seeing right now.<br />
<img src="images/vanessa.gif" width="45" height="60" border="0" /><br />
Let me know what you think of my page, please.<br />
Send me some <a href="mailto:vzikking@dds.nl">mail</a>.<br />
</p>
</body>
</html>
Hoe gaat die eruit zien, als we hem ombouwen naar CSS? Dit gaat weg en
dit komt erbij:
<html>
<head>
<title>Vanessa's first home-page</title>
<link rel="stylesheet" type="text/css" href="/course.css" title="Mijn stijl" />
</head>
<body bgcolor="#ffffc0">
<center><h1>Vanessa's page!</h1></center>
<p align="center"class="midpage">
Hi, I'm Vanessa and this is my first home-page. It's very simple so far,
but that will change soon enough.<br />
I hope you like what you're seeing right now.<br />
<img src="images/vanessa.gif" width="45" height="60" border="0" /><br />
Let me know what you think of my page, please.<br />
Send me some <a href="mailto:vzikking@dds.nl">mail</a>.<br />
</p>
</body>
</html>
We hebben ook bij de paragraaf het centreren weggehaald. Daar maken we een nieuwe class voor: midpage.
body {
background-color: #ffffc0; /* de achtergrondkleur */
color: #000000; /* de tekstkleur */
font-family: Calibri,Arial,Helvetica,sans-serif; /* het lettertype */
}
h1,h3 {
font-family: Verdana,sans-serif; /* lettertype voor header type 1 en 3 */
text-align: center; /* centreren */
}
p {
font-family: "Times New Roman",serif; /* lettertype voor paragrafen */
}
.css {
background-color: #c0ffff;
}
.midpage {
text-align: center;
}
In het voorbeeld zit een linkje, naar het mailadres. Met linkjes kun je in CSS leuke dingen doen.
Je kunt ze bijvoorbeeld een ander kleurtje geven als je er met de muis overheen gaat. Laten we in de
stylesheet de A-tag van HTML eens wat aanpassen:
body {
background-color: #ffffc0; /* de achtergrondkleur */
color: #000000; /* de tekstkleur */
font-family: Calibri,Arial,Helvetica,sans-serif; /* het lettertype */
}
h1,h3 {
font-family: Verdana,sans-serif; /* lettertype voor header type 1 en 3 */
text-align: center; /* centreren */
}
p {
font-family: "Times New Roman",serif; /* lettertype voor paragrafen */
}
a {
color: #ff0000;
}
a:hover {
background-color: #000000;
color: #ffffff;
padding: 3px;
}
.css {
background-color: #c0ffff;
}
.midpage {
text-align: center;
}
Hoe zou het er nu uitzien?
Deze pagina is nog niet af. Meer volgt .....
