Sitemap
Copyright © Studio Artist X 2004-2010, KvK nr. 34202110
Dreamweaver MX gratis online tutorial voor de beginners ...
CSS ofwel Cascading Style Sheets, dat letterlijk betekent, een gestapeld stijl blad, bood de oplossing. Het voordeel van een Style sheet is dat het in principe een apart document is, dat gekoppeld kan worden aan één of meerdere pagina’s. Een ander voordeel is dat de stijl binnen de website consequent blijft. Het werkt zeer efficiënt bij het aanpassen van bijvoorbeeld het lettertype in de gehele site. Hiervoor hoeft men dan alleen het CSS-document aan te passen, en alle gekoppelde pagina’s wijzigen mee. Pagina’s die een aparte opmaak nodig hebben kunnen apart gekoppeld worden, aan een ander stijlblad. Van elke HTML pagina hoeft geen afzonderlijke printvriendelijk versie te worden gemaakt, het volstaat een print-stylesheet te maken. Ook gebruikers die klagen over een slecht leesbare pagina, kunnen we van dienst zijn door een aparte stylesheet met een groter font te linken. Eén voorwaarde om CSS te kunnen toepassen is dat men weet hoe een broncode is opgebouwd.
Net als HTML wordt ook CSS door de browser van de gebruiker vertaald naar beeld. Wanneer men correct taal gebruikt, in dit geval een schone, juiste broncode, zou elke browser dit op de juiste mannier moeten kunnen vertalen! Nog maar een paar jaar geleden, waren er toch nog een aantal problemen met de interpretatie van de verschillende stijlbladen, deze zijn in de loop der tijd ook opgelost. Dat neemt niet weg dat er met CSS heel gestructureerd gewerkt moet worden! Zeker om ook het overzicht niet te verliezen!
Er zijn binnen CSS verschillende eenheden mogelijk voor fontsize:
em : de 'font-grootte' van het originele printlettertype
ex : de 'x-hoogte' van het lettertype
px : pixels, gerelateerd aan het beeldscherm
in : inches -- 1 inch is gelijk aan 2.54 centimeter.
cm : centimeters
mm : millimeters
pt : points -- Punten gebruikt in CSS2 zijn gelijk aan 1/72ste inch
pc : picas -- 1 pica is gelijk aan 12 punten
Een veel gebruikte font-size is {font size:0.8em;} die over het algemeen hetzelfde weergegeven word als {font size:11px;}. De meest ideale maateenheid is er niet.
Want de weergave blijft afhankelijk van de instellingen van de gebruiker! Persoonlijk vind ik de pixel eenheid het meest handig en deze wordt relatief goed weergegeven op verschillende schermen.
Het is wel opletten met het gebruik van em! Als de <div style=”font size:1.5em"> en de <p style="font size:0.8em"> binnen die div-tag wordt gebruikt, overtreft de divstyle- de paragraaf-tag, het font word dan groter weergegeven dan de bedoeling is!
Een eenvoudig voorbeeld van een deel van de CSS:
a {
color: #3366CC;
text-decoration: none
}
body {
background-color: #FFFFCC;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 2em;
color: #336699;
margin-top: 0.1em;
margin-right: 0.1em;
margin-bottom: 0.1em;
margin-left: 0.1em
}
h1 {
color: #003333;
font-size: 36px;
}
h2 {
color: #003366;
font-size: 24px;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #006666;
color: #DCDCDC;
text-align: center;
}
Het rood gemarkeerde gedeelte is de koppeling aan het .css document. De geel gemarkeerde gedeeltes geven aan welke Header voor het aangewezen deel gebruikt is. Met daaronder in Design-view de weergave van de verschillende koppen.
In Dreamweaver MX kan men gebruik maken van het CSS-propertiespanel om het desbetreffende stylesheet aan te passen.
Let op! Alle opmaak wijzigingen dienen te worden uitgevoerd binnen het stylesheet en niet in het document! Wordt de bewerking uitgevoerd in het normale Propertiespanel dan genereert Dreamweaver een deel van de CSS in de broncode van de pagina als aparte stylesheet. Deze style word dan alleen op dit document toegepast, en niet meegenomen in de gekoppelde stylesheet. Zie het voorbeeld hieronder.
Zoals gezegd; is dit een klein begin van de mogelijkheden van CSS.