Rubrieken
|
Cursus html
Hoofdstuk 5: Style
Een hoofdpagina zonder kleur is maar niks, daarom is de font-tag er, maar dat zou hopen typwerk kosten, daarom is het ook mogelijk op andere korter manieren, maar die iets meer aandacht vragen.
5.1 Wat is style?
Style zijn elementen, ook style-elementen genoemd, die aan elke waarde in het algemeen een kleur, lettertype, grootte,... toekennen.
5.2 Style als blok element
Style kan als blok element weergeven worden, dit is niet erg moeilijk, dit gebeurt tussen twee tags:<style></style>
We geven een voorbeeld, in dit voorbeeld gaan we elke h1 een waarde toekennen, elke h1 tag gaat dan volgens die waarde(we geven alleen het body gedeelte weer):
<body>
<style>
h1{font-family:fantasy; color:red; size:10pt}
</style>
</body>
Let op dat er dubbelpunten worden gebruikt, en elke parameter moet gescheiden worden door een puntkomma; er is nog één verschil met font: hier is "size" niet de lettergrootte maar het aantal pt tussen twee verschillende "h" tags(= de tags met h1, h2,...).
In zo'n style-blok kan van h1 tot h6 tegelijk gedeclareerd worden:
<body>
<style>
h1{font-family:fantasy; color:red; size:10pt}
h2{font-family:fantasy; color:blue; size:10pt}
h3{font-family:fantasy; color:green; size:10pt}
h4{font-family:fantasy; color:ccff00; size:10pt}
h5{font-family:fantasy; color:FF9900; size:10pt}
h6{font-family:fantasy; color:purple; size:10pt}
</style>
</body>
[Bekijk voorbeeld]
5.3 Cascadding stylesheets
Cascadding stylesheets zijn externe scripts met style blok elementen.
Type dit in kladblok en sla het op als style.css:
h1{font-family:fantasy; color:red; size:10pt}
h2{font-family:fantasy; color:blue; size:10pt}
h3{font-family:fantasy; color:green; size:10pt}
h4{font-family:fantasy; color:ccff00; size:10pt}
h5{font-family:fantasy; color:FF9900; size:10pt}
h6{font-family:fantasy; color:purple; size:10pt}
body{background-color: silver}
Even uitleg: Bij body staa background-color dat verwijst naar de achtergrondkleur; wil je dit doen zonder stylesheet, doe je het zo:
je voegt bij de body-tag een parameter bij, dat ziet er zo uit: <body bgcolor="red">
Als je dit hebt gedaan en hebt opgeslagen, maak je het volgende bestand in notepad/kladblok en sla het op als les2.htm:
<html>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<h1>Dit is een tekst met een stylesheet</h1>
<h2>Dit is een tekst met een stylesheet</h2>
<h3>Dit is een tekst met een stylesheet</h3>
<h4>Dit is een tekst met een stylesheet</h4>
<h5>Dit is een tekst met een stylesheet</h5>
<h6>Dit is een tekst met een stylesheet</h6>
</body>
</html>
Even uitleg: de tag met link zorgt ervoor dat de stylesheet geupload wordt naar je webpagina, dit staat steeds in het head gedeelte.
Open nu les2.htm, het moet er zo uitzien [bekijk][stylesheet]
|