|
Styles
Deze les gaat over het gebruiken van styles. Als je de stijlen goed
gebruikt heb je er alleen maar voordeel van! Het gebruik van styles
hebben we ook te danken aan HTML versie 4. In één stijl
leg je vast hoe de elementen van de gehele pagina moeten worden weergegeven.
In een style kun je tekstkleur, tekstgrote, lettertype, witruimte achter
de tekst, links, scrollbalken, lijnen eigenlijk alles aanpassen naar
je eigen wensen. Vooral bij een grote website heeft dit heel veel voordeel
en bespaar je heel veel tijd. Je kunt styles intern en extern de pagina
gebruiken. Je kunt de styles in de header van de pagina plaatsen maar
ook in een apart document plaatsen en dit document dan oproepen vanaf
iedere pagina. Zo kun je dus alle kleuren veranderen in één
bestand! Jouw styles toevoegen in de header van de pagina is alleen
aan te raden als je bij elke pagina andere kleuren wilt hebben, anders
raad ik je aan om één style bestand te nemen en die in
elke pagina op te roepen via deze code:
<head>
<link rel="stylesheet" type="text/css"
href="Mijnstyle.css">
</head>
In het bestand: Mijnstyle.css kun je dus alle kleuren aanpassen
en die worden meteen doorverwerkt als er iemand jouw pagina bezoekt.
Je kunt dus met één bestand je hele pagina veranderen.
Meer over styles in CSS.
Een stijl toevoegen in de header van jouw pagina doe je zo:
<style type="text/css">
Jouw styles
</style>
Bij jouw styles kun je alle elementen toevoegen die jij een style wilt
geven. Verschillende styles kan men onder mekaar plaatsen. Bijvoorbeeld
een h1 met dikgedrukte letters en een h2 met schuine letters:
h1 {font-style:bold}
h2 {font-style:italic}
Meerdere codes met dezelfde style voeg je achter mekaar toe. Bijvoorbeeld
een paar kopelementen:
h1,h4,h5,h6 {font-style:verdana}
Nu geef je deze kopelementen het lettertype: Verdana. Je kunt ook alle
kopelementen toevoegen of andere elementen maar dan gescheiden door een
komma, zoals hierboven is voorgedaan. Je kunt zelf je eigen namen geven
aan een zelf verzonnen styles. Best cool! Kijk maar eens:
<head>div.Jeroen {font-size:larger; font-style:verdana;
}</head>
<div class="Jeroen">Deze tekst word getoond zoals je in
de head bij div.Jeroen hebt aangegeven!</div>
Als je niet in de header van de pagina wilt werken maar in één
style.css bestand dan vul je div.Jeroen {fontsize:larger;
font-style:verdane;} Gewoon in dat bestand in en roep je op elke
pagina dat style.css bestand op.
Zeer handig dus. Zo maak je eigen namen voor je eigen stijlen. Nog makkelijker
om te onthouden.
Heb je een zeer grote website en je wilt wel een duidelijke stijle over
de hele website maar sommige pagina's wil je anders stijlen dan kun je
gewoon 2 stijlen aanleggen! Bijvoorbeeld een standaard.css en een aparte.css!
Eerst de standaard.css toevoegen en daarna de aparte.css! De bijkomende
functies die je alleen op de aparte pagina's wilt laten zien worden dan
toegevoegd aan de code! Dus dit:
<head>
<link rel="stylesheet" type="text/css" href="standaard.css">
<link rel="stylesheet" type="text/css" href="aparte.css">
</head>
Dit was het over styles. Meer informatie over styles bij CSS. |
