| eigenschap |
beschrijving |
mogelijke waarden |
| :before |
pseudo-element: plaatst inhoud voor een element |
p:before { content:"voor" } |
| :after |
pseudo-element: plaatst inhoud na een element |
p:after { content:"na" } |
| content |
stelt de gegenereerde inhoud vast, in samenwerking met de :before en :after pseudo-elementen |
p:after { content:"na" }
normal |
string |
uri |
counter |
attr(identifier) |
open-quote |
close-quote |
no-open-quote |
no-close-quote |
inherit
|
| quotes |
Stelt de haakjes in die je wenst te gebruiken |
string string... |
none |
inherit
|
| counter-reset |
Stelt de waarde van een (of meerdere) aangegeven tellers in op een bepaalde waarde (standaard 0) |
tellernaam waarde... |
none |
inherit
|
| counter-increment |
Stelt de ophoogwaarde voor een (of meerdere) tellers in (standaard 0) |
tellernaam waarde... |
none |
inherit
|
| list-style-type |
Stelt het type in voor lijstopsommingstekens voor elementen met de eigenschap display: list-item |
disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | none | inherit
|
| list-style-image |
Stelt een aangegeven figuur in als lijstopsommingstekens voor elementen met de eigenschap display: list-item |
uri | none | inherit
|
| list-style-position |
Stelt de positie in van de opsommingstekens in een lijst, voor elementen met de eigenschap display: list-item
Standaard: outside |
outside | inside | inherit
|
| list-style |
Verkorte notatie voor lijst-eigenschappen |
list-style: type position image | inherit
|
Werken met tellers
Hier een voorbeeld voor het werken met counters, voorlopig enkel ondersteund door Opera.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Cursus CSS - IVO Brugge</TITLE>
<style type="text/css">
H1:before { content: "Hoofdstuk " counter(hteller,upper-roman) ": "}
P:before {content: counter(hteller, upper-roman) ". " counter(mijnteller) ". "}
P {counter-increment: mijnteller}
H1 {
counter-increment:hteller;
counter-reset: mijnteller;
}
</style>
</HEAD>
<BODY>
<h1>Een hoofding </h1>
<p>Een alinea met wat tekst</p>
<p>Nog een alinea
<h1>Nog een hoofding </h1>
<p>Nog een alinea
Gewone doorlopende tekst
</BODY>
</HTML>
Werken met lijsten
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Cursus CSS - IVO Brugge</TITLE>
<style type="text/css">
ol {list-style-type:lower-roman}
ol.figuur {list-style-image: url("../../images/plus.jpg")}
ol.compact {list-style-position:inside}
</style>
</HEAD>
<BODY>
<div style="width:150px">
<ol>
<li>eerste item
<li>tweede item
<li>derde item
</ol>
<ol class="figuur">
<li>eerste item met een beetje tekst
<li>tweede item met een beetje tekst
<li>derde item met een beetje tekst
</ol>
<ol class="compact figuur">
<li>eerste item met een beetje tekst
<li>tweede item met een beetje tekst
<li>derde item met een beetje tekst
</ol>
</div>
</BODY>
</HTML>
Geavanceerd voorbeeld: werken met lijsten - uitklapmenu
In volgende voorbeelden wordt gebruik gemaakt van Javascript in combinatie met CSS (
DHTML). Maak je er voorlopig geen zorgen over, met deze voorbeelden wil ik je enkel het belang van CSS laten inzien om dynamische webpagina's te maken.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Cursus CSS - IVO Brugge</TITLE>
<style type="text/css">
.hmenu {
display:list-item;
list-style-type:none;
border:solid 1px;
margin:0px;
width:150px;
background:#FFCC66;
cursor:hand;
}
.smenu {display:none }
.smenuitem{
display:list-item;
list-style-type:disc;
margin-left:50px;
width:100px;
border:solid 1px;
background:#FFFFCC;
}
</style>
<script language="JavaScript" type="text/javascript">
<!--
function toonverberg(item){
if (document.getElementById){
item = document.getElementById(item)
if(item.style.display == 'block'){
item.style.display = 'none'
} else {
item.style.display = 'block'
}
}
}
-->
</script>
</HEAD>
<BODY>
<div class="hmenu" onclick="toonverberg('s1')">Menu1</div>
<div id="s1" class="smenu">
<div class="smenuitem">submenu1</div>
<div class="smenuitem">submenu2</div>
</div>
<div class="hmenu" onclick="toonverberg('s2')">Menu2</div>
<div id="s2" class="smenu">
<div class="smenuitem">submenu1</div>
<div class="smenuitem">submenu2</div>
</div>
</BODY>
</HTML>
In principe kan je dit voorbeeld perfect uitvoeren zonder lijstitems te gebruiken.
Geeavanceerd voorbeeld 2 (enkel IE)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Cursus CSS - IVO Brugge</TITLE>
<style type="text/css">
.hmenu {
display:list-item;
list-style-image: url("../../images/map.gif");
margin:20px;
width:150px;
cursor:hand;
}
.smenu {display:none }
.smenuitem{
display:list-item;
list-style-image:url("../../images/pagina.gif");
margin-left:50px;
width:100px;
}
</style>
<script language="JavaScript" type="text/javascript">
<!--
function wisselmenu(){
if (document.getElementById && document.all){
var hmenu = document.getElementById(event.srcElement.id)
var srcIndex = event.srcElement.sourceIndex
var item = document.all[srcIndex+1]
if(item.style.display == 'block'){
item.style.display = 'none'
hmenu.style.listStyleImage ="url(../../images/map.gif)"
} else {
item.style.display = 'block'
hmenu.style.listStyleImage ="url(../../images/mapopen.gif)"
}
}
}
-->
</script>
</HEAD>
<BODY>
<div id="h1" class="hmenu" onclick="wisselmenu()">Menu1</div>
<div id="s1" class="smenu">
<div class="smenuitem">submenu1</div>
<div class="smenuitem">submenu2</div>
</div>
<div id="h2" class="hmenu" onclick="wisselmenu()">Menu2</div>
<div id="s2" class="smenu">
<div class="smenuitem">submenu1</div>
<div class="smenuitem">submenu2</div>
<div class="smenuitem">submenu3</div>
</div>
</BODY>
</HTML>
| eigenschap |
beschrijving |
mogelijke waarden |
|
position
|
Bepaalt de manier van positioneren van een element op een pagina. Standaard: static
De plaats van het element bepaal je met de eigenschappen top, bottom, left en right
Bij absolute, relative en fixed kunnen elementen elkaar bedekken of overlappen ! |
absolute
De positie van het element wordt bepaald ten opzichte van het de linkerbovenhoek van het dichtsbijgelegen ancestor element dat als position-waarde niet de waarde static heeft.
Is zo'n element niet aanwezig, dan wordt de postitie bepaald ten opzichte van de box waarin de volledige pagina zich bevindt.
Deze eigenschap bepaalt ook de positie van eventuele descendant-elementen.
relative
De positie van het element wordt bepaald ten opzichte van de normale plaats van het element.
fixed
De positie wordt steeds bepaald ten opzichte van het document (niet ten opzichte van een ancestor-element).
static
Positie zoals normaal in HTML, vormt geen referentiebox voor de positionering van descendant-elementen, behalve het BODY-element
|
top
bottom
left
right
|
Bepalen de plaats van een element.
Kan worden toegepast op elementen met position absolute, relative of fixed.
Bij absolute positionering nemen deze eigenschappen de plaats in van de margin-eigenschappen (absolute-gepositioneerde elementen hebben dus geen margin).
Deze eigenschappen worden standaard niet geërfd.
Standaard: auto
|
afmeting | auto | inherit
|
visibility
|
Het al of niet zichtbaar zijn van een element.
Standaard: inherit
|
visible | hidden | inherit
|
overflow
|
Weergave van inhoud die niet binnen de afmetingen van een element past. Is toepasbaar op elementen met position:absolute
Standaard: visible
|
visible | hidden | scroll | auto | inherit
|
clip
|
Aangeven welk deel van een element zichtbaar moet zijn.
Standaard: auto
|
auto
rect(top right bottom left), waarbij 4 afmetingen worden opgegeven
inherit
|
z-index
|
Bepaalt welk elementen bovenaan wordt gepositioneerd bij overlappende elementen.
Standaard: auto
Je kan de z-as opvatten als de as loodrecht op het beeldscherm. Een element met een hogere z-index bedekt een element met een lagere z-index.
Toepasbaar op elementen met een position-eigenschap absolute of relative
Normaal worden elementen bedekt door elementen die onder het element in het document voorkomen |
waarde: geheel getal (pos. of neg.)
auto
inherit
|
Positionering: absolute, relative, top, bottom, left, right
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Cursus CSS - IVO Brugge</TITLE>
<style type="text/css">
h1 {
position:absolute;
left:40px;
top:30px;
width:200px;
height:50px;
border:solid 1px red;
background:yellow;
}
.relatief {
position:relative;
bottom:10px;
left:50%;
background:green;
width:120px;
}
h2 {
position:absolute;
left:100px;
top:300px;
width:300px;
height:250px;
border:solid 1px red;
background:lime;
}
</style>
</HEAD>
<BODY>
<p>Deze alinea heeft geen eigenschappen voor positionering en wordt dus static,
heeft de plaats die normaal in een HTML-document zou worden gekregen.
<div class="relatief">relatief tov body: geen andere ancestor</div>
<h1>Absoluut gepositioneerde H1
<div class="relatief">relatief tov h1</div>
</h1>
</BODY>
</HTML>
Visibility
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Cursus CSS - IVO Brugge</TITLE>
<style type="text/css">
h1 {
width:600px;
height:50px;
border:solid 1px red;
background:yellow;
}
.onzichtbaar {
visibility:hidden
}
</style>
</HEAD>
<BODY>
<h1>H1 met zichtbaar stuk tekst erin</h1>
<h1>H1 met <span class="onzichtbaar">onzichtbaar stuk</span> tekst erin</h1>
</BODY>
</HTML>
clip
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Cursus CSS - IVO Brugge</TITLE>
<style type="text/css">
.f1 {
position:absolute;
clip:rect(15px 100px 70px 20px);
top:150px;
}
</style>
</HEAD>
<BODY>
<img src="../../images/geiten.jpg" width="134" height="101" alt="" border="0">
<p>
<div class="f1">
<img src="../../images/geiten.jpg" width="134" height="101" alt="" border="0">
</div>
</BODY>
</HTML>
z-index
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Cursus CSS - IVO Brugge</TITLE>
<style type="text/css">
.tekstboven {
position:absolute;
top:220px;
left:20px;
z-index:3;
background:yellow;
width:300px;
}
.tekstonder {
position:absolute;
top:170px;
left:20px;
z-index:1;
background:yellow;
width:300px;
}
.figuur {
position:absolute;
top:150px;
left:40px;
z-index:2;
}
</style>
</HEAD>
<BODY>
<div class="tekstonder">Een beetje tekst om de z-index te illustreren</div>
<div class="tekstboven">Een beetje tekst om de z-index te illustreren</div>
<div class="figuur">
<img src="../../images/geiten.jpg" width="134" height="101" alt="" border="0">
</div>
</BODY>
</HTML>
| eigenschap |
beschrijving |
mogelijke waarden |
|
cursor
|
Bepaalt het type muisaanwijzer. Standaard: auto
|
auto: afhankelijk van de User Agent.
crosshair: kruis
default: Standaardcursor: dikwijls een pijl
pointer: zoals voor een hyperlink
move: iets moet bewogen worden
e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize: sleepbewegen aan de kant aangeduid met de windrichting.
text: tekst, meestal een I-vorm
wait:
Er moet gewacht worden, meestal een zandloper (hourglass)
progress:
Programma is bezig, maar je kan verder werken
help:
er is help-informatie beschikbaar
<uri> : locatie van cursor-file
|
|
outline-width
|
Bepaalt de dikte van de omlijning Standaard: medium
|
afmeting |
thin | medium | thick | inherit
|
|
outline-style
|
Bepaalt de stijl van de omlijning Standaard: none
|
none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
|
|
outline-color
|
Bepaalt de kleur van de omlijning Standaard: invert indien ondersteund, anders: waarde van de color-eigenschap.
|
kleur | invert | inherit
|
|
outline
|
Afgekorte notatie voor het instellen van de style, width en color van de omlijning
|
|
cursor
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Cursus CSS - IVO Brugge</TITLE>
<style type="text/css">
div {
margin-top:20px;
background:yellow;
width:200px;
border:solid 1px red;
}
</style>
</HEAD>
<BODY>
<div style="cursor:crosshair">kruis</div>
<div style="cursor:pointer">hyperlink</div>
<div style="cursor:move">bewegen</div>
<div style="cursor:sw-resize">zuid-west formaat</div>
<div style="cursor:text">Tekst</div>
<div style="cursor:wait">wachten</div>
<div style="cursor:progress">bezig...</div>
<div style="cursor:help">help</div>
<div style="cursor:url(mijncursor.ANI)">Aangepast</div>
</BODY>
</HTML>
Outline
Dit wordt voorlopig enkel ondersteund door Opera.
Een omlijning werkt qua uitzicht als een rand (border), maar met volgende verschillen:
- Omlijningen nemen geen ruimte in, ze worden als het ware over de box getekend. Ze overlappen steeds andere inhoud (marge, border, inhoud).
- Omlijningen hoeven geen rechthoeken te zijn
- Kunnen gecombineerd worden met pseudo-klassen focus en active
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Cursus CSS - IVO Brugge</TITLE>
<style type="text/css">
div {
outline-style: ridge;
outline-width: medium;
outline-color: blue;
}
</style>
</HEAD>
<BODY>
<div>Hallo, ik heb een omlijning</div>
</BODY>
</HTML>
