# CSS/Cascade

CSS
Copertina Tutti i moduli · Sviluppo
    Copertina
* Regole e sintassiCSS/Regole_e_sintassi
** SelettoriCSS/Selettori
** CascadeCSS/Cascade
** Unità di misura, ereditarietà e box modelCSS/Unità_di_misura,_ereditarietà_e_box_model
* Supporti di visualizzazione
** Media
** Media con pagine
** Fogli di stile parlati
* Proprietà di baseCSS/Proprietà_di_base
** SfondoCSS/Proprietà_di_base/Sfondo
** Testo baseCSS/Proprietà_di_base/Testo_base
** Testo avanzatoCSS/Proprietà_di_base/Testo_avanzato
** ListeCSS/Liste
** Tabelle
** Animazioni, trasformazioni, transizioni
* Disegnare la struttura della paginaCSS/Disegnare_la_struttura_della_pagina
** PosizionamentoCSS/Posizionamento
* Contenuto generatoCSS/Contenuto generato
* Altre proprietàCSS/Altre_proprietà
* CompatibilitàCSS/Compatibilità
* ReferenceCSS/Reference
Modifica il sommario
Per cascade si intendono le regole con le quali il browser assegna ad un elemento una dichiarazione di stile. Questo è importante nel caso di selettori diversi che indichino lo stesso elemento fornendo dichiarazioni contrastanti.
Nel caso di fogli di stile importati, vengono considerate gli stili del foglio che li importa.

## L'origine di un foglio di stile

Prima di analizzare il cascade, è bene vedere le possibili origini di un foglio di stile:
* autore: è lo stile definito nel sorgente HTML della pagina dal webmaster o dal grafico del sito
* browser: i browser conformi agli standard del World Wide Web Consortium devono avere un foglio di stile predefinito da assegnare alle pagine
* utente: taluni browser mettono a disposizione all'utente la possibilità di creare un foglio di stile personalizzato, magari tramite un'interfaccia grafica e traducendo poi le impostazioni dell'utente in dichiarazioni CSS
È possibile quindi che questi fogli di stile si sovrappongano e in questo caso vengono applicati in base al cascade.

## La specificità di un selettore

Altro elemento importante è la specificità di un selettore. Vediamo come calcolarla:
* calcolare il numero di attributi ID nel selettore (= a)
* calcolare il numero degli altri attributi (es. classi) e pseudoclassi del selettore (= b)
* calcolare il numero dei nomi degli elementi HTML (= c)
Concatenare ora i tre numeri nell'ordine a + b + c. Si faccia attenzione a scegliere una base di numerazione opportuna: se, ad esempio, b vale 12, si può scegliere una base esadecimale in modo tale che il numero risulti, ad esempio, 0-c-7 invece che 0-12-7.
Si noti che l'attributo style degli elementi HTML possono essere considerati selettori ID, in quanti hanno un riferimento univoco con il tag a cui si riferiscono.

## !important

Ultima regola da vedere prima di analizzare le regole del cascade è la dichiarazione !important la quale indica al browser che una regola è particolarmente importante, dando ad essa priorità rispetto ad eventuali proprietà contrastanti in altre dichiarazioni. Vediamo la sintassi:

## Attribuire uno stile ad un elemento

Il CSS assegna un peso a ciascun blocco di dichiarazioni di stile; nel caso di sovrapposizione di dichiarazioni, vince quella con maggior peso.
Analizziamo finalmente le regole seguite dal browser per attribuire uno stile ad un elemento HTML nella pagina:
* dapprima cerca tutte le dichiarazioni identificate dal selettore che corrisponde all'elemento in questione
* la prima analisi riguarda l'origine degli stili. Per quanto riguarda le normali dichiarazioni, hanno la precedenza, in ordine, gli stili dell'autore, dell'utente e del browser. Nel caso di dichiarazioni seguite da !important, invece, hanno la precedenza, in ordine, gli stili dell'utente, dell'autore e del browser; questo per permettere la piena accessibilità dei contenuti da parte di utenti con handicap visivi, ad esempio. Le dichiarazioni !important superano sempre le dichiarazioni normali.
* la seconda distinzione riguarda la specificità del selettore: ha la precedenza il selettore con specificità maggiore
* nel caso due dichiarazioni abbiano stessi peso, specificità e origine vince quella fornita per ultima. Le dichiarazioni dei fogli di stile importati sono considerate come precedenti quasiasi dichiarazione del foglio che importa.