Classe vs Id | Spiegato

Gli elementi vengono aggiunti al file HTML per creare una pagina Web. Tuttavia, per la manipolazione o lo styling degli elementi richiesti, è essenziale accedervi prima. Ai fini corrispondenti, è possibile aggiungere un ID o una classe durante la definizione di HTML. Questo ID o classe può essere successivamente utilizzato per le operazioni menzionate.

I risultati di apprendimento di questo post sono:

• Cos'è l'attributo di classe?
• Come aggiungere attributi di classe agli elementi HTML?
• Come modellare l'attributo di classe con CSS?
• Come utilizzare l'attributo di classe con più nomi?
• Qual è l'attributo ID?
• Come modellare l'attributo ID?
• Differenza tra attributi di classe e ID

Cos'è l'attributo di classe?

In HTML, il "classe"L'attributo è specificato con gli elementi. L'attributo di classe può identificare uno o più nomi di classe per un elemento HTML. Inoltre, lo stesso nome di classe può essere assegnato a diversi elementi HTML. Di conseguenza, questi nomi di classe sono accessibili dal codice CSS e JavaScript per applicare diverse funzioni.

Come aggiungere l'attributo di classe agli elementi HTML?

Innanzitutto, aggiungi/crea un elemento div con il nome della classe "principale"Nel file HTML. Aggiungere

E

Tag per includere alcuni contenuti all'interno di questo elemento. Inoltre, entrambi questi tag hanno lo stesso attributo di classe "testo":

Benvenuti in Linuxhint!

Miglior sito web tutorial

Il codice sopra menzionato farà due divisioni nella pagina Web. Per distinguerli, applichiamo alcune proprietà CSS.

Come modellare l'attributo di classe con CSS?

La sezione seguente dimostra le proprietà di styling applicate alle classi di cui sopra.

Specificare il selettore di classe

IL "."Il simbolo in CSS prima di ogni nome di classe è noto come"Selettore di classe". Il nome della classe seguito da questo simbolo viene utilizzato per accedere alla classe.

Style Main Div

.principale
larghezza: 500px;
Altezza: 300px;
Bordo: 7px Solid #379237;
Margine: 15px Auto;
Background-color: #A0E66B;

L'elemento div con il nome di classe "principale"È disegnato con le proprietà descritte di seguito:

• "larghezza"La proprietà imposta la larghezza dell'elemento.
• "altezza"La proprietà imposta l'altezza dell'elemento.
• "confine"La proprietà viene utilizzata per impostare il bordo con il valore che specifica la larghezza, il tipo di bordo e il colore del bordo.
• "margine"Proprietà imposta/regola gli spazi attorno al div.
• "colore di sfondo"La proprietà viene utilizzata per impostare il colore di sfondo dell'elemento.

Si può vedere che il div con il nome di classe "principale"È disegnato con successo. IL "classe"Il testo non è ancora disegnato:

Classe di testo di stile

.testo
Testo-align: centro;
Font-size: 40px;
colore viola;

Il testo di classe del

E

I tag sono disegnati fornendo il codice sopra. La descrizione del codice sopra è elencata di seguito:

• "allineamento"La proprietà imposta l'allineamento del testo dell'elemento.
• "dimensione del font"La proprietà imposta la dimensione del carattere dell'elemento.
• "colore"La proprietà viene utilizzata per applicare il colore al testo dell'elemento.

Ora, gli elementi relativi a entrambe le classi sono stati disegnati con successo:

Come utilizzare l'attributo di classe con più nomi?

Supponiamo, vogliamo aggiungere due paragrafi. Uno con il colore arancione e l'altro con semplice nero. Entrambi devono avere le stesse proprietà di stile tranne il colore.

Per fare ciò, nel file HTML, prima, crea un elemento div con il nome della classe "principale". Quindi, all'interno di questo div aggiungi due

Tag con attributi di classe. Il primo

Il tag è associato ad entrambe le classi. L'altro

Il tag è assegnato con la classe "testo" soltanto:

"Il successo è il migliore quando è condiviso"

Citazioni di successo

Testo di classe di stile

.testo
Testo-align: centro;
Font-size: 40px;
Font-weight: audace;
imbottitura: 20px;

IL "testo"La classe è disegnata con le proprietà descritte di seguito:

• "allineamento"Proprietà con il valore"centro"Imposta l'allineamento del testo al centro.
• "dimensione del font"La proprietà viene utilizzata per specificare la dimensione del carattere dell'elemento.
• "Font-peso"Con il valore"grassetto"Renderà il testo in grassetto.
• "imbottitura"La proprietà viene utilizzata per specificare lo spazio nella parte superiore del contenuto dell'elemento.

Classe di stile para

.para
Colore: #dc5f00;

Il nome di seconda classe para viene dato solo colore della proprietà in stile con valore #dc5f00.

Vediamo qual è il risultato del codice HTML sopra:

Si può osservare che le proprietà specificate nella classe di testo sono applicate ad entrambi gli elementi. Ma come abbiamo anche assegnato la classe Para al primo elemento P, la proprietà del primo colore è cambiata.

Cos'è l'attributo ID?

IL "id"L'attributo deve essere unico per ogni elemento in un intero elemento HTML. Questo attributo è utilizzato da CSS e JavaScript per eseguire azioni diverse. Non possiamo usare più nomi ID per un elemento.

Html

Nel file HTML, aggiungi due

Tag con un po 'di testo. Il primo

Il tag è chiamato ID come "parà":

Benvenuti in Linuxhint!

Miglior sito web tutorial

Come modellare l'attributo ID?

La sezione seguente dimostra le proprietà di styling applicate all'attributo ID sopra.

Selettore ID

In HTML, il "#"Il segno è anche noto come"Selettore ID". Il nome ID seguito da questo simbolo viene utilizzato per accedere all'elemento con questo ID.

Style Para ID

#para
Testo-align: centro;
Font-size: 40px;
colore viola;

L'elemento con il nome "parà"È disegnato con le proprietà descritte di seguito:

• "allineamento"La proprietà rende allineato il centro di testo.
• "dimensione del font"La proprietà regola la dimensione del testo.
• "colore"La proprietà trasforma il colore del testo viola.

Produzione

Classe vs Id

Ecco l'elenco delle differenze chiave tra gli attributi di classe e ID:

attributo id	attributo di classe
L'attributo ID deve essere univoco per ogni elemento in HTML.	Una classe può essere applicata a più di un elemento HTML.
Un attributo ID può essere allegato a un elemento.	Possiamo legare più selettori di classe a un elemento.
In CSS, per applicare stili all'ID, il "#"Viene utilizzato il simbolo seguito dal nome ID.	In CSS, per modellare una classe che usiamo "."Seguito dal nome della classe per accedere alla classe specifica.
Sintassi: #id // Dichiarazioni CSS	Sintassi: .classe // Dichiarazioni CSS

Abbiamo confrontato le differenze tra gli attributi di classe e ID.

Conclusione

In HTML, l'attributo di classe può contenere più nomi di classi. L'attributo ID non può contenere più nomi. Deve essere unico in un intero documento HTML. Tuttavia, entrambi gli attributi sono utilizzati per accedere agli elementi HTML pertinenti. Questo blog ha spiegato la differenza tra gli attributi ID e la classe con esempi.