In les 3 ga je verder met CSS. Je leert over het zogenaamde CSS box-model en absolute- en relatieve positionering. Daarnaast leer je te werken met id’s en classes.
Font-family en fallbacks
In les 2 leerde je hoe je met behulp van de font-family property elementen, of elementen die in een bepaald element (herinnering: div) staan een ander lettertype kan geven. Wanneer je op je computer eens de beschikbare lettertypes gaat bekijken (bijvoorbeeld in Word of Photoshop), zie je dat het er tientallen, honderden zijn. Wanneer je een website bouwt met een bepaald lettertype, kan het voorkomen dat het lettertype wat je hebt gekozen niet op de computer van de bezoeker van je website staat. In dat geval zal als lettertype standaard voor het “sans” lettertype worden gekozen. “sans” is een eigenlijk een groep schreeflettertypes. Er zijn in totaal 5 verschillende soorten fallback-lettertypes die je kunt gebruiken om de bezoeker tòch een lettertype voor te schotelen wat iets weg heeft van het lettertype wat je oorspronkelijk in gedachten had. Zie hieronder:
Hoe geef je naast het gewenste lettertype nu het “reserve”lettertype aan? Bekijk onderstaand voorbeeld eens, waar bij voorkeur lettertype #### wordt gebruikt, maar wanneer dat niet beschikbaar is, wordt sans-serif aangeroepen.
body{
font-family:'Myriad Pro', sans-serif;
}
Op een windows-computer zal sans-serif er voor zorgen dat de website met het lettertype Arial wordt getoond. Op een Mac zal het lettertype Helvetica worden getoond. Je ziet in bovenstaand voorbeeld ook dat als een lettertype uit meerdere woorden bestaat, je het lettertype tussen quotes (‘ en ‘) moet zetten.
Wil je tòch heel graag een bepaald lettertype op je website gebruiken dat niet op andere computers aanwezig is, mis dan les 4 niet.
ID’s en classes
Tijdens de cursus zit je samen met andere mensen van het type student in de klas. Er zijn deelnemers van het geslacht man of vrouw. Sommige deelnemers hebben blond haar, anderen donkerblond of rood. Elke deelnemer heeft een ander studentnummer.
Sommige eigenschappen deel je soms met andere deelnemers, zoals geslacht, type deelnemer en haarkleur. Wat je als student uniek maakt, is je studentnummer.
Wanneer in HTML elementen eigenschappen delen met andere elementen, kun je er voor kiezen om ze bepaalde “classes” toe te delen. Mocht een element unieke eigenschappen nodig hebben, dan ken je dit element een uniek ID toe.
In het geval van een een klas deelnemers zou het volgende HTML voorbeeld van toepassing kunnen zijn:
<!doctype html> <html lang="nl"> <head> <meta charset=utf-8> <title>Overzicht</title> </head> <body> <ul id="cursus-5" class="htmlcss-cursus"> <li id="student-1" class="student man donkerblond">Bart</li> <li id="student-2" class="student man donkerblond">Frans</li> <li id="student-3" class="student man zwart">Angelo</li> <li id="student-4" class="student vrouw blond">Marije</li> <li id="student-5" class="student vrouw blond">Aline</li> <li id="student-6" class="student man blond">Martijn</li> <li id="student-7" class="student vrouw bruin">Lidwien</li> <li id="student-8" class="student vrouw blond">Gerbrich</li> <li id="student-9" class="student man donkerblond">Alex</li> </ul> </body> </html>
Studenten in bovenstaande lijst delen sommige eigenschappen, maar ze hebben allemaal een uniek id. Hieronder zie je hoe je de CSS kunt definiëren voor elementen die tot een bepaalde class behoren. Één persoon gedraagt zich niet en wordt de klas uitgestuurd. Deze spreken we aan middels z’n id. Een class spreek je in CSS aan middels .classnaam en een id spreek je in CSS aan middels #uniqueid .
.student{
font-family:sans-serif;
}
.man{
list-style-type:square;
}
.vrouw{
list-style-type:circle;
}
.blond{
color:yellow;
}
.donkerblond{
color:#999;
}
.bruin{
color:brown;
}
.zwart{
color:#222;
}
#student-6{
text-decoration: line-through;
color:red !important;
}
In bovenstaand voorbeeld zie je dat we voor een persoon hebben bepaald dat deze een “vliegt-er-uit” opmaak hebben gedefinieerd. Stel nu dat er meerdere mensen zijn die deze opmaak nodig hebben, dan kun je er voor kiezen een class “er-uit” te maken en deze toe te kennen aan mensen waarvoor de opmaak moet gelden.
Het CSS Boxmodel
Misschien was het je nog niet opgevallen, maar in principe kun je elk element op je pagina als een rechthoek beschouwen. In CSS wordt de term “box model” vaak genoemd als het gaat om vormgeving en lay-out.
Het CSS Boxmodel is eigenlijk een onzichtbare rechthoek die zich om je element vormt en bestaat uit: margin, border, padding en de inhoud (zoals bijvoorbeeld tekst of een afbeelding).
- Met de margin geef je de ruimte aan waarmee een element van andere elementen af staat. De achtergrondkleur van margin is in principe transparant.
- De border geeft de rand om je element aan.
- Met de padding bepaal je de ruimte tussen de daadwerkelijke content en de rand van het element.
- De content zelf, bijvoorbeeld tekst of een afbeelding.
Het is belangrijk dat je het boxmodel goed begrijpt. Dit kan namelijk veel frustraties voorkomen bij het bouwen van een lay-out. Bekijk het volgende voorbeeld maar eens (html + css):
<!doctype html>
<html lang="nl">
<head>
<meta charset=utf-8>
<title></title>
<style>
#one{
height:300px;
width:300px;
background-color:cyan;
}
#two{
height:300px;
width:300px;
background-color:green;
padding:5px;
border:solid 5px red;
margin:10px;
}
</style>
</head>
<body>
<div id="one">Doosje met id 1</div>
<div id="two">Doosje met id 2</div>
</body>
</html>
In bovenstaand voorbeeld worden twee div-elementen voorzien van opmaak. Beiden krijgen ze dezelfde hoogte en breedte, maar tóch is element #two breden dan element #one.
- De totale afmeting van element #one is: 300px bij 300px.
- De totale afmeting van element #two bedraagt 300+5+5+10+10 = 330px bij 330px.
De totale afmetingen van een element wordt dus altijd bepaald door margin+border+padding+hoogte/breedte. Dat kun je ook zien in het screenshot van Firebug. In de klas wordt uitgelegd hoe je met Firebug de totale afmetingen van een element kunt bekijken.
CSS Shorthand notatie
In CSS is het soms mogelijk om op verkorte wijze properties en values te noteren. CSS properties waarbij dit altijd kan worden toegepast zijn margin en padding. Misschien heb je hier onbewust al gebruik van gemaakt. Wanneer je bijvoorbeeld de margin voor alle zijden van een element op 10px wilt instellen, vul je in css margin:10px; in voor de betreffende property. Soms wil je ook dat alleen boven en onder een element 10 pixels ruimte wordt ingesteld. In dat geval kun je op deze manier de margins instellen:
margin-top:10px; margin-right:0px; margin-bottom:10px; margin-left:0px;
In bovenstaand voorbeeld zie je dat voor 4 zijden van het element de marge wordt ingesteld. Dit kan echter ook op een verkorte manier:
margin:10px 0 10px 0;
Wanneer je voor margin 4 waarden, gescheiden door een spatie opgeeft, worden “met de klok mee” de waarden toegekend aan top, right, bottom, left. Bovenstaand voorbeeld zou zelfs nóg beknopter kunnen worden genoteerd. Wanneer je twee waarden opgeeft, kent CSS de eerste waarde aan top en bottom toe, en de tweede waarde aan right en left. Kijk maar eens:
margin:10px 0;
Geef je drie waarden op, dan wordt de eerste waarde toegekend aan top, de tweede waarden worden aan right en left gegeven en de derde waarde aan bottom. Bekijk:
padding:10px 5px 20px; /* 10px (top) 5px (right and left) 20px (bottom) */
Het voordeel van CSS shorthand notatie is dat je veel minder code nodig hebt om een opmaak in te stellen.
Absolute- en relatieve positionering
Wanneer je een webpagina maakt met daarop allerlei HTML elementen, worden ze gepositioneerd volgens de “normal flow” van het document. Dit houdt in dat elementen die als eerst worden geplaatst in de code, ook als eerste (van boven naar beneden) verschijnen als de webpagina wordt bekeken. Dit heet de normal flow.
Hieronder zie je een opsomming van waarden die je aan het position property kunt toekennen. Het is een behoorlijke lap tekst, maar door zelf tijdens de les uitvoerig te experimenteren met deze waarden leer je ze het beste begrijpen.
In CSS kunnen elementen in totaal op 4 manieren worden gepositioneerd (middels het position property:
- Static Elementen hebben standaard position:static; . Dat houdt in dat elementen op volgorde worden weergeven zoals ze in het HTML document zijn aangegeven; ze worden geplaatst volgens de “normal flow”. Je kunt de margin en padding van het element aanpassen om het element wat meer ruimte te geven.
- Fixed Wanneer een element position:fixed; heeft, kun je met behulp van de properties top , right ,bottom en left het element plaatsen ten opzichte van het browservenster. Wanneer er wordt gescrolld, verschuift het element niet, maar blijft het relatief ten opzichte van het browservenster staan. Geef je een element als position fixed, dan wordt het element uit de “normal flow” gehaald. Dat betekent dat andere elementen op de pagina het element niet meer zien en er qua positie geen rekening meer mee houden. Fixed gepositioneerde elementen kunnen dus andere elementen overlappen (of kunnen overlapt worden door andere elementen).
- Relative Elementen met position:relative; kunnen worden gepositioneerd (met top , right ,bottom en left ) ten opzichte van hun oorspronkelijke locatie. De oorspronkelijke ruimte die het element normaalgesproken zou innemen, blijft “gereserveerd”. Hier kunnen andere, “static” gepositioneerde elementen niet worden geplaatst.
- Absolute Deze waarde is waarschijnlijk het moeilijkst te doorgronden. Een absolute gepositioneerd element wordt relatief ten opzichte van het eerste element waar het in staat dat een position ànders dan static heeft, gepositioneerd. Als het absolute element niet in een ander element staat met de vereiste waarde (fixed,relative of absolute) is gepositioneerd, wordt het element gepositioneerd ten opzichte van het body element. Wanneer een element absolute gepositioneerd wordt, wordt het uit de normal flow gehaald en zien andere elementen het element dus niet meer. Hierdoor kunnen ze over of onder het element komen te staan. Wordt er gescrolld, dan schuift het element wel mee.
Nogmaals, de enige manier om bovenstaande te leren begrijpen is om er uitgebreid mee te gaan experimenteren tijdens de les. De twee meest belangrijke waardes voor deze cursus zijn absolute en relative .
Voorbereidingen om succesvol te kunnen starten met les 4
Experimenteren met id’s en classes
Het is belangrijk dat je voor jezelf goed duidelijk hebt wat een id is en wat een class is en wanneer je ze gebruikt.
Experimenteren met het box-model
Wanneer je veel gaat experimenteren met margins, paddings, borders, enzovoorts leer je probleemsituaties in de toekomst te herkennen en te voorkomen, bijvoorbeeld op gebied van plaatsen van meerdere elementen naast elkaar of onder elkaar.
Absolute en relatieve positionering
Wanneer gebruik je nu absolute positionering en wanneer relatieve positionering? Probeer voor jezelf na te gaan in welke situaties absolute of relatieve positionering van pas kan komen.
Opdracht voor les 4
Na les 3 krijg je van de docent een kleine praktische opdracht die je voor les 4 moet doen. Deze opdracht zal je kennis en vaardigheden op gebied van id’s en classes en positionering op de proef stellen.