Per evitare la ripetizione del codice, utilizziamo più classi in HTML e CSS. Con CSS, possiamo anche definire e modellare 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 nello spazio 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 di classe sarà separato da uno spazio.

Devi seguire la seguente sintassi per utilizzare più classi in un elemento:

consegna ..

In un singolo elemento HTML, puoi includere più di una classe separandoli con uno spazio. Per tua comodità, ecco un esempio.

Esempio: usando più classi in CSS

Nell'esempio seguente, creeremo:

• Un'intestazione usando il

  tagga e assegna il nome della classe "intestazione".

• Successivamente, creeremo un'altra intestazione e lo assegneremo a due classi diverse: "intestazione" E "linea". Questi ID di classe sono separati da uno spazio:

Html

Più classi in un elemento

Ora, passiamo al file CSS e applichiamo alcune proprietà CSS elencate di seguito:

• Imposta il colore di sfondo sulla rotta utilizzando 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 sarà implementato sulla prima intestazione:

.intestazione
Background-color: RGB (69, 51, 151);
Font in stile: corsivo

Per il "linea"Classe, abbiamo:

• Impostare 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);
Line di decorazione del testo: sottolineatura;

Dopo l'implementazione, controlla il risultato:

Dall'output, è possibile osservare che la seconda intestazione utilizza entrambe le classi CSS.

Conclusione

Per utilizzare più classi su un singolo elemento, utilizzare diversi ID classi 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 ha spiegato come utilizzare più classi in un singolo elemento e modellalo insieme a un esempio.