För att undvika upprepning av kod använder vi flera klasser i HTML och CSS. Med CSS kan vi också definiera och utforma båda klasserna tillsammans och använda flera klasser i ett element genom att tilldela dem olika klass-ID. Detta tillvägagångssätt kan följas genom att använda den blankstegsseparerade syntaxen för att lägga till flera klasser till ett HTML-element.
I den här artikeln kommer vi att lära oss hur du lägger till flera klasser till ett element.
Hur använder man flera klasser i CSS?
För att använda två eller flera klasser i ett element, kommer varje klass-id att separeras med ett mellanslag.
Du måste följa följande syntax för att använda flera klasser i ett element:
< h1 klass = 'klass_1 klass_2 klass_3' > överlämna... h >
I ett enda HTML-element kan du inkludera mer än en klass genom att separera dem med ett mellanslag. För din bekvämlighet, här är ett exempel.
Exempel: Använda flera klasser i CSS
I exemplet nedan skapar vi:
- En rubrik som använder taggen
och tilldelar klassnamnet ' rubrik ”.
- Därefter kommer vi att skapa en annan rubrik och tilldela den till två olika klasser: ' rubrik ' och ' linje ”. Dessa klass-ID separeras med ett mellanslag:
HTML
h1 >
< h1 klass = 'rubriken' >
Flera klasser i Ett element
h1 >
Låt oss nu gå till CSS-filen och tillämpa några CSS-egenskaper som anges nedan:
- Ställ in bakgrundsfärg till rubriken med funktionen rgb() som ' (69, 51, 151) ”.
- Ställ in typsnittsstilen ' kursiv ” för rubriken.
I HTML-klassen använder den första rubriken klassnamnet ' rubrik ”. Så stilen som anges i den angivna klassen kommer att implementeras på den första rubriken:
.rubrik {
bakgrundsfärg: rgb ( 69 , 51 , 151 ) ;
teckensnittsstil:kursiv
}
För ' linje klass, vi har:
- Ställ in färgen på rubriken med hjälp av rgb()-funktionen som ' (255, 0, 0) ”.
- Använd text-decoration-line som ' Understrykning ”.
Den andra rubriken kommer att använda stilarna för båda klasserna: ' rubrik ' och ' linje ' klass:
.linje {färg: rgb ( 255 , 0 , 0 ) ;
text-decoration-line:underline;
}
Efter implementering, kontrollera resultatet:
Från utgången kan du observera att den andra rubriken använder båda CSS-klasserna.
Slutsats
Om du vill använda flera klasser på ett enda element, använd olika klass-ID separerade med blanksteg. Med detta kan vi tillämpa olika CSS-egenskaper samtidigt. Det tillåter oss att återanvända klassen där liknande element finns. Den här artikeln förklarade hur man använder flera klasser i ett enda element och utformar det tillsammans med ett exempel.