HTML -klasser
Klassen er et attributt til HTML -elementet som brukes til å klassifisere lignende elementer for styling. Klassen kan inneholde flere CSS og JavaScript-relaterte egenskaper som skal brukes til forskjellige HTML-elementer. Den primære bruken av klasseattributter er å legge til egenskapene til stilarkets klasse til et HTML -element. Imidlertid kan JavaScript også kalles ved hjelp av klasseattributtet. Denne artikkelen gir følgende læringsutbytte:
- lage en klasse
- Hvordan bruke en klasse i HTML
Hvordan lage en HTML -klasse
En HTML -klasse kan opprettes ved å bruke klasseattributtet i HTML -elementene. Klassene er definert for å lage flere grupper som kan brukes med de samme stylingegenskapene. Følgende syntaks kan brukes til å lage en HTML -klasse inne i HTML -elementet:
De klassenavn er saks følsom og brukes dermed nøye. Hvis du vil definere flere klasser for et enkelt element, må du dessuten legge til mellomrommet mellom navnene på klassene.
Eksempel 1: Enkeltklasse i et HTML -element
Følgende HTML -kode definerer en klasseattributt i
Tag of Html.
Velkommen
En klasse som heter "primær" er definert i
stikkord. Bildet av koden er gitt nedenfor:
Eksempel 2: Flere klasser i et enkelt HTML -element
Koden som er gitt nedenfor knytter et enkelt HTML -element med flere klasser.
Merk: Når du arbeider med flere klasser i et HTML -element, må navnene på klassene skilles med et rom ellers vil det bli betraktet som en enkelt klasse. Dessuten er klassenavnene bruker definert, slik at du kan velge noen av dem eller opprette dine egne.
Velkommen
Tech -dalen
Ovennevnte kode viser at
Tag er assosiert med den "primære" klassen mens
Tag har to klasser “Secondary” og “Tertiary”
Bildet av koden er vedlagt her:
Hvordan du kobler en HTML -klasse med CSS
Et av de viktigste formålene med HTML -klasser er å style elementene på en kollektiv måte. For eksempel forbinder vi noen få HTML -elementer med samme klassens navn og definerer stylingegenskaper mot det klassenavnet. Disse stilene ville bli distribuert uansett hvor det spesifikke klassenavnet er definert. Følgende trinn kan følges for å bruke HTML -klassen for å lage stiler:
- Start en tag
- Bruk følgende syntaks for å koble klassen til CSS
Klassenavnet refererer til klassen du har definert i HTML -koden, og det startes med DOT som vist i syntaks ovenfor, og etter det er stylingegenskapene definert i krøllete seler.
Eksempel 3: Bruke en enkelt HTML -klasse i CSS
La oss illustrere koblingen av en enkelt HTML -klasse med CSS. Koden skrevet nedenfor bruker enkeltklasse med HTML og CSS:
Velkommen til Linuxhint
- HTML -klassen er navngitt som "merknad" i
stikkord
- Når du ringer det i taggen, skriver du “.merk ”og definert deretter stylingegenskapene i de krøllete seler som kan sees i koden ovenfor. Følgende bilde inneholder koden skrevet i redaktøren:
Nedenfors websiden fra ovennevnte HTML-kode er gitt nedenfor:
Eksempel 4: Bruke flere HTML -klasser i CSS
Som diskutert i den tidligere delen av guiden, kan flere klasser også brukes i et enkelt HTML -element. Koden gitt nedenfor øver på to klasser i CSS og bruker dem deretter i et enkelt HTML -element.
Velkommen til Linuxhint! En ledende innholdsleverandør
HTML -koden er beskrevet nedenfor:
- De tre HTML -klassene brukes kalt "Bod", "Col" og "Fon"
- "BOD" -klassen er definert i taggen mens "col" og "fon" er definert i
stikkord
Som to klasser brukes i
tag, og dermed ville de bli skilt med et rom slik at
oppnår egenskapene til begge klasser.
Følgende bilde viser koden:
Utgangen fra koden på nettsiden vises nedenfor:
Konklusjon
HTML -klasseattributtet brukes til å kategorisere HTML -elementet. Ved hjelp av HTML -klasser kan HTML -elementene bli stylet på en kollektiv måte. Denne artikkelen gir en beskrivende guide om HTML -klasser og hvordan de er assosiert med CSS. Vi har illustrert flere eksempler som presenterer opprettelsen av HTML -klasser og kobler dem til CSS. Det er konkludert med at integrasjonen av HTML -klasser med CSS er den viktigste fordelen med HTML -klasser.