CSS staat voor Cascading Style Sheets. Stijlen definiëren hoe HTML elementen worden vertoond. Stijlen werden toegevoegd aan HTML 4 om problemen op te lossen. External Style Sheets kunnen veel werk besparen. External Style Sheets worden opgeslagen in CSS bestanden.
b. CSS lost veel problemen op HTML was nooit bedoeld om tags te bevatten die documenten formateren. HTML was bedoeld om de inhoud van een document te definiëren zoals:
Dit is een heading
Dit is een paragraaf.
Wanneer tags zoals , en kleurattributen werden toegevoegd aan de HTML 3.2 specificaties startte een nachtmerrie voor de meeste web developpers. Ontwikkeling van grote sites waar fonts en kleurinformatie werden gebruikt op iedere pagina werden een lang en duur proces. Om dit probleem op te lossen creërde het World Wide Web Consortium (W3C) CSS. In HTML 4.0, kon alle formatting verwijderd worden van het HTML document en opgeslagen worden in aparte CSS bestanden. Alle browsers ondersteunen tegenwoordig CSS. CSS bespaart een hoop werk. CSS definieërt hoe HTML elementen worden vertoond. Stijlen worden normaal bewaard in aparte .css bestanden. Externe stijlsheets laten je toe om het voorkomen en de lay-out van alle pagina’s in een website via een enkele pagina aan te passen.
2. CSS Syntax Een CSS regel heeft twee onderdelen: een selector en één of meerdere decleraties. De selector is normaal het HTML element dat gestijld dient te worden. Elke decleratie bestaat uit een eigenschap en een waarde. De eigenschap is het stijlattribuut CSS declaraties eindigen altijd met een puntkomma en gegroepeerde decleraties worden omringd door accolades.
Voorbeeld: p { color:red; text-align:center; } Commentaren kunnen worden bijgeplaatst om de code op een later tijdstip beter te begrijpen. Commentaren worden door alle browsers genegeerd. Een commentaar begint met “/*” en eindigt met “*/”: Voorbeeld: /*Dit is een commentaar*/ p { text-align:center; /*Dit is nog een commentaar*/ color:black; font-family:arial; }
verloren zoals, bv. code één keer schrijven en meerdere keren hergebruiken. Je kan hier het stijlattribuut plaatsen in de relevante tag. Dit styleattribuut kan eender welke CSS eigenschap bevatten. Met het voorbeeld hieronder kan je de kleur en de linkse marge van de paragraaf aanpassen:
This is a paragraph.
d. Multiple Style Sheets In sommige gevallen zijn de eigenschappen van een bepaalde selector in verschillende stylesheets gedefinieërd. De waarden van de stylsheet waar ook het echo gedeelte staat wordt dan gebruikt en aangevuld met eigenschappen die in deze stylesheet niet aanwezig zijn. Bv. een extern stylesheet heeft volgende eigenschappen voor de h3 selector: h3 { color:red; text-align:left; font-size:8pt; } En een intern stylesheet heeft de volgende eigenschappen voor de h3 selector: h3 { text-align:right; font-size:20pt; } Als de pagina met de interne stylesheet ook gelinkt is naar een externe stylesheet zullen de eigenschappen voor h3 de volgende zijn: color:red; text-align:right; font-size:20pt; De kleur is dus inherent van de externe stylesheet en de text-align en font-size zijn vervangen door die van de internal stylesheet. Meerdere stijlen zullen verenigen tot één stijl. Stijlen worden gedfeinieërd door - In een HTML document - In het hoofdgedeelte van een HTML pagina - In een externe CSS stijl Normaal zullen deze stijlen cascade in een nieuwe virtuele stylesheet met de volgende regels waar nummer4 de hoogste prioriteit heeft. 1. 2. 3. 4.
Browser default External style sheet Internal style sheet (in het head gedeelte) Inline style (in een HTML element)
styles die gedefinieërd zijn in een external stylesheet of in de head worden overschreven door deze inline Style worden overschreven. Opmerking: als de external stylesheet is geplaatst achter de interne stylesheet in HTML , zal de externe stylesheet de interne overschrijven.
4. CSS Styling Nu we de struktuur kennen kunnen we beginnen te spelen met verschillende opmaakstijlen. We gaan volgende hier behandelen: - backgrounds - text - fonts - links - lists - tables a. Backgrounds Van
backgrounds behandelen we de volgende: - background-color - background-image - background-repeat - background-attachment - background-position
Let erop dat je steeds in kleine letters werkt!!! Background-color De background-color eigenschap specifieert de achtergrondkleur van een element. Deze is gedefinieërd in de body-selector Voorbeeld: body {background-color:#b0c4de;} De
background color wordt gespecifieërd door: * naam - een kleurnaam zoals “red” * RGB - an RGB waarden, zoals “rgb(255,0,0)” * Hex - a hex waarden “#ff0000”
Background Image - Repeat Horizontally or Vertically Standaard wordt een background-image zowel horizontaal als verticaal herhaald. Sommige afbeeldingen worden beter alleen horizontaal of verticaal herhaald of ze geven een vreemde indruk. Om een afbeelding in één richting te herhalen kan je het volgende doen. Voorbeeld: body { background-image:url(‘gradient2.png’); background-repeat:repeat-x; } Background Image - Set position and no-repeat Gebruik dit wanneer je geen herhaling van het beeld wenst in achtergrond. Voorbeeld: body { background-image:url(‘img_tree.png’); background-repeat:no-repeat; } Je kan ook de positie van het beeld veranderen. Voorbeeld: body { background-image:url(‘img_tree.png’); background-repeat:no-repeat; background-position:top right; } Background - Shorthand property De eigenschap background biedt een hele hoop mogelijkheden. Het zou daarom ook handig zijn dat je het nodige in verkorte vorm mocht noteren.Daarom is er een mogelijkheid om alle eigenschappen op één enkele lijn in te stellen. Dit wordt een shorthand property genoemd. De afgekorte eigenschap voor background is eenvoudig “background”: Voorbeeld: body {background:#ffffff url(‘img_tree.png’) no-repeat top right;} Wanneer je de shorthand versie gebruikt dien je wel een bepaalde volgorde te respecteren: * * * * *
top left top center top right center left center center center right bottom left bottom center bottom right x% Y% xpos ypos
Background-repeat Om in te stellen hoe een back- ground afbeelding wordt herhaald
repeat repeat-x repeat-y no-repeat
Voorbeelden hoe je het toepast in de code vind je op de voorgaande pagina’s. b. Text Ook hier enkele voorbeelden: Text Color De kleur kan bepaald worden door: - Naam van een kleur - RGB, een RGB waarde zoals “rgb(255,0255,0)” - Hexadecimaal, een hex waarde zoals #00ff00 Een voorbeeld:
body {color:blue;} h1 {color:#00ff00;} h2 {color:rgb(255,0,0);}
Text Decoration De Text Decoration wordt gebruikt om tekst te onderlijnen, doorstrepen enz... Specifiek wordt het dikwijls gebruikt om onderlijningen van links te verwijderen.
Text Indentation Dit dient om een insprong te geven aan de eerste lijn van een tekst.
p {text-indent:50px;}
Als we alle eigenschappen nog eens op een rijtje zetten: Eigenschap
Omschrijving
color Tekt een kleur geven direction De tekstrichting line-height Afstand tussen de letterlijnen letter-spacing Aanpassen ruimte tussen letters text-align Uitlijnen tekst in een element text-decoration Onderlijnen enz... text-indent Insprong eerste regel tekqt element text-shadow text-transform De letters aanpassen in een element
Waarde color ltr rtl normal number length % normal length left right center justify none underline overline line-through blink length % none color length none capitalize uppercase lowercase
p. 10 / 30
unicode-bidi vertical-align Verticaal aligneren white-space Instelling van de witspatiëring in een element word-spacing Verkleinen of vergroten van de spaties tussen de woorden
normal embed bidi-override baseline sub super top text-top middle bottom text-bottom length % normal pre nowrap normal length
c. Font CSS font eigenschappen definiëren de fontfamilie, vetheid, grootte en de stijl van een tekst. Font-family De fontfamilie voor een tekst wordt gedefinieërd met de font-family eigenschap. Hier kunnen best een aantal font-families opgegeven worden voor in het geval de browser de eerst voorgestelde font niet kent. Als de naam van een font-family uit meer dan één woord bestaat dient deze binnen aanhalingstekens geplaatst te worden. De verschillende font-families worden gescheiden door een komma. Hierbij een voorbeeld:
p{font-family:”Times New Roman”, Times, serif;}
Font Style Dit gaat bepalen dat de font normaal, schuin, vet, enz... is. Een voorbeeld:
De font-size kan absoluut of relatief zijn. Absolute size: Zet de tekst op een bepaalde grootte. Laat niet toe om in sommige browsers de grootte van de tekst aan te passen met alle gevolgen voor de useability. Is goed als de site is opgemaakt in een vaste grootte. Relative size Dit zet de grootte relatief a.d.h.v. omliggende elementen. Laat toe om in de browser de tekstgrootte aan te passen. Als je geen font-size definieërt neemt de browser de standaardwaarde en dit is 16px of 1em. Om de grootte te weten in em is het dus voldoende om aantal pixels te delen door 16. Even een voorbeeld:
Waarde font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar inherit family-name generic-family inherit xx-small x-small small medium large x-large xx-large smaller larger length % inherit p. 12 / 30
font-style Gaat over de lettertype stijl font-variant Onderkast, kleinkapitalen font-weight Gewicht van de letters
normal italic oblique inherit normal small-caps inherit normal bold bolder lighter 100 200 300 400
d. Links Links kunnen gestijld worden met eender welke CSS eigenschap (color, background-color, enz...). Nu hebben links nog wel op zich staande stijlen die dienen om de status aan te duiden van link. Deze status kan zijn normaal (niet bezocht link), een bezochte link, link waar je met de muis voerkomt en een actieve link (is diegene die aangedrukt staat). Dit geeft dus het volgende: a:link (normale niet bezocht link) a:visited (link die bezocht is geweest) a:hover (link waar de gebruiker is over geweest) a:active (link dat momenteel is aangeklikt) Een voorbeeld:
a:link {color:#FF0000;} /* unvisited link */ a:visited {color:#00FF00;} /* visited link */ a:hover {color:#FF00FF;} /* mouse over link */ a:active {color:#0000FF;} /* selected link */
Je kan met text-decoration de eigenschappen van de tekst erafhalen zodat je van de standaard eigenschappen niets meer ziet:
e. Lists In HTML kennen we 2 soorten lists, nl. unordered list en ordered lists. Bij ongeordende lijsten zijn de items gemarkeerd met bolletjes (ul). Bij geordende lijsten zijn dit letters en nummers (ol). Met CSS kan er extra stijlen en beelden worden gebruikt. Die letters en bolletjes kunnen we ook nog eens aanpassen. Hieronder een voorbeeld: ul.a {list-style-type: circle;} ul.b {list-style-type: square;} ol.c {list-style-type: upper-roman;} ol.d {list-style-type: lower-alpha;} Samengevat hebben we volgende verschillende waarden voor Unordered en Ordered lists: Unordered list none disc circle square
No marker Default. The marker is a filled circle The marker is a circle The marker is a squaret)
Ordered list armenian decimal decimal-leading-zero georgian lower-alpha lower-greek lower-latin lower-roman upper-alpha upper-latin upper-roman
The marker is traditional Armenian numbering The marker is a number The marker is a number padded by initial zeros (01, 02, 03, etc.) The marker is traditional Georgian numbering (an, ban, gan, etc.) The marker is lower-alpha (a, b, c, d, e, etc.) The marker is lower-greek (alpha, beta, gamma, etc.) The marker is lower-latin (a, b, c, d, e, etc.) The marker is lower-roman (i, ii, iii, iv, v, etc.) The marker is upper-alpha (A, B, C, D, E, etc.) The marker is upper-latin (A, B, C, D, E, etc.) The marker is upper-roman (I, II, III, IV, V, etc.)
Een afbeelding als list item Je kan ook een afbeelding gebruiken i.p.v. bolletjes enz... Dit geeft volgend voorbeeld: ul { list-style-image: url(‘test.gif’); } Nadeel van bovenstaand voorbeeld is dat het niet in alle browsers hetzelfde vertoont. Om dit te bereiken moeten we padding en margin ook definiëren: ul { list-style-type: none; padding: 0px; margin: 0px; }
li { background-image: url(test.gif); background-repeat: no-repeat; background-position: 0px 5px; padding-left: 14px; } Dan hebben we nog een overzicht van de list eigenschappen: Eigenschap
Omschrijving
list-style Sets all the properties for a list in one declaration list-style-image Specifies an image as the list-item marker list-style-position Specifies if the list-item markers should appear inside or outside the content flow list-style-type Specifies the type of list-item marker
Waarde list-style-type list-style-position list-style-image inherit URL none inherit inside outside inherit none disc circle square decimal decimal-leading-zero armenian georgian lower-alpha upper-alpha lower-greek lower-latin upper-latin lower-roman upper-roman inherit
Enkele voorbeelden van het gebruik van list: Laten we eerst eens kijken hoe het in pure HTML wordt genoteerd.
item 1
item 2
item 3
Dit is een geordende list waarbij elk item van de list wordt bepaald door de tag
en standaard een nummering in de browser wordt gehanteerd.
Dit is een ongeordende list waarbij standaard voor alle items een bolletje komt te staan. Opties die je daarvoor had kan je op bladzijde 14 terugvinden. Je kan ook verschillende soorten lijsten met elkaar combineren en in elkaar nestelen. Hieronder een uitgebreid voorbeeld:
Een eenvoudig recept
Neem een ei.
Breek het ei boven een glas.
Splits voorzichtig het eiwit en de dooier.
Klop het eiwit met de mixer stijf.
De dooier bewaren we voor later.
Flora en fauna
Bomen
Struiken
Planten
Bloemen
Tulpen
Rozen
Anjers
Naast de en
bestaat er ook nog een defintion list
. Een definitië lijst bestaat uit twee delen: - Een woord of term. - De definitie van het woord. Als zit dus vervat in een
tag. Hierin vind je de
tag terug voor de titel en de
tag voor de omschrijving. Een voorbeeld:
Een definitielijst
<strong>Fiets
Een individueel vervoermiddel dat door spierkracht voortbewogen wordt. Heeft gebruikelijk twee wielen en een stuur.
<strong>Auto
Een benzinevoertuig. Heeft vier wielen en een stuur. Mag niet zonder rijbewijs bereden worden.
<strong>Trein
Onderdeel van het openbaar vervoer. Kan vele personen tegelijk vervoeren.
En dit geeft: Een definitielijst
Fiets Een individueel vervoermiddel dat door spierkracht voortbewogen wordt. Heeft gebruikelijk twee wielen en een stuur. Auto Een benzinevoertuig. Heeft vier wielen en een stuur. Mag niet zonder rijbewijs bereden worden.
Trein Onderdeel van het openbaar vervoer. Kan vele personen tegelijk vervoeren.
En nu de CSS erbij: Tot nu toe was alles in HTML, nu gaan we CSS toevoegen om onze lijsten een stuk aantrekkelijker te maken. Je zal zien dat een list ook naast verticaal ook horizontaal gebruikt kan worden. Dit gebeurt met de instructie display:inline. We zullen hier werken met een internal stylsheet waar we alle zaken die we in de body gaan gebruiken definiëren: <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” /> Een lijst als navigatiemenu <style type=”text/css”> /* Opmaak van de lijst en lijst-items */ #menu ul{ margin: 0; padding: 0; list-style-type: none; } #menu li{ display: inline; } /* Opmaak van de hyperlinks */ /* Opmaak van de hyperlinks */ #menu li a{ font-family: Verdana, Arial, sans-serif; text-decoration:none; padding: 0.2em 1em 0.2em 1em; border-left: 1px solid black; border-right: 5px solid transparent; /*zelfde als achtergrondkleur, dus onzichtbaar*/ border-bottom: 1px solid #fff; /* idem */ } #menu li a:hover{ background-color: #ace5cd; color: #000; border-right: 5px solid #005d1f; /* nu wordt de border zichtbaar */ border-bottom: 1px solid #000; }
We kunnen dan verder gaan met het toevoegen van echte hyperlinken en het uitelijk aanpassen naargelang een mouseover enz...: <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” /> Een lijst als navigatiemenu <style type=”text/css”> /* Algemene uiterlijk van de
5. Het boxmodel Alle HTML elementen kunnen beschouwd worden als boxes. In CSS wordt deze term gebruikt bij het designen en lay-outen van een webpagina. Een CSS boxmodel is een box dat zich rond HTML elementen gaat zetten en bestaat uit: - Margin: geeft een transparant gebied rond de box. - Borders: and rondom de inhoud en padding, kan een kleur hebben. - Padding: geeft een gebied rond de inhoud en dit gevuld met de achtergrondkleur. - Inhoud: hier verschijnt uw tekst, beelden, animaties en filmpjes. Margin
(langs buitenkant blok)
Border
(de randdikte)
Inhoud padding
(binnenkant kader)
Dit houdt wel in dat je rekening dient te gaan houden met de totale hoogte en breedte van een element. D.w.z. niet alleen van de inhoud maar alles wat er dan ook mee rondhangt zoals de border, padding en margins. Van volgend voorbeeld is de totale breedte 500 pixels:
Elke box kan je dan nog op twee manieren positioneren nl. met de eigenschappen position en float. Bij position heb je 4 mogelijkheden: - Static of onbenoemd: element is niet gepositioneerd en staat waar het normaal moet staan op de pagina. Dit wordt meestal niet specifiek benoemd. - Relative: je kan het element van boven, opzij, vanonder bewegen. Het element wordt bewogen t.o.v. zijn oorspronkelijke positie en de plaats die het voorheen innam blijft ook open. - Absolute: Wordt het element onttrokken uit de webpagina en wordt het geplaatst daar waar je opgeeft. Dit heeft als gevolg dat als verschuift want de ruimte die wordt achterge laten wordt ingenomen door andere elementen. - Fixed: absoluut gepositioneerd, schuift niet mee. Kan gebruikt worden als vervanger voor frames. Helaas momenteel slechte ondersteuning Internet Explorer. De positionering kan je in een CSS stylsheets opslaan in id’s. Deze worden aangeroepen met # vooraan te plaatsen. Het box element wordt div (division) genoemd. #div_test { position:absolute; top:0; right:0; width:200px; } In body-gedeelte geeft dit dan:
float Met dit kan je een element zover mogelijk naar recht of links drukken. Tekst kan hier ronddom gaan. Ideaal voor afbeeldingen. #div_test { float:left; width:400px; } In body-gedeelte geeft dit dan:
Verklaring div: Het div element wordt gebruikt om de HTML struktuur in stukken op te delen. De enige waarden die een
kan aannemen is om uit te lijnen, nl left, right en center. Standaard is een
links gelijnd.
wordt veel gebruikt in CSS. Als we een vznster van 800 x 600px in het midden van ons scherm willen hebben (horizontaal): <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” /> Naamloos document <style type=”text/css”> .midden{ position:relative; width:800px; height:600px; margin-left:auto; margin-right:auto; background-color:#F00; color:#FFF; }
