February 13
I fogli linguaggio Cascading Style consente elementi diversi per cambiare il modo in una pagina Web visualizzata nel browser. La specifica di regole a cascata stabilito dal World Wide Web Consortium crea un metodo standard per il browser di scegliere quale visualizzare elementi di stile in-browser e quali no. Questo vi dà la possibilità di creare un foglio di stile personalizzato che sovrascrive foglio di stile predefinito di un sito web, fino a quando si capisce come funziona il ordine di cascata.
Tre fattori sono importanti quando si considera il peso di un elemento CSS: l'agente utente, noto anche come il browser, l'autore del sito web e l'utente che visita il sito. Il W3C definisce l'ordine di peso in elementi di stile, con il primo come il più pesante e la quinta come il più leggero. In primo luogo sono stili utente contrassegnati come importanti, come ad esempio "body {font-size: 18px! Important;}".! stili autore Seguono contrassegnati come! importante, seguito da normali stili autore, normali stili utente e stili di user agent.
L'elemento CSS più specifica è quella che siederà in cima dell'ordine cascata e visualizzazione nel browser. specificità CSS è un concetto un po 'complicato più facilmente espressa, cercando in essa come un'equazione matematica. Specificità è determinata dai numeri: Un elemento HTML ha una specificità di 1, mentre una classe, pseudo-classe o attributo ha una specificità del 10. ID ha una specificità del 100, e l'attributo stile ha una specificità del 1000. Ad esempio , l'elemento <p> testo </ p> - senza stile CSS - ha una specificità di 1. Se si aggiunge una classe - <p class = "blue"> testo </ p> - ha un specificità del 11; una per l'HTML <p> e 10 per la classe. Se invece utilizza un ID, come ad esempio <p id = "title"> Titolo </ p>, la specificità è 101: 1 per l'elemento HTML e 100 per l'ID.
Quando due elementi di stile - come stili normali da autore della pagina con la stessa specificità - sono considerati uguali altrimenti, l'elemento che viene ultima nel foglio di stile vincerà fuori. In un esempio da Vitaly Friedman di Smashing Magazine, se si dà l'elemento H1 due stili diversi all'interno del vostro foglio di stile, quello più vicino alla parte inferiore della pagina visualizzerà nel browser.
La comprensione ordine a cascata può aiutare a trovare bug nel foglio di stile, come ad esempio un override accidentale di un elemento in termini di specificità. Per esempio, se ad un certo punto nel foglio si scrive "a {color: red;}" e poi si scrive "pa {color: black;}", che la specificità imposterà tutti i link all'interno dei paragrafi come nero. Questo perché <a> ha solo una specificità di 1, ma <p> e <a> avrà 2.
ordine di cascata importante anche per gli utenti di attuazione i fogli di stile personalizzati sul loro browser, come quelli che aumentano la dimensione di un font o eliminare elementi di colore che non amano, in modo che possano capire come il loro CSS avrà la precedenza codifica dell'autore.