Ciao mi chiamo Jacopo! Sono un UX/UI Designer e Front End Developer. Sul mio sito troverai articoli sullo sviluppo Front End

Per CSS intendiamo l'acronimo di Cascading Style Sheets, che tradotto in italiano è Fogli di Stile a Cascata.

I CSS hanno come caratteristica principale l'ordine di assegnamento a cascata delle proprietà, ciò vuol dire che se un elemento ha due proprietà uguali ma con un valore diverso, verrà assegnata l'ultima inserita.

Quando più regole si applicano allo stesso elemento e vengono specificate le stesse proprietà, esiste uno schema prioritario che determina quale sia la regola con la precedenza.

h1 {color: #000;}
h1 {color: #fff;}

Nell'esempio la seconda regola sovrascriverà la prima, assegnando al titolo il colore bianco.

Specificità dei selettori

Esistono alcune regole di base per il calcolo della specificità. La specificità più bassa
con peso 0 è data dal selettore universale (*), che include tutti gli elementi all'interno del documento.

* {color: black;} /* peso 0*/

I selettori di tipo e gli pseudo-elementi hanno peso 1, quindi un selettore contenente due selettori di tipo e uno pseudo-elemento hanno una specificità con peso pari a 3.

p {color: black;} /* peso 1*/
body p::first-line {color: blue;} /* peso 3 */

I selettori di classe hanno un peso di 10, così come le pseudo-classi e i selettori di attributo. Includere uno di questi selettori con un selettore di tipo fornisce un peso totale di 11.

.a { color: white; } /* peso 10 */
p:first-child { color: red; } /* peso 11 */
p[class=a] { color: green; } /* peso 11 */

I selettori di id hanno un peso di 100, quindi una regola id sostituisce la maggior parte degli altri stili contrastanti.

#ident { color: yellow; } /* peso 100 */

Gli stili CSS inline hanno una specificità maggiore con un peso di 1000, sovrascrivendo così anche le regole id.

<p style="color: black;">Peso 1000</p>

Infine per sovrascrivere tutti gli altri conflitti di stile, includendo quelli definiti nei CSS inline, ecco che entra in gioco la dichiarazione !important. Si noti che !important è applicato solo alle dichiarazioni singole e non interamente alle regole.

p { color: blue !important; }

Se la specificità tra due regole va in conflitto con la stessa, l'ordine della cascata è ciò che determina quale regola verrà applicata.

Cascata

Nei CSS, più di un foglio di stile può influenzare gli stili di un documento. Questa caratteristica è nota come cascata (la parte "C" del CSS) perché il browser unisce tutti i fogli di stile per risolvere eventuali conflitti prima di applicarli.

Le pagine web possono avere più fogli di stile che provengono da tre diversi fonti: quelli del browser, quelli del progettista del sito e quelli dell'utente che legge il documento.

Il foglio di stile del web designer di solito ha priorità massima, seguito dal il foglio di stile personale dell'utente (se presente) e infine quello predefinito del browser.

Applicare i fogli di stile

I web designer hanno tre modi per includere le regole CSS: attraverso gli stili incorporati, con i fogli di stile interni e con i fogli di stile esterni. Tra queste tre tipologie, gli stili inline hanno la precedenza più alta, seguiti da quelli dei fogli di stile interni e per finire quelli dei fogli di stile esterni.

Se la pagina Web include più di un foglio di stile esterno con regole contrastanti (stessa specificità), viene data la precedenza al foglio di stile incluso per ultimo nel markup HTML. Questo è vero anche all'interno di un foglio di stile. Se i selettori sono uguali, la proprietà dichiarata per ultima è quella che verrà applicata.

Per gli stili ereditati, lo stile di un elemento ha la priorità sullo stile ereditato dai suoi antenati.

Vuoi approfondire l'argomento? 🤓 + 📚 = 😄

Libro consigliato

Un modo nuovo e più bello per imparare HTML5 e CSS3.

Ti sei iscritto con successo al blog di Jacopo Kahl - UX/UI Designer e Front End Developer
Bentornato! Hai effettuo l'accesso al blog.
Ottimo! Ti sei appena registrato.
Perfetto! Il tuo account è attivo, ed hai l'accesso a tutti i contenuti.