Per evitare la ripetizione del codice, utilizziamo più classi in HTML e CSS. Con CSS, possiamo anche definire e stilizzare entrambe le classi insieme e utilizzare più classi in un elemento assegnando loro ID di classe diversi. Questo approccio può essere seguito utilizzando la sintassi separata da spazi per aggiungere più classi a un elemento HTML.
In questo articolo impareremo come aggiungere più classi a un elemento.
Come utilizzare più classi in CSS?
Per utilizzare due o più classi in un elemento, ogni ID classe sarà separato da uno spazio.
Devi seguire la seguente sintassi per utilizzare più classi in un elemento:
< classe h1 = 'classe_1 classe_2 classe_3' > consegna... h >
In un singolo elemento HTML, puoi includere più di una classe separandole con uno spazio. Per tua comodità, ecco un esempio.
Esempio: utilizzo di più classi in CSS
Nell'esempio seguente creeremo:
- Un'intestazione che utilizza il tag
e assegna il nome della classe “ intestazione ”.
- Successivamente, creeremo un'altra intestazione e la assegneremo a due classi diverse: ' intestazione ' e ' linea ”. Questi ID di classe sono separati da uno spazio:
HTML
h1 >
< h1 classe = 'linea di testa' >
Classi multiple in Un elemento
h1 >
Passiamo ora al file CSS e applichiamo alcune proprietà CSS elencate di seguito:
- Imposta il colore di sfondo dell'intestazione usando la funzione rgb() come ' (69, 51, 151) ”.
- Imposta lo stile del carattere ' corsivo ” per l'intestazione.
Nella classe HTML, la prima intestazione utilizza il nome della classe ' intestazione ”. Quindi, lo stile specificato nella classe specificata verrà implementato sulla prima intestazione:
.intestazione {
colore di sfondo: RGB ( 69 , 51 , 151 ) ;
stile carattere: corsivo
}
Per il ' linea ” classe, abbiamo:
- Imposta il colore dell'intestazione usando la funzione rgb() come ' (255, 0, 0) ”.
- Applica la linea di decorazione del testo come ' sottolineare ”.
La seconda intestazione utilizzerà gli stili di entrambe le classi: “ intestazione ' e ' linea ' classe:
.linea {colore: RGB ( 255 , 0 , 0 ) ;
linea-decorazione-testo:sottolineatura;
}
Dopo l'implementazione, controlla il risultato:
Dall'output, puoi osservare che la seconda intestazione utilizza entrambe le classi CSS.
Conclusione
Per utilizzare più classi su un singolo elemento, utilizzare ID di classe diversi separati da spazi bianchi. Usando questo, possiamo applicare diverse proprietà CSS contemporaneamente. Ci consente di riutilizzare la classe in cui esistono elementi simili. Questo articolo spiega come utilizzare più classi in un singolo elemento e come modellarlo insieme a un esempio.