REC-CSS1-19990111
Cascading Style Sheets, level 1
W3C Aanbeveling 17 Dec 1996, herzien 11 Jan 1999
Status van dit document
Dit document is een W3C Aanbeveling. Het is herzien door W3C (http://www.w3.org/) Leden en algemene consensus is
dat de specificatie geschikt is voor gebruik. Het is een stabiel document en het kan
gebruikt worden als referentiemateriaal of geciteerd worden als een normatieve referentie
voor een ander document. W3C promoot een wijde verspreiding van deze Aanbeveling.
Een lijst van huidige W3C Aanbevelingen en andere technische documenten
kan gevonden worden op http://www.w3.org/TR/.
Dit document is een gereviseerde versie van het document dat voor het eerst verscheen op 17 december 1996. Wijzigingen ten opzichte van het origineel zijn terug te vinden in Appendix F. De lijst met gekende fouten in de Engelstalige (en normatieve versie van de) specificatie is beschikbaar op http://www.w3.org/Style/CSS/Errata/REC-CSS1-19990111-errata
Fouten in de vertaling zijn mogelijk. Meldt deze steeds aan de vertaler, Andy Camps
Dit document specificeert level 1 van het Cascading Style Sheet
mechanisme (CSS1). CSS1 is een eenvoudig stylesheet mechanisme dat
auteurs en lezers in staat stelt om stijlinformatie (zoals lettertypes, kleuren en spatiëring) te koppelen
aan HTML documenten. De CSS1 taal is een leesbare en schrijfbare taal en drukt
stijl uit in algemene desktop publishing terminologie.
Een van de fundamentele eigenschappen van CSS is dat stylesheets op elkaar bouwen (cascade) (stijlbladen werken volgens een watervaleffect);
auteurs kunnen zelf een stylesheet koppelen, terwijl de lezer een eigen
persoonlijk stylesheet kan hebben om menselijke of technologische beperkingen te omzeilen.
De regels om conflicten tussen verschillende stylesheets op te lossen worden
gedefinieerd in deze specificatie.
Deze Aanbeveling resulteert van W3C activiteiten in het gebied van Style Sheets. Zie [1] voor
achtergrondinformatie over stylesheets.
Samenvatting
Terminologie
1
Basis concepten
1.1
Opnemen in HTML
1.2
Groeperen
1.3
Overerving
1.4
Class als selector
1.5
ID als selector
1.6
Contextuele selectors
1.7
Opmerkingen
2
Pseudo-classes en
pseudo-elementen
2.1
Anker pseudo-classes
2.2
Typografische
pseudo-elementen
2.3
Het 'first-line'
pseudo-element
2.4
Het 'first-letter'
pseudo-element
2.5
Pseudo-elementen in
selectors
2.6
Meervoudige
pseudo-elementen
3
De cascade
3.1
'important'
3.2
Cascading volgorde
4
Opmaakmodel
4.1
Block-level elementen
4.1.1
Verticale opmaak
4.1.2
Horizontale opmaak
4.1.3
Lijst elementen
4.1.4
Zwevende elementen
4.2
Inline elementen
4.3
Vervangen elementen
4.4
De regelhoogte
4.5
Het canvas
4.6
'BR' elementen
5
CSS1 eigenschappen
5.1
Notatie voor eigenschapwaarden
5.2
Lettertype eigenschappen
5.2.1
Lettertype koppeling
5.2.2
'font-family'
5.2.3
'font-style'
5.2.4
'font-variant'
5.2.5
'font-weight'
5.2.6
'font-size'
5.2.7
'font'
5.3
Kleur en achtergrond
eigenschappen
5.3.1
'color'
5.3.2
'background-color'
5.3.3
'background-image'
5.3.4
'background-repeat'
5.3.5
'background-attachment'
5.3.6
'background-position'
5.3.7
'background'
5.4
Teksteigenschappen
5.4.1
'word-spacing'
5.4.2
'letter-spacing'
5.4.3
'text-decoration'
5.4.4
'vertical-align'
5.4.5
'text-transform'
5.4.6
'text-align'
5.4.7
'text-indent'
5.4.8
'line-height'
5.5
Box eigenschappen
5.5.1
'margin-top'
5.5.2
'margin-right'
5.5.3
'margin-bottom'
5.5.4
'margin-left'
5.5.5
'margin'
5.5.6
'padding-top'
5.5.7
'padding-right'
5.5.8
'padding-bottom'
5.5.9
'padding-left'
5.5.10
'padding'
5.5.11
'border-top-width'
5.5.12
'border-right-width'
5.5.13
'border-bottom-width'
5.5.14
'border-left-width'
5.5.15
'border-width'
5.5.16
'border-color'
5.5.17
'border-style'
5.5.18
'border-top'
5.5.19
'border-right'
5.5.20
'border-bottom'
5.5.21
'border-left'
5.5.22
'border'
5.5.23
'width'
5.5.24
'height'
5.5.25
'float'
5.5.26
'clear'
5.6
Classificatie
eigenschappen
5.6.1
'display'
5.6.2
'white-space'
5.6.3
'list-style-type'
5.6.4
'list-style-image'
5.6.5
'list-style-position'
5.6.6
'list-style'
6
Eenheden
6.1
Lengte eenheden
6.2
Percentage eenheden
6.3
Kleur eenheden
6.4
URL
7
CSS1 Conformiteit
7.1
Forward-compatible
parsing
8
Referenties
9
Dankwoord
Appendix A: Voorbeeld stylesheet voor HTML 2.0
Appendix B: CSS1 grammatica
Appendix C: Codering
Appendix D: Gamma correctie
Appendix E: De toepasbaarheid en uitbreidbaarheid van CSS1
Appendix F: Wijzigingen ten opzichte van de 17 december 1996 versie
-
attribuut
-
HTML attribuut
-
auteur
-
de auteur van een HTML document
-
block-level element
-
een element dat een line break heeft voor en na (zoals 'H1' in
HTML)
-
canvas
-
het deel van het User Agent tekenoppervlak waar documenten weergegeven worden
-
child element
-
een subelement in SGML [5]
terminologie
-
contextuele selector
-
een selector die overeenkomt met meerdere elementen gebaseerd op hun positie in de
document structuur. Een contextuele selector bestaat uit verschillende
eenvoudige selectors. Zoals de contextuele selector 'H1.initial B'
bestaat uit twee eenvoudige selectors, 'H1.initial' en 'B'.
-
CSS
-
Cascading Style Sheets
-
CSS1
-
Cascading Style Sheets, level 1. Dit document definieert CSS1
welk een eenvoudig stylesheet mechanisme voor het web is.
-
CSS1 geavanceerde eigenschappen
-
eigenschappen die in deze specificatie omschreven worden maar niet behoren
tot de CSS1 basiseigenschappen
-
CSS1 basiseigenschappen
-
het deel van CSS1 dat vereist is in alle CSS1 conforme User Agents
-
CSS1 parser
-
een User Agent die CSS1 stylesheets leest
-
declaratie
-
een eigenschap (zoals 'font-size') en een overeenstemmende waarde (zoals
'12pt')
-
ontwerper (designer)
-
de ontwerper van een stylesheet
-
document
-
HTML document
-
element
-
HTML element
-
element type
-
een algemene identificatie in SGML [5]
terminologie
-
fictionele tag volgorde
-
een manier om het gedrag van pseudo-classes en
pseudo-elements te omschrijven
-
font grootte
-
De grootte waarvoor een font ontworpen is. De grootte van een font is normaal
ongeveer gelijk aan de afstand van de onderkant van de laagste
letter met een descender (zoals ç) naar de top van de grootste letter
met een ascender en (optioneel) met een diacritical teken.
-
HTML
-
Hypertext Markup Language [2], een
toepassing van SGML.
-
HTML extensie
-
Opmaak, meestal om bepaalde visuele effecten te ondersteunen, die geïntroduceerd werd door verkopers van User Agents. De "FONT", "CENTER" en "BLINK" elementen zijn
voorbeelden van HTML extensies, net zoals het "BGCOLOR" attribuut. Een van de
doelen van CSS is een alternatief bieden voor HTML extensies.
-
inline element
-
een element welk geen line break voor en achter heeft
(zoals 'STRONG' in HTML)
-
intrinsieke dimensies
-
de breedte en hoogte zoals gedefinieerd door het element zelf, zonder
invloed van de omgeving. In deze specificatie wordt verondersteld dat
alle vervangen elementen -- en alleen vervangen elementen -- intrinsieke dimensies
hebben.
-
parent element
-
het bevattende element in SGML [5]
terminologie
-
pseudo-element
-
pseudo-elementen worden gebruikt in CSS selectors om typografische items
(zoals de eerste lijn van een element) in plaats van
structurele elementen te adresseren .
-
pseudo-class
-
pseudo-classes worden gebruikt in CSS selectors om informatie extern aan
de HTML code (zoals het feit dat een anker bezocht is
of niet) om elementen te classificeren.
-
eigenschap (property)
-
een stylistische parameter die beïnvloed kan worden door CSS. Deze
specificatie definieert een lijst van eigenschappen en hun overeenstemmende waarden.
-
lezer (reader)
-
de persoon waar het document voor wordt weergegeven
-
vervangen element
-
een element waar de CSS opmaker enkel de intrinsieke
afmetingen van kent. In HTML kunnen 'IMG', 'INPUT', 'TEXTAREA', 'SELECT' en
'OBJECT' elementen gezien worden als voorbeelden van vervangen elementen. De
inhoud van het 'IMG' element is op die manier dikwijls vervangen door de figuur
waar het SRC attribuut naar wijst. CSS1 definieert niet hoe de
intrinsieke afmetingen gevonden kunnen worden.
-
regel (rule)
-
een declaratie (zoals 'font-family: helvetica') en de selector ervan
(zoals 'H1')
-
selector
-
een string die identificeert op welke elementen de overeenkomende regel
van toepassing is. Een selector kan ofwel een eenvoudige selector (zoals
'H1') ofwel een contextuele selector (zoals 'H1 B') zijn welke bestaat uit verschillende
eenvoudige selectors.
-
SGML
-
Standard Generalized Markup Language [5], waar
HTML een toepassing van is
-
eenvoudige selector
-
een selector die elementen koppelt gebaseerd op het element type
en/of attributen, en niet de positie van het element in de document
structuur. 'H1.initial' is op die manier een eenvoudige selector.
-
stylesheet
-
een verzameling van regels
-
GA (UA, steeds vertaald als User Agent)
-
User Agent, dikwijls een web browser of web client
-
gebruiker
-
synoniem met lezer
-
gewicht
-
de prioriteit van een regel
In de tekst van deze specificatie duiden enkele aanhalingstekens ('...') op
HTML en CSS passages.
Eenvoudige stylesheets ontwerpen is gemakkelijk. Men hoeft slechts een beetje HTML en een kleine basis desktop publishing terminologie te kennen. Men gebruikt bijvoorbeeld om de kleur van de tekst
van 'H1' elementen blauw te maken:
H1 { color: blue }
Het voorbeeld hierboven is een eenvoudige CSS regel. Een regel bestaat uit twee hoofddelen: selector ('H1') en declaratie ('color: blue'). De declaratie heeft twee delen: eigenschap ('color') en waarde ('blue'). Terwijl het
voorbeeld hierboven slecht tracht één van de eigenschappen, nodig om een HTML document weer te geven, te beïnvloeden, is het een volledig stylesheet op zichtzelf. Gecombineerd met andere stylesheets (een fundamentele eigenschap van CSS is dat stylesheets gecombineerd kunnen worden) zal het stylesheet het uiteindelijke uiterlijk van het document bepalen.
De selector is de koppeling tussen het HTML document en het stylesheet en alle HTML element types zijn mogelijke selectors. HTML element types worden gedefinieerd in de HTML specificatie [2].
De 'color' eigenschap is één van de ongeveer 50 eigenschappen die het uiterlijk van een HTML document bepalen. De lijst van eigenschappen en hun mogelijke waarden wordt gedefinieerd in deze specificatie.
HTML auteurs moeten enkel een stylesheets schrijven als ze een specifieke stijl willen voorstellen voor hun documenten. Elke User Agent (GA, dikwijls een "web browser" of "web client") zal een standaard stylesheet hebben dat documenten weergeeft op een redelijke, maar betwistbare wereldse manier. Appendix A bevat een voorbeeld stylesheet om HTML documenten te presenteren zoals voorgesteld in de HTML 2.0 specificatie [3].
De formele grammatica voor de CSS1 taal wordt gedefinieerd in Appendix B.
Opdat de stylesheets invloed zouden hebben op de weergave, moeten de User Agents op de hoogte zijn van het bestaan ervan. De HTML specificatie [2] definieert hoe HTML gekoppeld moet worden met stylesheets. Deze sectie is daarom informatief, maar niet normatief:
<HTML>
<HEAD>
<TITLE>title</TITLE>
<LINK REL=STYLESHEET TYPE="text/css"
HREF="http://style.com/cool" TITLE="Cool">
<STYLE TYPE="text/css">
@import url(http://style.com/basic);
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>De kop is blauw</H1>
<P STYLE="color: green">Terwijl de alinea groen is.
</BODY>
</HTML>
Dit voorbeeld toont vier manieren om stijl en HTML te combineren: gebruik van het 'LINK' element om een extern stylesheet te koppelen, een 'STYLE' element in het 'HEAD' element, een geïmporteerde stylesheet door gebruik te maken van de CSS '@import' notatie en een 'STYLE' attribuut op een element in de 'BODY'. De laatste optie mengt stijl met inhoud en zo gaan de overeenkomende voordelen van traditionele stylesheets verloren.
Het 'LINK' element verwijst naar alternatieve stylesheets die de lezer kan selecteren, terwijl geïmporteerde stylesheets automatisch opgenomen worden met de rest van de stylesheet.
User Agents hebben steeds stilzwijgend onbekende tags genegeerd. Het gevolg is dat oude User Agents het 'STYLE' element zullen negeren, maar de inhoud zal behandeld worden als deel van de document body, en dus ook zo weergegeven worden. Tijdens de overgangsfase kan 'STYLE' element inhoud verborgen worden door gebruik te maken van SGML opmerkingen:
<STYLE TYPE="text/css"><!--
H1 { color: green }
--></STYLE>
Aangezien het 'STYLE' element gedeclareerd is als "CDATA" in de DTD (zoals gedefinieerd in [2]), zullen overeenstemmende SGML parsers de bovenstaande stylesheet niet beschouwen als een opmerking die verwijderd moet worden.
Om de grootte van stylesheets te beperken kan men selectors groeperen in door komma's gescheiden lijsten:
H1, H2, H3 { font-family: helvetica }
Gelijkwaardig kunnen declaraties gegroepeerd worden:
H1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: helvetica;
font-variant: normal;
font-style: normal;
}
Aanvullend, hebben sommige eigenschappen hun eigen groeperingssyntax:
H1 { font: bold 12pt/14pt helvetica }
welk equivalent is aan het voorgaande voorbeeld.
In het eerste voorbeeld werd de kleur van 'H1' elementen op blauw gezet. Veronderstel dat er een 'H1' element met een benadrukkingselement in aanwezig is:
<H1>De kop <EM>is</EM> belangrijk!</H1>
Als er geen kleur toegewezen wordt aan het 'EM' element, zal het benadrukte "is" de kleur van het parent element erven, hetgeen wil zeggen dat het ook blauw zal zijn. Andere stijleigenschappen,zoals 'font-family' en 'font-size', worden op dezelfde manier geërfd, .
Om een "standaard" stijleigenschap voor een document in te stellen kan men de eigenschap instellen woor een element dat vooraf gaat aan alle zichtbare elementen. In HTML documenten kan het 'BODY' element hiervoor dienen:
BODY {
color: black;
background: url(texture.gif) white;
}
Dit zal zelfs werken wanneer de auteur de 'BODY' tag heeft weggelaten (hetgeen geldig is) aangezien de HTML parser de ontbrekende tag zal veronderstellen. Het bovenstaande voorbeeld zet de tekstkleur op zwart en de achtergrond op een bepaalde figuur. De achtergrond zal wit zijn als de figuur niet beschikbaar is.
(Zie sectie 5.3 voor meer hierover.)
Sommige stijleigenschappen worden niet overgeërfd van het parent element naar het child element. Meestal kan op een intuitieve manier achterhaald worden waarom dit niet het geval is. De 'background' eigenschap wordt bijvoorbeeld niet overgeërfd, maar de achtergrondeigenschap van het parent element zal standaard zichtbaar zijn.
Dikwijls is de waarde van een eigenschap een percentage die verwijst naar een andere eigenschap:
P { font-size: 10pt }
P { line-height: 120% } /* relatief ten opzichte van 'font-size', zijnde 12pt */
Voor elke eigenschap die percentagewaarden toestaat, wordt gedefinieerd naar welke eigenschap verwezen wordt. Children elementen van 'P' zullen de berekende waarde van 'line-height' erven (zijnde
12pt), niet het percentage.
Om de controle over elementen stapgewijs te verhogen, werd een nieuw attribuut toegevoegd aan HTML [2]: 'CLASS'. Alle elementen binnen het 'BODY' element kunnen in classes ingedeeld worden en de classe kan geadresseerd worden in de stylesheet:
<HTML>
<HEAD>
<TITLE>Titel</TITLE>
<STYLE TYPE="text/css">
H1.pastoral { color: #00FF00 }
</STYLE>
</HEAD>
<BODY>
<H1 CLASS=pastoral>Veel te groen</H1>
</BODY>
</HTML>
De normale overervingsregels gelden op classed elementen; ze erven waarden van hun parent in de document structuur.
Men kan alle elementen van dezelfde class adresseren door de tagnaam weg te laten in de selector:
.pastoral { color: green } /* alle elementen met CLASS pastoral */
Er kan slechts één class gespecificeerd worden per selector. 'P.pastoral.marine' is daarom een ongeldige selector in CSS1. (Contextuele selectors, verder beschreven, kunnen één class per eenvoudige selector hebben)
CSS geeft zo veel kracht aan de CLASS attribuut, dat het in veel gevallen niet uitmaakt op welk HTML element de class gezet wordt -- u kan met bijna elk element een ander element nabootsen. Vertrouwen op deze kracht is echter niet aan te raden, aangezien het structuurniveau met een universele betekenis (HTML elementen) verwijderd wordt. Een structuur gebaseerd op CLASS is enkel bruikbaar binnen een sterk afgelijnd domein waar de betekenis van een class algemeen aanvaard is.
HTML [2] introduceert eveneens het 'ID' attribuut welk gegarandeerd een unieke waarde heeft over het document. Het kan daarom van speciaal belang zijn als een stylesheet selector, en kan geadresseerd worden met een '#' ervoor:
#z98y { letter-spacing: 0.3em }
H1#z98y { letter-spacing: 0.5em }
<P ID=z98y>Brede tekst</P>
In het bovenstaande voorbeeld komt de eerste selector overeen met het 'P' element omwille van de 'ID' attribuutwaarde. De tweede selector specificeert zowel een element type ('H1') en een ID waarde en zal daarom niet overeenkomen met het 'P' element.
Door het ID attribuut te gebruiken als selector kan men stijleigenschappen instellen per element. Aangezien stylesheets ontworpen zijn om de document structuur te verhogen, zal deze eigenschap auteurs toelaten om documenten te maken die goed weergegeven worden op het canvas zonder gebruik te maken van de structurele elementen van HTML. Dit gebruik van stylesheets wordt afgeraden.
Overerving bespaart CSS ontwerpers typwerk. In plaats van alle stijleigenschappen in te stellen, kan men standaardwaarden maken en dan de uitzonderingen opsommen. Om 'EM' elementen binnen 'H1' een andere kleur te geven kan men specificeren:
H1 { color: blue }
EM { color: red }
Wanneer deze stylesheet actief is, zullen alle benadrukte secties binnen of buiten 'H1' rood weergegeven worden. Waarschijnlijk wilde men enkel 'EM' elementen binnen 'H1' rood weergeven en dit kan dan gespecificeerd worden met:
H1 EM { color: red }
De selector is nu een zoekpatroon op de stapel (stack) van open elementen en dit type van selector wordt een contextuele selector genoemd. Contextuele selectors bestaan uit verschillende eenvoudige selectors gescheiden door witruimte (alle selectors die tot hiertoe omschreven werden waren eenvoudige selectors). Enkel elementen die overeenkomen met de laatste eenvoudige selector (in dit geval het 'EM' element) worden aangenomen, en enkel wanneer het zoekpatroon overeenstemt. Contextuele selectors in CSS1 zoeken naar voorouderrelaties, maar ook andere relaties (zoals parent-child) kunnen geïntroduceerd worden in latere herzieningen. In het bovenstaande voorbeeld komt het zoekpatroon overeen als 'EM' een nakomeling is van 'H1', hetgeen wil zeggen als 'EM' zich binnen een 'H1' element bevindt.
UL LI { font-size: small }
UL UL LI { font-size: x-small }
Hier komt de selector overeen met 'LI' elementen welke ten minste één 'UL' voorouder hebben. De tweede selector komt overeen met een subset van de eerste, hetgeen wil zeggen met 'LI' elementen met ten minste twee 'UL' voorouders. Het conflict wordt opgelost door de tweede selector die meer specifiek is vanwege het langere zoekpatroon. Zie de cascading
volgorde (sectie 3.2) voor meer hierover.
Contextuele selectors kunnen zoeken naar element types, CLASS attributen, ID attributen of combinaties hiervan:
DIV P { font: small sans-serif }
.roodachtig H1 { color: red }
#x78y CODE { background: blue }
DIV.opmerking H1 { font-size: large }
De eerste selector komt overeen met alle 'P' elementen die een 'DIV' bij de voorouders heeft. De tweede selector komt overeen met alle 'H1' elementen die een voorouder van de class 'roodachtig' hebben. De derde selector komt overeen met alle 'CODE' elementen die afstammelingen zijn van het element met 'ID=x78y'. De vierde selector komt overeen met alle 'H1' elementen die een 'DIV' voorvader hebben met als class
'opmerking'.
Verschillende contextuele selectors kunnen samen genomen worden in een groep:
H1 B, H2 B, H1 EM, H2 EM { color: red }
Welk equivalent is met:
H1 B { color: red }
H2 B { color: red }
H1 EM { color: red }
H2 EM { color: red }
Textuele opmerkingen in CSS stylesheets zijn vergelijkbaar met deze in de C programmeertaal [7]:
EM { color: red } /* rood, echt rood!! */
Opmerkingen kunnen niet genest worden. Voor een CSS1 parser is een opmerking equivalent aan witruimte.
In CSS1 is stijl normaal gekoppeld aan een element gebaseerd op de positie ervan in de document structuur. Dit eenvoudige model is voldoende voor een grote verscheidenheid van stijlen, maar zegt niets over sommige veel voorkomende effecten. Het concept van pseudo-classes en pseudo-elementen breidt de adressering in CSS1 uit om externe informatie toe te laten om het opmaakproces te beïnvloeden.
Pseudo-classes en pseudo-elementen kunnen gebruikt worden in CSS selectors, maar bestaan niet in de HTML bron. Ze worden eerder "toegevoegd" door de User Agent onder bepaalde omstandigheden om gebruikt te worden voor adressering in stylesheets. Ze worden "classes" en "elementen" genoemd aangezien dit de gemakkelijkste manier is om hun gedrag te omschrijven. Meer specifiek kan hun gedrag gedefinieerd worden door een fictionele tag volgorde.
Pseudo-elementen worden gebruikt om sub-delen van elementen te adresseren, terwijl pseudo-classes stylesheets toelaten om een onderscheid te maken tussen verschillende element types.
User Agents geven algemeen de nieuw bezochte ankers verschillend weer ten opzichte van oudere. In CSS1 wordt dit gedaan door pseudo-classes op het 'A' element:
A:link { color: red } /* niet bezochte link */
A:visited { color: blue } /* bezochte links */
A:active { color: lime } /* actieve links */
Alle 'A' elementen met een 'HREF' attribuut worden in één van deze en enkel één van deze groepen onderverdeeld (hetgeen wil zeggen dat doelankers niet beïnvloed worden). User Agents kunnen beslissen om een element te verplaatsen van 'visited' naar 'link' na een bepaalde tijd. Een 'active' link is een link die momenteel geselecteerd is (bijvoorbeeld door een muisknop) door de lezer.
Het opmaken van een anker pseudo-class is alsof de class zelf handmatig ingevoegd was. Een User Agent is niet verplicht om een huidig weergegeven document opnieuw op te maken omwille van anker pseudo-class verschuivingen. Dit wil zeggen dat een stylesheet geldig kan specificeren dat de 'font-size (lettergrootte)' van een 'active' link groter moet zijn dan een 'visited' link, maar de User Agent in niet verplicht dynamisch het document opnieuw op te maken wanneer de lezer de 'visited' link selecteert.
Pseudo-class selectors komen niet overeen met normale classes en vice versa. De stijlregel in het onderstaande voorbeeld zal daarom geen enkele invloed hebben:
A:link { color: red }
<A CLASS=link NAME=doel5> ... </A>
In CSS1 hebben anker pseudo-classes geen invloed op andere elementen dan 'A'. Daarom kan het element type weggelaten worden van de selector:
A:link { color: red }
:link { color: red }
De twee bovenstaande selectors zullen dezelfde elementen selecteren in CSS1.
Pseudo-class namen zijn hoofdlettergevoelig.
Pseudo-classes kunnen gebruikt worden in contextuele selectors:
A:link IMG { border: solid blue }
Pseudo-classes kunnen ook gecombineerd worden met normale classes:
A.extern:visited { color: blue }
<A CLASS=extern HREF="http://out.side/">externe link</A>
Als de link in het bovenstaande voorbeeld bezocht werd, zal deze in blauw weergegeven worden. Merk op dat normale class namen voorafgaan aan pseudo-classes in de selector.
Sommige veel voorkomende typografische effecten worden niet geassocieerd met structurele elementen maar eerder met typografische items zoals deze opgemaakt worden op het canvas. In CSS1 kunnen twee dergelijke typografische items geadresseerd worden door pseudo-elementen: de first line (eerste lijn) van een element en de first
letter (eerste letter).
CSS1 kern: User Agents kunnen alle regels met ':first-line' of ':first-letter' in de selector negeren, of, als alternatief enkel een subset van de eigenschappen van deze pseudo-elementen ondersteunen. (Zie sectie 7)
Het 'first-line' pseudo-element wordt gebruikt om speciale stijlen toe te passen op de eerste regel die op het canvas weergegeven wordt:
<STYLE TYPE="text/css">
P:first-line { font-variant: small-caps }
</STYLE>
<P>De eerste regel van een artikel in Newsweek.
Op een tekstgebaseerde User Agent kan dit dit weergegeven worden als:
DE EERSTE REGEL VAN EEN
artikel in Newsweek.
De fictionele tag volgorde in het bovenstaande voorbeeld is:
<P>
<P:first-line>
De eerste regel van een
</P:first-line>
artikel in Newsweek.
</P>
De 'first-line' eind tag wordt ingevoegd op het einde van de eerste regel zoals deze weergegeven wordt op het canvas.
Het 'first-line' pseudo-element kan enkel gekoppeld worden aan een block-level element.
Het 'first-line' pseudo-element is vergelijkbaar met een inline element, maar met bepaalde beperkingen. Enkel de volgende eigenschappen gelden op een 'first-line' element:
lettertype eigenschappen (5.2),
kleur en achtergrond eigenschappen (5.3),
'word-spacing' (5.4.1),
'letter-spacing' (5.4.2),
'text-decoration' (5.4.3),
'vertical-align' (5.4.4),
'text-transform' (5.4.5),
'line-height' (5.4.8),
'clear' (5.5.26).
Het 'first-letter' pseudo-element wordt gebruikt voor "beginhoofdletters" en "klein kapitaal", welke veel gebruikte typografische effecten zijn. Het is vergelijkbaar met een inline element als de 'float' eigenschap 'none' is. Anders is het vergelijkbaar met een floating (zwevend) element. De volgende eigenschappen gelden voor 'first-letter' pseudo-elementen:
lettertype eigenschappen (5.2),
kleur en achtergrond eigenschappen (5.3),
'text-decoration' (5.4.3),
'vertical-align' (enkel als 'float' gelijk aan 'none' is,
5.4.4),
'text-transform' (5.4.5),
'line-height' (5.4.8),
marge eigenschappen (5.5.1-5.5.5),
opvullingseigenschappen (5.5.6-5.5.10),
randeigenschappen (5.5.11-5.5.22),
'float' (5.5.25),
'clear' (5.5.26).
Het onderstaande toont aan hoe je een klein kapitaal beginletter kan maken die twee regels hoog is:
<HTML>
<HEAD>
<TITLE>Titel</TITLE>
<STYLE TYPE="text/css">
P { font-size: 12pt; line-height: 12pt }
P:first-letter { font-size: 200%; float: left }
SPAN { text-transform: uppercase }
</STYLE>
</HEAD>
<BODY>
<P><SPAN>Een eerste</SPAN> paar woorden van een artikel in The Economist.</P>
</BODY>
</HTML>
Als een tekstgebaseerde User Agent het 'first-letter' pseudo-element ondersteunt (waarschijnlijk niet het geval), zal het bovenstaande weergegeven worden als:
__
|__ EN EERSTE paar
|__ woorden van een
artikel in The
Economist.
De fictionele tag volgorde is:
<P>
<SPAN>
<P:first-letter>
E
</P:first-letter>en eerste
</SPAN>
paar woorden van een artikel in The Economist.
</P>
Merk op dat de tags met het 'first-letter' pseudo-element grenzen aan de inhoud (hetgeen de beginletter is), terwijl de 'first-line' pseudo-element start tag onmiddellijk ingevoegd wordt na de start tag van het element waar het aan gekoppeld is.
De User Agent definieert welke karakters in het 'first-letter' element zitten. Normaal zouden aanhalingstekens die de eerste letter voorafgaan mee opgenomen moeten worden:
|| /\ ls je
/ \ zaait
/----\ zal je
/ \ storm
oogsten" volgens
oud gezegde.
Wanneer de alinea begint met andere tekens (zoals ronde haakjes of drie puntjes) of andere karakters die normaal gezien niet beschouwd worden als letters (zoals cijfers en wiskundige symbolen), worden 'first-letter' pseudo-elementen gewoonlijke genegeerd.
Sommige talen kunnen specifieke regels hebben over het omgaan met bepaalde lettercombinaties. In het Nederlands zal bijvoorbeeld de lettercombinatie "ij" aan het begin van een woord beschouwd worden als één deel in het 'first-letter' pseudo-element.
Het 'first-letter' pseudo-element kan enkel gekoppeld worden aan een block-level element.
In een contextuele selector worden pseudo-elementen alleen toegestaan aan het eind van de selector:
BODY P:first-letter { color: purple }
Pseudo-elementen kunnen gecombineerd worden met classes in selectors:
P.begin:first-letter { color: red }
<P CLASS=begin>Eerste alinea</A>
Het bovenstaande voorbeeld zal de eerste letters van alle 'P' elementen met 'CLASS=begin' rood maken. Wanneer pseudo-elementen gecombineerd worden met classes of pseudo-classes, moeten ze gespecificeerd worden aan het eind van de selector. Er kan slechts één pseudo-element gespecificeerd worden per selector.
Verschillende pseudo elementen kunnen gecombineerd worden:
P { color: red; font-size: 12pt }
P:first-letter { color: green; font-size: 200% }
P:first-line { color: blue }
<P>Een stukje tekst dat over twee regels verspreid wordt. </P>
In dit voorbeeld zou de eerste letter van elk 'P' element groen moeten zijn met een lettergrootte van 24pt. De rest van de eerste regel (zoals deze weergegeven wordt op het canvas) zou blauw moeten zijn terwijl de rest van de alinea rood zou moeten zijn. Wanneer verondersteld wordt dat de regel afgebroken wordt voor het woord "over", dan is de fictionele tag volgorde:
<P>
<P:first-line>
<P:first-letter>
E
</P:first-letter>en stukje tekst dat over
</P:first-line>
twee regels verspreid wordt.
</P>
Merk op dat het 'first-letter' element zich in het 'first-line' element bevindt. Eigenschappen die ingesteld worden voor 'first-line' zullen overgeërfd worden door 'first-letter', maar worden opgeheven (overridden) wanneer dezelfde eigenschap ingesteld wordt voor 'first-letter'.
Als een pseudo-element een echt element openbreekt, moeten de extra tags die nodig zijn geregenereerd worden in de fictionele tag volgorde. Wanneer bijvoorbeeld een SPAN element over een </P:first-line> tag spant, moet een set van SPAN eind en start tags geregenereerd worden en de fictionele tag volgorde wordt dan:
<P>
<P:first-line>
<SPAN>
Deze tekst zit in een lang
</SPAN>
</P:first-line>
<SPAN>
span element
</SPAN>
In CSS kan meer dan één stylesheet tegelijk invloed hebben op de weergave. Er zijn twee hoofdredenen voor deze eigenschap: modulariteit en auteur/lezer evenwicht.
-
modulariteit
-
Een stylesheet ontwerper kan verschillende (deel) stylesheets combineren om redundantie te beperken:
@import url(http://www.style.org/pastoral);
@import url(http://www.style.org/marine);
H1 { color: red } /* override geïmporteerde sheets */
-
auteur/lezer evenwicht
-
Zowel lezers als auteurs kunnen invloed uitoefenen op de weergave via stylesheets. Om dit te kunnen gebruiken ze dezelfde stylesheet taal. Zo bevestigen ze een fundamentele eigenschap van het web: iedereen kan een uitgever worden. De User Agent is vrij om te kiezen welk mechanisme gebruikt wordt voor de verwijzing naar persoonlijke stylesheets.
Soms zullen problemen ontstaan tussen de stylesheets die invloed hebben op de weergave. Probleemoplossing werkt op basis van de gewichten op elke styleregel. Het gewicht van de lezersregels wegen standaard minder dan het gewicht van de auteursdocumenten. Dit wil zeggen dat wanneer er conflicten zijn tussen de stylesheets van een binnenkomend document en de persoonlijke instellingen van de lezer, de auteursregels gebruikt zullen worden. Zowel de lezer als de auteursregels hebben voorrang op (overriden) de standaardinstellingen van de User Agent.
De geïmporteerde stylesheets kunnen ook op elkaar verder bouwen (cascade). Dit gebeurt dan in de volgorde waarin ze geïmporteerd worden, rekening houdend met de cascading regels die hierna gedefinieerd worden. Eender welke regel die gespecificeerd wordt in het stylesheet zelf, overrides regels in geïmporteerde stylesheets. Geïmporteerde stylesheets zijn dus lager in de cascading volgorde dan de regels in de stylesheet zelf. Geïmporteerde stylesheets kunnen zelf andere stylesheets recursief importeren en overriden.
In CSS1 moeten alle '@import' vermeldingen (statements) voorkomen aan het begin van een stylesheet, voor alle andere declaraties. Dit maakt het gemakkelijk om te zien dat regels in de stylesheet zelf regels overriden in het geïmporteerde stylesheets.
Style sheet ontwerpers kunnen de gewichten van hun declaraties verhogen:
H1 { color: black ! important; background: white ! important }
P { font-size: 12pt ! important; font-style: italic }
In het bovenstaande voorbeeld is het gewicht van de eerste drie declaraties verhoogd, terwijl de laatste declaratie normale gewichten heeft.
Een lezerregel met een important declaratie zal een auteurregel met een normale declaratie overriden. Een auteurregel met een important declaratie zal een lezerregel met een important declaratie overriden.
Conflicterende regels zijn intrinsiek aan het het CSS mechanisme. Om de waarde te vinden van een element/eigenschap combinatie moet het volgende algoritme gevolgd worden:
- Zoek alle declaraties die gelden op het element/ de eigenschap in kwestie. Declaraties gelden als de selector overeenkomt met het element in kwestie. Als geen declaraties gelden wordt een geërfde waarde gebruikt. Als er geen geërfde waarde is (dit is het geval voor het 'HTML' element en voor eigenschappen die niet overerven), wordt de beginwaarde gebruikt.
- Sorteer de declaraties volgens expliciet gewicht: declaraties gemarkeerd '!important' dragen meer gewicht dan niet gemarkeerde (normale) declaraties.
- Sorteer volgens oorsprong: de auteur stylesheets overriden de lezer stylesheet welke de standaardwaarden van de User Agent overriden. Een geïmporteerd stylesheet heeft dezelfde oorsprong als de stylesheet van waaruit het geïmporteerd wordt.
- Sorteer volgens specificatie van de selector: meer specifieke selectors zullen meer overriden dan algemene. Om de specificatie te vinden moet geteld worden wat het aantal ID attributen in de selector is(a), wat het aantal CLASS attributen in de selector is(b) en wat het aantal tag namen in de selector is(c).
Samenvoegen van de drie nummers (in een numeriek systeem met een grote basis) geeft de specificatie. Enkele voorbeelden:
LI {...} /* a=0 b=0 c=1 -> specificatie = 1 */
UL LI {...} /* a=0 b=0 c=2 -> specificatie = 2 */
UL OL LI {...} /* a=0 b=0 c=3 -> specificatie = 3 */
LI.red {...} /* a=0 b=1 c=1 -> specificatie = 11 */
UL OL LI.red {...} /* a=0 b=1 c=3 -> specificatie = 13 */
#x34y {...} /* a=1 b=0 c=0 -> specificatie = 100 */
Pseudo-elementen en pseudo-classes worden geteld als normale elementen, respectievelijk classes.
- Sorteer volgens volgorde gespecificeerd: als twee regels hetzelfde gewicht hebben, wint de laatste die gespecificeerd is. Regels in geïmporteerde stylesheets worden beschouwd als komend voor alle regels van het stylesheet zelf.
Het zoeken naar de eigenschapwaarde kan afgebroken worden wanneer een regel een hoger gewicht heeft dan de andere regels die toegepast worden op hetzelfde element/eigenschap combinatie.
Deze strategie geeft de stylesheets van auteurs aanzienlijk hoger gewicht dan deze van de lezer. Het is daarom belangrijk dat de lezer de mogelijkheid heeft om de invloed van bepaalde soorten stylesheets uit te schakelen, bijvoorbeeld met behulp van een pull-down menu.
Een declaratie in het 'STYLE' attribuut van een element (zie sectie 1.1 voor een voorbeeld) heeft hetzelfde gewicht als een declaratie met een ID-gebaseerde selector die gespecificeerd wordt op het einde van de stylesheet:
<STYLE TYPE="text/css">
#x97z { color: blue }
</STYLE>
<P ID=x97z STYLE="color: red">
In het bovenstaande voorbeeld zal de kleur van het 'P' element rood zijn. Hoewel de specificatie hetzelfde is voor beide declaraties, zal de declaratie in het 'STYLE' attribuut degene overriden in het 'STYLE' element omwille van cascading regel nummer 5.
De User Agent kan andere stylistische HTML attributen, zoals bijvoorbeeld 'ALIGN', volgen. Als dit gedaan wordt worden de attributen vertaald in de overeenkomende CSS regel met specificatie gelijk aan 1. De regels worden verondersteld aan het begin van het stylesheet van de auteur te staan en kunnen overidden worden door hierop volgende stylesheet regels. In een overgangsfase zal dit beleid het gemakkelijker maken dat stylistische attributen samen met stylesheets bestaan.
CSS1 veronderstelt een eenvoudige box-georiënteerd opmaakmodel waar elk opgemaakt element resulteert in één of meer rechthoekige boxen. (Elementen die een 'display' waarde gelijk aan 'none' hebben worden niet opgemaakt en zullen daarom niet resulteren in een box.) Alle boxen hebben een basis inhoudsoppervlak met optionele omliggende opvulling, rand en marge-oppervlakken.
_______________________________________
| |
| marge (transparant) |
| _________________________________ |
| | | |
| | rand | |
| | ___________________________ | |
| | | | | |
| | | opvulling | | |
| | | _____________________ | | |
| | | | | | | |
| | | | inhoud | | | |
| | | |_____________________| | | |
| | |___________________________| | |
| |_________________________________| |
|_______________________________________|
| element breedte |
| box breedte |
De grootte van de marge, rand en opvulling worden ingesteld met de margin (5.5.1-5.5.5), de opvulling (5.5.6-5.5.10), respectievelijk de (5.5.11-5.5.22) randeigenschappen. Het opvullingsoppervlak gebruikt dezelfde achtergrond als het element zelf (ingesteld met de background eigenschap (5.3.2-5.3.7)). De kleur en stijl voor de rand wordt ingesteld met de randeigenschap. De marges zijn altijd transparant zodat het parent element er door heen zichtbaar is.
De grootte is de som van de element breedte (hetgeen opgemaakte tekst of een figuur is), de opvulling, de rand en de marge-oppervlakken.
Van het standpunt van de opmaker zijn er twee hoofdtypes van elementen: block-level en inline.
Elementen die een 'display' waarde van 'block' of 'list-item' hebben zijn block-level elementen. Ook zwevende elementen (elementen met een 'float' waarde verschillend van 'none') worden beschouwd als block-level
elementen.
Het volgende voorbeeld toont hoe marges en opvulling een 'UL' element met twee children opmaakt. Om het geheel te vereenvoudigen zijn er geen randen. De "constanten" in dit voorbeeld zijn geen legale CSS1 syntax, maar het vormt een handige manier om de stylesheet waarden te binden aan de figuur.
<STYLE TYPE="text/css">
UL {
background: red;
margin: A B C D;
padding: E F G H;
}
LI {
color: white;
background: blue; /* de tekst is wit op blauwe achtergrond */
margin: a b c d;
padding: e f g h;
}
</STYLE>
..
<UL>
<LI>1st element van de lijst
<LI>2de element van de lijst
</UL>
_________________________________________________________
| |
| A UL marge (transparant) |
| _________________________________________________ |
| D | | B |
| | E UL opvulling (rood) | |
| | _________________________________________ | |
| | H | | F | |
| | | a LI marge(transparant, | | |
| | | zodat rood doorschijnt) | | |
| | | _________________________________ | | |
| | | d | | b | | |
| | | | e LI opvulling (blauw) | | | |
| | | | | | | |
| | | | h 1st element van de lijst f | | | |
| | | | | | | |
| | | | g | | | |
| | | |_________________________________| | | |
| | | | | |
| | | max(a, c) | | | <- merk max op
| | | _________________________________ | | |
| | | | | | | |
| | | d | e LI opvulling (blauw) | | | |
| | | | | | | |
| | | | h 2de element van de lijst f | | | |
| | | | | | | |
| | | | g | | | |
| | | |_________________________________| | | |
| | | | | |
| | | c LI marge (transparant, | | |
| | | zodat rood doorschijnt) | | |
| | |_________________________________________| | |
| | | |
| | G | |
| |_________________________________________________| |
| |
| C |
|_________________________________________________________|
Technisch gezien worden oppvulling en marge-eigenschappen niet overgeërfd. Maar zoals het voorbeeld aantoont is de plaatsing van een element relatief tot voorouders en nakomelingen, zodat de eigenschappen van opvulling en marges van deze elementen een effect hebben op hun children.
Als er randen in het bovenstaande voorbeeld zouden geweest zijn, dan zouden ze verschenen zijn tussen de opvulling en de marges.
Het volgende diagram introduceert een aantal nuttige begrippen:
--------------- <-- top
top marge
---------------
top rand
---------------
top opvulling
+-------------+ <-- binnenkant top
| | | | | | | |
|--linkse--|--linkse--|--linkse--|-- inhoud --|--rechtse--|--rechtse--|--rechtse--|
| marge | rand | opvulling| | opvulling | rand | marge |
| | | | | | | |
+-------------+ <-- binnenkant onderkant
^ ^ ^ ^
linker linkerbinnenkant rechterbinnenkant rechter
buiten- buiten-
kant onderkant opvulling kant
---------------
onderkant rand
---------------
onderkant marge
--------------- <-- onderkant
De linker buitenkant is de rand van een element waarbij rekening gehouden werd met opvulling, rand en marge. De linkerbinnenkant is de rand van de inhoud enkel in alle opvulling, rand of marge. Hetzelfde aan de rechterkant. De top is de top van het element inclusief alle opvulling, rand en marge; het is enkel gedefinieerd voor inline en zwevende elementen, niet voor niet-zwevende block-level elementen. De binnenkant top is de top van de inhoud, binnen alle opvulling, rand of marge. De onderkant is de onderkant van het element, buiten alle opvulling, rand en marge; het is enkel gedefinieerd voor inline en zwevende elementen, niet voor niet-zwevende block-level elementen. De binnenkant onderkant is de onderkant van het element, binnen alle opvulling, rand en marge.
De breedte van een element is de breedte van de inhoud, hetgeen wil zeggen de afstand tussen linker binnenkant en rechter binnenkant. De hoogte is de hoogte van de inhoud, hetgeen wil zeggen de afstand van binnenkant top tot binnenkant onderkant.
De breedte van de marge op niet-zwevende block-level elementen specificeert de minimale afstand van de randen van de omliggende boxes. Twee of meer aangrenzende verticale marges (hetgeen het geval is zonder rand, opvulling of inhoud ertussen) worden samengevoegd om het maximum van margewaarden te gebruiken. In de meeste gevallen is het resultaat na samenvoegen van de verticale marges visueel aangenamer en dichter bij hetgeen de ontwerper verwacht. In het bovenstaande voorbeeld worden de marges tussen de twee 'LI' elementen samengevoegd door het maximum van de 'margin-bottom' van het eerste LI element en de 'margin-top' van het tweede element te gebruiken. Gelijkwaardig zouden, wanneer de opvulling tussen het 'UL' en het eerste 'LI' element (de "E" constante) nul was, de marges van de UL en eerste LI elementen samengevoegd worden.
In het geval van negatieve marges wordt het absolute maximum van de negatieve aangrenzende marges afgeleid van van het maximum van de positieve aangrenzende marges. Als er geen positieve marges zijn wordt het absolute maximum van de negatieve aangrenzende marges afgeleid van nul.
De horizontale positie en grootte van een niet-zwevende, block-level element wordt bepaald door zeven eigenschappen: 'margin-left', 'border-left', 'padding-left', 'width', 'padding-right', 'border-right' en 'margin-right'. De som van deze zeven is altijd gelijk aan de 'width' van het parent element.
Standaard is de 'width' van een element 'auto'. Als het element geen vervangen element is betekent dit dat de 'width' berekend wordt door de UA zodat de som van de zeven eigenschappen hierboven gelijk is aan de parent breedte. Als het element een vervangen element is wordt de waarde van 'auto' voor 'width' automatisch vervangen door de intrinsieke breedte van het element.
Drie van de zeven eigenschappen kunnen ingesteld worden op 'auto': 'margin-left', 'width' en 'margin-right'. Voor vervangen elementen wordt de waarde voor 'auto' op 'width' vervangen door de intrinsieke breedte, zodat er voor deze enkel twee 'auto' waardes kunnen zijn.
De 'width' heeft een niet-negatieve UA-gedefinieerde minimum waarde (welke mag wisselen van element tot element en zelfs afhangen van andere eigenschappen). Als 'width' lager gaat dan deze limiet, ofwel omdat het expliciet ingesteld was, ofwel omdat het 'auto' was en de regels eronder het te klein zouden maken, zal de waarde vervangen worden door de minimum waarde.
Als precies één van de 'margin-left', 'width' of 'margin-right' 'auto' is zal de UA de eigenschapwaarde zelf instellen zodat de som van de zeven gelijk is aan de parent breedte.
Als geen van de eigenschappen 'auto' zijn zal de waarde van 'margin-right' op 'auto' toegewezen worden.
Als meer dan een van de drie 'auto' is en een van deze is 'width', dan zullen de anderen ('margin-left' en/of 'margin-right') op nul gezet worden en 'width' zal de waarde krijgen die nodig is om de som van de zeven gelijk te maken aan de parent breedte.
Als op een andere manier zowel 'margin-left' en 'margin-right' 'auto' zijn zullen ze op dezelfde waarde gezet worden. Het element zal gecentreerd worden in de parent.
Als de waarde 'auto' ingesteld wordt voor de waarde van een van de zeven eigenschappen in een element dat inline of zwevend is, zal het behandeld worden alsof het op nul gezet is.
In tegenstelling tot verticale marges worden horizontale marges niet samengevoegd.
Elementen met een 'display' eigenschapwaarde van 'list-item' worden opgemaakt als block-level elementen, maar voorafgegaan door een list-item marker. Het type van marker wordt vastgelegd door de 'list-style' eigenschap. De
marker wordt geplaatst naargelang de waarde van de 'list-style' eigenschap:
<STYLE TYPE="text/css">
UL { list-style: outside }
UL.compact { list-style: inside }
</STYLE>
<UL>
<LI>eerste item uit de lijst komt eerst
<LI>tweede item uit de lijst komt tweede
</UL>
<UL CLASS=COMPACT>
<LI>eerste item uit de lijst komt eerst
<LI>tweede item uit de lijst komt tweede
</UL>
Het bovenstaande voorbeeld mag opgemaakt worden als:
* eerste item uit
de lijst komt eerst
* tweede item uit
de lijst komt tweede
* eerste item uit
de lijst komt eerst
* tweede item uit
de lijst komt tweede
In rechts-naar-links tekst, zouden de markers aan de rechterkant van de box gestaan hebben.
Door de 'float' eigenschap te gebruiken kan een element gedeclareerd worden om buiten de normale stroom van elementen te staan en is dan opgemaakt als een block-level element. Door bijvoorbeeld de 'float' eigenschap van een figuur in te stellen op 'left', zal de figuur verplaatst worden naar links totdat de marge, opvulling of rand van een ander block-level element bereikt wordt. De normale stroom zal rond de rechterkant lopen. De marges, randen en opvulling van de van het element zelf zullen gerespecteerd worden en de marges zullen niet samengevoegd worden met de marges van aangrenzende elementen.
Een zwevend element wordt gepositioneerd onderhevig aan de volgende beperkingen (zie sectie 4.1 voor een verklaring van de begrippen):
- De linkerbuitenkant van een links-zwevend element mag niet aan de linkerkant van de linker binnenkant van het parent element staan. Analoog voor rechts-zwevende elementen.
- De linkerbuitenrand van een links-zwevend element moet rechts staan van de rechter buitenkant van alle eerdere (in de HTML bron) links-zwevende elementen of de top van de eerste moet lager staan dan de onderkant van de laatste. Analoog voor rechts-zwevende elementen.
- De rechterbuitenkant van een links-zwevend element mag niet aan de rechterkant staan van de linkerbuitenkant van alle rechts-zwevende elementen die er rechts van staan. Analoog voor rechts-zwevende elementen.
- De top van een zwevend element mag niet hoger staan dan de binnenkant top van de parent van het element.
- De top van een zwevend element mag niet hoger staan dan de top van alle eerdere zwevende of block-level elementen.
- De top van een zwevend element mag niet hoger staan dan de top van alle line-box (lijn-box) (zie sectie 4.4) met inhoud die vooraf gaat aan het zwevende element in de HTML bron.
- Een zwevend element moet zo hoog mogelijk geplaatst worden.
- Een links-zwevend element moet zo ver als mogelijk naar links geplaatst worden, een rechts-zwevend element zo ver als mogelijk naar rechts. Een hogere positie geniet de voorkeur boven degene die verder naar links/rechts staat.
<STYLE TYPE="text/css">
IMG { float: left }
BODY, P, IMG { margin: 2em }
</STYLE>
<BODY>
<P>
<IMG SRC=img.gif>
Een stukje voorbeeldtekst dat geen verdere...
</BODY>
Het bovenstaande voorbeeld zou opgemaakt kunnen worden als:
________________________________________
|
| max(BODY margin, P margin)
| ______________________________
| | | Een stukje voor-
| B | P | IMG margins beeldtekst dat
| O | | _____ geen verder doel
| D | m | | | heeft dan aan te
| Y | a | | IMG | tonen hoe zweven-
| | r | | | de elementen ver-
| m | g | |_____| plaatst worden
| a | e | naar de kant van
| r | | het parent element
| g | | terwijl marges,
| e | |randen en opvulling gerespec-
| | |teerd worden. Merk op dat aan-
| | |grenzende verticale marges sa-
| | |gevoegd worden tussen niet-zwe-
| | |vende block-level elementen.
Merk op dat de marge van het 'P' element het zwevende 'IMG' element insluit.
Er zijn twee situaties waarin zwevende elementen elkaar kunnen overlappen met de marge-, rand- en opvullingsgebieden van andere elementen:
- wanneer het zwevend element een negatieve marge heeft: negatieve marges van zwevende elementen worden gerespecteerd als zijnde andere block-level elementen.
- wanneer het zwevende element breder of hoger is dan het element waarin het zit
Elementen die niet opgemaakt worden als block-level elementen zijn inline elementen. Een inline element kan plaats delen met andere elementen. Beschouw hiervoor volgend voorbeeld:
<P>Verschillende <EM>benadrukte</EM> woorden <STRONG>verschijnen</STRONG>.</P>
Het 'P' element is normaal block-level, terwijl 'EM' en 'STRONG' inline elementen zijn. Als het 'P' element breed genoeg is om het hele element op te maken in een regel zullen er twee inline elementen op de regel staan:
Verschillende benadrukte woorden verschijnen.
Als er niet genoeg plaats is op een regel zal een inline element opgedeeld worden in verschillende boxen:
<P>Verschillende <EM>benadrukte woorden</EM> verschijnen hier.</P>
Het bovenstaande voorbeeld kan weergegeven worden als:
Verschillende benadrukte
woorden verschijnen hier.
Als het inline element marges, randen, opvulling of tekstdecoraties verbonden heeft, zullen deze geen effect hebben waar het element verbroken is:
----------
Verschillende |benadrukte
----------
-------
woorden| verschijnen hier.
-------
(De bovenstaande "figure" is een beetje vervormd door het gebruik van ASCII graphics. Zie sectie 4.4 voor een omschrijving over hoe de hoogte van regels berekend moet worden.)
Een vervangen element is een element welk vervangen wordt door inhoud waarnaar verwezen wordt vanuit het element. In HTML wordt zo bijvoorbeeld het 'IMG' element vervangen door de figuur waarnaar verwezen wordt in het 'SRC' attribuut. Men kan veronderstellen dat vervangen elementen hun eigen intrinsieke dimensies hebben. Als de waarde van de 'width' eigenschap 'auto' is, wordt de intrinsieke breedte gebruikt als de breedte van het element. Als een andere waarde dan 'auto' gespecificeerd is in het stylesheet, wordt deze waarde gebruikt en het vervangen element wordt in grootte overeenkomstig aangepast (de methode van aanpassing in grootte zal afhangen van het media type). De 'height' eigenschap wordt op dezelfde manier gebruikt.
Vervangen elementen kunnen zowel block-level als inline zijn.
Alle elementen hebben een 'line-height' eigenschap die, in principe, de totale hoogte van een regel tekst geeft. Er wordt ruimte toegevoegd boven en onder de tekst van een regel om tot de regelhoogte te komen. Wanneer bijvoorbeeld de tekst 12pt hoog is en de 'line-height' is ingesteld op '14pt', wordt een extra ruimte van 2pt toegevoegd, namelijk 1pt boven en 1pt onder de lijn. Lege elementen beïnvloeden deze berekeningen op dezelfde manier als elementen met inhoud.
Het verschil tussen de font grootte en de 'line-height' wordt de leading genoemd. De helft van de leading wordt de half-leading genoemd. Na opmaak zal elke regel een rechthoekige line-box vormen.
Als een regel tekst secties met verschillende 'line-height' waarden bevat (omdat er inline elementen in de regel staan), dan heeft elke sectie zijn eigen half-leading boven en onder. De hoogte van de line-box gaat van de top van de hoogste sectie tot de onderkant van de laagste. Merk op dat de top en de onderkant niet noodzakelijk overeenstemmen met het grootste element, aangezien elementen verticaal gepositioneerd kunnen worden met de 'vertical-align' eigenschap. Om een paragraaf te vormen wordt elke line-box onmiddellijk onder de vorige regel geplaatst.
Merk op dat elke opvulling, rand of marge boven en onder niet-vervangen inline elementen geen invloed heeft op de hoogte van de regel. In andere woorden: als de 'line-height' te klein is voor de gekozen opvulling of rand, zal het overlappen met tekst op andere regels.
Vervangen elementen (zoals figuren) op de regel kunnen de line-box groter maken als de top van het vervangen element (hetgeen wil zeggen inclusief elke opvulling, rand en marge) boven de grootste tekst sectie ligt of als de onderkant lager ligt dat het laagste.
Normaal gezien zal, wanneer er slechts één waarde van 'line-height' is in een alinea en er geen grote figuren zijn, de definitie hierboven verzekeren dat basislijnen van opvolgende regels precies 'line-height' uit elkaar staan. Dit is belangrijk wanneer kolommen tekst in verschillende fonts moeten worden uitgelijnd zoals bijvoorbeeld in een tabel.
Merk op dat dit niet uitsluit dat de tekst op twee aangrenzende regels elkaar overlapt. De 'line-height' kan kleiner zijn dan de hoogte van de tekst. In dat geval is de leading negatief. Dit is handig wanneer je weet dat de tekst geen afstammelingen bevat (hetgeen bijvoorbeeld het geval is wanneer ze enkel hoofdletter bevat), zodat je de lijnen dichter bij elkaar kan plaatsen.
Het canvas is het deel van het tekenoppervlak van de UA waarop documenten weergegeven worden. Er is geen structureel element van een document dat overeenkomt met het canvas hetgeen twee vragen geeft wanneer men een document opmaakt:
- vanuit welk punt zouden de dimensies van het canvas moeten worden ingesteld?
- wanneer het document niet de volledige canvas bedekt, hoe moet dan dit gebied weergegeven worden?
Een redelijk antwoord op de eerste vraag is dat de initiële breedte van het canvas gebaseerd is op de venstergrootte, maar CSS1 laat dit aan de UA over om te beslissen. Het is ook aannemelijk te verwachten dat de UA de breedte van het canvas aanpast wanneer het venster in grootte gewijzigd wordt, maar dit valt ook buiten de draagwijdte van CSS1.
HTML aanvullingen hebben een precedent geschapen voor de tweede vraag: attributen in het 'BODY' element stellen de achtergrond voor de hele canvas in. Om de verwachtingen van ontwerpers te ondersteunen, introduceert CSS1 een speciale regel om de achtergrond van het canvas te bepalen:
Gebruik de achtergrond van de 'background' waarde van het 'HTML' element als deze verschilt van 'transparent'. Gebruik in het andere geval de 'background' waarde van het 'BODY' element. Als de resulterende waarde nog steeds 'transparent' is, is de weergave niet gedefinieerd.
Deze regel laat het volgende toe:
<HTML STYLE="background: url(http://style.com/marble.png)">
<BODY STYLE="background: red">
In het bovenstaande voorbeeld zal het canvas bedekt zijn met "marble". De achtergrond van het 'BODY' element (welk het canvas volledig mag, maar niet moet, bedekken) zal rood zijn.
Totdat andere middelen om het canvas te adresseren beschikbaar komen, is het aanbevolen om het canvas eigenschappen in te stellen op het 'BODY' element.
De huidige CSS1 eigenschappen en waarden kunnen niet het gedrag van het 'BR' element omschrijven. In HTML specificeert het 'BR' element een regeleinde tussen woorden. Het resultaat is dat het element vervangen wordt door een regeleinde. Toekomstige versies van CSS kunnen mogelijk toegevoegde en vervangen inhoud behandelen, maar op
CSS1 gebaseerde opmakers moeten het 'BR' speciaal behandelen.
Style sheets beïnvloeden de weergave van documenten door waarden voor stijleigenschappen toe te kennen. Deze sectie somt de gedefinieerde stijleigenschappen op en geeft daarbij een overeenstemmende lijst van mogelijke waarden.
In onderstaand overzicht worden de toegestane waarden voor elke eigenschap opgesomd met een volgende syntax:
Waarde: N | NW | NE
Waarde: [ <length> | thick | thin ]{1,4}
Waarde: [<family-name> , ]* <family-name>
Waarde: <url>? <color> [ / <color> ]?
Waarde: <url> || <color>
De woorden tussen "<" en ">" geven het type van de waarde. De meest voorkomende types zijn <length>, <percentage>, <url>, <number> en <color>; Deze worden omschreven in sectie 6. De meer gespecialiseerde types (zoals <font-family> en <border-style>) worden in de overeenkomende eigenschap omschreven.
Andere woorden zijn keywords die exact moeten voorkomen, zonder aanhalingstekens. De slash (/) en de komma (,) moeten ook exact voorkomen.
Wanneer verschillende dingen naast elkaar voorkomen, betekent dit dat ze allemaal moeten voorkomen in de gegeven volgorde. Een tussenschot (|) scheidt alternatieven: één ervan moet voorkomen. Een dubbel tussenschot (A || B) betekent dat ofwel A of B ofwel beide in willekeurige volgorde moeten voorkomen. Haken ([]) dienen voor groeperen. Nevenschikking is sterker dan het dubbel tussenschot en het dubbel tussenschot is sterker dan het tussenschot. Zo is "a b | c || d e" equivalent aan "[ a b ] | [ c || [ d e ]]".
Elk type, keyword of groep tussen haken kan gevolgd worden door één van de volgende modifiers:
- Een asterisk (*) geeft aan dat het voorafgaande type, het voorafgaand woord of de voorafgaande groep nul of meer keer herhaald wordt.
- Een plus (+) geeft aan dat het voorafgaande type, het voorafgaand woord of de voorafgaande groep één of meer keer herhaald wordt.
- Een vraagteken (?) geeft aan dat het voorafgaande type, het voorafgaand woord of de voorafgaande groep optioneel is.
- Een koppel getallen tussen ronde haken ({A,B}) geeft aan dat het voorafgaande type, het voorafgaand woord of de voorafgaande groep ten minste A keer en maximaal B keer herhaald wordt.
Het lettertype instellen is een van de meest gebruikte toepassingen van stylesheets. Jammer genoeg bestaat er geen goed gedefinieerde en universeel geaccepteerde taxonomie voor classificatie van lettertypes en benamingen die toepasbaar zijn voor de ene lettertype familie, maar niet voor andere. 'Italic' wordt zo bijvoorbeeld gewoonlijk gebruikt om hellende tekst aan te duiden, maar hellende tekst kan ook aangeduid worden als Oblique, Slanted, Incline, Cursive of Kursiv. Daarom is het geen eenvoudig probleem om typische lettertype selectie-eigenschappen te koppelen aan een specifiek lettertype.
CSS1 definieert de eigenschappen 'font-family', 'font-style', 'font-variant' en 'font-weight', 'font-size', 'font'.
Omdat er geen geaccepteerde, universele taxonomie van lettertype-eigenschappen is, moet koppeling van deze eigenschappen met een lettertype gedaan worden met de nodige voorzichtigheid. De eigenschappen worden in een goed gedefinieerde volgorde gekoppeld om te verzekeren dat de resultaten van dit koppelingsproces zo consistent als mogelijk zijn tussen User Agenten (hierbij wordt verondersteld dat dezelfde bibliotheek van lettertypes beschikbaar is voor elke user agent).
- De User Agent maakt een database van relevante CSS1 eigenschappen (of vraagt deze op) van alle lettertypes waarvan de User Agent bewust is. De User Agent kan bewust zijn van een lettertype omdat het lokaal geïnstalleerd is of omdat het eerder gedownload werd via het web. Als er twee lettertypes zijn met exact dezelfde eigenschappen, wordt één ervan genegeerd.
- Voor elk element en elk karakter in dat element verzamelt de User Agent de lettertype-eigenschappen die van toepassing zijn op dat element. Gebruik makend van de volledige set van eigenschappen, gebruikt de User Agent de 'font-family' eigenschap om een tijdelijke lettertype familie te kiezen. De resterende eigenschappen worden getest ten opzichte van de familie volgens de gepaste criteria omschreven voor elke eigenschap. Als er overeenkomsten zijn voor alle resterende eigenschappen, dan is dat het overeenkomende lettertype voor het gegeven element.
- Als er geen overeenkomstig lettertype in de 'font-family' verwerkt wordt door stap 2, en als er een alternatieve 'font-family' staat in de lettertype set, dan wordt stap 2 herhaald met de alternatieve
'font-family'.
- Als er een overeenkomstig lettertype is, maar het bevat geen teken voor het huidige karakter en als er een alternatieve 'font-family' in de lettertype sets, dan wordt stap 2 herhaald met de alternatieve 'font-family'. Zie appendix C voor een omschrijving van lettertype en karakter codering.
- Als er geen lettertype in de familie geselecteerd wordt in 2, dan wordt een standaard 'font-family' van de User Agent gebruikt en vervolgens stap 2 herhaald, gebruik makend van de beste overeenkomst die gevonden kan worden in het standaard lettertype.
(Het bovenstaande algoritme kan geoptimaliseerd worden door te vermijden dat voor elke karakter de CSS1 eigenschappen nagegaan moeten worden.)
De koppelregels per eigenschap voor (2) hierboven zijn als volgt:
- 'font-style' wordt eerst geprobeerd. Aan 'italic' zal voldaan worden als er ofwel een lettertype gelabeled met het CSS keyword 'itallic' (voorkeur) of 'oblique' in de database van de User Agent voorkomt. Anders moeten de waarden exact overeenkomen of font-style zal falen.
- 'font-variant' wordt hierna geprobeerd. 'normal' komt overeen met een lettertype niet gelabeled als 'small-caps'; 'small-caps' komt overeen met (1) een lettertype gelabeled als 'small-caps', (2) een lettertype waarin het Klein Kapitaal gesynthetiseerd worden, of (3) een lettertype waar alle kleine letters vervangen zijn door hoofdletters. Een Klein Kapitaal lettertype kan gesynthetiseerd worden door electronisch hoofdletters te maken door een normaal lettertype te vergroten.
- 'font-weight' wordt vervolgens getest, het zal nooit falen. (Zie 'font-weight' hierna.)
- 'font-size' moet passen binnen een van de User Agent afhangende tolerantiemarge. (Typisch worden groottes voor schaalbare lettertypes afgerond naar de volgende volledige pixel, terwijl de tolerantie voor bitmapped lettertypes zelfs tot 20% kunnen bedragen.) Verdere berekeningen zoals bij 'em' waarden in andere eigenschappen worden gebaseerd op de 'font-size' waarde die gebruikt wordt, niet degene die gespecificeerd wordt.
Waarde: [[<family-name> | <generic-family>],]*
[<family-name> | <generic-family>]
Startwaarde: User Agent specifiek
Van toepassing op: alle elementen
Geërfd: ja
Percentage waarden: n.v.t.
De waarde is een lijst met prioriteiten van lettertype familie namen en/of generieke familie namen. In tegenstelling tot de meeste andere CSS1 eigenschappen, worden waarden gescheiden door een komma om aan te geven dat het alternatieven zijn:
BODY { font-family: gill, helvetica, sans-serif }
Er zijn twee types van lijstwaarden:
- <family-name>
- De naam van een gekozen lettertype familie. In het laatste voorbeeld zijn "gill" en "helvetica" lettertype families.
- <generic-family>
- In het bovenstaande voorbeeld is de laatste waarde een generieke familie naam. De volgende generieke families worden gedefinieerd:
- 'serif' (zoals Times)
- 'sans-serif' (zoals Helvetica)
- 'cursive' (zoals Zapf-Chancery)
- 'fantasy' (zoals Western)
- 'monospace' (zoals Courier)
Style sheet ontwerpers worden aangemoedigd om een generieke lettertype familie als laatste alternatief te geven.
Lettertype namen die witruimte bevatten zouden tussen aanhalingstekens moeten staan:
BODY { font-family: "new century schoolbook", serif }
<BODY STYLE="font-family: 'Mijn eigen lettertype', fantasy">
Wanneer er geen aanhalingstekens gebruikt worden worden alle witruimtekarakters voor en na de lettertypenaam genegeerd en elke reeks witruimtekarakters binnen de lettertypenaam wordt omgezet naar één spatie.
Waarde: normal | italic | oblique
Startwaarde: normal
Van toepassing op: alle elementen
Geërfd: ja
Percentage waarden: n.v.t.
De 'font-style' eigenschap geeft de keuze tussen normal (soms ook wel "roman" of "upright" genoemd), italic en oblique letterstijlen binnen een lettertype familie.
'normal' selecteert een lettertype dat geklassificeerd wordt als 'normal' in de lettertype database van de User Agent, terwijl 'oblique' een lettertype selecteert dat als 'oblique' gelabeld staat. 'italic' selecteert een lettertype dat gelabeld is als 'italic', of, als dit niet beschikbaar is, als 'oblique'.
Het lettertype dat gelabeld wordt als 'oblique' in de lettertype database van de User Agent kan ook elektronisch gegenereerd zijn door een normaal lettertype scheef te duwen.
Lettertypes met Oblique, Slanted of Incline in hun namen worden gewoonlijk gelabeld als 'oblique' in de lettertype database van de User Agent. Lettertypes met Italic, Cursive of Kursiv in hun namen worden gewoonlijk gelabeld als 'italic'.
H1, H2, H3 { font-style: italic }
H1 EM { font-style: normal }
In het bovenstaande voorbeeld zal benadrukte tekst binnen 'H1' getoond worden in een normaal lettertype.
Waarde: normal | small-caps
Startwaarde: normal
Van toepassing op: alle elementen
Geërfd: ja
Percentage waarden: n.v.t.
Een ander type van variatie in een lettertype familie is het klein kapitaal. In een klein kapitaal lettersoort zien de kleine letters hetzelfde uit als de hoofdletters, maar ze zijn kleiner en met lichtjes kleinere verhoudingen. De 'font-variant' eigenschap selecteert deze lettersoort.
De waarde 'normal' selecteert een lettertyoe dat geen klein kapitaal lettersoort is, 'small-caps' selecteert een klein kapitaal lettersoort. Het is aanvaardbaar (maar niet vereist) in CSS1 dat de klein kapitaal lettersoort gemaakt wordt door een normale lettersoort te vervangen door de geschaalde hoofdletters ervan. In het slechtste geval kunnen hoofdletters gebruikt worden als vervanging voor een klein kapitaal lettersoort.
Het volgende voorbeeld resulteert in een 'H3' element in klein kapitaal, met benadrukte woorden in schuine klein kapitaal:
H3 { font-variant: small-caps }
EM { font-style: oblique }
Er kunnen ook andere varianten in de lettertype familie zijn. Voorbeelden zijn lettertypes met oude-stijl getallen, klein kapitaal getallen, versmalde of verbrede letters, enz. CSS1 heeft geen eigenschappen om deze te selecteren.
CSS1 kern: voor zover deze eigenschap ervoor zorgt dat tekst getransformeerd wordt in hoofdletters, gelden dezelfde opmerkingen als voor 'text-transform'.
Waarde: normal | bold | bolder | lighter | 100 | 200 | 300 | 400
| 500 | 600 | 700 | 800 | 900
Startwaarde: normal
Van toepassing: alle elementen
Geërfd: ja
Percentage waarden: n.v.t.
De 'font-weight' eigenschap selecteert het gewicht van de letters. De waarden '100' tot '900' vormen een geordende reeks, waar elk nummer een gewicht aangeeft dat ten minste zo donker is als de voorganger ervan. Het
sleutelwoord 'normal' is synoniem met '400', en 'bold' is synoniem met '700'. Andere sleutelwoorden dan 'normal' en 'bold' blijken vaak verward te worden met lettertype namen en daarom is er gekozen voor een numerieke schaal voor de 9-waarde lijst.
P { font-weight: normal } /* 400 */
H1 { font-weight: 700 } /* bold */
De 'bolder' en 'lighter' waarden selecteren gewichten die relatief zijn tot de gewichten die geërfd worden van de ouder (parent):
STRONG { font-weight: bolder }
Kind elementen erven het resulterende gewicht, niet de sleutelwoordwaarde.
Lettertypes hebben typisch een of meer eigenschappen waarvan de waarden namen zijn die omschrijvend zijn voor het "gewicht" van een lettertype. Er is geen geaccepteerde, universele betekenis voor deze gewichtnamen. Hun primaire rol is een onderscheid kunnen maken tussen letters van verschillende dikte in eenzelfde lettertype familie. Het gebruik tussen verschillende lettertype families is zeer verschillend; voor bijvoorbeeld eenzelfde lettertype kan een vette letter geschreven worden als zijnde Regular, Roman, Book, Medium, Semi- of DemiBold, Bold, of Black, afhankelijk van hoe vet de "normal" soort van het lettertype is in het ontwerp. Omdat er geen standaard is in het gebruik van de namen, worden de gewichtwaarden CSS1 gegeven op een numerieke schaal waar de waarde '400' (of 'normal') overeenkomt met de "normal" tekst soort voor deze familie. De gewichtnaam die geassocieerd wordt met die soort zal normaal Book, Regular, Roman, Normal of soms Medium zijn.
De associatie van andere gewichten binnen een familie aan de numerieke gewichtwaarden is enkel bedoeld om de volgorde van donkerheid te bewaren binnen deze familie. De volgende heuristiek vertelt echter hoe de toewijzing gedaan wordt in typische gevallen:
- Als de lettertype familie al een numerieke schaal met negen waarden heeft (zoals bijvoorbeeld OpenType doet), zouden de lettergewichten direct gemapped moeten worden.
- Als er zowel een soort Medium genoemd wordt en een Book, Regular, Roman of Normal, dan wordt de Medium normaal toegewezen aan de '500'.
- De soort "Bold" zal dikwijls overeenkomen met de gewichtwaarde '700'.
- Als er minder dan 9 gewichten zijn in de familie, is het standaard algoritme voor het opvullen van de "gaten" als volgt. Als '500' toegekend is, zal het toegewezen worden aan dezelfde soort als '400'. Als eender welke waarde '600', '700', '800' of '900' niet toegewezen wordt, worden ze toegewezen aan dezelfde soort als het volgende donkere toegewezen sleutelwoord, als deze bestaat, of de volgende lichtere in het andere geval. Als eender welke van '300', '200' of '100' niet toegewezen wordt, worden ze toegewezen aan het volgende lichtere sleutelwoord, als dit bestaat, of aan het volgende donkere in het andere geval.
De volgende twee voorbeelden illustreren het process. Veronderstel vier gewichten in de "Voorbeeld1" familie, van lichter naar donkerst: Regular, Medium, Bold, Heavy. Veronderstel bovendien zes gewichten in de "Voorbeeld2" familie: Book, Medium, Bold, Heavy, Black, ExtraBlack. Merk op dat in het tweede voorbeeld beslist wordt om "Voorbeeld2 ExtraBlack" nergens aan toe te wijzen.
Beschikbare soorten | Toewijzingen | Invullen van de gaten
----------------------+----------------+-----------------------
"Voorbeeld1 Regular" | 400 | 100, 200, 300
"Voorbeeld1 Medium" | 500 |
"Voorbeeld1 Bold" | 700 | 600
"Voorbeeld1 Heavy" | 800 | 900
Beschikbare soorten | Toewijzingen | Invullen van de gaten
------------------------+---------------+------------------------
"Voorbeeld2 Book" | 400 | 100, 200, 300
"Voorbeeld2 Medium" | 500 |
"Voorbeeld2 Bold" | 700 | 600
"Voorbeeld2 Heavy" | 800 |
"Voorbeeld2 Black" | 900 |
"Voorbeeld2 ExtraBlack" | (geen) |
Omdat de bedoeling van de relatieve sleutelwoorden 'bolder' en 'lighter' het lichter of donkerder maken van de soort binnen de familie is en omdat een een familie mogelijk geen soorten heeft die toegewezen kunnen worden aan de symbolische gewichtwaarden, is de koppeling van 'bolder' aan de volgende donkere soort beschikbaar op de client binnen de familie en overeenkomend 'lighter' aan de volgende lichtere soort binnen de familie. Om precies te zijn, de bedoeling van de relatieve sleutelwoorden 'bolder' en 'lighter' is als volgt:
- 'bolder' selecteert het volgende gewicht dat is toegewezen aan een lettertype dat donkerder is dan het geërfde. Als er zo geen gewicht is, dan wordt de volgende donkere numieke waarde gebruikt (en de soort blijft ongewijzigd), tenzij de geërfde waarde '900' was. In dat geval is het resulterend gewicht ook '900'.
- 'lighter' is vergelijkbaar, maar werkt in de omgekeerde richting: het selecteert het volgende lichtere sleutelwoord met een andere soort van de overgeërfde, tenzij deze soort niet bestaat, in welk geval het de volgende lichtere numerieke waarde selecteert (en de soort ongewijzigd laat).
Er is geen garantie dat er een donkerdere soort is voor elk van de 'font-weight' waarden; sommige soorten hebben bijvoorbeeld mogelijk enkel een normal en een bold soort, andere hebben acht verschillende gewichten. Er is geen garantie over hoe een Useragent de lettersoorten zal koppelen in een familie met gewichtwaarden. De enige garantie is dat een soort van een gegeven waarde niet minder donker zal zijn dan de soort van lichtere waarden.
Waarde: <absolute-size> | <relative-size> |
<length> | <percentage>
Startwaarde: medium
Van toepassing op: alle elementen
Geërfd: ja
Percentage waarden: relatief tot de font size van de ouder (parent) element
- <absolute-size>
- Een <absolute-size> sleutelwoord is een index tot een tabel van lettergroottes berekend en bijgehouden door de User Agent. Mogelijk waarden zijn: [ xx-small | x-small | small | medium | large | x-large | xx-large ]. Op een computerscherm wordt een schaalfactor van 1.5 voorgesteld tussen aangrenzende indexes; als de 'medium' grootte 10pt is, zou de 'large' grootte 15pt kunnen zijn. Verschillende media kunnen andere schaalfactoren nodig hebben. De User Agent zou ook rekening moeten houden met de kwaliteit en beschikbaarheid van groottes wanneer de tabel berekend wordt. De tabel mag verschillend zijn gaande van een lettertypefamilie naar een ander.
- <relative-size>
- Een <relative-size> sleutelwoord wordt relatief geïnterpreteerd tot de tabel van lettergroottes en de lettergrootte van het ouder (parent) element. Mogelijke waarden zijn: [ larger | smaller ]. Als het ouder (parent) element bijvoorbeeld een lettergrootte 'medium' heeft, zal een 'larger' waarde ervoor zorgen dat de grootte van het huidige element 'large' is. Als de grootte van het ouder (parent) element niet in de buurt licht tot een element uit de tabel, mag de User Agent vrij interpoleren tussen tabelelementen of afronden naar de dichtst bij zijnde. Het kan zijn dat de User Agent de tabelwaarden moet extrapoleren als de numerieke waarde verder gaat dan de sleutelwoorden.
Lengte en percentage waarden moeten geen rekening houden met de lettergroottetabel wanneer deze grootte van een element bepalen.
Negatieve waarden zijn niet toegestaan.
Voor alle andere eigenschappen, verwijzen de 'em' en 'ex' lengtewaarden naar de lettergrootte van het huidige element. Voor de 'font-size' eigenschap verwijzen deze lengte-eenheden naar de lettergrootte van het ouder (parent) element.
Merk op dat een toepassing een expliciete grootte anders kan interpreteren afhankelijk van de context. In een Virtuele Realiteits-scene krijgt een letter bijvoorbeeld een andere grootte omwille van perspectieve vervorming.
Voorbeelden:
P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }
Als de voorgestelde schaalfactor 1.5 gebruikt wordt, zijn de laatste drie declaraties identiek.
Waarde: [ <font-style> || <font-variant> ||
<font-weight> ]? <font-size> [ / <line-height> ]?
<font-family>
Startwaarde: niet gedefinieerd voor verkorte (shorthand) eigenschappen
Van toepassing op: alle elementen
Geërfd: ja
Percentage waarden: toegestaan op <font-size> en <line-height>
De 'font' eigenschap is een verkorte eigenschap voor de instelling van 'font-style' 'font-variant' 'font-weight' 'font-size', 'line-height' en 'font-family' op dezelfde plaats in de stylesheet. De syntax van deze eigenschap is gebaseerd op een traditionele typografische verkorte schrijfwijze om meerdere eigenschappen gerelateerd aan lettertypes in te stellen.
Raadpleeg voor een definitie van toegestane en startwaarden de eerder gedefinieerde eigenschappen. Eigenschappen waarvoor geen waarden gegeven worden worden ingesteld op hun startwaarde.
P { font: 12pt/14pt sans-serif }
P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook", serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }
Op de tweede regel verwijst de percentage waarde ('80%') van de lettergrootte naar de lettergrootte van het ouder (parent) element. Op de derde regel verwijst het percentage voor de regelhoogte naar de lettergrootte van het element zelf.
In de eerste drie regels hierboven zijn de 'font-style', 'font-variant' en 'font-weight' niet expliciet vermeld, hetgeen betekent dat ze alle drie ingesteld worden op hun startwaarde ('normal'). De vierde regel stelt de 'font-weight' in op 'bold', de 'font-style' op 'italic' en 'font-variant' impliciet op 'normal'.
De vijfde regel stelt de 'font-variant' ('small-caps'), de 'font-size' (120% van het ouder (parent) lettertype), de 'line-height' (120% keer de lettergrootte) en de 'font-family' ('fantasy') in. Hieruit volgt dat het sleutelwoord 'normal' van toepassing is op de twee resterende eigenschappen: 'font-style'
en 'font-weight'.
Deze eigenschappen omschrijven de kleur (dikwijls de voorgrondkleur genoemd) en achtergrond van een element (zoals het oppervlak waarop de inhoud wordt weergegeven). Men kan de achtergrondkleur en/of een achtergrondfiguur instellen. De positie van de figuur, of en hoe ze herhaald wordt, en of ze vast is of scrollt relatief ten opzichte van het canvas kan ook ingesteld worden.
De 'color' eigenschap erft normaal. De achtergrondeigenschappen erven niet, maar de achtergrond van het element zullen standaard erdoor schijnen omdat de startwaarde 'transparent' is voor 'background-color'.
Waarde: <color>
Startaarde: spcifiek voor de User Agent
Van toepassing op: alle elementen
Geërfd: ja
Percentage waarden: n.v.t.
Deze eigenschap omschrijft de tekstkleur van een element (dikwijls de voorgrondkleur genoemd). Er zijn verschillende manieren om rood aan te geven:
EM { color: red } /* natuurlijke taal */
EM { color: rgb(255,0,0) } /* RGB bereik 0-255 */
Raadpleeg deel 6.3 voor een omschrijving van mogelijke kleurwaarden.
Waarde: <color> | transparent
Startwaarde: transparent
Van toepassing op: alle elementen
Geërfd: nee
Percentage waarden: n.v.t.
Deze eigenschap stelt de achtergrondkleur van een element in.
H1 { background-color: #F00 }
Waarde: <url> | none
Startwaarde: none
Van toepassing op: alle elementen
Geërfd: nee
Percentage waarden: n.v.t.
Deze eigenschap stelt de achtergrondfiguur van een element in. Wanneer een achtergrondfiguur ingesteld wordt zou men ook een achtergrondkleur moeten instellen die gebruikt kan worden wanneer de figuur niet beschikbaar is. Wanneer de figuur beschikbaar is wordt deze over de achtergrondkleur heen gelegd.
BODY { background-image: url(marble.gif) }
P { background-image: none }
Waarde: repeat | repeat-x | repeat-y | no-repeat
Startwaarde: repeat
Van toepassing op: alle elementen
Geërfd: nee
Percentage waarden: n.v.t.
Als een achtergrondfiguur gespecificeerd is, bepaalt de waarde van 'background-repeat' hoe en of de figuur herhaald wordt.
Een waarde 'repeat' betekent dat de figuur herhaald wordt in zowel horizontale en verticale richting. De 'repeat-x' ('repeat-y') waarde herhaalt de figuur horizontaal (verticaal), om zo één enkele band van figuren te maken van de ene kant naar de andere. Met een waarde 'no-repeat' wordt de figuur niet herhaald.
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
}
In het bovenstaande voorbeeld zal de figuur enkel verticaal herhaald worden.
Waarde: scroll | fixed
Startwaarde: scroll
Van toepassing op: alle elementen
Geërfd: nee
Percentage waarde: n.v.t.
Als een achtergrondfiguur gespecificeerd is, bepaalt de waarde van 'background-attachment' of de achtergrond vast is aan het canvas of dat de achtergrond mee scrollt met de inhoud.
BODY {
background: red url(hanger.gif);
background-repeat: repeat-y;
background-attachment: fixed;
}
CSS1 kern: User Agents kunnen 'fixed' behandelen als 'scroll'. Het is echter aangeraden dat ze 'fixed' correct interpreteren, ten minste op de HTML en BODY elementen aangezien er geen manier is voor een auteur om een achtergrondfiguur te voorzien voor de browsers die 'fixed' ondersteunen. (Raadpleeg deel 7.)
Waarde: [<percentage> | <length>]{1,2} | [top | center
| bottom] || [left | center | right]
Startwaarde: 0% 0%
Van toepassing op: block-level en vervangingselementen
Geërfd: nee
Percentage waarden: verwijzing naar de grootte van het element zelf
Als een achtergrondfiguur gespecificeerd is, geeft de waarde van 'background-position' de startpositie.
Met een waardepaar '0% 0%' wordt de linkerbovenkant van de figuur geplaatst in de linkerbovenhoek van de box die de inhoud van het element omgeeft (dit wil zeggen niet de box die de opvulling (padding), rand (border) of marge (margin) omgeeft). Een waardepaar '100% 100%' plaatst de rechterbenedenhoek van de figuur in de rechterbenedenhoek van het element. Met een waardepaar '14% 84%' wordt het punt 14% van links en 84% van boven in de figuur geplaatst in het punt 14% links en 84% beneden in het element.
Met een waardepaar '2cm 2cm' wordt de linkerbovenkant van de figuur op 2cm van de linkerrand en 2cm van de bovenkant van het element geplaatst.
Als slechts één percentage- of lengtewaarde gegeven wordt, zal hiermee enkel de horizontale positie ingesteld wordten. De verticale positie zal 50% zijn. Als twee waarden gegeven worden, staat de horizontale positie eerst. Combinaties van lengte- en percentagewaarden, zoals '50% 2cm', zijn toegestaan. Negatieve posities zijn toegestaan.
Men kan ook sleutelwoordwaarden gebruiken om de positie van de achtergrondfiguur aan te geven. Sleutelwoorden kunnen niet gecombineerd worden met percentagewaarden of lengtewaarden. De mogelijke combinaties van sleutelwoorden en de interpretaties ervan zijn als volgt:
- 'top left' en 'left top' betekenen hetzelfde als '0% 0%'.
- 'top', 'top center' en 'center top' betekenen hetzelfde als '50% 0%'.
- 'right top' en 'top right' betekenen hetzelfde als '100% 0%'.
- 'left', 'left center' en 'center left' betekenen hetzelfde als '0% 50%'.
- 'center' en 'center center' betekenen hetzelfde als '50% 50%'.
- 'right', 'right center' en 'center right' betekenen hetzelfde als '100% 50%'.
- 'bottom left' en 'left bottom' betekenen hetzelfde als '0% 100%'.
- 'bottom', 'bottom center' en 'center bottom' betekenen hetzelfde als '50% 100%'.
- 'bottom right' en 'right bottom' betekenen hetzelfde als '100% 100%'.
Voorbeelden:
BODY { background: url(vaandel.jpeg) right top } /* 100% 0% */
BODY { background: url(vaandel.jpeg) top center } /* 50% 0% */
BODY { background: url(vaandel.jpeg) center } /* 50% 50% */
BODY { background: url(vaandel.jpeg) bottom } /* 50% 100% */
Als de achtergrondfiguur vast is ten opzichte van het canvas (raadpleeg de 'background-attachment' eigenschap hierboven), wordt de figuur relatief ten opzichte van het canvas in plaats van ten opzichte van het element geplaatst. Bijvoorbeeld:
BODY {
background-image: url(logo.png);
background-attachment: fixed;
background-position: 100% 100%;
}
In het bovenstaande voorbeeld wordt de figuur in de rechterbenedenhoek van het canvas geplaatst.
Waarde: <background-color> || <background-image> ||
<background-repeat> || <background-attachment> ||
<background-position>
Startwaarde: niet gedefinieerd voor afgekorte eigenschappen
Van toepassing op: alle elementen
Geërfd: nee
Percentage waarden: toegestaan op <background-position>
De 'background' eigenschap is een afgekorte eigenschap om op dezelfde plaats in de stylesheet de individuele achtergrondeigenschappen (zoals 'background-color', 'background-image', 'background-repeat', 'background-attachment' en 'background-position') in te stellen.
Mogelijke waarden van de 'background' eigenschap zijn de sets van alle mogelijke waarden van de individuele eigenschappen.
BODY { background: red }
P { background: url(schaak.png) gray 50% repeat fixed }
De 'background' eigenschap stelt altijd alle individuele achtergrondeigenschappen in. Op de eerste regel van het bovenstaande voorbeeld is enkel de waarde voor de 'background-color' gegeven en de andere individuele eigenschappen worden ingesteld op hun startwaarden. Op de tweede regel zijn alle individuele eigenschappen gespecificeerd.
Waarde: normal | <length>
Startwaarde: normal
Van toepassing op: alle elementen
Geërfd: ja
Percentage waarden: n.v.t.
De lengte-eenheid geeft een toevoeging van de standaard ruimte tussen woorden aan. Waarden kunnen negatief zijn, maar er kunnen implementatie-specifieke limieten zijn. De User Agent us vrij in de keuze van het exacte
spacing algoritme. De woord spacing kan ook beïnvloed worden door uitlijning (justification) (welke een waarde voor de 'text-align' eigenschap is).
H1 { word-spacing: 1em }
Hier zou de woord spacing tussen elk woord in 'H1' elementen verhoogd worden met '1em'.
CSS1 kern: User Agents kunnen iedere waarde van 'word-spacing' interpreteren als 'normal'. (Raadpleeg deel 7.)
Waarde: normal | <length>
Startwaarde: normal
Van toepassing op: alle elementen
Geërfd: ja
Percentage waarden: n.v.t.
De lengte-eenheid geeft een toevoeging van de standaard ruimte tussen karakters aan, maar er kunnen implementatie-specifieke limieten zijn. De User Agent is vrij in de keuze van het exacte
spacing algoritme. De letter spacing kan ook beïnvloed worden door uitlijning (justification) (welke een waarde van de 'align' eigenschap is).
BLOCKQUOTE { letter-spacing: 0.1em }
Hier zou de letter spacing tussen elk karakter in 'BLOCKQUOTE'
elementen verhoogd worden met '0.1em'.
Met een waarde 'normal' mogen de User Agents de ruimte tussen de letters wijzigen om tekst uit te lijnen. Dit zal niet gebeuren wanneer 'letter-spacing' expliciet ingesteld wordt op een <length> waarde:
BLOCKQUOTE { letter-spacing: 0 }
BLOCKQUOTE { letter-spacing: 0cm }
Wanneer de resulterende ruimte tussen twee letters niet hetzelfde is als de standaard ruimte, zouden User Agents geen koppelletters (ligatures) mogen gebruiken.
CSS1 kern: User Agents kunnen iedere waarde van 'letter-spacing' als 'normal' interpreteren. (Raadpleeg deel 7.)
Waarde: none | [ underline || overline || line-through || blink ]
Startwaarde: none
Van toepassing op: alle elementen
Geërfd: nee, maar raadpleeg verduidelijking beneden
Percentage waarden: n.v.t.
Deze eigenschap omschrijft versieringen (decorations) die toegevoegd worden aan de tekst van een element. Als het element geen tekst bevat (zoals het 'IMG' element in HTML) of als het een leeg element is (zoals '<EM></EM>'), heeft deze eigenschap geen effect. Een waarde 'blink' zorgt ervoor dat de tekst knippert.
De nodige kleur(en) voor de tekstversiering zouden afgeleid moeten worden van de 'color' eigenschapwaarde.
Deze eigenschap wordt niet geërfd, maar elementen zouden moeten overeenkomen met hun ouder (parent). Als een element onderstreept is, zou de lijn de kind (child) elementen moeten overspannen. De kleur van de onderstreping zal dezelfde blijven, zelfs wanneer afstammende elementen andere 'color' waarden hebben.
A:link, A:visited, A:active { text-decoration: underline }
Het bovenstaande voorbeeld zorgt dat de tekst van alle links (zijnde alle 'A' elementen met een 'HREF' attribuut) onderstreept is.
User Agents moeten het sleutelwoord 'blink' herkennen, maar zijn niet vereist om het knippereffect te ondersteunen.
Waarde: baseline | sub | super | top | text-top | middle | bottom
| text-bottom | <percentage>
Startwaarde: baseline
Van toepassing op: inline elementen
Geërfd: nee
Percentage waarden: heeft betrekking op de 'line-height' van het element zelf
De eigenschap beïnvloedt de verticale positionering van het element. Een set van sleutelwoorden is relatief ten opzichte van het ouder (parent) element:
- 'baseline'
- lijn de beginpunt van het element (of de onderkant, als het element geen beginpunt heeft) uit met het beginpunt van de ouder (parent)
- 'middle'
- lijn het verticale middelpunt van het element (doorgaans een figuur) uit met het beginpunt plus de helft van de x-hoogte van de ouder (parent)
- 'sub'
- zet het element in subscript
- 'super'
- zet het element in superscript
- 'text-top'
- lijn de bovenkant van het element uit met de bovenkant van de letters van het ouder (parent) element
- 'text-bottom'
- lijn de onderkant van het element uit met de onderkant van de letters van het ouder (parent) element
Een andere set van eigenschappen is relatief tot de opgemaakte regel waar het element deel van uitmaakt:
- 'top'
- lijn de bovenkant van het element uit met het grootste element op deze regel
- 'bottom'
- lijn de onderkant van het element uit met het laagst uitstekende element op deze regel
Door gebruik te maken van de 'top' en 'bottom' uitlijning kunnen onoplosbare situaties ontstaan wanneer elementafhankelijkheden een lus vormen.
Percentage waarden verwijzen naar de waarde van de 'line-height' eigenschap van het element zelf. Ze verhogen het beginpunt van het element (of de onderkant als het element geen beginpunt heeft) over de gespecificeerde hoeveelheid boven het beginpunt van de ouder (parent). Negatieve waarden zijn mogelijk. Een waarde '-100%' zal zo het element verlagen zodat het beginpunt van het element eindigt waar het beginpunt van de volgende regel zou moeten gestaan hebben. Dit laat precieze controle over de verticale positie van elementen (zoals figuren die gebruikt worden in de plaats van letters) die geen beginpunt hebben toe.
Er wordt verwacht dat in een toekomstige versie van CSS <length> een geldige waarde wordt voor deze eigenschap.
Waarde: capitalize | uppercase | lowercase | none
Startwaarde: none
Van toepassing op: alle elementen
Geërfd: a
Percentage waarden: n.v.t.
- 'capitalize'
- maakt van de eerste letter van elk woord een hoofdletter
- 'uppercase'
- maakt alle letters van het element hoofdletters
- 'lowercase'
- maakt alle letters van het element kleine letters
- 'none'
- neutraliseert de geërfde waarde.
De eigenlijke transformatie in elk geval is afhankelijk van de menselijke taal. Raadpleeg [4] voor manieren om de taal van een element te vinden.
H1 { text-transform: uppercase }
Het bovenstaande voorbeeld zet 'H1' elementen in hoofdletters.
CSS1 kern: User Agents kunnen 'text-transform' negeren (hetgeen wil zeggen het behandelen als 'none') voor karakters die niet deel uitmaken van het Latin-1 repertoire en voor elementen in talen waarvoor de transformatie anders is dan deze gespecificeerd door de hoofdletter-herleidingstabel van Unicode [8].
Waarde: left | right | center | justify
Startwaarde: User Agent specifiek
Van toepassing op: blok-niveau elementen
Geërfd: ja
Percentage waarden: n.v.t.
Deze eigenschap omschrijft hoe tekst uitgelijnd wordt in een element. Het eigenlijke uitlijningsalgorithme dat gebruikt wordt is afhankelijk van de User Agent en menselijke taal.
Voorbeeld:
DIV.center { text-align: center }
Aangezien 'text-align' overerft, zullen alle blok-niveau elementen binnen het 'DIV' element met 'CLASS=center' gecentreerd worden. Merk op dat uitlijningen relatief zijn tot de breedte van het element, niet tot het canvas. Als 'justify' niet ondersteund wordt, zal de User Agent een vervanging voorzien. Gewoonlijk zal dit 'left' zijn voor westerse talen.
CSS1 kern: User Agents kunnen 'justify' behandelen als 'left' of 'right', afhankelijk van de standaard schrijfrichting van het element. Deze kan links-naar-rechts respectievelijk rechts-naar-links zijn.
Waarde: <length> | <percentage>
Startwaarde: 0
Van toepassing op: blok-niveau elementen
Geërfd: ja
Percentage waarden: verwijzen naar de breedte van het ouder (parent) element
De eigenschap specificeert de insprong die verschijnt voor de eerste opgemaakte regel. De waarde van 'text-indent' kan negatief zijn, maar er kunnen implementatie-specifieke beperkingen zijn. Een insprong wordt niet ingevoegd in het midden van een element dat gebroken werd door een ander (zoals 'BR' in HTML).
Voorbeeld:
P { text-indent: 3em }
Waarde: normal | <number> | <length> |
<percentage>
Startwaarde: normal
Van toepassing op: alle elementen
Geërfd: ja
Percentage waarden: relatief tot de lettergrootte van het element zelf
De eigenschap stelt de afstand tussen twee aangrenzende regels in.
Wanneer een numerieke waarde opgegeven wordt, kan de regelhoogte gevonden worden door de lettergrootte van het huidige element te vermenigvuldigen met de numerieke waarde. Dit verschilt van een percentage waarde in de manier die het overerft: wanneer een numerieke waarde opgegeven is, zullen kind (child) elementen de factor zelf overerven en niet de resulterende waarde (welke het geval is bij percentage en andere eenheden).
Negatieve waarden zijn niet toegestaan.
De drie regels in het onderstaande voorbeeld hebben dezelfde resulterende regelhoogte:
DIV { line-height: 1.2; font-size: 10pt } /* getal */
DIV { line-height: 1.2em; font-size: 10pt } /* lengte */
DIV { line-height: 120%; font-size: 10pt } /* percentage */
Een waarde 'normal' stelt de 'line-height' in op een redelijke waarde voor het lettertype van het element. Er wordt voorgesteld dat User Agents de 'normal' waarde instellen op een getal tussen 1.0 en 1.2.
Raadpleeg deel 4.4 voor een omschrijving van hoe 'line-height' de opmaak van een blok-niveau element beïnvloed.
De box eigenschappen stellen de grootte, de omtrek en de positie van de boxen die elementen representeren. Raadpleeg het opmaakmodel (deel 4) voor voorbeelden van het gebruik van de box eigenschappen.
De marge eigenschappen stellen de marge van een element in. De 'margin' eigenschap stelt de marge voor alle vier randen in terwijl de andere marge eigenschappen enkel hun respectievelijke kant instellen.
De opvullingseigenschappen omschrijven hoeveel ruimte ingevoegd moet worden tussen de rand en de inhoud (zijnde tekst of figuur). De 'padding' eigenschap stelt de opvulling voor alle vier randen in terwijl de andere opvullingseigenschappen enkel hun respectievelijke kant instellen.
De rand eigenschappen stellen de randen van een element in. Elk element heeft vier randen, één aan elke kant, die gedefinieerd worden door hun dikte, kleur en stijl.
De 'width' en 'height' eigenschappen stellen de grootte van de box in en de 'float' en 'clear' eigenschappen kunnen de positie van elementen aanpassen.
Waarde: <length> | <percentage> | auto
Startwaarde: 0
Van toepassing op: alle elementen
Geërfd: nee
Percentage waarden: verwijzen naar de breedte van de dichtstbijzijnde blok-niveau voorouder
Deze eigenschap stelt de top marge van een element in:
H1 { margin-top: 2em }
Een negatieve waarde is toegestaan, maar er kunnen implementatie-specifieke beperkingen zijn.
Waarde: <length> | <percentage> | auto
Startwaarde: 0
Van toepassing op: alle elementen
Geërfd: nee
Percentage waarden: verwijzen naar de breedte van de dichtstbijzijnde blok-niveau voorouder
Deze eigenschap stelt de rechtermarge van een element in:
H1 { margin-right: 12.3% }
Een negatieve waarde is toegestaan, maar er kunnen implementatie-specifieke beperkingen zijn.
Waarde: <length> | <percentage> | auto
Startwaarde: 0
Van toepassing op: alle elementen
Geërfd: nee
Percentage waarden: verwijzen naar de breedte van de dichtstbijzijnde blok-niveau voorouder
Deze eigenschap stelt de onderkant marge van een element:
H1 { margin-bottom: 3px }
Een negatieve waarde is toegestaan, maar er kunnen implementatie-specifieke beperkingen zijn.
Waarde: <length> | <percentage> | auto
Startwaarde: 0
Van toepassing op: alle elementen
Geërfd: nee
Percentage waarden: verwijzen naar de breedte van de dichtstbijzijnde blok-niveau voorouder
Deze eigenschap stelt de linkermarge van een element in:
H1 { margin-left: 2em }
Een negatieve waarde is toegestaan, maar er kunnen implementatie-specifieke beperkingen zijn.
Waarde: [ <length> | <percentage> | auto ]{1,4}
Startwaarde: niet gedefinieerd voor afgekorte eigenschappen
Van toepassing op: alle elementen
Geërfd: nee
Percentage waarden: verwijzen naar de breedte van de dichtstbijzijnde blok-niveau voorouder
De 'margin' eigenschap is een afgekorte eigenschap om 'margin-top', 'margin-right', 'margin-bottom' en 'margin-left' op dezelfde plaats in de stylesheet in te stellen.
Als vier lengtewaarden gespecificeerd zijn, gelden ze voor de bovenkant, respectievelijk de rechterkant, de onderkant en de linkerkant. Als er slechts één waarde is, geldt deze voor alle zijden. Als er twee of drie waarden zijn, worden de ontbrekende waarden genomen van de overstaande zijde.
BODY { margin: 2em } /* alle marges ingesteld op 2em */
BODY { margin: 1em 2em } /* bovenkant & onderkant = 1em, rechterkant & linkerkant = 2em */
BODY { margin: 1em 2em 3em } /* bovenkant=1em, rechterkant=2em, onderkant=3em, linkerkant=2em */
De laatste regel van het bovenstaande voorbeeld is equivalent met het onderstaande voorbeeld:
BODY {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em; /* overgenomen van de overstaande zijde (rechts) */
}
Een negatieve waarde is toegestaan, maar er kunnen implementatie-specifieke beperkingen zijn.
Waarde: <length> | <percentage>
Startwaarde: 0
Van toepassing op: alle elementen
Geërfd: nee
Percentage waarden: verwijzen naar de breedte van de dichtstbijzijnde blok-niveau voorouder
Deze eigenschap stelt de opvulling aan de bovenkant van een element in.
BLOCKQUOTE { padding-top: 0.3em }
Opvullingswaarden kunnen niet negatief zijn.
Waarde: <length> | <percentage>
Startwaarde: 0
Van toepassing op: alle elementen
Geërfd: nee
Percentage waarden: verwijzen naar de breedte van de dichtstbijzijnde blok-niveau voorouder
Deze eigenschap stelt de opvulling aan de rechterkant van een element in.
BLOCKQUOTE { padding-right: 10px }
Opvullingswaarden kunnen niet negatief zijn.
Waarde: <length> | <percentage>
Startwaarde: 0
Van toepassing op: alle elementen
Geërfd: nee
Percentage waarden: verwijzen naar de breedte van de dichtstbijzijnde blok-niveau voorouder
Deze eigenschap stelt de opvulling aan de onderkant van een element in.
BLOCKQUOTE { padding-bottom: 2em }
Opvullingswaarden kunnen niet negatief zijn.
Waarde: <length> | <percentage>
Startwaarde: 0
Van toepassing op: alle elementen
Geërfd: nee
Percentage waarden: verwijzen naar de breedte van de dichtstbijzijnde blok-niveau voorouder
Deze eigenschap stelt de opvulling aan de linkerkant van een element in.
BLOCKQUOTE { padding-left: 20% }
Opvullingswaarden kunnen niet negatief zijn.
Waarde: [ <length> | <percentage> ]{1,4}
Startwaarde: niet gedefinieerd voor afgekorte eigenschappen
Van toepassing op: alle elementen