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
Geërfd: nee
Percentage waarden: verwijzen naar de breedte van de dichtstbijzijnde blok-niveau voorouder
De 'padding' eigenschap is een afgekorte eigenschap om 'padding-top', 'padding-right', 'padding-bottom' en 'padding-left' op dezelfde plaats in de stylesheet in te stellen.
Als vier waarden 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.
Het oppervlak van het opgevulde gebied wordt ingesteld met de 'background' eigenschap:
H1 {
background: white;
padding: 1em 2em;
}
Het bovenstaande voorbeeld stelt de verticale opvulling van '1em' ('padding-top' en 'padding-bottom') en een horizontale opvulling van '2em' ('padding-right' en 'padding-left') in. De 'em' eenheid is relatief aan de lettergrootte van het element: '1em' is gelijk aan de grootte van het gebruikte lettertype.
Opvullingswaarden kunnen niet negatief zijn.
Waarde: thin | medium | thick | <length>
Startwaarde: 'medium'
Van toepassing op: alle elementen
Geërfd: nee
Percentage waarden: n.v.t.
Deze eigenschap stelt de randdikte van de bovenrand van een element in. De dikte van de sleutelwoordwaarden zijn afhankelijk van de User Agent, maar het volgende geldt steeds:
'thin' <= 'medium' <= 'thick'.
De dikten van de sleutelwoorden zijn constant in het gehele document:
H1 { border: solid thick red }
P { border: solid thick blue }
In het bovenstaande voorbeeld, zullen 'H1' en 'P' elementen dezelfde randdikte hebben onafhankelijk van de lettergrootte. Om relatieve breedten te verkrijgen kan de 'em' eenheid gebruikt worden:
H1 { border: solid 0.5em }
Randdikten kunnen niet negatief zijn.
Waarde: thin | medium | thick | <length>
Startwaarde: 'medium'
Van toepassing op: alle elementen
Geërfd: nee
Percentage waarden: n.v.t.
Deze eigenschap stelt de randdikte van de rechterrand van een element in. Verder is het equivalent aan 'border-top-width'.
Waarde: thin | medium | thick | <length>
Startwaarde: 'medium'
Van toepassing op: alle elementen
Geërfd: nee
Percentage waarden: n.v.t.
Deze eigenschap stelt te randdikte van de onderrand van een element in. Verder is het equivalent aan 'border-top-width'.
Waarde: thin | medium | thick | <length>
Startwaarde: 'medium'
Van toepassing op: alle elementen
Geërfd: nee
Percentage waarden: n.v.t.
Deze eigenschap stelt te randdikte van de linkerrand van een element in. Verder is het equivalent aan 'border-top-width'.
Waarde: [thin | medium | thick | <length>]{1,4}
Startwaarde: niet gedefinieerd voor afgekorte eigenschappen
Van toepassing op: alle elementen
Geërfd: nee
Percentage waarden: n.v.t.
Deze eigenschap is een afgekorte eigenschap om 'border-width-top', 'border-width-right', 'border-width-bottom' en 'border-width-left' op dezelfde plaats in de stylesheet in te stellen.
Er kunnen één tot vier waarden opgegeven worden. Dit dient als volgt geïnterpreteerd te worden:
- één waarde: alle vier randdikten worden op deze waarde ingesteld
- twee waarden: de randdikte voor de bovenrand en onderrand worden ingesteld op de eerste waarde, de randdikte voor de linkrand en rechterrand worden ingesteld op de tweede waarde
- drie waarden: de bovenrand wordt ingesteld op de eerste, de rechter- en linkerrand op de tweede en de onderrand op de derde waarde
- vier waarden: bovenrand, respectievelijk rechterrand, onderrand en linkerrand
In het onderstaande voorbeeld geven de opmerkingen de resulterende dikte van de bovenrand, rechterrand, onderrand en linkerrand:
H1 { border-width: thin } /* thin thin thin thin */
H1 { border-width: thin thick } /* thin thick thin thick */
H1 { border-width: thin thick medium } /* thin thick medium thin */
H1 { border-width: thin thick medium thin } /* thin thick medium thin */
Randdikten kunnen niet negatief zijn.
Waarde: <color>{1,4}
Startwaarde: de waarde van de 'color' eigenschap
Van toepassing op: alle elementen
Inherited: nee
Percentage waarden: N/A
De 'border-color' eigenschap stelt de kleur van de vier randen in. 'border-color' kan één tot vier waarden hebben en de waarden worden ingesteld voor de verschillende randen zoals bij 'border-width' hiervoor.
Als er geen kleurwaarde gespecificeerd is, zal de kleur van de 'color' eigenschap van het element zelf in de plaats genomen worden:
P {
color: black;
background: white;
border: solid;
}
In het bovenstaande voorbeeld is de rand een ononderbroken zwarte lijn.
Waarde none | dotted | dashed | solid | double | groove | ridge
| inset | outset
Startwaarde: none
Van toepassing op: alle elementen
Geërfd: nee
Percentage waarden: n.v.t.
De 'border-style' eigenschap stelt de stijl van de vier randen in. Het kan één tot vier waarden hebben en de waarden worden ingesteld op de verschillende zijden zoals voor 'border-width' hierboven.
#xy34 { border-style: solid dotted }
In het bovenstaande voorbeeld zullen de horizontale randen 'solid' zijn en de verticale randen zullen 'dotted' zijn.
Omdat de startwaarde van de randstijlen 'none' is, zullen geen randen zichtbaar zijn tenzij de randstijl ingesteld is.
De betekenissen van de randstijlen zijn:
- none
- er wordt geen rand getekend (onafhankelijk van de 'border-width' waarde)
- dotted
- de rand is een puntjeslijn getekend op de achtergrond van het element
- dashed
- de rand is een streepjeslijn getekend op de achtergrond van het element
- solid
- de rand is een ononderbroken lijn
- double
- de rand is een dubbele lijn getekend op de achtergrond van het element. De som van de twee lijnen met de ruimte ertussen is gelijk aan de <border-width> waarde.
- groove
- een 3D groef wordt getekend gebaseerd op de kleuren van de <color> waarde.
- ridge
- een 3D lijn (omgekeerde van groef) wordt getekend gebaseerd op de kleuren van de <color> waarde.
- inset
- een 3D "dal" (inset) wordt getekend gebaseerd op de kleuren van de <color> waarde.
- outset
- een 3D "plateau" (outset) wordt getekend gebaseerd op de kleuren van de <color> waarde.
CSS1 kern: User Agents kunnen 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset' en 'outset' allemaal interpreteren als 'solid'.
Waarde <border-top-width> || <border-style> ||
<color>
Startwaarde: niet gedefinieerd voor afgekorte eigenschappen
Van toepassing op: alle elementen
Geërfd: nee
Percentage waarden: n.v.t.
Dit is een afgekorte eigenschap om de dikte, stijl en kleur van de bovenrand van een element in te stellen.
H1 { border-bottom: thick solid red }
De bovenstaande regel zal de dikte, stijl en kleur van de rand onder het H1 element instellen. Weggelaten waarden worden ingesteld op hun startwaarden:
H1 { border-bottom: thick solid }
Omdat de kleurwaarde weggelaten is in het bovenstaande voorbeeld, zal de randkleur dezelfde zijn als de 'color' waarde van het element zelf.
Merk op dat de 'border-style' eigenschap tot vier waarden aanvaard terwijl deze eigenschap slechts één stijlwaarde aanvaard.
Waarde <border-right-width> || <border-style> ||
<color>
Startwaarde: niet gedefinieerd voor afgekorte eigenschappen
Van toepassing op: alle elementen
Geërfd: nee
Percentage waarden: n.v.t.
Dit is een afgekorte eigenschap om de dikte, stijl en kleur van de rechterrand van een element in te stellen. Verder is het equivalent met 'border-top'.
Waarde <border-bottom-width> || <border-style> ||
<color>
Startwaarde: niet gedefinieerd voor afgekorte eigenschappen
Van toepassing op: alle elementen
Geërfd: nee
Percentage waarden: n.v.t.
Dit is een afgekorte eigenschap om de dikte, stijl en kleur van de onderrand van een element in te stellen. Verder is het equivalent met 'border-top'.
Waarde <border-left-width> || <border-style> ||
<color>
Startwaarde: niet gedefinieerd voor afgekorte eigenschappen
Van toepassing op: alle elementen
Geërfd: nee
Percentage waarden: n.v.t.
Dit is een afgekorte eigenschap om de dikte, stijl en kleur van de linkerrand van een element in te stellen. Verder is het equivalent met 'border-top'.
Waarde <border-width> || <border-style> ||
<color>
Startwaarde: niet gedefinieerd voor afgekorte eigenschappen
Van toepassing op: alle elementen
Geërfd: nee
Percentage waarden: n.v.t.
De 'border' eigenschap is een afgekorte aigenschap om dezelfde breedte, kleur en stijl in te stellen voor alle vier randen van een element. De eerste regel hierna is bijvoorbeeld equivalent aan de set regels die erna getoond worden:
P { border: solid red }
P {
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
}
In tegenstelling tot de afgekorte 'margin' en 'padding' eigenschappen kan de 'border' eigenschap geen verschillende waarden instellen voor de waarden van de vier randen. Om dit te doen moet één of meerdere van de andere eigenschappen gebruikt worden.
Omdat de eigenschappen in zekere mate elkaar overlappende functionaliteit hebben, is de volgorde waarin de regels gespecificeerd wordt belangrijk. Beschouw het volgende voorbeeld:
BLOCKQUOTE {
border-color: red;
border-left: double
color: black;
}
In het bovenstaande voorbeeld, zal de kleur van de linkerrand zwart zijn terwijl de andere randen rood zijn. Dit komt omdat de 'border-left' instelling de breedte, stijl en kleur vastlegt. Aangezien de kleurwaarde niet gespecificeerd is op de 'border-left' eigenschap, zal deze genomen worden van de 'color' eigenschap. Dat de 'color' eigenschap ingesteld wordt na de 'border-left' eigenschap is niet relevant.
Merk op dat deze eigenschap slechts één lengtewaarde acepteert terwijl de 'border-width' eigenschap tot vier lengtewaarden aanvaard.
Waarde <length> | <percentage> | auto
Startwaarde: auto
Van toepassing op: blokniveau en vervangen elementen
Geërfd: no
Percentage waarden: verwijst naar de breedte van het ouder (parent) element
Deze eigenschap kan toegepast worden op tekstelementen, maar het is zeer bruikbaar bij vervangen elementen zoals figuren. De breedte wordt opgelegd door het schalen van de figuur indien nodig. Wanneer er geschaald wordt, blijft de aspect ratio (verhoudingen) van de figuur behouden als de 'height' eigenschap 'auto' is.
Voorbeeld:
IMG.icon { width: 100px }
Als de 'width' en 'height' van een vervangen element beide 'auto' zijn, zullen deze eigenschappen ingesteld worden op de intrinsieke (eigen) afmetingen van het element.
Negatieve waarden zijn niet toegestaan.
Raadpleeg het opmaakmodel (deel 4) voor een omschrijving van de relatie tussen deze eigenschap en de marge en opvulling.
Waarde <length> | auto
Startwaarde: auto
Van toepassing op: block-level and replaced elements
Geërfd: nee
Percentage waarden: n.v.t.
Deze eigenschap kan toegepast worden op tekst, maar is het nuttigst op vervangen elementen zoals figuren. De hoogte wordt opgelegd door de figuur indien nodig te schalen. Wanneer er geschaald wordt zal de aspect ratio (hoogte/breedte verhouding) van de figuur behouden blijven als de 'width' eigenschap 'auto' is.
Voorbeeld:
IMG.icon { height: 100px }
Als de 'width' en 'height' van een vervangen element beide 'auto' zijn zullen deze waarden ingesteld worden op de intrinsieke (eigen) afmetingen van het element.
Wanneer toegepast op een textueel element, kan de hoogte opgelegd worden met bijvoorbeeld een scrollbalk.
Negatieve waarden zijn niet toegestaan.
CSS1 kern: User Agents kunnen de 'height' eigenschap negeren (hetgeen wil zeggen behandelen als 'auto') als het element geen vervangen element is.
Waarde left | right | none
Startwaarde: none
Van toepassing op: alle elementen
Geërfd: nee
Percentage waarden: n.v.t.
Met de waarde 'none' zal het element weergegeven worden waar het in de tekst voorkomt. Met een waarde 'left' ('right') zal het element naar links (right) verplaatst worden en de tekst zal rechts (links) rond de rand van het element "wrappen" (aansluiten). Met een waarde 'left' of 'right', wordt het element behandeld als blokniveau (hetgeen betekend de 'display' eigenschap wordt genegeerd). Raadpleeg deel 4.1.4 voor een volledige specificatie.
IMG.icon {
float: left;
margin-left: 0;
}
Het bovenstaande voorbeeld zal alle IMG elementen met 'CLASS=icon' aan de linkerkant van de ouder (parent) element plaatsen.
Deze eigenschap wordt meestal gebruikt met inline figuren, maar geldt ook op tekstelementen.
Waarde none | left | right | both
Startwaarde: none
Van toepassing op: alle elementen
Geërfd: nee
Percentage waarden: n.v.t.
Deze eigenschap specificeert of een element floating elementen toelaat binnen de grenzen ervan. De waarde van deze eigenschap somt de kanten op waar floating elementen niet geaccepteerd worden. Met 'clear' ingesteld op 'left', zal een element verplaatst worden beneden elk floating element aan de linkerkant. Met 'clear' ingetseld op 'none', zijn floating elementen toegestaan aan alle zijden. Voorbeeld:
H1 { clear: left }
Deze eigenschappen classificeren elementen eerder in categorieën dan dat ze specifieke visuele parameters vastleggen.
De list-style eigenschappen omschrijven hoe lijst items (hetgeen elementen zijn met een 'display' waarde 'list-item') opgemaakt worden. De list-style eigenschappen kunnen ingesteld worden voor elk element en het zal normaal overerven. Ze zullen echter enkel effect hebben op elementen welke een 'display' waarde 'list-item' hebben. In HTML is dit typisch het geval voor het 'LI' element.
Waarde block | inline | list-item | none
Startwaarde: block
Van toepassing op: alle elementen
Geërfd: nee
Percentage waarden: n.v.t.
Deze eigenschap omschrijft hoe/of een element weergegeven wordt op het canvas (welke een afdruk op papier, een computerscherm, enz. kan zijn).
Een element met een 'display' waarde 'block' opent een nieuwe box. De box wordt relatief gepositioneerd ten opzichte van aangrenzende boxen volgens het CSS opmaakmodel. Typisch zijn elementen zoals 'H1' en 'P' van het type 'block'. Een waarde 'list-item' is gelijkend op 'block' behalve dat er een list-item teken toegevoegd is. In HTML zal 'LI' deze waarde hebben.
Een element met een 'display' waarde 'inline' resulteert in een nieuwe inline box op dezelfde regel als de vorige inhoud. De box wordt gedimensioneerd volgens de opgemaakte grootte van de inhoud. Als de inhoud tekst is, kan het meerdere regels overspannen en er zal een box op elke regel zijn. De marge-, rand- en opvullingeigenschappen zijn van toepassing op 'inline' elementen maar zullen geen effect hebben op de regelafbrekingen.
Een waarde 'none' voorkomt dat het element weergegeven wordt, inclusief de kindelementen en de omringende box.
P { display: block }
EM { display: inline }
LI { display: list-item }
IMG { display: none }
De laatste regel schakelt de weergave van figuren uit.
De startwaarde van 'display' is 'block', maar een User Agent zal typisch standaard waarden hebben voor alle HTML elementen overeenkomstig de voorgestelde weergave van elementen in de HTML specificatie [2].
CSS1 kern: User Agents kunnen 'display' negeren en enkel de User Agent standaard waarden gebruiken. (Raadpleeg deel 7.)
Waarde normal | pre | nowrap
Startwaarde: normal
Van toepassing op: block-level elements
Geërfd: ja
Percentage waarden: n.v.t.
Deze eigenschap geeft aan hoe witruimte in het element behandeld wordt: de 'normal' manier (waar witruimte in elkaar geklapt wordt), als 'pre' (welk zich gedraagt als het 'PRE' element in HTML) of als 'nowrap' (waar
regelafbreking (wrapping) enkel gedaan wordt door BR elementen):
PRE { white-space: pre }
P { white-space: normal }
De startwaarde van 'white-space' is 'normal', maar een User Agant zal typisch een standaard waarde hebben voor alle HTML elementen volgens de voorgestelde waargave van elementen in de HTML specificatie [2].
CSS1 kern: User Agents kunnen de 'white-space' eigenschap in auteur en lezer stylesheets negeren en de User Agent standaard waarde in de plaats gebruiken. (Raadpleeg deel 7.)
Waarde disc | circle | square | decimal | lower-roman | upper-roman
| lower-alpha | upper-alpha | none
Startwaarde: disc
Van toepassing op: elementen met 'display' waarde 'list-item'
Geërfd: ja
Percentage waarden: n.v.t.
Deze eigenschap wordt gebruikt om te bepalen wat het voorkomen van het list-item teken is als 'list-style-image' op 'none' staat of als de figuur waarnaar de URL verwijst niet kan weergegevan worden.
OL { list-style-type: decimal } /* 1 2 3 4 5 enz. */
OL { list-style-type: lower-alpha } /* a b c d e enz. */
OL { list-style-type: lower-roman } /* i ii iii iv v enz. */
Waarde <url> | none
Startwaarde: none
Van toepassing op: elementen met 'display' waarde 'list-item'
Geërfd: ja
Percentage waarden: n.v.t.
Deze eigenschap legt de figuur die zal gebruikt worden als het list-item teken vast. Wanneer de figuur beschikbaar is zal het teken ingesteld met 'list-style-type' vervangen worden.
UL { list-style-image: url(http://png.com/ellipse.png) }
Waarde inside | outside
Startwaarde: outside
Van toepassing op: elementen met 'display' waarde 'list-item'
Geërfd: ja
Percentage waarden: n.v.t.
De waarde van 'list-style-position' bepaald hoe het list-item teken getekend wordt ten opzichte van de inhoud. Raadpleeg deel 4.1.3 voor een opmaakvoorbeeld.
Waarde [disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none] || [inside | outside] || [<url> | none]
Startwaarde: niet gedefinieerd voor afgekorte eigenschappen
Van toepassing op: elementen met 'display' waarde 'list-item'
Geërfd: ja
Percentage waarden: n.v.t.
De 'list-style' eigenschap is een afgekorte schrijfwijze voor de instelling van de drie eigenschappen 'list-style-type', 'list-style-image' en 'list-style-position' op dezelfde plaats in de stylesheet.
UL { list-style: upper-roman inside }
UL UL { list-style: circle outside }
LI.square { list-style: square }
De directe instelling van 'list-style' op 'LI' elementen kan onverwachte resultaten opleveren. Beschouw:
<STYLE TYPE="text/css">
OL.alpha LI { list-style: lower-alpha }
UL LI { list-style: disc }
</STYLE>
<BODY>
<OL CLASS=alpha>
<LI>niveau 1
<UL>
<LI>niveau 2
</UL>
</OL>
</BODY>
Omdat de specificatie (zoals gedefinieerd in de cascading volgorde) hoger is voor de eerste regel in de stylesheet in het bovenstaande voorbeeld, zal het de tweede regel op alle 'LI' elementen overriden en enkel 'lower-alpha' list stijlen zullen gebruikt worden. Het is daarom aanbevolen om de 'list-style' enkel in te stellen op de list type elementen:
OL.alpha { list-style: lower-alpha }
UL { list-style: disc }
In het bovenstaande voorbeeld zal overerving de 'list-style' waarden van 'OL' en 'UL' elementen transfereren naar 'LI' elementen.
Een URL waarde kan gecombineerd worden met elke andere waarde:
UL { list-style: url(http://png.com/ellipse.png) disc }
In het bovenstaande voorbeeld zal de 'disc' gebruikt worden wanneer de figuur niet beschikbaar is.
De opmaak van een lengtewaarde is opgebouwd uit een optioneel tekenkarakter ('+' of '-', waarbij '+' de standaard is) onmiddellijk gevolgd door een getal (met of zonder een komma) omiddellijk gevolgd door een eenheid identificatie (een twee-letter afkorting). Na een '0' is de eenheid identificatie optioneel.
Sommige eigenschappen laten negatieve lengte eenheden toe, maar dit kan het opmaakmodel complexer maken en er kunnen implementatie-specifieke beperkingen zijn. Als een negatieve lengte waarde niet ondersteund kan worden, zou het omgezet moeten worden naar de dichtstbij liggende waarde die ondersteund wordt.
Er zijn twee types van lengte eenheden: relatieve en absolute. Relatieve eenheden specificeren een lengte relatief tot een andere lengte eigenschap. Style sheets die relatieve eenheden gebruiken zullen eenvoudiger schalen van het ene medium naar het andere (zoals van een computerscherm naar een laser printer). Percentage eenheden (later beschreven) en sleutelwoordwaarden (zoals 'x-large') bieden gelijkwaardige voordelen.
Deze relatieve eenheden worden ondersteund:
H1 { margin: 0.5em } /* ems, de hoogte van het lettertype van het element */
H1 { margin: 1ex } /* x-height, ~ de hoogte van de letter 'x' */
P { font-size: 12px } /* pixels, relatief tot het canvas */
De relatieve eenheden 'em' en 'ex' zijn relatief aan de lettergrootte van het element zelf. De enige uitzondering op deze regel in CSS1 is de 'font-size' eigenschap waar 'em' en 'ex' waarden verwijzen naar de lettergrootte van het ouder (parent) element.
Pixel eenheden, zoals gebruikt in de laatste regel, zijn relatief aan de resolutie van het canvas, hetgeen wil zeggen, meestal een computerscherm. Als de pixeldichtheid van het output device zeer veel verschilt van een typisch computerscherm, zou de User Agent de pixel waarden moeten herschalen. De aanbevolen referentie pixel is de visuele hoek van een pixel op een toestel met een pixeldichtheid van 90dpi en een afstand tot de lezer van een armlengte. Voor een nominale armlengte van 28 inches is de visuele hoek ongeveer 0.0227 graden.
Kind (Child) elementen erven de berekende waarde, niet de relatieve waarde:
BODY {
font-size: 12pt;
text-indent: 3em; /* hetgeen 36pt kan zijn */
}
H1 { font-size: 15pt }
In het bovenstaand voorbeeld zal de 'text-indent' waarde van 'H1' elementen 36pt zijn en niet 45pt.
Absolute lengte eenheden zijn enkel nuttig wanneer de fysieke eigenschappen van het output medium bekend zijn. Deze absolute eenheden worden ondersteund:
H1 { margin: 0.5in } /* inches, 1in = 2.54cm */
H2 { line-height: 3cm } /* centimeters */
H3 { word-spacing: 4mm } /* millimeters */
H4 { font-size: 12pt } /* punten, 1pt = 1/72 in */
H4 { font-size: 1pc } /* picas, 1pc = 12pt */
In gevallen waar de gespecificeerde lengte niet ondersteund kan worden zouden User Agents moeten proberen om te benaderen. Voor alle CSS1 eigenschappen zouden verdere berekeningen en overervingen gebaseerd moeten zijn op de benaderde waarde.
De opmaak van een percentage waarde is opgebouwd uit een is een optioneel tekenkarakter ('+' of '-',
met '+' als de standaard) onmiddellijk gevolgd door een getal (met of zonder een komma) onmiddellijk gevolgd door '%'.
Percentage waarden zijn altijd relatief aan een andere waarde, bijvoorbeeld een lengte eenheid. Elke eigenschap die percentage eenheden toelaat definieert ook waar de percentage waarde naar verwijst. Meestal is dit de lettergrootte van het element zelf:
P { line-height: 120% } /* 120% van de 'font-size' van het element*/
In alle geërfde CSS1 eigenschappen erven kind (child) elementen de resulterende waarde en niet de percentage waarde als de waarde gespecificeerd is als een percentage.
Een kleur is ofwel een sleutelwoord ofwel een numerieke RGB specificatie.
De aanbevolen lijst met sleutelwoord kleurnamen is: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white en yellow. Deze 16 kleuren worden genomen van het Windows VGA palet en hun RGB waarden zijn niet gedefinieerd in deze specificatie.
BODY {color: black; background: white }
H1 { color: maroon }
H2 { color: olive }
Het RGB kleurmodel wordt gebruikt in numerieke kleurspecificaties. Deze voorbeelden specificeren de zelfde kleur:
EM { color: #f00 } /* #rgb */
EM { color: #ff0000 } /* #rrggbb */
EM { color: rgb(255,0,0) } /* integer bereik 0 - 255 */
EM { color: rgb(100%, 0%, 0%) } /* float bereik 0.0% - 100.0% */
De opmaak van een RGB waarde in hexadecimale notatie is opgebouwd uit een '#' onmiddellijk gevolgd door ofwel drie of zes hexadecimale karakters. De drie-digit RGB notatie (#rgb) wordt omgezet in een zes-digit vorm
(#rrggbb) door herhaling van digits, niet door de toevoeging van nullen. #fb0 expandeert zo bijvoorbeeld tot #ffbb00. Dit verzekert dat wit (#ffffff) gespecificeerd kan worden met de korte notatie (#fff) en verwijderd elke afhankelijkheid in kleurdiepte van het scherm.
De opmaak van een RGB waarde in de functionele notatie is 'rgb(' gevolgd door een komma-gescheiden lijst van drie numerieke waarden (ofwel drie integer waarden in het bereik 0-255, of drie percentage waarden
in het bereik van 0.0% tot 100.0%) gevolgd door ')'. Witruimtekarakters zijn toegestaan ronde de numerieke waarden.
Waarden buiten de numerieke bereiken zouden geclipt (afgeknot) moeten worden. De drie onderstaande regels zijn daarom equivalent:
EM { color: rgb(255,0,0) } /* integer bereik 0 - 255 */
EM { color: rgb(300,0,0) } /* clipped tot 255 */
EM { color: rgb(110%, 0%, 0%) } /* clipped tot 100% */
RGB kleuren worden gespecificeerd in de sRGB kleurruimte [9]. User Agents kunnen verschillen in de trouwheid waarmee ze deze kleuren weergeven, maar gebruik van sRGB biedt een ondubbelzinnig en objectief meetbare definitie van wat de kleur zou moeten zijn, welke gerelateerd kan worden tot internationale standaarden [10].
User Agents kunnen hun prestaties in weergave van kleuren beperken tot het uitvoeren van een gamma-correctie op de kleuren. sRGB specificeert een display gamma van 2.2 onder gespecificeerde viewing condities. User Agents passen de kleuren in CSS gegeven aan zodat, in combinatie met de "natuurlijke" weergave gamma, een effectieve display gamma van 2.2 wordt geproduceerd. Appendix D geeft verdere details hierover. Merk op dat enkel kleuren gespecificeerd in CSS beïnvloed worden; hetgeen wil zeggen dat figuren verwacht worden hun eigen kleurinformatie te hebben.
Een Uniform Resource Locator (URL) wordt geïdentificeerd met een functionele notatie:
BODY { background: url(http://www.bg.com/pinkish.gif) }
De opmaak van een URL waarde is opgebouwd uit 'url(' gevolgd door optionele witruimte gevolgd door een optioneel enkel aanhalingsteken (') of dubbel aanhalingsteken (") gevolgd door de URL zelf (zoals gedefinieerd in [11]) gevolgd door een optioneel enkel aanhalingsteken (') of dubbel aanhalingsteken (") gevolgd door een optionele witruimte gevolgd door ')'. Aanhalingstekens die geen deel uitmaken van de URL zelf moeten overeenkomen (voor en na de url dezelfde soort).
Parentheses, kommas, witruimtetekens, enkele (') en dubbele aanhalingstekens (") die voorkomen in een URL moeten escaped worden met een backslash: '\(', '\)',
'\,'.
Gedeeltelijke URL's worden relatief geïnterpreteerd tot de bron van de stylesheet, niet relatief tot het document:
BODY { background: url(yellow) }
Een User Agent die CSS1 gebruikt om documenten weer te geven is conform aan de CSS1 specificatie als deze:
- probeert alle verwezen stylesheets op te halen en ze uit te voeren volgens deze specificatie
- de declaraties sorteert volgens de cascading volgorde
- de CSS1 functionaliteit implementeert binnen de beperkingen van het presentatiemedium (zie uitleg verderop).
Een User Agent die CSS1 stylesheets levert is conform aan de CSS1 specificatie als deze:
- geldige CSS1 stylesheets levert
Een User Agent die CSS1 gebruikt om documenten weer te geven en de CSS1 stylesheets levert is conform aan de CSS1 specificatie als deze voldoet aan beide sets van conformiteitseisen.
Een User Agent moet niet alle functionaliteit van CSS1 implementeren: een User Agent kan conform zijn aan CSS1 door de implementatie van de kernfunctionaliteit. De kernfunctionaliteit bevat de hele CSS1 specificatie behalve de delen die expliciet uitgesloten zijn. In de tekst werden deze delen aangegeven met "CSS1 kern:" gevolgd door een verklaring welke functionaliteit geen deel uitmaakt van de functionaliteit. De set van eigenschappen uitgesloten van de kernfunctionaliteit worden de geavanceerde CSS1 eigenschappen genoemd.
Dit deel definieert enkel de conformiteit aan CSS1. Er zullen andere levels van CSS komen in de toekomst die mogelijk vereisen dat een User Agent een andere set van eigenschappen moet implementeren om conform te blijven.
Voorbeelden van beperkingen van het presentatiemedium zijn: beperkte bronnen (lettertypes, kleur) en beperkte resolutie (waardoor marges niet nauwkeurig kunnen zijn). In deze gevallen zou de User Agent de stylesheet waarden moeten benaderen. Verschillende user interface modellen kunnen hun eigen beperkingen opleggen: een VR browser kan een document herschalen gebaseerd op de "afstand" van de gebruiker.
User Agents kunnen lezers aanvullende keuzes voor presentatie bieden. De User Agent kan bevoorbeeld opties voorzien voor gebruikers met visuele beperkingen of kan een keuze voorzien om knipperen uit te schakelen.
Merk op de CSS1 niet alle aspecten van opmaak behandeld. De User Agent is zo bijvoorbeeld vrij in de keuze van een letter-spacing (letter-afstand) algorithme.
Deze specificatie beveelt, zonder te vereisen, aan dat een UA:
- de lezer toelaat om persoonlijke stylesheets op te geven
- toelaat om individuele stylesheets aan of uit te zetten
De bovenstaande conformiteitsregels omschrijven enkel functionaliteit en niet de user interface.
Deze specificatie definieert CSS level 1. Er wordt verwacht dat hogere levels van CSS, met aanvullende eigenschappen, gedefinieert zullen worden in de toekomst. Om te garanderen dat User Agents die enkel CSS1 ondersteunen in staat zullen zijn om stylesheets te lezen met hogere level eigenschappen, definieert dit deel wat de User Agent UA doet wanneer deze bepaalde instructies tegenkomt die niet geldig zijn in CSS level 1.
- een declaratie met een onbekende eigenschap wordt genegeerd. Als de stylesheet bijvoorbeeld
H1 { color: red; rotation: 70deg }
is zal de User Agent dit behandelen alsof in de stylesheet stond
H1 { color: red; }
- illegale waarden, of waarden met illegale delen, worden behandeld alsof er geen declaratie was:
IMG { float: left } /* CSS1 */
IMG { float: left top } /* "top" is geen geldige waarde van 'float' */
IMG { background: "red" } /* sleutelwoorden staan niet tussen aanhalingstekens in CSS1 */
IMG { border-width: 3 } /* er moet een eenheid opgegeven worden voor lengtewaarden */
In het bovenstaande voorbeeld zal een CSS1 de eerste regel behouden en de rest negeren, zodat de stylesheet zou worden
IMG { float: left }
IMG { }
IMG { }
IMG { }
Een User Agent die conform is aan een toekomstige CSS specificatie kan één of meer van de volgende regels in het bovenstaande voorbeeld wel accepteren.
- een ongeldig at-sleutelwoord wordt genegeerd. Alles wat erop volgt tot en de volgende puntkomma (;) of het volgende hakenpaar ({...}) wordt ook genegeerd, onafhankelijk van welke eerst komt. Veronderstel bijvoorbeeld dat in de stylesheet staat:
@three-dee {
@background-lighting {
azimuth: 30deg;
elevation: 190deg;
}
H1 { color: red }
}
H1 {color: blue}
De '@three-dee' is illegaal volgens CSS1. Daarom wordt de hele at-regel (tot en met de derde rechtse gekromde haken) genegereerd. De CSS1 van de User Agent slaat dit over waardoor de stylesheet gereduceerd wordt tot:
H1 {color: blue}
Gedetaileerder:
Een CSS stylesheet, voor elke versie van CSS, bestaat uit een lijst van uitdrukkingen (statements). Er zijn twee soorten statements: at-regels en regelsets. Er kan witruimte staan (spaties, tabs, regeleinden) rond de statements.
CSS stylesheets worden dikwijls opgenomen in HTML documenten en om in staat te zijn om de stylesheets te verbergen voor oudere browsers is het gemakkelijk om de stylesheets tussen HTML opmerkingen (comments) te zetten. De HTML opmerkingstekens "<!--" en "-->" kunnen voorkomen voor, achter en tussen de statements. Ze kunnen omringd zijn met witruimte.
At-regels starten met een at-sleutelwoord, welke een identificator is met een '@' aan het begin (bijvoorbeeld: '@import', '@page'). Een identificator bestaat uit letters, cijfers, koppeltekens en escaped
karakters (verderop gedefinieerd).
Een at-regel bestaat uit alles tot en met de volgende puntkomma (;) of het volgende blok (kort gedefinieerd), welke eerst komt. Een CSS1 User Agent die een at-regel tegenkomt die begint met een at-sleutelwoord anders dan '@import' negeert de hele at-regel en gaat verder met parsen achter de regel. Een CSS1 User Agent negeert ook elke at-regel die start met '@import' als deze niet voorkomt aan de top van de stylesheet, hetgeen wil zeggen als de at-regel voorkomt na een andere regel (ook genegeerde regels). Hier volgt een voorbeeld.
Veronderstel dat een CSS1 parser het volgende stylesheet tegenkomt:
@import "subs.css";
H1 { color: blue }
@import "list.css";
De tweede '@import' is illegaal volgens CSS1. De CSS1 parser slaat de hele at-regel over waardoor de stylesheet verkort wordt tot:
@import "subs.css";
H1 {color: blue}
Een blok start met een links gekruld haakje ({) en eindigt met een gekoppeld rechts gekruld haakje (}). Tussenin kunnen alle karakters voorkomen, met uitzondering van ronde haakjes (()), rechte haakjes ([]) en gekrulde haakjes ({}) aangezien deze steeds in gekoppelde orde moeten voorkomen en ze genest kunnen zijn. Enkele (') en dubbele aanhalingstekens (") komen ook voor in gekoppelde paren en karakters ertussen worden geparsed als een string (Raadpleeg appendix B voor een definitie van string). Hier volgt een voorbeeld van een blok; merk op dat het rechtse gekrulde haakje tussen aanhalingstekens niet gekoppeld is aan het openingshaakje van het blok en dat het tweede enkele aanhalingsteken een escaped karakter is en niet gekoppeld is met het eerste enkele aanhalingsteken:
{ causta: "}" + ({7} * '\'') }
Een regelset bestaat uit een selector-string gevolgd door een declaratie-blok. De selector-string bestaat uit alles tot aan het eerste linkse gekrulde haakje ({). Een regelset die start met een selector-string die niet geldig is in CSS1 wordt overgeslagen.
Veronderstel dat een CSS1 parser bijvoorbeeld het volgende stylesheet tegenkomt:
H1 { color: blue }
P[align], UL { color: red; font-size: large }
P EM { font-weight: bold }
De tweede regel bevat een selector-string die illegaal is in CSS1. De CSS1 User Agent zal de regelset overslaan waardoor de stylesheet in feite gereduceerd wordt tot:
H1 { color: blue }
P EM { font-weight: bold }
Een declaratie-blok start met een links gekruld haakje ({) en eindigt met het gekoppeld rechts gekruld haakje (}). Tussenin staat een lijst van nul of meer declaraties die gescheiden worden door puntkomma's (;).
Een declaratie bestaat uit een eigenschap, een dubbele punt (:) en een waarde. Rond elk van deze kan er witruimte staan. Een eigenschap is een identificator zoals deze eerder gedefinieerd werd. Elk karakter kan in de waarde voorkomen, maar ronde haakjes (()), rechte haakjes ([]), gekrulde haakjes ({}), enkele aanhalingstekens (') en dubbele aanhalingstekens (") moeten in gekoppelde paren staan. De haakjes kunnen allen genest zijn. Binnen aanhalingstekens worden de karkaters geparsed als een string.
Om te verzekeren dat nieuwe eigenschappen en nieuwe waarden voor bestaande eigenschappen toegevoegd kunnen worden in de toekomst moet een User Agent een declaratie met een ongeldige eigenschapnaam of een ongeldige individuele waarde overslaan. Elke CSS1 eigenschap heeft eigen syntactiek en semantische beperkingen op de waarden die aanvaard worden.
Veronderstel bijvoorbeeld dat een CSS1 parser het volgende stylesheet tegenkomt:
H1 { color: red; font-style: 12pt }
P { color: blue; font-vendor: any; font-variant: small-caps }
EM EM { font-style: normal }
De tweede declaratie op de eerste regel heeft een ongeldige waarde '12pt'. De tweede declaratie op de tweede regel bevat een niet gedefinieerde eigenschap 'font-vendor'. De CSS1 parser zal deze declaraties overslaan waardoor de stylesheet gereduceerd wordt tot:
H1 { color: red; }
P { color: blue; font-variant: small-caps }
EM EM { font-style: normal }
Opmerkingen (raadpleeg deel 1.7) kunnen overal voorkomen waar er witruimte kan voorkomen en worden beschouwd als witruimte. CSS1 definieert aanvullende plaatsen waar witruimte kan voorkomen (zoals in waarden) en opmerkingen zijn ook daar toegestaan.
De volgende regels gelden steeds:
- Alle CSS stylesheets zijn case-insensitive (hoofdletterongevoelig), behalve voor delen die niet onder de controle van CSS vallen. Dit wil zeggen dat in CSS1 bijvoorbeeld font familie namen en URL's hoofdlettergevoelig kunnen zijn. De case-sensitivity (hoofdlettergevoeligheid) van de CLASS en ID attributen valt eveneens onder de controle van HTML [2].
- in CSS1 kunnen selectors (element namen, classen en ID's) enkel de karakters A-Z, 0-9 en Unicode karakters 161-255, plus het koppelteken (-) bevatten; ze kunnen niet starten met een koppelteken of cijfer; ze kunnen ook escaped karakters bevatten en elk Unicode karakter als een numerieke code (zie volgende item).
- de backslash gevolgd door maximaal vier hexadecimale getallen (0..9A..F) staat voor het Unicode karakter voor dat nummer.
- elk karakter behalve een hexadecimaal getal kan ge-escaped worden om een speciale betekenis ervan te verbergen; Voorbeeld: "\"" is een string die bestaat uit één dubbel aanhalingsteken.
- de twee voorgaande items definiëren backslash-escapes. Backslash-escapes worden altijd beschouwd als deel van een identificator, behalve binnen strings (hetgeen wil zeggen dat "\7B" geen interpunctie is hoewel "{" dit wel is en "\32" toegestaan is aan het begin van een classenaam hoewel "2" dit niet is).
Opmerking: Het CLASS attribuut van HTML laat toe meer karakters in een classenaam op te nemen dan de set toegestaan voor selectors hierboven. In CSS1 moeten deze karakters escaped zijn of geschreven als Unicode nummers: "B&W?" kan geschreven worden als "B\&W\?" of "B\26W\3F", "κουρος" (Grieks: "kouros") kan geschreven worden als "\3BA\3BF\3C5\3C1\3BF\3C2". Er wordt verwacht dat in latere versies van CSS meer karakters direct gebruikt kunnen worden.
Appendix B geeft een grammatica voor CSS1.
[1] W3C bronpagina over web style
sheets (http://www.w3.org/Style)
[2] "HTML 4.0 Aanbeveling", D. Raggett, A. Le Hors, I. Jacobs, december 1997. Beschikbaar op http://www.w3.org/TR/REC-html40/.
[3] T Berners-Lee, D Connolly: "Hypertext Markup Language - 2.0", RFC 1866, MIT/W3C, november 1995. De aanbeveling is ook beschikbaar in hypertext vorm (http://www.w3.org/MarkUp/html-spec/html-spec_toc.html)
[4] F Yergeau, G Nicol, G Adams, M Dürst: "Internationalisatie van de Hypertext Markup Language"
(ftp://ds.internic.net/rfc/rfc2070.txt).
[5] ISO 8879:1986.
Informatie Verwerking - Tekst en Kantoorsystemen - Standard Generalized Markup Language (SGML)
[6] ISO/IEC 10179:1996
Informatie technologie -- Verwerkingstalen -- Document Style Semantics and Specification Language (DSSSL).
[7] ISO/IEC 9899:1990
Programmeertalen -- C.
[8] The Unicode Consortium, "The Unicode Standard -- Worldwide Character Encoding -- Version 1.0", Addison-Wesley, Volume 1, 1991, Volume 2, 1992.
[9] "A Standard Default color
Space for the Internet", versie 1.10, M. Stokes, M. Anderson, S. Chandrasekar en R. Motta, 5 november 1996.
[10] CIE Publicatie 15.2-1986, "Colorimetry, Second Edition", ISBN 3-900-734-00-3 (http://www.hike.te.chiba-u.ac.jp/ikeda/CIE/publ/abst/15-2-86.html)
[11] T Berners-Lee, L Masinter, M McCahill: "Uniform Resource Locators (URL)", RFC 1738, CERN, Xerox Corporation, University of Minnesota, december 1994
[12] "PNG (Portable
Network Graphics) Aanbeveling, Versie 1.0 aanbeveling" (http://www.w3.org/TR/REC-png-multi.html)
[13] Charles A. Poynton: "Gamma correctie op het Macintosh Platform" (ftp://ftp.inforamp.net/pub/users/poynton/doc/Mac/Mac_gamma.pdf)
[14] International Color Consortium: "ICC Profile Format Aanbeveling, versie 3.2", 1995
(ftp://sgigate.sgi.com/pub/icc/ICC32.pdf)
[15] S C Johnson: "YACC - Yet another compiler compiler", Technisch Rapport, Murray Hill, 1975
[16] "Flex: The Lexical Scanner Generator", Versie 2.3.7, ISBN 1882114213
In de korte tijd dat HTML bestaat zijn er verschillende stylesheet voorstellen geweest waaraan dit voorstel dank verschuldigd is. In het bijzonder het voorstel van Robert
Raisch, Joe English en Pei Wei hadden veel invloed.
Een aantal mensen hebben bijgedragen tot de ontwikkeling van CSS1. We zouden de volgende mensen speciaal willen bedanken: Terry Allen, Murray Altheim, Glenn Adams, Walter Bender, Tim Berners-Lee, Yves Bertot, Scott Bigham, Steve Byrne, Robert Cailliau, James Clark, Daniel Connolly, Donna Converse, Adam Costello, Todd Fahrner, Todd Freter, Roy Fielding, Neil Galarneau, Wayne Gramlich, Phill Hallam-Baker, Philipp Hoschka, Kevin
Hughes, Scott Isaacs, Tony Jebson, William Johnston, Gilles Kahn, Philippe Kaplan, Phil Karlton, Evan Kirshenbaum, Yves Lafon, Murray Maloney, Lou Montulli, Colas Nahaboo, Henrik Frystyk Nielsen, David Perrell, William Perry, Scott Preece, Paul Prescod, Liam Quin, Vincent Quint, Jenny Raggett, Thomas Reardon, Cécile Roisin, Michael Seaton, David Seibert, David Siegel, David Singer, Benjamin Sittler, Jon Smirl, Charles Peyton Taylor, Irène Vatton, Daniel Veillard, Mandira Virmani, Greg Watkins, Mike Wexler, Lydja Williams, Brian Wilson, Chris Wilson, Lauren Wood en Stephen Zilles.
Drie mensen verdienen speciale vermelding: Dave Raggett (voor zijn aanmoediging en werk aan HTML3), Chris Lilley (voor zijn voortdurende bijdragen, speciaal op vlak van kleuren en lettertypes) en Steven
Pemberton (voor zijn organisatorische en creatieve vakkundigheid).
(Deze appendix is informatief, niet normatief)
De volgende stylesheet is geschreven volgens de voorgestelde weergave in de HTML 2.0 [3] aanbeveling. Sommige stijlen, zoals kleuren, zijn toegevoegd om volledig te zijn. Er wordt voorgesteld om een vergelijkbare stylesheet als de onderstaande te gebruiken als de standaard stylesheet van de User Agent.
BODY {
margin: 1em;
font-family: serif;
line-height: 1.1;
background: white;
color: black;
}
H1, H2, H3, H4, H5, H6, P, UL, OL, DIR, MENU, DIV,
DT, DD, ADDRESS, BLOCKQUOTE, PRE, BR, HR, FORM, DL {
display: block }
B, STRONG, I, EM, CITE, VAR, TT, CODE, KBD, SAMP,
IMG, SPAN { display: inline }
LI { display: list-item }
H1, H2, H3, H4 { margin-top: 1em; margin-bottom: 1em }
H5, H6 { margin-top: 1em }
H1 { text-align: center }
H1, H2, H4, H6 { font-weight: bold }
H3, H5 { font-style: italic }
H1 { font-size: xx-large }
H2 { font-size: x-large }
H3 { font-size: large }
B, STRONG { font-weight: bolder } /* relatief tot de ouder (parent) */
I, CITE, EM, VAR, ADDRESS, BLOCKQUOTE { font-style: italic }
PRE, TT, CODE, KBD, SAMP { font-family: monospace }
PRE { white-space: pre }
ADDRESS { margin-left: 3em }
BLOCKQUOTE { margin-left: 3em; margin-right: 3em }
UL, DIR { list-style: disc }
OL { list-style: decimal }
MENU { margin: 0 } /* strakke opmaak */
LI { margin-left: 3em }
DT { margin-bottom: 0 }
DD { margin-top: 0; margin-left: 3em }
HR { border-top: solid } /* 'border-bottom' had ook gebruikt kunnen worden */
A:link { color: blue } /* niet bezochte link */
A:visited { color: red } /* bezochte links */
A:active { color: lime } /* actieve links */
/* instellen van de ankerrand rond IMG elementen vereist contextuele selectoren */
A:link IMG { border: 2px solid blue }
A:visited IMG { border: 2px solid red }
A:active IMG { border: 2px solid lime }
(Deze appendix is normatief)
De minimale CSS (voor elke versie van CSS) grammatica die alle implementaties moeten ondersteunen wordt gedefinieerd in deel 7. De grammatica hierna definieert een veel geringere taal, een taal die de syntax van CSS1 definieert.
In zekere zin is het echter een superset van CSS1: er zijn bijkomende semantische beperkingen die niet uitgedrukt worden in deze grammatica. Een conforme User Agent moet ook blijven bij de voorwaarts-compatibele parsing regels (deel 7.1), de eigenschap en waarde schrijfwijze (deel 5) en de eenheidschrijfwijze (deel 6). Bovendien legt HTML beperkingen op zoals op de mogelijke waarden van het CLASS attribuut.
De grammatica hierna is LL(1) (maar merk op dat de meeste User Agents het niet direct moeten gebruiken omdat het de parsing conventies niet verduidelijkt, enkel de CSS1 syntax). De opmaak van de producties is geöptimaliseerd voor menselijk gebruik en sommige afkortingen verder dan yacc [15] worden gebruikt:
* : 0 of meer
+ : 1 of meer
? : 0 of 1
| : scheiding tussen alternatieven
[] : groepering
De producties zijn:
stylesheet
: [CDO|CDC]* [ import [CDO|CDC]* ]* [ ruleset [CDO|CDC]* ]*
;
import
: IMPORT_SYM [STRING|URL] ';' /* Zoals @import url(fun.css); */
;
unary_operator
: '-' | '+'
;
operator
: '/' | ',' | /* leeg */
;
property
: IDENT
;
ruleset
: selector [ ',' selector ]*
'{' declaration [ ';' declaration ]* '}'
;
selector
: simple_selector+ [ pseudo_element | solitary_pseudo_element ]?
| solitary_pseudo_element
;
/* Een "id" is een identificatie (ID) die gekoppeld is aan een
** element type links ervan, zoals in: P#p007
** Een "solitary_id" is een identificatie (ID) die niet zo
** gekoppeld is, zoals in: #p007
** Parallel voor classes en pseudo-classes.
*/
simple_selector
: element_name id? class? pseudo_class? /* zoals: H1.subject */
| solitary_id class? pseudo_class? /* zoals: #xyz33 */
| solitary_class pseudo_class? /* zoals: .author */
| solitary_pseudo_class /* zoals: :link */
;
element_name
: IDENT
;
pseudo_class /* zoals in: A:link */
: LINK_PSCLASS_AFTER_IDENT
| VISITED_PSCLASS_AFTER_IDENT
| ACTIVE_PSCLASS_AFTER_IDENT
;
solitary_pseudo_class /* zoals in: :link */
: LINK_PSCLASS
| VISITED_PSCLASS
| ACTIVE_PSCLASS
;
class /* zoals in: P.note */
: CLASS_AFTER_IDENT
;
solitary_class /* zoals in: .note */
: CLASS
;
pseudo_element /* zoals in: P:first-line */
: FIRST_LETTER_AFTER_IDENT
| FIRST_LINE_AFTER_IDENT
;
solitary_pseudo_element /* zoals in: :first-line */
: FIRST_LETTER
| FIRST_LINE
;
/* De beperking op de id en solitary_id is dat het
** deel na de "#" een geldige HTML ID waarde moet zijn;
** "#x77" is bijvoorbeeld OK, maar "#77" niet.
*/
id
: HASH_AFTER_IDENT
;
solitary_id
: HASH
;
declaration
: property ':' expr prio?
| /* leeg */ /* Voorkomt syntax fouten... */
;
prio
: IMPORTANT_SYM /* !important */
;
expr
: term [ operator term ]*
;
term
: unary_operator?
[ NUMBER | STRING | PERCENTAGE | LENGTH | EMS | EXS
| IDENT | hexcolor | URL | RGB ]
;
/* De beperking op de kleur is dat het ofwel
** 3 ofwel 6 hex-digits moet hebben (zijnde [0-9a-fA-F])
** na de "#"; "#000" is bijvoorbeeld OK, maar "#abcd" niet.
*/
hexcolor
: HASH | HASH_AFTER_IDENT
;
Het volgende is de woordanalysator (tokenizer), geschreven in flex [16] schrijfwijze. Merk op dat er een 8-bit implementatie van flex verondersteld wordt. De woordanalysator (tokenizer) is hoofdlettergevoelig (flex command line optie -i).
unicode \\[0-9a-f]{1,4}
latin1 [¡-ÿ]
escape {unicode}|\\[ -~¡-ÿ]
stringchar {escape}|{latin1}|[ !#$%&(-~]
nmstrt [a-z]|{latin1}|{escape}
nmchar [-a-z0-9]|{latin1}|{escape}
ident {nmstrt}{nmchar}*
name {nmchar}+
d [0-9]
notnm [^-a-z0-9\\]|{latin1}
w [ \t\n]*
num {d}+|{d}*\.{d}+
string \"({stringchar}|\')*\"|\'({stringchar}|\")*\'
%x COMMENT
%s AFTER_IDENT
%%
"/*" {BEGIN(COMMENT);}
<COMMENT>"*/" {BEGIN(0);}
<COMMENT>\n {/* negeer */}
<COMMENT>. {/* negeer */}
@import {BEGIN(0); return IMPORT_SYM;}
"!"{w}important {BEGIN(0); return IMPORTANT_SYM;}
{ident} {BEGIN(AFTER_IDENT); return IDENT;}
{string} {BEGIN(0); return STRING;}
{num} {BEGIN(0); return NUMBER;}
{num}"%" {BEGIN(0); return PERCENTAGE;}
{num}pt/{notnm} {BEGIN(0); return LENGTH;}
{num}mm/{notnm} {BEGIN(0); return LENGTH;}
{num}cm/{notnm} {BEGIN(0); return LENGTH;}
{num}pc/{notnm} {BEGIN(0); return LENGTH;}
{num}in/{notnm} {BEGIN(0); return LENGTH;}
{num}px/{notnm} {BEGIN(0); return LENGTH;}
{num}em/{notnm} {BEGIN(0); return EMS;}
{num}ex/{notnm} {BEGIN(0); return EXS;}
<AFTER_IDENT>":"link {return LINK_PSCLASS_AFTER_IDENT;}
<AFTER_IDENT>":"visited {return VISITED_PSCLASS_AFTER_IDENT;}
<AFTER_IDENT>":"active {return ACTIVE_PSCLASS_AFTER_IDENT;}
<AFTER_IDENT>":"first-line {return FIRST_LINE_AFTER_IDENT;}
<AFTER_IDENT>":"first-letter {return FIRST_LETTER_AFTER_IDENT;}
<AFTER_IDENT>"#"{name} {return HASH_AFTER_IDENT;}
<AFTER_IDENT>"."{name} {return CLASS_AFTER_IDENT;}
":"link {BEGIN(AFTER_IDENT); return LINK_PSCLASS;}
":"visited {BEGIN(AFTER_IDENT); return VISITED_PSCLASS;}
":"active {BEGIN(AFTER_IDENT); return ACTIVE_PSCLASS;}
":"first-line {BEGIN(AFTER_IDENT); return FIRST_LINE;}
":"first-letter {BEGIN(AFTER_IDENT); return FIRST_LETTER;}
"#"{name} {BEGIN(AFTER_IDENT); return HASH;}
"."{name} {BEGIN(AFTER_IDENT); return CLASS;}
url\({w}{string}{w}\) |
url\({w}([^ \n\'\")]|\\\ |\\\'|\\\"|\\\))+{w}\) {BEGIN(0); return URL;}
rgb\({w}{num}%?{w}\,{w}{num}%?{w}\,{w}{num}%?{w}\) {BEGIN(0); return RGB;}
[-/+{};,#:] {BEGIN(0); return *yytext;}
[ \t]+ {BEGIN(0); /* negeer witruimte */}
\n {BEGIN(0); /* negeer witruimte */}
\<\!\-\- {BEGIN(0); return CDO;}
\-\-\> {BEGIN(0); return CDC;}
. {fprintf(stderr, "%d: Illegal character (%d)\n",
lineno, *yytext);}
(Deze appendix is informatief, niet normatief)
HTML documenten kunnen alle van de ongeveer 30.000 verschillende karakters gedefinieerd door Unicode bevatten. Veel documenten hebben er slechts een honderdtal nodig. Veel lettertypes hebben bovendien slechts een honderdtal tekens. In combinatie met deel 5.2, legt deze appendix uit hoe de karakters in het document en de tekens in een lettertype gekoppeld worden.
De inhoud van een HTML document is een opeenvolging van karakters en opmaak. Om het "over de lijn" te sturen wordt het gecodeerd als een reeks bytes, gebruik makend van één van de mogelijke coderingen. Het HTML document moet gedecodeerd worden om de karakters te verkrijgen. In West Europa is het bijvoorbeeld de gewoonte om byte 224 te gebruiken voor een a-met-grave-accent (à), maar in Hebreeuws, is het gebruikelijker om 224 te gebruiken voor een Aleph. In Japans hangt de betekenis van een byte gewoonlijk af van de byte die eraan vooraf gaat. In sommige coderingen wordt een karakter gecodeerd als twee (of meer) bytes.
De User Agent weet hoe de bytes gedecodeerd moeten worden door te kijken naar de "charset (karakterset)" parameter in de HTTP header. Typische coderingen (charset waarden) zijn "ASCII" (vooor Engels), "ISO-8859-1" (voor West Europa), "ISO-8859-8" (voor Hebreeuws), "Shift-JIS" (voor Japans).
HTML [2][4] laat 30.000 verschillende karakters toe, namelijk degene gedefinieerd door Unicode. Niet veel documenten zullen zoveel verschillende karakters gebruiken en de juiste keuze van codering zal gewoonlijk ervoor zorgen dat dat het document enkel één byte per karakter nodig heeft. Van tijd tot tijd kunnen karakters buiten het gecodeerde bereik nog steeds ingegeven worden als numerieke karakter verwijzingen: 'Π' zal steeds de Griekse hoofdletter Pi zijn onafhankelijk van de codering die gebruikt werd. Merk op dat dit eist dat User Agents voorbereid moeten zijn voor eender welk
Unicode karakter, zelfs wanneer ze enkel een paar coderingen behandelen.
Een lettertype bevat geen karakters, het bevat figuren van karakters, gekend als tekens. De tekens, in de vorm van omschrijvingen of bitmaps, scheppen een bepaalde representatie van een karakter. Elk lettertype heeft, ofwel expliciet ofwel impliciet, een geassocieerde tabel, de lettertype coderingstabel die voor elk teken aangeeft welk karakter het representeert. In Type 1 lettertypes wordt naar de tabel verwezen als een coderingsvector.
In feite bevatten veel lettertypes verschillende tekens voor hetzelfde karakter. Welk van deze tekens gebruikt moeten worden hangt af van de regels van de taal of van de voorkeur van de ontwerper.
In het Arabisch hebben alle letters bijvoorbeeld vier verschillende vormen, afhankelijk van de plaats aan het begin van een woord, in het midden, op het einde of geïsoleerd wordt een andere vorm gebruikt. Het is hetzelfde karakter in alle gevallen en er is dus slechts één karakter in het HTML document, maar wanneer afgedrukt ziet het er telkens anders uit.
Er zijn ook lettertypes die het aan de grafische ontwerper overlaten om te kiezen tussen verschillende alternative vormen die geboden worden. Helaas biedt CSS1 nog geen middel om deze alternatieven te selecteren. Momenteel wordt steeds de standaard vorm gekozen voor zulke lettertypes.
Om het probleem op te lossen dat ontstaat omdat één lettertype niet voldoende kan zijn om alle karakters van een document weer te geven, of om zelfs één element weer te geven, laat CSS1 het gebruik van lettertype sets toe.
Een lettertype set in CSS1 is een lijst van lettertypes, allemaal van dezelfde stijl en grootte, die na elkaar geprobeerd worden om te zien of ze een teken bevatten voor een bepaald karakter. Een element dat Engelse tekst gemengd met wiskundige tekens bevat kan een lettertype set van twee lettertypes nodig hebben, één dat letters en cijfers bevat en het andere dat wiskundige symbolen bevat. Raadpleeg deel 5.2 voor een gedetailleerde omschrijving van het selectiemechanisme voor lettertype sets.
Hier volgt een voorbeeld van een lettertype set die geschikt is voor een tekst die Latijnse karakters, Japanse karakters en wiskundige symbolen bevat:
BODY { font-family: Baskerville, Mincho, Symbol, serif }
De karakters beschikbaar in het Baskerville lettertype (een lettertype met enkel Latijnse karakters) zullen daaruit genomen worden, Japanse zullen uit Mincho genomen worden en de wiskundige symbolen zullen uit Symbol komen. De andere karakters zullen (hopelijk) uit de generieke lettertypefamilie 'serif' komen. De 'serif' lettertypefamilie zal ook gebruikt worden als één of meer van de andere lettertypes onbeschikbaar is.
(Deze appendix is informatief, niet normatief)
Raadpleeg de Gamma cursus in de PNG aanbeveling [12] als je niet vertrouwd bent met gamma onderwerpen.
Bij de berekening mogen User Agents die weergeven op een CRT een ideale CRT veronderstellen en alle schijnbare effecten van gamma veroorzaakt door kleurvermenging (dithering) negeren. Dit wil zeggen dat de minimale verwerking die nodig is op de huidige platforms is:
-
PC die MS-Windows gebruikt
-
geen
-
Unix die X11 gebruikt
-
geen
-
Mac die QuickDraw gebruikt
-
pas gamma 1.39 [13] toe (ColorSync-savvy toepassingen mogen eenvoudigweg het sRGB ICC profiel [14] doorgeven aan ColorSync om de juiste kleurcorrectie uit te voeren)
-
SGI dat X gebruikt
-
pas de gamma waarde van /etc/config/system.glGammaVal toe (de standaard waarden die gebruikt wordt is 1.70; toepassingen die werken op Irix 6.2 of hoger mogen eenvoudigweg het sRGB ICC profiel doorgeven aan het kleurmanagement systeem)
-
NeXT dat NeXTStep gebruikt
-
pas gamma 2.22 toe
"Gamma toepassen" betekent dat elk van de drie R, G en B omgezet moet worden naar R'=Rgamma, G'=Ggamma, B'=Bgamma, voordat het doorgegeven wordt aan het besturingssysteem.
Dit kan snel gedaan worden door het maken van een opzoekingstabel van 256 elementen per browservenster:
for i := 0 to 255 do
raw := i / 255;
corr := pow (raw, gamma);
table[i] := trunc (0.5 + corr * 255.0)
end
welke dan de noodzaak van transcendente berekening per kleurattribuut voorkomt. Dit is veel minder dan een berekening per pixel.
(Deze appendix is informatief, niet normatief)
Het doel van het werk aan CSS1 is het maken van een eenvoudig stylesheet mechanisme voor HTML documenten. De huidige aanbeveling vormt een balans tussen de eenvoud nodig om stylesheets op het web te realiseren en de druk van auteurs voor rijkere visuele controle. CSS1 biedt:
CSS1 biedt niet:
-
per pixel controle: CSS1 waardeert eenvoud boven controleniveau en hoewel de combinatie van achtergrondfiguren en styled HTML krachtig is, is controle tot het pixel niveau niet mogelijk.
-
auteur controle: de auteur kan het gebruik van een bepaalde sheet niet forceren, enkel voorstellen
-
een layout taal: CSS1 biedt geen kolommen met text-flow, overlappende frames enz.
-
een rijke query taal op de parse tree: CSS1 kan enkel kijken naar voorvader (ancestor) elementen in de parse tree, terwijl andere stylesheet talen (zoals DSSSL [6]) een volledige query taal bieden.
We verwachten uibreidingen van CSS in verschillende richtingen te zien:
-
papier: bettere ondersteuning voor het afdrukken van HTML documenten
-
ondersteuning voor niet-visuele media: er wordt gewerkt aan een lijst van eigenschappen en overeenkomende waarden voor de ondersteuning van spraak en braille output
-
kleurnamen: de momenteel ondersteunde lijst zou kunnen worden uitgebreid
-
lettertypes: nauwkeurigere lettertypespecificatiesystemen worden verwacht om de bestaande CSS1 lettertype-eigenschappen aan te vullen.
-
waarden, eigenschappen: we verwachten dat verkopers uitbreidingen voorstellen aan de set van CSS1 waarden en eigenschappen. Uitbreiding in deze richting is gering voor de aanbeveling, maar kan belangrijk zijn voor de interoperabiliteit tussen verschillende User Agents
-
layout taal: ondersteuning voor twee-dimensionele layout volgens de traditie van desktop publishing pakketten.
-
andere DTD's: CSS1 heeft sommige HTML-specifieke delen (zoals de speciale status van de 'CLASS' en 'ID' attributen) maar zou eenvoudig uitgebreid moeten kunnen worden om te gelden voor andere DTD's.
We verwachten niet dat CSS evolueert in:
(Deze appendix is informatief, niet normatief)
Dit document is een herziene versie van de CSS1 Aanbeveling welke voor het eerst gepubliceerd werd op 17 december 1996. Het Engelstalige document bevat een lijst met spellings- en andere fouten. Deze fouten handelen over het originele Engelstalige document (voor herziening) en hebben weinig tot geen betekenis in de Nederlandse vertaling van de herziene versie. Deze lijst is daarom weggelaten.
We zouden de volgende mensen willen bedanken voor hun deelname in het voorbereiden van deze herziene editie: Komachi Yushi, Steve Byrne, Liam Quinn, Kazuteru Okahashi, Susan Lesch en Tantek Çelik.
Structuur en Organisatie
- Appendix F, welke alle wijzigingen geeft sinds de versie van 17 december 1996 is toegevoegd.
- Een alinea in het status deel is toegevoegd om de lezers te informeren dat dit een herziene versie is.
- De stylesheet is gewijzigd.
- De verwijzing naar een toekomstige HTML specificatie met ondersteuning voor stylesheets is bijgewerkt tot HTML 4.0.
- URL's in the Referenties zijn bijgewerkt en dode links zijn verwijderd.
- De onderliggende HTML opmaak is gecorrigeerd.