Klasse vs ID | Forklart

Elementer legges til HTML -filen for å opprette en webside. For manipulasjon eller styling av de nødvendige elementene er det imidlertid viktig å få tilgang til dem først. For tilsvarende formål kan en ID eller klasse legges til mens du definerer HTML. Denne IDen eller klassen kan senere brukes til nevnte operasjoner.

Læringsutbyttet til dette innlegget er:

• Hva er klasseattributtet?
• Hvordan legge til klasseattributter til HTML -elementer?
• Hvordan du styler klasse attributt med CSS?
• Hvordan bruke klasseattributt med flere navn?
• Hva er ID -attributtet?
• Hvordan style ID -attributt?
• Forskjell mellom klasse- og ID -attributter

Hva er klasseattributtet?

I HTML, “klasse”Attributt er spesifisert med elementene. Klasseattributtet kan identifisere ett eller flere klassenavn for et HTML -element. Dessuten kan det samme klassenavnet tilordnes forskjellige HTML -elementer. Som et resultat får disse klassenavnene tilgang til CSS- og JavaScript -koden for å bruke forskjellige funksjoner.

Hvordan legge til klasseattributt til HTML -elementer?

Først, legg til/lag et divelement med klassenavnet “hoved-”I HTML -filen. Legg til

og

Tagger for å inkludere noe innhold i dette elementet. Dessuten har begge disse taggene samme klasseattributt "tekst”:

Velkommen til Linuxhint!

Beste opplæringsnettsted

Koden som er nevnt over vil gjøre to divisjoner på websiden. For å skille dem, la oss bruke noen CSS -egenskaper.

Hvordan du styler klasse attributt med CSS?

Avsnittet nedenfor viser stylingegenskapene som brukes på klassene ovenfor.

Spesifiser klassevelger

“.”Symbol i CSS før hvert klassenavn er kjent som“Klassevelger”. Klassenavnet etterfulgt av dette symbolet brukes til å få tilgang til klassen.

Style Main Div

.hoved
Bredde: 500px;
Høyde: 300px;
Grense: 7px Solid #379237;
Margin: 15px Auto;
Bakgrunnsfarge: #A0E66B;

Div -elementet med klassenavnet “hoved-”Er stylet med egenskaper som er beskrevet nedenfor:

• “bredde”Eiendom setter elementets bredde.
• “høyde”Eiendom setter elementets høyde.
• “grense”Eiendom brukes til å sette grensen til verdien som spesifiserer grensens bredde, grensetype og farge.
• “margin”Eiendomssett/justerer mellomrommene rundt div.
• “bakgrunnsfarge”Eiendom brukes til å stille inn elementets bakgrunnsfarge.

Det kan sees at DIV med klassenavnet “hoved-”Er vellykket stylet. “klasse”Tekst er ikke stylet ennå:

Stiltekstklasse

.tekst
tekst-align: sentrum;
Font-størrelse: 40px;
Farge: lilla;

Klasseteksten til

og

Tagger er stylet ved å gi koden ovenfor. Beskrivelsen av ovennevnte kode er listet opp nedenfor:

• “Tekstalign”Eiendom setter justeringen av elementets tekst.
• “skriftstørrelse”Eiendom setter elementets skriftstørrelse.
• “farge”Eiendom brukes til å bruke farge på elementets tekst.

Nå har elementer relatert til begge klasser blitt stylet vellykket:

Hvordan bruke klasseattributt med flere navn?

Anta at vi ønsker å legge til to avsnitt. Den ene med fargen oransje og den andre med enkel svart. Begge må ha de samme stylingegenskapene bortsett fra fargen.

For å gjøre det, i HTML -filen, oppretter du først et DIV -element med klassenavnet "hoved-”. Deretter legger du inn i denne diven til to

Tagger med klasseattributter. Den første

Tag er assosiert med begge klasser. Den andre

Tag er tilordnet klassen "tekst" bare:

"Suksess er best når den deles"

Suksess sitater

Stilklasse tekst

.tekst
tekst-align: sentrum;
Font-størrelse: 40px;
Fontvekt: fet;
Padding-top: 20px;

“tekst”Klasse er stylet med egenskapene beskrevet nedenfor:

• “Tekstalign”Eiendom med verdien”senter”Setter tekstjusteringen i sentrum.
• “skriftstørrelse”Eiendom brukes til å spesifisere elementets skriftstørrelse.
• “Fontvekt”Med verdien”dristig”Vil gjøre teksten fet.
• “Padding-top”Eiendom brukes til å spesifisere plassen øverst i elementets innhold.

Stilklasse para

.para
Farge: #DC5F00;

Second Class Name Para er bare gitt stilegenskapsfarge med verdi #DC5F00.

La oss se hva utfallet av ovennevnte HTML -kode er:

Det kan observeres at egenskapene som er spesifisert i tekstklassen, brukes på begge elementene. Men ettersom vi også har tildelt PARA -klassen til det første P -elementet, har den første fargeegenskapen endret seg.

Hva er ID -attributt?

“id”Attributt må være unik for hvert element i et helt HTML -element. Denne attributtet brukes av CSS og JavaScript for å utføre forskjellige handlinger. Vi kan ikke bruke flere ID -navn for et element.

Html

I HTML -filen, legg til to

Tagger med litt tekst. Den første

Tag er kalt ID som "para”:

Velkommen til Linuxhint!

Beste opplæringsnettsted

Hvordan style ID -attributt?

Avsnittet nedenfor viser stylingegenskapene som brukes på ID -attributtet ovenfor.

ID -velger

I HTML, “#”Tegn er også kjent som“ID -velger”. ID -navnet etterfulgt av dette symbolet brukes til å få tilgang til elementet med denne IDen.

Stil para id

#Para
tekst-align: sentrum;
Font-størrelse: 40px;
Farge: lilla;

Elementet med navnet “para”Er stylet med egenskapene beskrevet nedenfor:

• “Tekstalign”Eiendom gjør at tekstsenteret er på linje.
• “skriftstørrelse”Eiendom justerer størrelsen på teksten.
• “farge”Eiendom gjør fargen på teksten lilla.

Produksjon

Klasse vs ID

Her er listen over viktige forskjeller mellom klasse- og ID -attributter:

ID -attributt	Klasseattributt
ID -attributtet må være unik for hvert element i HTML.	En klasse kan brukes på mer enn ett HTML -element.
Én ID -attributt kan festes til ett element.	Vi kan binde flere klasseselgere til et element.
I CSS, for å bruke stiler på ID, "#”Symbol etterfulgt av ID -navnet brukes.	I CSS, for å style en klasse vi bruker “.”Etterfulgt av klassenavnet for å få tilgang til den spesifikke klassen.
Syntaks: #id // CSS -erklæringer	Syntaks: .klasse // CSS -erklæringer

Vi sammenlignet forskjellene mellom klasse- og ID -attributtene.

Konklusjon

I HTML kan klasseattributtet inneholde flere klassenavn. ID -attributtet kan ikke inneholde flere navn. Det må være unikt i et helt HTML -dokument. Imidlertid brukes begge attributtene for tilgang til relevant HTML -element (er). Denne bloggen har forklart forskjellen mellom ID- og klasseattributtene med eksempler.