Operation Manual

Wat zijn CSS-stijlpagina's (Cascading Style Sheets)
Naar boven
Naar boven
Over CSS (Cascading Style Sheets)
Over CSS-regels
Over CSS-stijlen
Over tekstopmaak en CSS
Over steno-CSS-eigenschappen
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 pagina-indeling 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.
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:
Een afzonderlijke declaratie bestaat uit twee delen, de eigenschap (zoals font-family) en de waarde (zoals Helvetica). In de vorige CSS-
regel is een bepaalde stijl gemaakt voor de labels h1: de tekst voor alle labels h1 die gekoppeld is aan deze stijl, heeft een grootte van 16 pixels,
staat in het lettertype Helvetica en is vet.
De stijl (die afkomstig is van een regel, of een verzameling regels) is ondergebracht op een plaats die anders is dan de feitelijke tekst die ermee
wordt opgemaakt: doorgaans in een externe stijlpagina, of in de kopsectie van een HTML-document. Op deze manier kan één regel voor de labels
h1 worden toegepast op vele labels tegelijk (en in het geval van externe stijlpagina's kan de regel worden toegepast op vele labels tegelijk op veel
verschillende pagina's). Daarom biedt CSS een bijzonder eenvoudige manier van bijwerken. Wanneer u een CSS-regel op één plaats bijwerkt,
wordt de opmaak van alle elementen die de gedefinieerde stijl gebruiken, automatisch bijgewerkt naar de nieuwe stijl.
1
2
3
4
5
h1 {
font-size: 16 pixels;
font-family: Helvetica;
font-weight:bold;
}
250