Verschil tussen ID en klasse in CSS
Share
De grootste verschil tussen id en klasse in CSS is dat het id wordt gebruikt om stijl toe te passen op één uniek element, terwijl de klasse wordt gebruikt om stijl toe te passen op meerdere elementen.
Er zijn verschillende technologieën in webontwikkeling. De belangrijkste talen voor het ontwikkelen van websites zijn HTML, CSS en JavaScript. HTML staat voor Hyper Text Markup Language. Het helpt om de structuur van de webpagina te ontwikkelen. JavaScript helpt de webpagina dynamischer te maken. CSS staat voor Cascading Style Sheets. Het helpt om stijlen toe te voegen en de webpagina's beter te presenteren. De CSS-regels zijn van toepassing op de HTML-elementen. De CSS-selectors helpen ook om de elementen te vinden en de vereiste stijl toe te passen op de HTML-tags. id en class zijn twee soorten selectors.
Key Areas Covered
1. Wat zijn CSS-regels
- Definitie, Voorbeeld
2. Wat is id
- Definitie, Voorbeeld
3. Wat is klasse
- Definitie, Voorbeeld
4. Verschil tussen id en klasse
- Vergelijking van belangrijke verschillen
Sleutelbegrippen
Klasse, CSS-regels, ID
Wat zijn CSS-regels
CSS bestaat uit een reeks regels. De browser kan deze regels interpreteren en toepassen op de opgegeven elementen in het document. Een CSS-stijlregel bestaat uit drie secties. Ze zijn de selector, eigenschap en waarde. Verklaring verwijst naar de combinatie van eigendom en waarde. Ze verschijnen als volgt binnen een paar accolades.
selector eigenschap: waarde;
keuzeschakelaar - Helpt bij het identificeren van het element om de stijl toe te passen
Eigendom - Een attribuut. Alle HTML-kenmerken worden geconverteerd naar CSS-eigenschappen. Enkele voorbeelden zijn kleur, tekst-uitlijning, rand, enz.
Waarde - Waarde is wat is toegewezen aan de eigenschap. Blauw kan bijvoorbeeld worden toegewezen aan de eigenschapskleur.
Wat is id
De programmeur kan een stijlregel definiëren op basis van de id van de elementen. Alle elementen met dezelfde id worden toegepast met de gedefinieerde stijl. Om een element met een specifieke id te selecteren, zou er een # (hash) -symbool gevolgd door de id van het element moeten zijn.
Stel dat het HTML-bestand een verklaring bevat als volgt.
CSS-bestand bevat het volgende stuk code.
# Header1
kleur blauw;
Wanneer de browser de HTML-instructie interpreteert, wordt de id van het h1-element gecontroleerd. Dit is header1 in het CSS-bestand. Vervolgens past het de gedefinieerde CSS-regel toe op het h1-element. Daarom zal de tekst Hello World in blauw worden weergegeven.
De ID is uniek binnen de pagina. Daarom wordt de id-selector gebruikt voor één uniek element.
Wat is klasse
Net als de id, kan de programmeur de stijlregels definiëren op basis van de klasse van het element. Alle elementen met dezelfde klasse worden toegepast met een gedefinieerde stijl. Om een element met een specifieke klasse te selecteren, moet er een zijn. (periode) symbool gevolgd door de naam van de klasse.
Stel dat het HTML-bestand de volgende beweringen bevat.
CSS-bestand bevat het volgende stuk code.
.header1
kleur blauw;
Wanneer de browser de HTML-instructie interpreteert, wordt de klasse van h1-element gecontroleerd. Dit is header1 in het CSS-bestand. Vervolgens past het de gedefinieerde CSS-regel toe op alle h1-elementen. Daarom verschijnen de tekst Hello World 1 en Hello World 2 in blauw.
Het is mogelijk om dezelfde klasse op meerdere elementen te gebruiken. Daarom wordt de categorieselector gebruikt voor meerdere elementen.
Verschil tussen ID en klasse in CSS
Definitie
id is een selector in CSS die het element met een opgegeven id opmaakt, terwijl klasse een selector in CSS is die de geselecteerde elementen met een opgegeven klasse stijlen.
Syntaxis
De id-syntaxis is #id css-verklaringen; . De class-syntaxis is .class CSS-declaraties;
Gebruik
Verder is het gebruik van id om stijl toe te passen op een specifiek element. Het gebruik van klasse is om stijl toe te passen op meerdere elementen.
Conclusie
Het ID en de klasse zijn twee selectors in CSS waarmee de HTML-elementen kunnen worden gestileerd. Het belangrijkste verschil tussen id en klasse in CSS is dat id wordt gebruikt om stijl toe te passen op één uniek element, terwijl klasse wordt gebruikt om stijl toe te passen op meerdere elementen.
Referentie:
1. "CSS-syntaxis en selectors." W3Schools Online Web Tutorials, Beschikbaar Hier.
Afbeelding met dank aan:
1. "CSS.3" door Nikotaf - Eigen werk (CC BY-SA 4.0) via Commons Wikimedia
