CSS vraagje

Status
Niet open voor verdere reacties.

hansjuh

Gebruiker
Lid geworden
15 nov 2006
Berichten
295
wanneer gebruik je met css de . en wanneer de # in je stylesheet? Ik zie het verschil niet echt.
 
. is voor een classe, # is voor een ID, voor uitleg hierover zie bijvoorbeeld handleidinghtml.nl
 
Maar waarom zou je dan class én id gebruiken? Één is toch wel genoeg?

Ik gebruik altijd class voor het toewijzen van stijlen, id eigelijk alleen voor het linken binnen een pagina.
 
Binnen css gelden 'voorrangsregels': hoe meer gewicht 'n regel heeft, hoe groter de kans dat die voorrang heeft boven 'n andere opdracht binnen je css.
'n id heeft meer gewicht dan 'n class, dus in principe gaat 'n opdracht met 'n id boven 'n opdracht met 'n class. Maar niet altijd, dat is nogal 'n gereken, en 't werkt ook niet helemaal foutloos in alle browsers.
'n id kun je maar één keer gebruiken op 'n pagina, 'n class vaker. 'n id kan dus ook helpen om te voorkomen dat je bijvoorbeeld twee keer 'n header maakt, want als je je code valideert krijg je 'n foutmelding als je twee keer dezelfde id hebt gebruikt op 1 pagina.
Maar 't maakt dus eigenlijk weinig uit: je kunt gewoon gebruiken wat je 't beste uitkomt.
En soms kan 't ook nog goed uitkomen om 'n element 'n id én 'n class te geven. Algemene instellingen voor 'n rits elementen in de class, en iets aparts in de id.
 
Laatst bewerkt:
Vreemd, dat moeten ze dan maar wijzigen met de volgende standaard. Net als dat je bold hebt en strong en nog een paar die het zelfde weergeven.
 
Nee, alsjeblieft niet. Je kunt alleen niet zeggen dat de een altijd beter is dan de ander.
Zelf gebruik ik bij voorkeur id's, omdat ik dan dat voorrangsgedoe minder vaak tegenkom (kan soms 'n hele puzzel zijn in grote stylesheets), en om te voorkomen dat ik 'n element wat maar 1x mag voorkomen toch 2x gebruik. 'n Heel handige extra controle.
Maar daarnaast is 'n class onmisbaar als je meerdere dezelfde elementen op 1 pagina hebt, die dezelfde opmaak en zo moeten hebben.
Dan nog de truc met class én id.
En je kunt 'n element ook 2 classes geven: class='eerste tweede', waardoor je allerlei combinaties kunt maken. Dat kan met 'n id ook niet.
 
Class is onmisbaar om het type element aan te geven. Id om een specifiek element aan te duiden. Zeker niet veranderen. Css moet daarentegen uitgebreid worden zodat in de toekomst alle css-trucs en omwegen of het uit noodzaak toch javascript gebruiken vermeden kunnen worden.

Bold en strong betekenen ook niet hetzelfde; het eerste betekent 'vet' het tweede 'sterk benadrukt'. Anders kan je evengoed argumenteren om alle semantische html maar te laten vallen en alles met css te doen.
 
Laatst bewerkt:
Laat ik mss nog even beter aangeven wat ik bedoel. Bij de opbouw van html-documenten gaat het niet om hoe die eruit zien maar om het structuur geven aan je tekst. Zo wordt p gebruikt om een paragraaf aan te geven, h1 om de hoofdkop aan te geven, em om tekst te benadrukken en strong om tekst sterk te benadrukken, li om een lijstitem aan te geven enzovoort.

Je zou al die elementen kunnen afschaffen en maar 1 element meer overhouden (span bvb) en dan met class het type altijd aangeven om met css de gepaste stijl te voorzien. Maar dan is die structuur volledig weg.

Als je dus een tekst schrijft denk je na: wat is de hoofdkop, wat zijn tussenkoppen, welke tekst is belangrijk, welke nog belangrijk, waar wordt een lijst opgegeven (bijvoorbeeld een menu is een lijst en bestaat dus uit items die met li worden aangegeven) enzovoort en je gebruikt de gepaste elementen. Met css kan je de stijl naar smaak aanpassen.

Zo wordt standaard benadrukte tekst (em) cursief weergegeven en sterk benadrukte tekst (strong) vet. Maar jij kan dit met css zelfs evengoed omdraaien door alle em's vet weer te geven en alle strong's cursief als je vind dat de belangrijkste tekst cursief moet staan. Daarvoor moet je enkel em { font-weight: bold; font-style: normal; } opgeven (analoog voor strong). Om verwarring te voorkomen ga je dit niet doen, maar daar gaat het niet om.

Class is in die context een toevoeging hierbij om nog extra types elementen te voorzien. Class wordt dikwijls gebruikt om voor alles wat er hetzelfde uit moet zien maar één keer style te moeten opgeven, maar dit is eigenlijk verkeerd qua idee. Je moet het echt voor het type gebruiken. Nu wil je namelijk iets misschien wel op die of die manier weergeven, maar later mss niet meer, en dan heb je proberen als je class-structuur slecht in elkaar zit. Als je alles met types opgebouwd hebt dan kan je voor alle elementen met gelijke betekenis in 1 keer de stijl veranderen door de gepaste stijl aan de betreffende class te koppelen. Je moet dus eigenlijk los van hoe je alles wilt weergeven een class-structuur opbouwen, met het oog op later. Je moet dus wel geen types voorzien als die al in de verschillende html elementen zoals beschreven in de vorige paragrafen voorzien zijn.

Waarvoor is structuur belangrijk: kort gezegd zodat apparaten / programma's die je site niet visueel zien toch weten hoe de structuur in elkaar zit, bijvoorbeeld zoekmachine's of browsers, waar de surfer zelfs een eigen stijlblad aangemaakt kan hebben om bijvoorbeeld van alle sites die hij bezoekt alle koppen (h1) in een bepaalde grootte weer te geven of bijvoorbeeld benadrukte tekst (em) anders dan standaard (cursief) weer te geven.

Kortom: het draait om betekenis en structuur en niet om hoe het eruit ziet.
 
Laatst bewerkt:
Waarvoor is structuur belangrijk: kort gezegd zodat apparaten / programma's die je site niet visueel zien toch weten hoe de structuur in elkaar zit, bijvoorbeeld zoekmachine's of browsers, waar de surfer zelfs een eigen stijlblad aangemaakt kan hebben om bijvoorbeeld van alle sites die hij bezoekt alle koppen (h1) in een bepaalde grootte weer te geven of bijvoorbeeld benadrukte tekst (em) anders dan standaard (cursief) weer te geven.

Kortom: het draait om betekenis en structuur en niet om hoe het eruit ziet.
Om screenreaders/tekstbrowsers nog even aan het lijstje toe te voegen.
 
ikzelf gebruik alleen . (klasses). Het is handig als je voor een van de twee kiest, dan kunnen ze niet in de war raken
 
Soms heb je de id-overrule gewoon nodig om bepaalde eigenschappen die via een class zijn toegekend aan een element voor dit specifieke element aan te passen.

Het wordt soms wel verwarrend wanneer je ook met child/descendant selectors werkt. Ik weet niet meer precies hoe het zit maar er gebeurt dan wel niet altijd wat je wil (qua volgorde/overrule) omdat die denk ik gewoon als id selector beschouwd worden.
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan