Klasse versus ID
Cascading Style Sheets (CSS) is een taal die het uiterlijk en de opmaak beschrijft van een document dat is geschreven met een opmaaktaal. CSS wordt veel gebruikt om webpagina's op te maken die in HTML zijn geschreven. Met CSS kunt u uw eigen stijlselectoren specificeren, naast het toepassen van stijlen voor HTML-elementen. Dit wordt gedaan met behulp van de ID en class selectors. Bij het specificeren van een stijl voor een enkel uniek element, wordt de ID-selector gebruikt. Bij het specificeren van een stijl voor een groep elementen, wordt de klassenselector gebruikt.
Wat is een klas?
In CSS kan Class-selector worden gebruikt om uw eigen stijl toe te passen op een groep elementen. De Class-selector wordt gebruikt om een specifieke stijl toe te passen op een set elementen met dezelfde klasse. In CSS wordt een klassekiezer geïdentificeerd door een punt (.). Hieronder volgt een voorbeeld van een klassenelector die is gedefinieerd in CSS.
.mijn klas {
kleur blauw;
font-weight: vet;
}
HTML kan verwijzen naar de klasse die is gedefinieerd in CSS door de attribuutklasse te gebruiken zoals hieronder getoond.
Dit is mijn opmaak
Dit is weer mijn opmaak
Zoals hierboven getoond, kan dezelfde klasse worden gebruikt voor meerdere elementen en kan een enkel element meerdere klassen gebruiken. Wanneer meerdere klassen in hetzelfde element worden gebruikt, worden de klassen ingevoegd in het class-attribuut dat wordt afgebakend door een spatie, zoals hieronder wordt weergegeven.
Dit is mijn opmaak met behulp van twee klassen
Wat is een ID?
In CSS kan ID-selector worden gebruikt om uw eigen stijl toe te passen op een enkel uniek element. In CSS wordt een ID-selector geïdentificeerd door een hekje (#). Hieronder volgt een voorbeeld van een ID-selector die is gedefinieerd in CSS.
#Mijn ID {
kleur rood;
text-align: right;
}
HTML kan verwijzen naar de ID-selector die is gedefinieerd in CSS door het attribuut-ID te gebruiken zoals hieronder weergegeven.
Dit is mijn opmaak voor een ID-selector
ID's zijn uniek. Daarom kan elk element slechts één ID hebben en elke pagina kan slechts één element met die specifieke ID hebben. ID's hebben een belangrijk kenmerk dat met een browser kan worden gebruikt. Als de pagina-URL een hash-waarde bevat (bijv. Http: //myweb.com#my_id), zal de browser proberen om automatisch het element met de ID "my_id" te lokaliseren en door de webpagina te scrollen om dat element weer te geven. Dit is een van de redenen waarom de pagina een enkel element met die specifieke ID zou moeten hebben, zodat de browser dat element kan lokaliseren.
Wat is het verschil tussen Klasse en ID?
Hoewel zowel de Class-selector als de ID-selector kunnen worden gebruikt om uw eigen stijl toe te passen op elementen in een webpagina, hebben ze enkele belangrijke verschillen. Klassekiezer kan worden gebruikt om uw eigen stijl toe te passen op een groep elementen, terwijl de ID-selector wordt gebruikt om een stijl toe te passen op een enkel, uniek element. Wanneer u ID's gebruikt, kan elk element slechts één ID hebben en kan elke pagina slechts één element met die specifieke ID hebben, maar Klasse kan worden gebruikt voor meerdere elementen en een enkel element kan meerdere Klassen gebruiken. Verder kan ID worden gebruikt om automatisch door een pagina te scrollen om het element met die ID weer te geven, maar dit is niet mogelijk met de class selector.
