De grootste verschil tussen id en class in CSS is dat de 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 om de webpagina dynamischer te maken. CSS staat voor Cascading Style Sheets. Het helpt om stijlen toe te voegen en de webpagina's presentabeler te maken. De CSS-regels zijn van toepassing op de HTML-elementen. Ook helpen de CSS-selectors om de elementen te vinden en de vereiste stijl toe te passen op de HTML-tags. id en class zijn twee soorten selectors.

Klasse, CSS-regels, ID

Wat zijn CSS-regels?

CSS bestaat uit een set regels. De browser kan deze regels interpreteren en toepassen op de gespecificeerde elementen in het document. Een CSS-stijlregel bestaat uit drie secties. Zij zijn de selector, eigenschap en waarde. Verklaring verwijst naar de combinatie van eigendom en waarde. Ze verschijnen als volgt in een paar accolades.

selector { eigenschap: waarde; }

Kiezer - Helpt bij het identificeren van het element om de stijl toe te passen

Eigendom – Een attribuut. Alle HTML-attributen worden omgezet in CSS-eigenschappen. Enkele voorbeelden zijn kleur, tekstuitlijning, rand, enz.

Waarde - Waarde is wat aan het onroerend goed wordt toegekend. Aan de eigenschapskleur kan bijvoorbeeld blauw worden toegekend.

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, moet er een # (hekje) staan ​​gevolgd door de id van het element.

Neem aan dat het HTML-bestand een instructie als volgt bevat.

CSS-bestand bevat het volgende stukje code.

#kop1{

kleur blauw;

}

Wanneer de browser de HTML-instructie interpreteert, controleert deze de id van het h1-element, dat is header1 in het CSS-bestand. Vervolgens past het de gedefinieerde CSS-regel toe op het h1-element. Daarom verschijnt de tekst Hello World in de kleur blauw.

De id is uniek binnen de pagina. Daarom wordt de id selector gebruikt voor één uniek element.

Wat is klasse?

Net als bij 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. (punt) symbool gevolgd door de naam van de klasse.

Neem aan dat het HTML-bestand de volgende instructies bevat.

CSS-bestand bevat het volgende stukje code.

.kop1{

kleur blauw;

}

Wanneer de browser de HTML-instructie interpreteert, wordt de klasse van het h1-element gecontroleerd, namelijk 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 de kleur blauw.

Het is mogelijk om dezelfde klasse op meerdere elementen te gebruiken. Daarom wordt de klassenkiezer voor meerdere elementen gebruikt.

Verschil tussen id en klasse in CSS

Definitie

id is een selector in CSS die het element opmaakt met een gespecificeerde id, terwijl class een selector is in CSS die de geselecteerde elementen opmaak met een gespecificeerde klasse.

Syntaxis

De id-syntaxis is #id{ css-declaraties; }. De klassensyntaxis is.class { css-declaraties; }

Gebruik

Verder is het gebruik van id om styling toe te passen op één specifiek element. Het gebruik van klasse is om stijl toe te passen op meerdere elementen.

Conclusie

De id en class zijn twee selectors in CSS waarmee styling op de HTML-elementen kan worden toegepast. Het belangrijkste verschil tussen id en class in CSS is dat id wordt gebruikt om styling toe te passen op één uniek element, terwijl class wordt gebruikt om styling op meerdere elementen toe te passen.

Verwijzing:

1. "CSS-syntaxis en selectors." W3Schools Online Web Tutorials, hier beschikbaar.

Afbeelding met dank aan:

1. "CSS.3" door Nikotaf - Eigen werk (CC BY-SA 4.0) via Commons Wikimedia