Stylesheets
- Stylesheets zijn stukjes code die het uitzicht van elementen van je pagina.
- Die stijlen kunnen extern zijn (in een apart bestand staan), maar je kan ook stijlen
definiëren in de pagina zelf.
- Stijlen kunnen dynamisch zijn, d.w.z. dat bepaalde
gebeurtenissen het uitzicht van stukken tekst kunnen wijzigen.
- Stijlen kunnen als volgt gedefinieerd worden:
- Type { stijl }: je zegt tot welk type element deze stijl behoort, en je definieert de
stijl
P {color : #FF0000} maakt alle paragrafen op in het rood
- Type.stijlnaam { stijl }: je geeft een naam aan de stijl
P.redtext { color : #FF0000}: de paragraaf wordt rood als die stijl wordt toegepast
- .stijlnaam { stijl }: je geeft een naam zonder te zeggen voor welk soort element
.redtext { color : #FF0000}: rode opmaak voor gelijk welk soort element
- #stijlnaam { stijl }: je geeft een naam zonder te zeggen voor welk soort element
#redtext { color : #FF0000}: rode opmaak voor gelijk welk soort element
- Om een stijl toe te passen kan je als volgt tewerk gaan:
- Indien P een stijl heeft:
<P> ... </P>
- Indien er een P.stijl bestaat:
<P class =“stijl“> ... </P>
- Voor een stijl met #:
<P ID=“Mijnstijl”> ... </P>
-
Je kan stijlen ook via scripting toekennen, en dynamisch laten worden.
Dat gaat als volgt:
- Bij een element: <p this.className= “...”>(inline)
- In een script: <ID.className=“ ... “>
- Je kan stijlen ook in CSS bestand opslaan, en die dan linken aan je HTML bestanden met
de code
<head>
...
<link rel="stylesheet"
type="text/css" href="style.css">
</head>Voordeel van deze
benadering is dat een wijziging aan dat CSS bestand onmiddellijk door alle pagina's
doorheen de hele site wordt overgenomen.
- Voor informatie over hoe Cascading Style Sheets werken kan je terecht bij
HTML 4 referentie of de WDG CSS Referentie.
- Om een styles aan te maken en in je pagina's te gebruiken ben je best met
OpenOffice of
Expression web, maar het kan ook met Kompozer. Heel leuk
zijn
ook SimpleCSS en
TopStyle (niet meer gratis) waarmee je
externe stylesheets kan maken.
- Je kan met CSS stijlen ook knoppen maken. CSS-BuMa maakt het je makkelijk.
- Soms moét je CSS gebruiken in plaats van HTML. Deprecated HTML tags and alternatives vermeldt bv. de tags <font>, <s>, <u> en de attributes border, color.
[Webweven index] - [Copyright]