Classi HTML
La classe è un attributo dell'elemento HTML utilizzato per classificare elementi simili per lo stile. La classe può contenere diverse proprietà CSS e JavaScript da utilizzare per vari elementi HTML. L'uso principale degli attributi di classe è aggiungere le proprietà della classe del foglio di stile a un elemento HTML. Tuttavia, JavaScript può anche essere chiamato usando l'attributo della classe. Questo articolo fornisce i seguenti risultati di apprendimento:
- Crea una classe
- Come usare una classe in HTML
Come creare una classe HTML
Una classe HTML può essere creata utilizzando l'attributo di classe negli elementi HTML. Le classi sono definite per creare diversi gruppi che possono essere utilizzati con le stesse proprietà di stile. La seguente sintassi può essere utilizzata per creare una classe HTML all'interno dell'elemento HTML:
IL nome della classe è sensibile al caso e quindi essere usato con attenzione. Inoltre, se si desidera definire più classi per un singolo elemento, è necessario aggiungere lo spazio tra i nomi delle classi.
Esempio 1: classe singola in un elemento HTML
Il seguente codice HTML definisce un attributo di classe in
Tag di HTML.
Benvenuto
Una classe denominata "primaria" è definita in
etichetta. L'immagine del codice è fornita di seguito:
Esempio 2: più classi in un singolo elemento HTML
Il codice fornito di seguito associa un singolo elemento HTML con più classi.
Nota: Quando si tratta di più classi in un elemento HTML, i nomi delle classi devono essere separati da uno spazio, altrimenti verrebbero considerati come una singola classe. Inoltre, i nomi delle classi sono definiti dall'utente in modo da poter scegliere uno di essi o creare i propri.
Benvenuto
La valle della tecnologia
Il codice sopra mostra che il
Il tag è associato alla classe "primaria" mentre il
Il tag ha due classi "secondarie" e "terziario"
L'immagine del codice è allegata qui:
Come collegare una classe HTML con CSS
Uno degli scopi principali delle classi HTML è quello di modellare gli elementi in modo collettivo. Ad esempio, associamo alcuni elementi HTML allo stesso nome di classe e definiamo le proprietà di stile contro quel nome di classe. Quegli stili sarebbero distribuiti ovunque venga definito quel nome di classe specifico. I seguenti passaggi possono essere seguiti per utilizzare la classe HTML per creare stili:
- Avvia un tag
- Usa la seguente sintassi per collegare la classe con il tuo CSS
Il nome della classe si riferisce alla classe che hai definito nel codice HTML e viene avviato con DOT come mostrato nella sintassi sopra e successivamente, le proprietà di stile sono definite nelle parentesi graffe.
Esempio 3: usando una singola classe HTML in CSS
Illustriamo il collegamento di una singola classe HTML con CSS. Il codice scritto di seguito utilizza la singola classe con HTML e CSS:
Benvenuti in Linuxhint
- La classe HTML è denominata "nota" in
etichetta
- Quando lo chiami nel tag, scrivi ".Nota "e quindi definito le proprietà di styling all'interno delle parenti ricci, come si può vedere nel codice sopra. La seguente immagine fornisce il codice scritto nell'editor:
Di seguito è riportato l'output di Web-Page del codice HTML sopra:
Esempio 4: utilizzando più classi HTML in CSS
Come discusso nella parte precedente della guida, le più classi possono essere utilizzate anche in un singolo elemento HTML. Il codice fornito di seguito pratichi due classi in CSS e quindi usale in un singolo elemento HTML.
Benvenuti in Linuxhint! un fornitore di contenuti leader
Il codice HTML è descritto di seguito:
- Le tre classi HTML sono usate come "BOD", "Col" e "Fon"
- La classe "BOD" è definita in tag mentre i "col" e "fon" sono definiti in
etichetta
Poiché due classi vengono utilizzate in
tagg, quindi sarebbero separati da uno spazio in modo che
ottiene le proprietà di entrambe le classi.
La seguente immagine mostra il codice:
L'output del codice sulla pagina Web è mostrato di seguito:
Conclusione
L'attributo di classe HTML viene utilizzato per classificare l'elemento HTML. Con l'aiuto delle classi HTML, gli elementi HTML possono essere disegnati in modo collettivo. Questo articolo fornisce una guida descrittiva sulle classi HTML e come sono associate a CSS. Abbiamo illustrato diversi esempi che presentano la creazione di classi HTML e collegandole con CSS. Si è concluso che l'integrazione delle classi HTML con CSS è il vantaggio principale delle classi HTML.