Costruire siti Web ben strutturati sul Web di oggi richiede una profonda comprensione di Fogli di stile. Applica una serie di stili CSS al tuo documento HTML per informare l'aspetto della tua pagina web.
Attributi di classe e ID
I designer a volte devono applicare uno stile solo su alcuni degli elementi in un documento, ma non tutte le istanze di quell'elemento. Per ottenere questi stili desiderati, usa il classe e ID Attributi HTML. Questi attributi sono attributi globali applicabili a quasi tutti tag HTML—quindi, sia che tu dia uno stile a divisioni, paragrafi, collegamenti, elenchi o qualsiasi altro pezzo di HTML nel tuo documento, puoi passare agli attributi di classe e ID per aiutarti a svolgere questo compito!
Selettori di classe
Il selettore di classe imposta diversi stili sullo stesso elemento o tag in un documento. Ad esempio, per richiamare determinate sezioni del tuo testo in un colore diverso come avviso, assegna ai tuoi paragrafi classi come questa:
p { colore: #0000ff; }
p.alert { color: #ff0000; }
Questi stili imposterebbero il colore ditutti paragrafi in blu (#0000ff), ma qualsiasi paragrafo con un attributo di classe di mettere in guardia sarebbe invece in stile rosso (#ff0000). Questo perché l'attributo class ha una specificità maggiore rispetto alla prima regola CSS, che utilizza solo un selettore di tag. Quando si lavora con CSS, una regola più specifica sovrascriverà una regola meno specifica. Quindi, in questo esempio, la regola più generale imposta il colore di tutti i paragrafi, ma la seconda regola, più specifica rispetto a quella sovrascrive quell'impostazione solo in alcuni paragrafi.
Ecco come potrebbe essere utilizzato in alcuni markup HTML:
Questo paragrafo verrebbe visualizzato in blu, che è l'impostazione predefinita per la pagina.
Anche questo paragrafo sarebbe in blu.
E questo paragrafo verrebbe visualizzato in rosso poiché l'attributo class sovrascriverebbe il colore blu standard dallo stile del selettore di elementi.
In quell'esempio, lo stile di p.avviso si applicherebbe solo agli elementi di paragrafo che lo utilizzano mettere in guardia classe. Per utilizzare quella classe su più elementi HTML, rimuovi l'elemento HTML dall'inizio della chiamata di stile, in questo modo:
.alert {colore di sfondo: #ff0000;}
Questa classe è ora disponibile per qualsiasi elemento che ne abbia bisogno. Qualsiasi parte del tuo codice HTML che ha un valore di attributo di classe di mettere in guardia ora otterrà questo stile. Nell'HTML di seguito, abbiamo sia un paragrafo che un'intestazione di secondo livello che utilizzano il mettere in guardia classe. Entrambi mostrano un colore di sfondo rosso:
Questo paragrafo sarebbe scritto in rosso.
Sui siti web di oggi, gli attributi di classe vengono spesso utilizzati sulla maggior parte degli elementi perché è più facile lavorare con una prospettiva di specificità rispetto agli ID. Troverai la maggior parte delle pagine HTML correnti da riempire con attributi di classe, alcuni dei quali vengono ripetuti frequentemente in un documento e altri che possono apparire solo una volta.
Selettori ID
L'ID selettore nomina uno stile specifico senza associarlo a un tag o altro elemento HTML.
Assumi una divisione nel markup HTML che contenga informazioni su un evento. Potresti dare a questa divisione un Attributo ID di evento, quindi delinea quella divisione con un bordo nero largo 1 pixel:
#event { border: 1px solido #000; }
La sfida con Selettori ID è che non possono essere ripetuti in un documento HTML. Devono essere univoci (puoi utilizzare lo stesso ID su più pagine del tuo sito, ma solo una volta in ogni singolo documento HTML). Quindi, per tre eventi che richiedono tutti questo bordo, è necessario identificare gli attributi ID di evento1, evento2, e evento3 e modella ciascuno di essi. Sarebbe, quindi, molto più semplice utilizzare il suddetto attributo di classe di evento e modellali tutti in una volta.
Complicazioni degli attributi ID
Un'altra sfida con gli attributi ID è che hanno una specificità maggiore rispetto agli attributi di classe. Per ignorare uno stile precedentemente stabilito, può essere difficile farlo se hai fatto troppo affidamento sugli ID. Molti sviluppatori web si sono allontanati da utilizzando gli ID nel loro markup, anche se intendono utilizzare quel valore solo una volta, e si sono invece rivolti agli attributi di classe meno specifici per quasi tutti stili.
L'unica area in cui gli attributi ID entrano in gioco è quando si desidera creare una pagina con collegamenti di ancoraggio in-page. Ad esempio, considera un sito Web in stile parallasse che contiene tutto il contenuto su una singola pagina con collegamenti che "saltano" a varie parti di quella pagina. Gli attributi ID e i collegamenti di testo utilizzano questi collegamenti di ancoraggio. Aggiungi il valore di quell'attributo, preceduto dal # simbolo, al href attributo del collegamento, in questo modo:
Questo è il link
Quando viene cliccato o toccato, questo collegamento salta alla parte della pagina che ha questo attributo ID. Se nessun elemento della pagina utilizza questo valore ID, il collegamento non farebbe nulla.
Per creare collegamenti in-page su un sito, sarà richiesto l'uso degli attributi ID, ma puoi comunque utilizzare le classi per scopi generali di stile CSS. Questo è il modo in cui i designer oggi contrassegnano le pagine: usano il più possibile i selettori di classe e si rivolgono agli ID solo quando hanno bisogno che l'attributo agisca non solo come hook per CSS ma anche come collegamento in-page.