For å unngå repetisjon av kode, bruker vi flere klasser i HTML og CSS. Med CSS kan vi også definere og style begge klasser sammen og bruke flere klasser i ett element ved å tilordne dem forskjellige klasse -ID -er. Denne tilnærmingen kan følges ved å bruke den romseparerte syntaksen for å legge til flere klasser til ett HTML-element.

I denne artikkelen lærer vi hvordan du legger til flere klasser til ett element.

Hvordan bruke flere klasser i CSS?

For å bruke to eller flere klasser i ett element, vil hver klasse -ID bli atskilt med et rom.

Du må følge følgende syntaks for å bruke flere klasser i ett element:

overlevering ..

I et enkelt HTML -element kan du inkludere mer enn en klasse ved å skille dem med et rom. For enkelhets skyld, her er et eksempel.

Eksempel: Bruke flere klasser i CSS

I eksemplet nedenfor vil vi lage:

• En overskrift ved hjelp av

  Merk og tilordne klassenavnet "overskrift”.

• Deretter vil vi lage en annen overskrift og tildele den til to forskjellige klasser: “overskrift”Og“linje”. Disse klasse -ID -ene er atskilt med et rom:

Html

Flere klasser i ett element

La oss nå flytte til CSS -filen og bruke noen CSS -egenskaper som er oppført nedenfor:

• Sett bakgrunnsfarge til overskriften ved hjelp av RGB () -funksjonen som “(69, 51, 151)”.
• Angi skriftstilen "kursiv”For overskriften.

I HTML -klasse bruker den første overskriften klassenavnet “overskrift”. Så stilen som er spesifisert i den spesifiserte klassen, vil bli implementert på den første overskriften:

.overskrift
bakgrunnsfarge: RGB (69, 51, 151);
Font-stil: kursiv

For "linje”Klasse, har vi:

• Angi fargen på overskriften ved hjelp av RGB () -funksjonen som "(255, 0, 0)”.
• Bruk tekstdekorasjonslinje som "understrek”.

Den andre overskriften vil bruke stilene til begge klassene: “overskrift”Og“linje”Klasse:

.linje
Farge: RGB (255, 0, 0);
Tekstdekorasjonslinje: Understrek;

Etter implementering, sjekk utfallet:

Fra utgangen kan du observere at den andre overskriften bruker begge CSS -klassene.

Konklusjon

For å bruke flere klasser på et enkelt element, bruk forskjellige klasse -ID -er atskilt med hvite rom. Ved å bruke dette kan vi bruke forskjellige CSS -egenskaper samtidig. Det lar oss gjenbruke klassen der lignende elementer eksisterer. Denne artikkelen forklarte hvordan du bruker flere klasser i et enkelt element og stil den sammen med et eksempel.