I fogli di stile CSS o CSS sono impostati in modo da poter avere molte proprietà che influiscono sullo stesso elemento. Alcune di queste proprietà potrebbero entrare in conflitto l'una con l'altra. Ad esempio, è possibile impostare un colore del carattere di rosso sul tag del paragrafo e, successivamente, impostare un colore del carattere del blu. In che modo il browser sa quale colore creare per i paragrafi? Questo è deciso dalla cascata.
Tipi di fogli di stile
Esistono tre diversi tipi di fogli di stile:
- Fogli di stile dell'autore
- Questi sono fogli di stile creati dall'autore della pagina web. Sono ciò che la maggior parte delle persone pensa quando pensano ai fogli di stile CSS.
- Fogli di stile utente
- I fogli di stile utente sono impostati dall'utente della pagina web. Ciò consente all'utente di avere un maggiore controllo sul modo in cui le pagine vengono visualizzate.
- Fogli di stile dell'agente utente
- Questi sono stili che il browser Web applica alla pagina per aiutare a visualizzare quella pagina. Ad esempio, in XHTML, la maggior parte dei programmi utente visuali visualizza il tag come testo in corsivo. Questo è definito nel foglio di stile dell'agente utente.
Alle proprietà definite in ciascuno dei fogli di stile sopra indicati viene assegnato un peso. Per impostazione predefinita, il foglio di stile dell'autore ha il peso maggiore, seguito dal foglio di stile dell'utente e infine dal foglio di stile dell'agente utente. L'unica eccezione a questo è con la regola! Importante in un foglio di stile utente. Questo ha più peso del foglio di stile dell'autore.
Ordine a cascata
Per risolvere i conflitti, i browser Web utilizzano il seguente ordinamento per determinare quale stile ha la precedenza e verranno utilizzati:
- Innanzitutto, cerca tutte le dichiarazioni che si applicano all'elemento in questione e per il tipo di supporto assegnato.
- Poi guarda da quale foglio di stile proviene. Come sopra, vengono prima i fogli di stile dell'autore, quindi l'utente e l'agente utente. Con! Importanti stili utente con precedenza più alta rispetto agli stili importanti di autore!
- Più specifico è un selettore, maggiore è la precedenza che otterrà. Ad esempio, uno stile su "div.co p" avrà una precedenza più alta di uno solo sul tag "p".
- Infine, ordina le regole in base all'ordine in cui sono state definite. Le regole definite in seguito nell'albero del documento hanno una precedenza maggiore rispetto a quelle definite in precedenza. E le regole di un foglio di stile importato vengono considerate prima delle regole direttamente nel foglio di stile.
