Dreamweaver CS3 - Adobe

Hoofdstuk 6: Pagina's maken met CSS
Adobe® Dreamweaver® CS3 bevat veel functies die u helpen Cascading Style Sheets (CSS) te gebruiken voor het maken van
stijlen en pagina-indelingen voor uw webpagina's.
Wat zijn CSS-stijlpagina's (Cascading Style Sheets)
Informatie over CSS (Cascading Style Sheets)
Cascading Style Sheets (CSS) bestaan uit een verzameling opmaakregels die het uiterlijk van de inhoud op een webpagina
bepalen. Bij het gebruik van CSS-stijlen voor de opmaak (indeling) van een pagina scheidt men de inhoud van de
presentatie ervan. De inhoud van uw pagina—de HTML-code—bevindt zich in het HTML-bestand, terwijl de CSS-regels
die de presentatie van de code bepalen, zich in een ander bestand (een externe stijlpagina) of in een ander deel van het
HTML-document (doorgaans de kopsectie) bevinden. Door de inhoud te scheiden van de presentatie wordt het veel
gemakkelijker om het uiterlijk van uw site te onderhouden vanaf een centrale locatie, omdat u telkens wanneer u een
wijziging aanbrengt, nu niet elke eigenschap op elke pagina hoeft bij te werken. Het scheiden van de inhoud van de
presentatie leidt ook tot meer eenvoudige en schonere HTML-code, hetgeen weer leidt tot kortere laadtijden in de browser
en een vereenvoudigde navigatie voor mensen met toegankelijkheidsproblemen (bijvoorbeeld bezoekers die schermlezers
gebruiken).
CSS biedt een grote mate van flexibiliteit in en controle over het precieze uiterlijk van uw pagina. Met CSS hebt u controle
over een groot aantal teksteigenschappen, waaronder specifieke lettertypen en tekengroottes, vet, cursief, onderstreept en
tekstschaduwen, tekstkleur en achtergrondkleur, de kleur en onderstreping van koppelingen, en nog veel meer. Bij gebruik
van CSS voor de controle van uw lettertypen kunt u ook zorgen voor een meer consistente afhandeling van uw paginaindeling
en het uiterlijk in meerdere browsers.
Naast tekstopmaak kunt u CSS ook gebruiken voor de controle over de opmaak en wijze van positioneren van elementen
op blokniveau in een webpagina. Een element op blokniveau is een zelfstandig stuk inhoud dat in HTML doorgaans wordt
gescheiden door een nieuwe regel en visueel wordt opgemaakt als een blok. Zo leidt het gebruik van de labels voor h1, p en
div in alle gevallen tot elementen op blokniveau op een webpagina. Voor elementen op blokniveau kunt u marges en
randen instellen, terwijl u ze op een specifieke locatie kunt positioneren, ze van een achtergrondkleur kunt voorzien, de
tekst erin kunt laten zweven, enzovoort. Het manipuleren van elementen op blokniveau bestaat in wezen uit de manier
waarop u uw pagina's opmaakt met CSS.
Ga naar www.adobe.com/go/vid0152_nl voor een zelfstudie over Cascading Style Sheets.
Zie ook
“Werken met labels voor div-elementen” op pagina 156
“Pagina's met CSS opmaken” op pagina 140
Informatie over CSS-regels
Een CSS-opmaakregel bestaat uit twee delen—de kiezer en de declaratie (of, in de meeste gevallen, een blok declaraties).
De kiezer is een term (zoals p, h1,een klassenaam of een id) waarmee het opgemaakte element wordt aangeduid, terwijl het
declaratieblok bepaalt wat de stijleigenschappen zijn. In het volgende voorbeeld is h1 de kiezer, terwijl alles wat tussen de
accolades ({}) staat, het declaratieblok is:
h1 {
font-size: 16 pixels;
font-family: Helvetica;
font-weight:bold;
}
117