La cascata è ciò che rende i fogli di stile CSS così utili. In breve, la cascata definisce l'ordine di precedenza su come applicare gli stili in conflitto. In altre parole, se hai due stili:
p {color: red; }p {colore: blu; }
La cascata determina quale colore devono essere i paragrafi, anche se il foglio di stile indica che dovrebbero essere sia rossi che blu. In definitiva solo un colore può essere applicato ai paragrafi, quindi deve esserci un ordine. E questo ordine è applicato da quali selettori (il p nell'esempio sopra) hanno la precedenza più alta e quale ordine appaiono nel documento.
Il seguente elenco è una semplificazione di come il tuo browser decide la precedenza per uno stile:
- Cerca nel foglio di stile un selettore che corrisponda all'elemento. Se non ci sono stili definiti, utilizzare le regole predefinite nel browser
- Cerca nel foglio di stile per i selettori contrassegnati
!importantee applicare quelli agli elementi appropriati. - Tutti gli stili nel foglio di stile sovrascriveranno gli stili di browser predefiniti (tranne nel caso dei fogli di stile dell'utente).
- Più specifico è il selettore di stili, maggiore è la precedenza che avrà. Per esempio,
div> p.classè più specifico dip.classche è più specifico dip. - Infine, se due regole si applicano allo stesso elemento e hanno la stessa precedenza del selettore, quella che è stata caricata scorso sarà applicato. In altre parole, il foglio di stile viene letto dall'alto verso il basso e gli stili vengono applicati uno sopra l'altro.
In base a queste regole, nell'esempio precedente, i paragrafi dovrebbero essere scritti in blu, perché p {colore: blu; } arriva per ultimo nel foglio di stile.
Questa è una spiegazione molto semplificata della cascata. Se sei interessato a saperne di più su come funziona la cascata, dovresti leggere Cosa significa "Cascade" in Cascading Style Sheets ?.
