Om herhaling van code te voorkomen, gebruiken we meerdere klassen in HTML en CSS. Met CSS kunnen we beide klassen ook samen definiëren en stylen en meerdere klassen in één element gebruiken door ze verschillende klasse-ID's toe te wijzen. Deze benadering kan worden gevolgd door de door spaties gescheiden syntaxis te gebruiken om meerdere klassen aan één HTML-element toe te voegen.
In dit artikel leren we hoe je meerdere klassen aan één element kunt toevoegen.
Hoe meerdere klassen in CSS te gebruiken?
Om twee of meer klassen in één element te gebruiken, wordt elk klasse-ID gescheiden door een spatie.
U moet de volgende syntaxis volgen om meerdere klassen in één element te gebruiken:
< h1 klasse = 'class_1 class_2 class_3' > overhandigen... h >
In een enkel HTML-element kunt u meer dan één klasse opnemen door ze te scheiden met een spatie. Voor uw gemak is hier een voorbeeld.
Voorbeeld: Meerdere klassen gebruiken in CSS
In het onderstaande voorbeeld maken we:
- Een kop met de tag
en wijs de klassenaam toe “ rubriek ”.
- Vervolgens zullen we een andere kop maken en deze toewijzen aan twee verschillende klassen: ' rubriek ' en ' lijn ”. Deze klasse-ID's worden gescheiden door een spatie:
HTML
h1 >
< h1 klas = 'kopregel' >
Meerdere klassen in Eén element
h1 >
Laten we nu naar het CSS-bestand gaan en enkele onderstaande CSS-eigenschappen toepassen:
- Stel de achtergrondkleur in op de kop met de functie rgb() als ' (69, 51, 151) ”.
- Stel de letterstijl ' cursief ” voor de kop.
In HTML-klasse gebruikt de eerste kop de klassenaam ' rubriek ”. De stijl die is opgegeven in de opgegeven klasse, wordt dus geïmplementeerd op de eerste kop:
.rubriek {
achtergrondkleur: rgb ( 69 , 51 , 151 ) ;
lettertype-stijl:cursief
}
Voor de ' lijn ” klasse, we hebben:
- Stel de kleur van de kop in met de functie rgb() als ' (255, 0, 0) ”.
- Pas tekst-decoratie-lijn toe als ' onderstrepen ”.
De tweede kop zal de stijlen van beide klassen gebruiken: “ rubriek ' en ' lijn ' klas:
.lijn {kleur: rgb ( 255 , 0 , 0 ) ;
tekst-decoratie-lijn:onderstrepen;
}
Controleer na de implementatie het resultaat:
Uit de uitvoer kunt u zien dat de tweede kop beide CSS-klassen gebruikt.
Conclusie
Om meerdere klassen op een enkel element te gebruiken, gebruikt u verschillende klasse-ID's, gescheiden door spaties. Hiermee kunnen we verschillende CSS-eigenschappen tegelijk toepassen. Het stelt ons in staat om de klasse opnieuw te gebruiken waar vergelijkbare elementen bestaan. In dit artikel wordt uitgelegd hoe u meerdere klassen in een enkel element kunt gebruiken en hoe u dit samen met een voorbeeld kunt opmaken.