|
Classes of Id's
Er zitten een paar grote verschillen tussen het gebruiken van Id's of
Classes bij het aangeven van eigenschappen voor een element. Daarom deze
extra les die mede bij syntaxis geintegreerd is.
Id
Een element bepaalde eigenschappen geven door middel van Class of id verschilt
van elkaar; bij id moet je elk element een letter of een nummer geven
en dat geld dan alleen voor dat ene element. Bij de classes kunnen wel
100 dezelfde elementen dezelfde eigenschappen overnemen. Als je dus twee
dezelfde tags hetzelfde idnummer geeft gebeurd er bij de tweede niets!
Bijvoorbeeld deze: h1#id303 {color: gray}
Het eerste h1 element met het idnummer: id303 zal grijs getoond
worden. Een tweede h1 element met het dezelfde idnummer wordt niet
grijs gekleurd. Bij deze gaat het alleen om de eerste h1 met dat idnummer,
vul je een asterix (*) in dan wordt de eerste code met het idnummer gekleurd
zoals hier:
*#id303 {color: gray}
Het eerste element met het idnummer: id303 wordt grijs gekleurd. Of dat
nou <p id="id303"> is of
het is <h1 id="id303"> maakt
niets uit. Het heeft weer geen zin als je meerdere codes hetzelfde idnummer
geeft want dan slaat hij de anderen over en geeft alleen het eerst id
de aangegeven waarden.
Classes
Bij classes kun je bijvoorbeeld twee dezelfde elementen een andere waarde
geven, bijvoorbeeld een paragraaf.
p.rechts {text-align: right}
p.links {text-align: left}
De <p class="right"> wordt
rechts weergegeven en de <p class="left">
juist weer links. Er kan maar één waarde gegeven worden
aan een element via class. Dus dit is fout <p
class="right" class="left"> maar dat lijkt
me duidelijk. Een element kan dus maar één class bezitten
en wil je meerdere eigenschappen aan dat element geven dan zul je voor
dat element een nieuwe class moeten maken en hierin moeten verwerken hoe
je dit element getoond wilt hebben. (lees deze lange zin gerust nogmaals
;) )
Je kunt met via de classes ook alle elementen op dezelfde manier weergeven,
bijvoorbeeld links zie voorbeeld:
.links {text-align: left;font-family: verdana}
Nu worden alle elementen met: <X
class="links"> links weergegeven, of het nu <p
class="links"> of <h1 class="links">
is.
Zorg dus dat je het verschil tussen een id en een class weet zodat je
deze gemakkelijk kunt gebruiken. Het werkt super handig als je het door
hebt.
|
