Het bouwen van websites op het hedendaagse internet vereist een grondige kennis van CSS (Cascading Style Sheets). Dit zijn de instructies die u aan een website geeft om te bepalen hoe deze wordt opgemaakt in het browservenster. U past een reeks "stijlen" toe op uw HTML-document, waardoor het uiterlijk van uw webpagina wordt gecreëerd.
Er zijn veel manieren om die voornoemde stijlen toe te passen in een document, maar vaak wilt u alleen een stijl gebruiken sommige van de elementen in een document, maar niet alle exemplaren van dat element. U kunt ook een stijl maken die u op verschillende elementen in een document kunt toepassen, zonder dat u de stijlregel voor elke afzonderlijke instantie hoeft te herhalen. Om deze gewenste stijlen te bereiken, gebruikt u de klassen- en ID-HTML-kenmerken. Deze kenmerken zijn globale kenmerken die op bijna elke HTML-tag kunnen worden toegepast. Dat betekent dat, of u nu divisies, alinea's, links, lijsten of andere HTML-stukken in uw document ontwerpt, u zich kunt wenden tot klasse- en ID-kenmerken om deze taak te volbrengen!
Class Selectors
Met de klasse-selector kunt u meerdere stijlen instellen op hetzelfde element of dezelfde tag in een document. U wilt bijvoorbeeld dat bepaalde delen van uw tekst in een andere kleur worden weergegeven dan de rest van de tekst in het document. Deze gemarkeerde secties kunnen een "waarschuwing" zijn die u op de pagina instelt. Je zou je alinea's kunnen toewijzen met klassen als deze:
p {color: # 0000ff; } p.alert {color: # ff0000; } Deze stijlen zouden de kleur van instellen allemaal paragrafen naar blauw (# 0000ff), maar elke alinea met een klassenattribuut van "waarschuwing" zou in plaats daarvan in rood (# ff0000) worden gestileerd. Dit komt omdat het class-kenmerk een hogere specificiteit heeft dan de eerste CSS-regel, die alleen een tagkiezer gebruikt. Wanneer u met CSS werkt, overschrijft een meer specifieke regel een minder specifieke regel. Dus in dit voorbeeld stelt de meer algemene regel de kleur van alle alinea's in, maar de tweede, meer specifieke regel vervangt die instelling alleen in sommige alinea's. Hier is hoe dit in een HTML-opmaak kan worden gebruikt: Deze paragraaf zou blauw worden weergegeven, wat de standaard is voor de pagina.
Deze paragraaf zou ook in het blauw zijn.
En deze alinea zou in rood worden weergegeven, omdat het attribuut class de standaard blauwe kleur van de styling van de elementselector zou overschrijven.
In dat voorbeeld is de stijl van "p.alert" alleen van toepassing op alinea-elementen die die klasse "alert" gebruiken. Als u die klasse over meerdere HTML-elementen wilt gebruiken, verwijdert u eenvoudig het HTML-element aan het begin van de stijloproep (laat de punt gewoon staan ( .) op zijn plaats), zoals dit: .alert {achtergrondkleur: # ff0000;} Deze klasse is nu beschikbaar voor elk element dat het nodig heeft. Elk stuk van uw HTML dat een class-attribuutwaarde van "alert" heeft, krijgt nu deze stijl. In de onderstaande HTML hebben we zowel een alinea als een kopniveau 2 die de klasse "alert" gebruiken. Beide zouden een achtergrondkleur van rood hebben op basis van de CSS die we zojuist hebben laten zien.
Deze paragraaf zou in het rood geschreven zijn.
Op websites van tegenwoordig worden klassekenmerken vaak gebruikt voor de meeste elementen, omdat ze eenvoudiger te gebruiken zijn vanuit een specifiek perspectief dat ID's zijn. U zult zien dat de meeste huidige HTML-pagina's gevuld zijn met klassekenmerken, waarvan sommige meerdere keren in een document worden herhaald en andere die slechts één keer voorkomen. Met de ID-selector kunt u een naam geven aan een specifieke stijl zonder deze aan een tag of ander HTML-element te koppelen. Stel dat u een indeling had in uw HTML-markup die informatie over een gebeurtenis bevat. Je zou deze divisie een ID-kenmerk van "event" kunnen geven, en als je die divisie met een 1-pixel brede zwarte rand zou willen schetsen, dan schrijf je een ID-code als deze: #event {border: 1px solid # 000; } De uitdaging met ID-selectors is dat ze niet kunnen worden herhaald in een HTML-document. Ze moeten uniek zijn (u kunt dezelfde ID gebruiken op meerdere pagina's van uw site, maar slechts één keer in elk afzonderlijk HTML-document). Dus als je 3 evenementen had die allemaal deze grens nodig hadden, zou je ze ID-attributen van "event1", "event2" en "event3" moeten geven en elk van hen moeten stijlen. Het zou daarom veel gemakkelijker zijn om het bovengenoemde klassenattribuut "evenement" te gebruiken en ze allemaal tegelijkertijd te stijlen. Een andere uitdaging met ID-kenmerken is dat ze een hogere specificiteit hebben dan klassekenmerken. Dit betekent dat als u CSS nodig heeft dat een eerder vastgestelde stijl overschrijft, het moeilijk kan zijn om dit te doen als u te veel op ID's hebt vertrouwd. Het is om deze reden dat veel webontwikkelaars zijn weggelopen van het gebruik van ID's in hun markup, zelfs als ze deze slechts eenmaal willen gebruiken en in plaats daarvan zijn overgestapt naar de minder specifieke klassekenmerken voor bijna alle stijlen. Het enige gebied waar ID-kenmerken in het spel komen, is wanneer u een pagina wilt maken met ankerkoppelingen op de pagina. Bijvoorbeeld als u een website in parallaxstijl hebt die alle inhoud op één pagina bevat met koppelingen die naar verschillende delen van die pagina "springen". Dit gebeurt met behulp van ID-attributen en tekstlinks die deze ankerlinks gebruiken. Je zou gewoon de waarde van dat attribuut, voorafgegaan door het "#" symbool, toevoegen aan het "href" attribuut van de link, zoals dit: Dit is de link Wanneer erop geklikt of aangeraakt wordt, springt deze link naar het deel van de pagina met dit ID-attribuut.Als geen enkel element op de pagina deze ID-waarde gebruikt, zou de link niets doen. Houd er rekening mee dat als u in-page linken op een site wilt maken, het gebruik van ID-kenmerken vereist is, maar u kunt zich nog steeds wenden tot klassen voor algemene CSS-stijldoeleinden. Dit is hoe we vandaag de pagina's markeren - we gebruiken klassenkiezers zoveel mogelijk en keren alleen naar ID's wanneer we het attribuut nodig hebben om niet alleen als een haak voor CSS te fungeren, maar ook als een in-page link.En deze H2 zou ook rood zijn.
ID Selectors
Complicaties van ID-attributen
