Differenza tra id e classe in CSS
Share
Il differenza principale tra id e classe in CSS è che il id viene utilizzato per applicare lo stile a un elemento unico mentre la classe viene utilizzata per applicare lo stile a più elementi.
Ci sono varie tecnologie nello sviluppo web. Le principali lingue per lo sviluppo di siti Web sono HTML, CSS e JavaScript. HTML sta per Hyper Text Markup Language. Aiuta a sviluppare la struttura della pagina web. JavaScript aiuta a rendere la pagina web più dinamica. CSS sta per Cascading Style Sheets. Aiuta ad aggiungere stili e rendere le pagine web più presentabili. Le regole CSS si applicano agli elementi HTML. Inoltre, i selettori CSS aiutano a trovare gli elementi e ad applicare lo stile richiesto ai tag HTML. id e class sono due tipi di selettori.
Aree chiave coperte
1. Cosa sono le regole CSS
- Definizione, Esempio
2. Cos'è l'id
- Definizione, Esempio
3. Cos'è la classe
- Definizione, Esempio
4. Differenza tra id e classe
- Confronto tra le principali differenze
Parole chiave
Classe, regole CSS, ID
Cosa sono le regole CSS
Il CSS consiste in un insieme di regole. Il browser può interpretare queste regole e applicarle agli elementi specificati nel documento. Una regola di stile CSS è composta da tre sezioni. Sono il selettore, la proprietà e il valore. La dichiarazione si riferisce alla combinazione di proprietà e valore. Appaiono all'interno di un paio di parentesi graffe come segue.
selettore proprietà: valore;
Selettore - Aiuta a identificare l'elemento per applicare lo stile
Proprietà - Un attributo Tutti gli attributi HTML sono convertiti in proprietà CSS. Alcuni esempi sono colore, allineamento del testo, bordo, ecc.
Valore - Il valore è ciò che viene assegnato alla proprietà. Ad esempio, il blu può essere assegnato al colore della proprietà.
Cos'è l'id
Il programmatore può definire una regola di stile basata sull'id degli elementi. Tutti gli elementi con lo stesso ID verranno applicati con lo stile definito. Per selezionare un elemento con un ID specifico, dovrebbe esserci un simbolo # (cancelletto) seguito dall'id dell'elemento.
Supponiamo che il file HTML contenga una dichiarazione come segue.
Il file CSS contiene la seguente parte di codice.
# Header1
colore blu;
Quando il browser interpreta l'istruzione HTML, controlla l'id dell'elemento h1, che è intestazione1 nel file CSS. Quindi applica la regola CSS definita all'elemento h1. Pertanto, il testo Hello World apparirà in blu.
L'ID è unico all'interno della pagina. Pertanto, il selettore ID viene utilizzato per un elemento unico.
Cos'è la classe
Simile all'id, il programmatore può definire le regole di stile in base alla classe dell'elemento. Tutti gli elementi con la stessa classe verranno applicati con uno stile definito. Per selezionare un elemento con una classe specifica, dovrebbe esserci un. (punto) seguito dal nome della classe.
Supponiamo che il file HTML contenga le seguenti dichiarazioni.
Il file CSS contiene la seguente parte di codice.
.header1
colore blu;
Quando il browser interpreta l'istruzione HTML, controlla la classe dell'elemento h1, che è intestazione1 nel file CSS. Quindi applica la regola CSS definita a tutti gli elementi h1. Pertanto, il testo Hello World 1 e Hello World 2 appariranno in blu.
È possibile utilizzare la stessa classe su più elementi. Pertanto, il selettore di classe viene utilizzato per più elementi.
Differenza tra id e classe in CSS
Definizione
id è un selettore in CSS che disegna l'elemento con un id specificato mentre la classe è un selettore in CSS che disegna gli elementi selezionati con una classe specificata.
Sintassi
La sintassi id è #id dichiarazioni CSS; . La sintassi della classe è .class dichiarazioni css;
uso
Inoltre, l'uso dell'id è quello di applicare lo styling a un elemento specifico. L'uso della classe è di applicare lo styling a più elementi.
Conclusione
L'id e la classe sono due selettori in CSS che consentono di applicare lo stile agli elementi HTML. La principale differenza tra id e classe nei CSS è che id viene utilizzato per applicare lo stile a un elemento unico mentre la classe viene utilizzata per applicare lo stile a più elementi.
Riferimento:
1. "Sintassi CSS e selettori". W3Schools Tutorial Web online, Disponibile qui.
Cortesia dell'immagine:
1. "CSS.3" di Nikotaf - Opera propria (CC BY-SA 4.0) via Commons Wikimedia
