Come tutti sappiamo che HTML e CSS vanno di pari passo per creare una progettazione di siti Web reattiva e attraente, ma a volte dobbiamo applicare le stesse proprietà CSS a più tag HTML in base al requisito di progettazione. Ora sorge la domanda, cosa facciamo in una situazione del genere? Qui le lezioni CSS sono arrivate per salvarci dalla scrittura dello stesso codice CSS più volte.

La classe CSS è il lettore chiave nell'aggiunta di più proprietà a un elemento o all'intera pagina web. Tenendo conto dell'importanza della classe CSS, questo articolo mira a fornire una visione della classe CSS con i seguenti risultati di apprendimento:

• Cos'è una classe CSS
• Come utilizzare più classi su un singolo tag HTML
• Classe CSS per tag HTML specifico

Cos'è una classe CSS

In CSS, la classe viene utilizzata per definire un insieme di proprietà per applicare le proprietà CSS in blocco. Una classe può essere utilizzata da più tag HTML alla volta, il che significa che non abbiamo bisogno di scrivere le stesse proprietà CSS nel nostro codice HTML più volte, basta utilizzare invece la classe. Una classe è definita con il gruppo di proprietà CSS. La sintassi generale della classe CSS è fornita di seguito:

.nome della classe
Proprietà CSS

In CSS, un punto (.) viene utilizzato per impostare un nome di classe e le proprietà CSS vengono quindi racchiuse in bretelle.

Come creare una classe CSS

In primo luogo, la classe CSS viene utilizzata per racchiudere una serie di proprietà CSS e quindi applicare queste proprietà chiamando la classe. Il seguente codice spiega come vengono create le classi CSS.

Classe CSS

Questo è il primo paragrafo per il tutorial di classe

Questo è il secondo paragrafo per il tutorial di classe

Nell'esempio sopra creiamo tre classi CSS, contenitore, centro E colore. Queste classi sono applicate su ,

, E

tag rispettivamente.

Produzione

Nella classe contenitore di output sopra specifica l'altezza e la larghezza del contenitore, anche mettere un bordo mentre la classe di colore cambia il colore del carattere e la classe centrale allinea il testo al centro.

Come utilizzare più classi su HTMLTAG singolo

In CSS, possiamo usare più classi su un singolo tag HTML che aiuta a styling HTML in modo più efficiente. L'esempio seguente dimostra meglio questo concetto.

Classe CSS

Questo è il primo paragrafo per il tutorial di classe

Questo è il secondo paragrafo per il tutorial di classe

Questo è il terzo paragrafo per il tutorial di classe

Nel codice sopra, vengono create cinque classi CSS. IL contenitore la classe viene applicata sul tag, mentre il resto delle quattro classi viene applicato su

tag. Inoltre, vengono applicate quattro diverse classi CSS su una singola

Tag (ultimo

Produzione

Nell'output sopra il terzo paragrafo è mostrato con l'applicazione di più classi CSS contemporaneamente.

Come utilizzare le classi in HTML

Possiamo anche specificare una classe CSS per un tag HTML specifico. Questo tipo di classe è utile quando vogliamo applicare lo stesso stile su un tag specifico ogni volta che viene utilizzato. Il seguente esempio ti aiuta a capire meglio.

Esempio

Classe CSS

Questo è il primo paragrafo è scritto all'interno del tag SPAN

Questo è il secondo paragrafo per il tutorial di classe

Questo è il terzo paragrafo per il tutorial di classe

In questo esempio, abbiamo creato una classe di colore specifica per

tagga e lo ha applicato tagga e

.

Produzione

L'output sopra mostra chiaramente che la classe di colore ha funzionato solo

tag perché è specificamente creato per

Conclusione

In CSS, la classe è un attributo utilizzato per applicare più proprietà CSS sui tag HTML. Una singola classe CSS può essere applicata su più tag HTML e viceversa. Il punto (.) il simbolo identifica una classe CSS. In questo articolo, abbiamo appreso le classi CSS, come utilizzare più classi CSS su singoli tag HTML e classe CSS per HTMLTAG specifico. Anche la stessa classe CSS può essere utilizzata da più tag alla volta.