Utilizzo di classi di stili e ID in HTML e CSS

Costruire siti Web sul Web di oggi richiede una profonda conoscenza dei CSS (Cascading Style Sheets). Queste sono le istruzioni che fornisci a un sito Web per determinare come sarà il layout nella finestra del browser. Applica una serie di "stili" al tuo documento HTML che creerà l'aspetto della tua pagina web.

Esistono molti modi per applicare tali stili sopra un documento, ma spesso si desidera utilizzare solo uno stile alcuni degli elementi in un documento, ma non tutte le istanze di quell'elemento. Potresti anche voler creare uno stile che puoi applicare a più elementi in un documento, senza dover ripetere la regola di stile per ogni singola istanza. Per ottenere questi stili desiderati, userete gli attributi HTML di classe e ID. Questi attributi sono attributi globali che possono essere applicati a quasi tutti i tag HTML. Ciò significa che, indipendentemente dal fatto che tu stia scrivendo divisioni, paragrafi, link, elenchi o qualsiasi altra parte di HTML nel tuo documento, puoi rivolgerti agli attributi di classe e ID per aiutarti a svolgere questa attività!

Selettori di classe

Il selettore di classe ti consente di impostare più stili sullo stesso elemento o tag in un documento. Ad esempio, è possibile che alcune sezioni del testo vengano richiamate con un colore diverso dal resto del testo nel documento. Queste sezioni evidenziate potrebbero essere un "avviso" che stai impostando sulla pagina. Puoi assegnare i tuoi paragrafi con classi come questa:

p {color: # 0000ff; } p.alert {color: # ff0000; }

Questi stili avrebbero impostato il colore di tutti i paragrafi in blu (# 0000ff), ma ogni paragrafo con un attributo di classe di "avviso" sarebbe invece disegnato in rosso (# ff0000). Questo perché l'attributo di classe ha una specificità più alta rispetto alla prima regola CSS, che utilizza solo un selettore di tag. Quando si lavora con i CSS, una regola più specifica sovrascriverà quella meno specifica. Quindi, in questo esempio, la regola più generale imposta il colore di tutti i paragrafi, ma la seconda regola più specifica che sostituisce quella impostata solo in alcuni paragrafi.

Ecco come potrebbe essere utilizzato in alcuni markup HTML:

Questo paragrafo verrà visualizzato in blu, che è l'impostazione predefinita per la pagina.

Questo paragrafo sarebbe anche in blu.

E questo paragrafo verrebbe visualizzato in rosso poiché l'attributo di classe sovrascriverebbe il colore blu standard dallo stile del selettore di elementi.
In questo esempio, lo stile di "p.alert" si applica solo agli elementi di paragrafo che utilizzano quella classe di "avviso". Se volessi usare quella classe su più elementi HTML, dovresti semplicemente rimuovere l'elemento HTML dall'inizio della chiamata di stile (assicurati di lasciare il punto (

.) in posizione), come questo:
.alert {background-color: # ff0000;}
Questa classe è ora disponibile per qualsiasi elemento che ne abbia bisogno. Qualsiasi parte del codice HTML che ha un valore di attributo di classe di "avviso" ora otterrà questo stile. Nel codice HTML sottostante, abbiamo sia un paragrafo che un livello di titolo 2 che utilizzano la classe "alert". Entrambi avrebbero uno sfondo di colore rosso basato sul CSS che abbiamo appena mostrato.

Questo paragrafo dovrebbe essere scritto in rosso.

E questo h2 sarebbe anche rosso.

Sui siti web oggi, gli attributi di classe sono spesso usati sulla maggior parte degli elementi perché sono più facili da utilizzare da una prospettiva di specificità che sono gli ID. Troverai la maggior parte delle attuali pagine HTML da riempire con attributi di classe, alcuni dei quali sono ripetuti più volte in un documento e altri che possono apparire solo una volta.

Selettori ID

Il selettore ID ti consente di dare un nome a uno stile specifico senza associarlo con un tag o altro elemento HTML. Supponi di avere una divisione nel markup HTML che contiene informazioni su un evento. Potresti dare a questa divisione un attributo ID di "evento", e quindi se volessi delineare quella divisione con un bordo nero largo 1 pixel, scrivi un codice ID come questo:

#event {border: 1px solid # 000; }
La sfida con i selettori ID è che non possono essere ripetuti in un documento HTML. Devono essere unici (puoi utilizzare lo stesso ID su più pagine del tuo sito, ma solo una volta in ogni singolo documento HTML). Quindi se hai avuto 3 eventi che avevano tutti bisogno di questo confine, dovresti dare loro gli attributi ID di "evento1", "evento2" e "evento3" e stile ciascuno di essi. Sarebbe, quindi, molto più facile usare l'attributo di classe summenzionato di "evento" e definirli tutti contemporaneamente.

Complicazioni degli attributi ID

Un'altra sfida con gli attributi ID è che hanno una specificità più elevata rispetto agli attributi di classe. Ciò significa che se è necessario disporre di CSS che sostituisce uno stile precedentemente stabilito, può essere difficile farlo se si è fatto troppo affidamento sugli ID. È per questo motivo che molti sviluppatori web si sono allontanati dall'utilizzo degli ID nel loro markup, anche se hanno intenzione di utilizzare quel valore una sola volta, e hanno invece rivolto gli attributi di classe meno specifici per quasi tutti gli stili.

L'unica area in cui entrano in gioco gli attributi ID è quando si desidera creare una pagina con collegamenti di ancoraggio in-page. Ad esempio, se si dispone di un sito Web in stile parallasse che contiene tutto il contenuto in una singola pagina con collegamenti che "salta" in varie parti di quella pagina. Questo viene fatto usando attributi ID e collegamenti testuali che usano questi link di ancoraggio. Dovresti semplicemente aggiungere il valore di quell'attributo, preceduto dal simbolo "#", all'attributo "href" del link, in questo modo:

Questo è il link
Quando si fa clic o si tocca, questo collegamento salterà alla parte della pagina che ha questo attributo ID.Se nessun elemento della pagina utilizza questo valore ID, il collegamento non farebbe nulla.

Ricorda, se vuoi creare un collegamento in-page su un sito, sarà necessario l'uso degli attributi ID, ma puoi comunque rivolgerti alle classi per gli scopi generali dello stile CSS. Questo è il modo in cui segniamo le pagine oggi: utilizziamo il più possibile i selettori di classe e utilizziamo gli ID solo quando abbiamo bisogno che l'attributo agisca non solo come un hook per i CSS ma anche come un collegamento in-page.