Nwlapcug.com


Le regole CSS per CSS3

Il linguaggio di fogli di stile CSS consente diversi elementi modificare l'aspetto di una pagina Web nel browser. La specifica CSS regole stabilite dal Consorzio World Wide Web crea un metodo standard per il tuo browser scegliere quali elementi di stile visualizzano nel browser, e quali no. Questo vi dà la possibilità di creare un foglio di stile personalizzato che esegue l'override di foglio di stile predefinito di un sito Web, purché si capisce come funziona l'ordine CSS.

Peso

Tre fattori importanti quando considerando il peso di un elemento CSS: l'agente utente, noto anche come il browser, l'autore del sito e l'utente che visita il sito Web. Il W3C definisce l'ordine del peso in elementi di stile, con il primo come il più pesante e il quinto come il più leggero. Prima gli stili dell'utente contrassegnati come! importante, come "corpo {font-size: 18px! importante;}." Ci sono poi gli stili autore contrassegnati come! importante, seguito da autore normale gli stili, gli stili normale utente e utente agente.

Specificità

L'elemento più specifico di CSS è quello che siederà nella parte superiore dell'ordine CSS e visualizzare nel browser. Specificità CSS è un concetto un po' difficile più facilmente espressa nel guardarla come un'equazione matematica. La specificità è determinata dai numeri: elemento HTML ha una specificità pari a 1, mentre una classe, pseudo-classe o un attributo ha una specificità di 10. Un ID ha una specificità del 100, e l'attributo di stile ha una specificità di 1000. Ad esempio, l'elemento < p > testo </p >..--con nessun CSS styling..--ha una specificità del 1. Se si aggiunge una classe-- < classe p = "blue" > testo </p >..--ha una specificità di 11; uno per il codice HTML < p > e 10 per la classe. Se si utilizza invece un ID, ad esempio < id p = "title" > </p >, titolo la specificità è 101:1 per l'elemento HTML e 100 per l'ID.

Ordine

Quando due elementi di stile, ad esempio stili normali dall'autore della pagina con la stessa specificità..--altrimenti sono considerati uguali, si vincerà l'elemento che arriva ultima nel foglio di stile. In un esempio da Vitaly Friedman di Smashing Magazine, se si danno l'elemento H1 due stili diversi all'interno del foglio di stile, il più vicino alla parte inferiore della pagina verrà visualizzato nel browser.

Perché è importante

Comprendere CSS ordine può aiutare a trovare bug nel foglio di stile, come un override accidentale di un elemento in termini di specificità. Per esempio, se a un certo punto nel foglio si scrive "un {colore: rosso;}" e più tardi si scrive "p un {colore: nero;}", 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 > volontà hanno 2.

Ordine CSS questioni anche agli utenti di fogli di stile personalizzati di esecuzione nei loro browser, come quelli che aumentare la dimensione di un tipo di carattere o eliminare gli elementi di colore che non piace, così che possano capire come loro CSS eseguirà l'override dell'autore di codifica.