Specificaties Basisbegrippen Relaties tussen elementen Overerving DIV en SPAN-elementen
Specificaties CSS heeft al een behoorlijke evolutie doorgemaakt: ?
? ?
CSS level 3: onder ontwikkeling: bevat alles van CSS 2.1 met daarbij uitbreidingen met nieuwe selectors, opvallende randen en achtergronden, vertikale tekst, gebruikersinteractie, spraak en nog veel meer. CSS level 2 revision 1: bevat alles van CSS 1 met daarbij uitbreidingen voor absolute positionering, automatische nummering, pagina-eindes, ... CSS level 1: bevat mogelijkheden voor lettertypes, kleuren, marges, ... die bijna elke CSS-pagina nodig heeft.
Geschiedenis van CSS bij het W3C. De huidige standaardversie voor CSS is CSS 2.1, wij behandelen deze dan ook verder in de cursus.
Basisbegrippen Cascading Style Sheets (CSS) is een manier om stijl (lettertypes, kleuren, witruimtes, ...) aan webdocumenten toe te voegen. Om deze cursus goed te kunnen volgen is het nodig eerst de cursus HTML onder de knie te hebben. CSS vomen in de eeste plaats een manier om inhoud en opmaak van een webdocument te scheiden. Het is de bedoeling de CSS-opmaak van de elementen op een webpagina op een centrale plaats aan te geven, en de opmaakeigenschappen dan toe te passen op de aanwezige HTML-elementen.
CSS in HTML inbedden CSS kan als volgt gebruikt worden op een webpagina: ?
ICT
inline stijldefinitie: In een HTML-tag neem je het attribuut style op met daarbinnen een stijdeclaratie.
CSS basiscursus
1
Een dergelijke stijl geldt enkel voor het element waarbinnen deze stijldefinitie is opgenomen. style="stijldeclaratie" ?
stijlblok op de huidige webpagina: Nu kan je de gebruikte stijlen op de huidige webpagina centraal in een stijlblok beheren, stijlen die je hier definiëert kunnen meerdere keren gebruikt worden. Een stijlblok plaats je in de hoofding van de webpagina. ? ?
?
<STYLE type="text/css"> stijlregel(s)
extern stijblad: Stijlen kan je ook vastleggen in een extern bestand met extensie .css. Zo kan je stijlen vastleggen die je gebruikt over een volledige website. Op een pagina die deze stijlen gebruikt plaatst je dan in de hoofding een regel code die de browser duidelijk maakt dat het stijlbestand moet worden geladen: ?
Stijldeclaratie Een stijldeclaratie bestaat uit de correcte CSS-naam van een eigenschap gevolgd door een dubbele-punt en de waarde voor deze eigenschap. eigenschap-waarde paren worden gescheiden door een puntkomma. eigenschap: waarde; ...
Stijlregels In een stijlblok of in een extern stijlbestand worden eigenschappen aangegeven met stijlregels. In een stijlregel geef je eerst een selector en daarna tussen accolades een stijldeclaratie op. selector {stijldeclaratie}
Selectoren komen nog uitgebreid aan bod, deze kunnen verwijzen naar een of meerder tags, naar attributen, klassen of id's. Stijlblokken kunnen ook @-regels en commentaar ( /* ... */ ) bevatten.
Werken met inline stijlen Je kan met het HTML-attribuut style in zowat elke tag gebruik maken van CSS:
Gebruik van inline stijlen
Inline stijlen zijn een eerste manier om CSS te gebruiken.
ICT
CSS basiscursus
2
Werken met een stijlblok Een stijlblok gebruik je om stijldeclaraties vast te leggen voor de ganse webpagina. Een stijlblok plaats je best in de hoofding van de webpagina. <TITLE>Cursus CSS - IVO Brugge <style type="text/css"> h1 { color:red } p { color:green }
Gebruik van een stijlblok
Inline stijlen zijn een eerste manier om CSS te gebruiken.
Werken met een extern stijlblad inl3.css h1 { color:red } p { color:green } inl3.html <TITLE>Cursus CSS - IVO Brugge
Gebruik van extern stijlblad
Inline stijlen zijn een eerste manier om CSS te gebruiken.
Relaties tussen elementen Om een goed inzicht te verkrijgen in CSS is het heel belangrijk in te zien hoe elementen op een webdocumenten zich tot elkaar kunnen verhouden. Het is duidelijkst dit te bekijken aan de hand van een voorbeeld:
ICT
CSS basiscursus
3
<TITLE>Mijn webpagina
Mijn webpagina
Welkom op mijn webpagina! Mijn favoriete bands zijn:
Ozark Henry
Novastar
Admiral Freebee
Boomstructuur:
Uit de boomstructuur kan je afleiden dat bepaalde elementen omvat worden door andere elementen, dat bepaalde elementen zich op hetzelfde niveau bevinden als andere elementen en dat bepaalde elementen omvat worden door andere elementen. We kunnen over bovenstaande pagina het volgende zeggen: ? ? ? ? ? ? ?
De LI-elementen zijn children van het UL-elementen Het UL-element is parent van de LI-elementen Het body-element is een ancestor van het H1-element, het P-element, het ULelement en de LI-elementen P, H1, UL en LI en BODY zijn descendants van het HTML-element. De LI-elementen zijn sibling-elementen. P is een following-siblling van H1 ...
Uit dit voorbeeld komen we tot volgende afspraken: relatie
beschrijving
parent (ouder)
Bovenliggende element in de boomstructuur: elk element heeft exact één parent, behalve het root-object dat er geen heeft.
child (kind)
A is een child van B als en alleen als B de parent is van A
ICT
CSS basiscursus
4
descendant (afstammeling)
A is een descendant van B als B de parent is van A of A is child van een element C dat een descendant is van B.
ancestor (voorouder)
A is een ancestor van B als B en alleen als B een descendant is van A.
A is een sibling van B als en alleen als A en B hetzelfde parent-element hebben. sibling (gelijke) Preceding sibling: komt voor een element uit de boomstructuur Following sibling: komt na een element uit de boomstructuur preceding element (voorafgaand)
A is preceding B als A een ancestor is van B of als A een preceding sibling is van B.
following element (voorafgaand)
A is following B als B is preceding A.
Overerving Je weet dat je op drie niveaus stijlen kan definiëren: in een extern stijlblad, in een stijlblok en in het style-attribuut van een element. Je kan op elk van die niveaus een stijl kunnen definiëren voor hetzelfde element (h1, h2, p, ...). De concrete opmaak wordt dan als volgt opgebouwd: 1. Opmaak door de browser gedefiniëd 2. Opmaak in stijlregels (in stijlblokken of extern stijlbestanden), naargelang de invoegpositie in het document, de door de browser vooropgestelde opmaak wordt overgenomen, de opmaak in eerdere stijlregels wordt steeds verder overgenomen. 3. Opmaak gedefiniëerd in het style-attribuut Het overnemen van opmaakeigenschappen uit vorige stijlregels wordt overerving genoemd, vandaar de term Cascading Style Sheets. Vaak worden ook eigenschappen overgeërfd van ancestor-elementen, daar dit niet voor alle eigenschappen het geval is kan je dit specifiek aanduiden met het sleutelwoord inherit.
DIV en SPAN-elementen ICT
CSS basiscursus
5
Je kan style sheets gebruiken door stijlen aan HTML-tags te koppelen. Daar je niet steeds gebruik zal willen maken van hoofdingen, alinea's, font-tags bestaan er twee tags die enkel tot doel hebben stijldefinities te gebruiken. Het blok-element hiervoor is DIV Het inline-element is SPAN Deze tags zullen in het verdere verloop van de cursus veelvuldig gebruikt worden. Het verschil tussen blok- en inline-elementen komt ook nog uitvoerig aan de orde.
ICT
CSS basiscursus
6
CSS 2.1: selectors ?
? ? ? ? ?
ELEMENT-selectors 1. Type selectors 2. Descendant selectors 3. Child selectors 4. Adjacent sibling selector 5. Universele selector 6. Overzicht element-selectors ATTRIBUUT-selectors Class selectors Id selectors Pseudo-element selectors Pseudo-class selectors
Type selectors Met een type-selector kan je ervoor zorgen dat elk aangegeven element dat voorkomt in een document wordt opgemaakt.
Enkelvoudige type selectors <TITLE>Cursus CSS - IVO Brugge <style type="text/css"> h1 { color:red } p { color:green }
Type-selectors
Werken met type selectors
Nog een hoofding niveau 1
Nog een alinea
Groeperen van type selectors Je kan stijldeclaraties ook toepassen voor meerdere elementen tegelijk door selectors op te geven gescheiden door een komma. <TITLE>Cursus CSS - IVO Brugge
Hier geven we eerst een algemene definitie voor H1, H2 en H3 waarna we deze drie elementen nog afzonderlijk verder aanvullen.
Descendant selectors Bij een descendant selector wordt de stijldeclaratie enkel toegepast wanneer het element een descendant is van een of meerdere andere elementen. Dit doe je door de descendant te scheiden van de ancestor met behulp van een spatie. <TITLE>Cursus CSS - IVO Brugge <style type="text/css"> P I {color:red}
De schuine tekst is niet rood
Deze schuine tekst is wel rood
Child selectors Met child selectors ga je de descendant selector vernauwen: enkel children worden opgemaakt, geen verderliggende descendants.
ICT
CSS basiscursus
8
<TITLE>Cursus CSS - IVO Brugge <style type="text/css"> P > I {color:red}
De schuine tekst is niet rood
Deze schuine tekst is wel rood
Deze vette en schuine tekst is NIET rood
Child selectors worden niet ondersteund in IE6.
Adjacent sibling selector Een adjacent sibling selector gebruik je om een element op te maken dat onmiddelijk een ander element op hetzelfde niveau (sibling) volgt. <TITLE>Cursus CSS - IVO Brugge <style type="text/css"> H1 + H2 {margin-top:-5mm}
Hoofding 1
Alinea
Hoofding 2 na alinea
Hoofding 1
Hoofding 2 na hoofding 1
Een H2 die onmiddellijk na een H1 komt in de boomstructuur van de pagina zal 5mm minder bovenmarge hebben dan een gewone H2. Adjacent sibling selectors worden niet ondersteund in IE6.
Universele selector De Universele selector kan je gebruiken wanneer je wenst te verwijzen naar alle elementen. De Universele selector wordt aangeduid met een asterisk (*). <TITLE>Cursus CSS - IVO Brugge <style type="text/css">
ICT
CSS basiscursus
9
* {color:brown;}
Hoofding 1
Alinea
Hoofding 2
De universele selector wordt veel gebruikt in combinatie met class- en id-selectoren (zie later).
Overzicht element-selectors notatie
beschrijving
Element {stijldeclaratie} Type-selector: maak alle aangegeven elementen op
Element1, Element2,... {stijldeclaratie}
Groeperen van type-selectors: maak alle aangegeven elementen op
Element1 Element2 {stijldeclaratie}
Descendant-selector: maak alle aangegeven element2 op als die een descendant zijn van Element1
Element1 > Element2 {stijldeclaratie}
Child-selector: maak alle aangegeven element2 op als die een child zijn van Element1
Element1 + Element2 {stijldeclaratie}
Adjacent sibling-selector: maak alle aangegeven element2 op als die een adjacent sibling (opeenvolgende gelijke) zijn van Element1
* {stijldeclaratie}
Universele selector: beïnvloedt alle elementen
Attribuut-selectors ICT
CSS basiscursus
10
Met de invoering van CSS 2 werd het mogelijk stijlen te gebruiken wanneer aan bepaalde voorwaarden voor de element-attributen is voldaan. IE6 ondersteunt geen enkele van deze mogelijkheden.
notatie
omschrijving
[attr] {stijldeclaratie}
Het attribuut moet aanwezig zijn
Element[attr] {stijldeclaratie}
Het attribuut moet aanwezig zijn in het aangegeven element
[attr]=waarde {stijldeclaratie}
Het attribuut moet een specifieke waarde hebben
Element[attr]=waarde {stijldeclaratie}
Het attribuut moet een specifieke waarde hebben in het aangegeven element
Wanneer het attribuut een tekenreeks kan bevatten met door spaties gescheiden woorden (zoals alt en title), dan plaats je een tilde (~) voor het gelijkheidsteken.
Class selectors Wanneer een element het attribuut class bevat kan je aan dit element een stijl koppelen door gebruik te maken van een class-selector. Kenmerkend in de stijlregel is een punt (.) voor de naam van de class. Classnamen ken je zelf toe en zijn in principe hoofdlettergevoelig. Bepaalde browsers trekken zich van dit laatste echter niks aan. notatie
*.classnaam {stijdeclaratie}
ICT
beschrijving
universele class selector: alle elementen met de aangegeven classnaam als waarde voor het attribuut class worden opgemaakt.
CSS basiscursus
11
Element.classnaam {stijdeclaratie}
universele class selector: alle aangegven elementen met de aangegeven classnaam als waarde voor het attribuut class worden opgemaakt.
.classnaam1.classnaam2 {stijdeclaratie}
Het element moet de classnaam1 en classnaam2 in het attribuut class staan hebben. Deze classnamen worden in het attribuut class gescheiden door een spatie
Element.classnaam1.classnaam2 {stijdeclaratie}
Het aangegeven element moet de classnaam1 en classnaam2 in het attribuut class staan hebben.
Id selectors Wanneer een element het attribuut id bevat kan je aan dit element een stijl koppelen door gebruik te maken van een id-selector. Kenmerkend in de stijlregel is een spoorwegteken (#) voor de naam van de id. Idnamen ken je zelf toe en zijn in principe hoofdlettergevoelig. Bepaalde browsers trekken zich van dit laatste echter niks aan.
ICT
CSS basiscursus
12
Het grote onderscheid met het gebruik van het attribuut class is dat voor het attribuut id slechts 1 element op de pagina aanwezig mag zijn met een specifieke id-waarde !
notatie
beschrijving
*#idwaarde
Universele id-selector: om het even welk element de aangegeven idwaarde heeft wordt opgemaakt. Opgepast: het specifieke id mag slechts 1 keer voorkomen
#idwaarde
Universele id-selector: om het even welk element de aangegeven idwaarde heeft wordt opgemaakt. Opgepast: het specifieke id mag slechts 1 keer voorkomen
Universele id-selector: het aangegven element dat de aangegeven Element#idwaarde idwaarde heeft wordt opgemaakt. Opgepast: het specifieke id mag slechts 1 keer voorkomen
De id-selector heeft voorang op de class selector. <TITLE>Cursus CSS - IVO Brugge <style type="text/css"> H1 {color:red} #hoofdstuk1 { background:yellow;} p#test {font-size:14pt;} p.klein {font-size:10pt; }
Hoofdstuk 1
Alinea
Hoofdstuk2
Kleine alinea
Testalinea class klein
Pseudo-element selectors
ICT
CSS basiscursus
13
Pseudo-element selectors staan je toe opmaak te definiëren voor bijvoorbeeld de eerste letter of de eerste regel van een bepaald element. Voor die eerste letter of regel bestaan geen specifiek elementen, maar je kan ze toch benaderen vanuit CSS, vandaar de naam pseudo-elementen. notatie
beschrijving
Element:first-line
Maakt de eerste regel binnen een element op
Element:firstletter
Maakt de eerste letter binnen een element op
Element:before
Onmiddellijk voor een element bepaalde inhoud invoegen (niet ondersteund in IE6)
Element:after
Onmiddellijk na een element bepaalde inhoud invoegen (niet ondersteund in IE6)
Alinea met een beetje tekst om pseudo-elementen te demonstreren
Nog een alinea met een beetje tekst om pseudo-elementen te demonstreren
Een testhoofding
ICT
CSS basiscursus
14
Pseudo-class selectors Een pseudo-class selector maakt het mogelijk stijlen te koppelen aan een element, maar niet op basis van een naam of attribuutwaarde. Je kan met behulp van pseudo-class selectors stijlen koppelen aan elementen naargelang acties die de gebruiker onderneemt. notatie
beschrijving
A:link
Opmaak van een niet bezochte hyperlink
A:visited
Opmaak van een bezochte hyperlink
A:active
Opmaak van een actieve hyperlink
Element:hover
Opmaak van een element wanneer de gebruiker over het element beweegt met de muisaanwijzer. IE6 ondersteunt dit enkel voor A-elementen
Element:focus
Opmaak van een element wanneer het element het actieve element wordt. IE6 ondersteunt dit niet
Element:first-child
Opmaak van het eerste child van een element. IE6 ondersteunt dit niet
:lang(taalcode)
Opmaak volgens een speciefieke taalcode. Wordt gebruikt in combinatie met een attribuut-selector voor het attribuut lang. Element:lang(taalcode) IE6 ondersteunt dit niet <TITLE>Cursus CSS - IVO Brugge <style type="text/css"> a:link { color:red; } a:visited { color:brown; } a:active { color:black; }
@import Een @import-regel kan worden gebruikt om binnen een stijlblok of een extern stijlblad stijlen op te nemen uit een ander extern stijlblad. Deze regel wordt niet ondersteund door oudere browsers en wordt dus ook vaak gebruikt wanneer stijlbladen door de oudere browsers niet mogen opgenomen worden.
notatie
beschrijving
@import url("uri")
Neem het stijlbestand op waarnaar wordt verwezen door "uri"
@import "uri"
Neem het stijlbestand op waarnaar wordt verwezen door "uri"
Neem het stijlbestand op waarnaar wordt verwezen door "uri" @import url("uri") media voor de media aangegeven in 'media'. Niet ondersteund door IE6.
@import "uri" media
Neem het stijlbestand op waarnaar wordt verwezen door "uri" voor de media aangegeven in 'media'. Niet ondersteund door IE6.
De aanduiding media wil zeggen dat je hier een lijst kan opnemen van media-types die de stijl moeten gebruiken: ? ? ? ? ?
ICT
all: voor weergave door alle apparaten screen: voor weergave op een computerscherm print: voor weergave in pagina-opmaak bij het afdrukken of als print-preview aural: voor weergave door een spraaksynthesizer braille: voor weergave door een brailleleesapparaat) CSS basiscursus
18
? ? ? ? ?
embossed: voor weergave in pagina-opmaak door een brailleprinter handheld: voor weergave door een apparaat met een klein beeldscherm projection: voor weergave door een projectieapparaat tty: voor weergave door een apparaat dat alleen tekst weergeeft in een vast karaktergrid tv: voor weergave op een televisietoestel
<TITLE>Cursus CSS - IVO Brugge <style type="text/css"> @import url("regels1.css") print; p { color:green }
Gebruik van extern stijlblad
Inline stijlen zijn een eerste manier om CSS te gebruiken.
@media @media maakt het mogelijk binnen een stijlblok of een exteren stijlbestand stijlregels op te bouwen specifiek voor een bepaalde media-types.
notatie
beschrijving
@media media {stijlregels} Pas de stijlregels toe voor de aangegeven media
De aanduiding media wil zeggen dat je hier een lijst kan opnemen van media-types die de stijl moeten gebruiken: ? ? ? ? ?
ICT
all: voor weergave door alle apparaten screen: voor weergave op een computerscherm print: voor weergave in pagina-opmaak bij het afdrukken of als print-preview aural: voor weergave door een spraaksynthesizer braille: voor weergave door een brailleleesapparaat) CSS basiscursus
19
? ? ? ? ?
embossed: voor weergave in pagina-opmaak door een brailleprinter handheld: voor weergave door een apparaat met een klein beeldscherm projection: voor weergave door een projectieapparaat tty: voor weergave door een apparaat dat alleen tekst weergeeft in een vast karaktergrid tv: voor weergave op een televisietoestel
<TITLE>Cursus CSS - IVO Brugge <style type="text/css"> @media print{ p { color:green } } @media screen{ p { color:blue } }
Media
Op het scherm ben ik blauw, bij een afdruk ben ik groen
@page @page is een stijlregel die kan worden gebruikt voor de pagina-opmaak bij het afdrukken. Deze eigenschap wordt niet ondersteund in IE6. notatie
beschrijving
@page {stijlregels}
Pas de stijlregels toe voor alle pagina's
@page:left {stijlregels}
Pas de stijlregels toe op alle linkerpagina's, voor ons: even paginanummers
@page:right {stijlregels}
Pas de stijlregels toe op alle rechterpagina's, voor ons: oneven paginanummers
ICT
CSS basiscursus
20
@page:first {stijlregels}
Pas de stijlregels toe op de eerste pagina
Voorlopig enkel ondersteund door Opera. <TITLE>Cursus CSS - IVO Brugge <style type="text/css"> @page { margin-left:5cm }
CSS 2.1: positionering van elementen 1. indeling van de elementen 2. De box
indeling van de elementen De elementen die je op een webpagina kan plaatsen kan je onderverdelen in een aantal categorieën: categorie
beschrijving
voorbeelden
Blokelementen
P, H1, H2, DIV, Deze elementen worden vooragegaan BLOCKQUOTE, PRE, en gevolgd door een overgang naar een TABLE, UL, OL, LI, BR, HR, nieuwe regel FORM, ...
Inlineelementen
Kunnen op dezelfde regel staan als andere elementen
B, I, U, FONT, SPAN, EM, BIG, A, IMG, ...
Verborgenelementen
Worden niet getoond in het documentvenster
LINK, STYLE, SCRIPT, TITLE, ...
inline blokelement
Wordt als element gebruikt als een inline element maar kan inhoudelijk gevuld worden als een blok-element sinds CSS 2.1
BUTTON, INPUT, OBJECT, TEXTAREA, SELECT
De box Elk element op een webpagina kan in feite worden voorgesteld als een doos met een bepaalde inhoud, we spreken van de box.
Tweede element, iets langer om wrapping te demonstreren
Opmerkingen: ? ? ?
? ?
?
voor onder elkaar gepositioneerde blok-elementen schuiven de vertikale margins in elkaar. voor inline elementen kan de width eigenschap niet worden ingesteld Voor de browsers lager dan IE6 en NS4 worden width en height verkeerd geïmplementeerd en vormen deze de totale breedte en hoogte van de box in plaats van de breedte en hoogte van de inhoud. blok-elementen worden standaard vertikaal onder elkaar geplaatst inline elementen worden standaard naast elkaar gepositioneerd. Als de inlinebox niet op een regel past wordt die gesplitst in meerdere boxen op meerdere regels. Aaneengesloten tekst die niet in een inline box wordt geplaatst door de auteur wordt in een anonieme box geplaatst
<span class="roze">Een stukje doorlopende tekst met een roze achtergrond<span class="groen">Tekst op een groene achtergrondIk zit in een anonieme inline-box.
ICT
CSS basiscursus
25
CSS 2.1: kleuren en afmetingen 1. Kleuren 2. Afmetingen
Kleuren Wil je op een webpagina gebruik maken van kleuren, dan heb je een aantal mogelijkheden:
notatie
beschrijving
voorbeeld
sleutelwoord
Engelse naam voor het kleur (slechts red, green, blue, black, white, een beperkt aantal bruikbaar) purple, orange, yellow, ...
#rgb
Aandeel rood - groen - blauw met drie hexaddecimale cijfers, voorafgegeaan door een spoorwegteken
#fff (= wit) #f00 (= rood)
#rrggbb
Aandeel rood - groen - blauw met zes hexaddecimale cijfers, voorafgegeaan door een spoorwegteken
#ffffff (= wit) #ff0000 (= rood)
rgb(d,d,d)
Aandeel rood - groen - blauw met drie decimale getallen van 0 - 255.
rgb(255,255,255) (= wit) rgb(255,0,0) (= rood)
rgb(p%,p%,p%)
Aandeel rood - groen - blauw met drie percentages.
Op een webpagina moet je vaak afmetingen aan elementen toekennen, lettergroottes, kolombreedtes, ... Dit doe je door een getalwaarde in te geven gevolgd door een eenheid. Volgende eenheden kunnen gebruikt worden:
eenheid
beschrijving
em
relatief ten opzichte van de font-size van het element (als em gebruikt wordt voor de eigenschap font-size: relatief ten opzichte van de font-size van het parent element)
ex
relatief ten opzichte van de x-hoogte van het element - de x hoogte is de hoogte van de letter x in dat lettertype
px
pixels, afhankelijk van het toestel
in
inch - 1 inch = 2.54 cm
cm
centimeters
mm
millimeters
pt
points - 1 point = 1/72 inch
pc
pica - 1 pica = 12 points
%
percentage
ICT
CSS basiscursus
27
CSS 2.1: overzicht eigenschappen 1. Overzicht CSS 2.1 eigenschappen 2. Kleur en achtergrond 3. Font: lettertype 4. Tekst 5. Gegenereerde inhoud, automatische nummering en lijsten 6. Marges 7. Padding 8. Rand 9. Afmeting 10. Regel 11. Indeling 12. Zwevende elementen 13. Positioneren 14. User interface 15. Nog te verwerken: CSS-tables
Overzicht CSS 2.1 - eigenschappen Categorie
Eigenschappen
Kleur en achtergrond
color background-color background-image background-repeat
Stelt de waarde van een (of meerdere) aangegeven tellers in op een bepaalde waarde (standaard 0)
tellernaam waarde... | none | inherit
counterincrement
Stelt de ophoogwaarde voor tellernaam waarde... | none | inherit een (of meerdere) tellers in (standaard 0)
list-style-type
Stelt het type in voor lijstopsommingstekens voor elementen met de eigenschap display: list-item
list-styleimage
Stelt een aangegeven figuur in als lijstopsommingstekens uri | none | inherit voor elementen met de eigenschap display: list-item
list-styleposition
Stelt de positie in van de opsommingstekens in een lijst, voor outside | inside | inherit elementen met de eigenschap display: list-item Standaard: outside
list-style
ICT
Verkorte notatie voor
disc | circle | square | decimal | decimalleading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | none | inherit
list-style: type position image | inherit
CSS basiscursus
35
lijst-eigenschappen
Werken met tellers Hier een voorbeeld voor het werken met counters, voorlopig enkel ondersteund door Opera. <TITLE>Cursus CSS - IVO Brugge <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; }
Een hoofding
Een alinea met wat tekst
Nog een alinea
Nog een hoofding
Nog een alinea Gewone doorlopende tekst
Werken met lijsten
<TITLE>Cursus CSS - IVO Brugge <style type="text/css"> ol {list-style-type:lower-roman} ol.figuur {list-style-image: url("../../images/plus.jpg")}
ICT
CSS basiscursus
36
ol.compact {list-style-position:inside}
eerste item
tweede item
derde item
eerste item met een beetje tekst
tweede item met een beetje tekst
derde item met een beetje tekst
eerste item met een beetje tekst
tweede item met een beetje tekst
derde item met een beetje tekst
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. <TITLE>Cursus CSS - IVO Brugge <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; } <script
Menu1
submenu1
submenu2
Menu2
submenu1
submenu2
In principe kan je dit voorbeeld perfect uitvoeren zonder lijstitems te gebruiken.
Stelt de breedte van een blok-element afmeting | auto in
height
Stelt de hoogte van een blok-element in
afmeting | auto
<TITLE>Cursus CSS - IVO Brugge <style type="text/css"> p { background:red; width:100px; height:200px; border:medium outset green;
ICT
CSS basiscursus
42
padding:20px; }
Werken met afmetingen
Een alinea: de inhoud neemt 100*200px in beslag, de padding is 20px.
Regel eigenschap
beschrijving
mogelijke waarden
line-height
Stelt de regelhoogte van een element in
afmeting | normal (vaak 1.2 * lettergrootte)
vertical-align
Vertikale uitlijning van een inlineelement
basline | sub | super | top | text-top | middle | bottom | text-bottom | percentage
<TITLE>Cursus CSS - IVO Brugge <style type="text/css"> p { line-height:2em; width:200px; }
Werken met regelinstellingen
Een alinea met regelinstellingen, we experimenteren ook wat met vertikale uitlijning zoals met <span style="vertical-align:sub">sub en <span style="vertical-align:sup">sup en <span style="vertical-align:text-bottom">text-bottom. Dit werkt nog niet naar behoren!
Door deze eigenschap in te stellen kan een element een andere postitie krijgen dan normaal Standaard: none
none | left | right
clear
Aangeven of er links en/of rechts van het element zwevende elementen mogen voorkomen Standaard: none. Aan de opgegeven kant mogen geen zwevende elementen meer voorkomen.
Hier een voorbeeld van een alinea naast een hoofding
Nog een alinea
Positioneren van elementen
ICT
CSS basiscursus
45
eigenschap
position
top bottom left right
beschrijving
mogelijke waarden
absolute De positie van het element wordt bepaald ten Bepaalt de opzichte van het de linkerbovenhoek van het manier van positioneren van dichtsbijgelegen ancestor element dat als positioneen element op waarde niet de waarde static heeft. Is zo'n element niet aanwezig, dan wordt de postitie een pagina. bepaald ten opzichte van de box waarin de volledige Standaard: static pagina zich bevindt. Deze eigenschap bepaalt ook de positie van eventuele descendant-elementen. De plaats van het element bepaal je met de relative eigenschappen De positie van het element wordt bepaald ten top, bottom, left opzichte van de normale plaats van het element. en right fixed De positie wordt steeds bepaald ten opzichte van het Bij absolute, relative en fixed document (niet ten opzichte van een ancestorelement). kunnen elementen elkaar bedekken static Positie zoals normaal in HTML, vormt geen of overlappen ! referentiebox voor de positionering van descendantelementen, behalve het BODY-element Bepalen de plaats van een element.
afmeting | auto | inherit
Kan worden toegepast op elementen met position absolute, relative of fixed. Bij absolute positionering nemen deze eigenschappen de plaats in van de margineigenschappen (absolutegepositioneerde elementen ICT
CSS basiscursus
46
hebben dus geen margin). Deze eigenschappen worden standaard niet geërfd. Standaard: auto visibility
visible | hidden | inherit
Het al of niet zichtbaar zijn van een element. Standaard: inherit
overflow
Weergave van inhoud die niet binnen de afmetingen van een element past.
visible | hidden | scroll | auto | inherit
Is toepasbaar op elementen met position:absolute Standaard: visible clip
Aangeven welk deel van een element zichtbaar moet zijn.
auto rect(top right bottom left), waarbij 4 afmetingen worden opgegeven inherit
Standaard: auto z-index
Bepaalt welk waarde: geheel getal (pos. of neg.) elementen auto bovenaan wordt inherit gepositioneerd bij overlappende elementen. Standaard: auto Je kan de z-as
ICT
CSS basiscursus
47
opvatten als de as loodrecht op het beeldscherm. Een element met een hogere z-index bedekt een element met een lagere zindex. Toepasbaar op elementen met een positioneigenschap absolute of relative Normaal worden elementen bedekt door elementen die onder het element in het document voorkomen
Positionering: absolute, relative, top, bottom, left, right
auto: afhankelijk van de User Agent. crosshair: kruis Bepaalt het default: Standaardcursor: dikwijls een pijl type muisaanwijzer. pointer: zoals voor een hyperlink move: iets moet bewogen worden e-resize, ne-resize, nw-resize, n-resize, se-resize, swStandaard: resize, s-resize, w-resize: sleepbewegen aan de kant auto 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 : locatie van cursor-file Bepaalt de dikte van de omlijning
afmeting | thin | medium | thick | inherit
Standaard: medium outline-style
Bepaalt de stijl none | hidden | dotted | dashed | solid | double | groove van de | ridge | inset | outset | inherit omlijning Standaard: none
outline-color
Bepaalt de kleur van de omlijning
kleur | invert | inherit
Standaard: invert indien ICT
CSS basiscursus
51
ondersteund, anders: waarde van de coloreigenschap. outline
Afgekorte notatie voor het instellen van de style, width en color van de omlijning
cursor <TITLE>Cursus CSS - IVO Brugge <style type="text/css"> div { margin-top:20px; background:yellow; width:200px; border:solid 1px red; }
kruis
hyperlink
bewegen
zuid-west formaat
Tekst
wachten
bezig...
help
Aangepast
Outline Dit wordt voorlopig enkel ondersteund door Opera. Een omlijning werkt qua uitzicht als een rand (border), maar met volgende verschillen: ?
ICT
Omlijningen nemen geen ruimte in, ze worden als het ware over de box getekend. Ze overlappen steeds andere inhoud (marge, border, inhoud).
CSS basiscursus
52
? ?
Omlijningen hoeven geen rechthoeken te zijn Kunnen gecombineerd worden met pseudo-klassen focus en active
<TITLE>Cursus CSS - IVO Brugge <style type="text/css"> div { outline-style: ridge; outline-width: medium; outline-color: blue; }
