Ereditariet=E0, cascade, conflitti tra stili | Guida = CSS

Ereditariet=E0,=20 cascade, conflitti tra stili =

Se c'=E8 una lezione di questa guida che dovreste = stampare e=20 conservare in una cartellina =E8 quella che state per = leggere. Stiamo=20 per entrare nel cuore del meccanismo di funzionamento dei = CSS. Sono=20 regole un p=F2 complesse, ma basilari. Quindi attenzione = massima. Gli=20 esempi che accompagnano la parte teorica vi aiuteranno nel = percorso=20 di apprendimento: usateli sempre.

Ereditariet=E0

Il primo concetto =E8 quello di ereditariet=E0. = Secondo questo=20 meccanismo le impostazioni stilistiche applicate ad un = elemento=20 ricadono anche sui suoi discendenti. Almeno fino a quando, = per un=20 elemento discendente, non si imposti esplicitamente un = valore=20 diverso per quella propriet=E0. L'esempio =E8 al riguardo = chiarificatore. Se=20 impostiamo il colore rosso per il testo (color: red;) = a=20 livello dell'elemento BODY tutti gli altri elementi = suoi=20 discendenti erediteranno questa impostazione. Ma se ad un = certo=20 punto definiamo nel codice del CSS un selettore con la = propriet=E0=20 color: black; l'ereditariet=E0 viene spezzata.

Non tutte le propriet=E0 sono ereditate e lo renderemo = esplicito=20 nell'analisi di ciascuna di esse. In genere sono quelle = attinenti la=20 formattazione del box model (vedi lezione=20 14): margini, bordi, padding, background le pi=F9 = importanti. Il=20 motivo =E8 semplice. Ereditare un bordo =E8 semplicemente = senza senso.=20 Se ne imposto uno, diciamo, per un paragrafo sarebbe assurdo = che un=20 elemento <A> o un testo in grassetto vengano = circondati=20 dallo stesso bordo!

Fin qui tutto semplice. Ora scendiamo nei dettagli.=20 L'ereditariet=E0 non basta a spiegare le molteplici = possibilit=E0 di=20 relazione tra le regole di un CSS.

Peso e origine

Da qui in avanti affronteremo un'altra serie di concetti=20 fondamentali tutti riconducibili comunque ad uno stesso = ambito: i=20 conflitti possibili tra gli stili e le regole. Tenteremo in = pratica=20 di rispondere a quesiti come questo. Se definisco queste = regole in=20 un CSS:

p {color: black;}
.testo {color: = red;}

E in una pagina HTML scrivo questo codice:

<p class=3D"testo">Testo del=20 paragrafo</p>

Perch=E8 il testo del paragrafo sar=E0 rosso e non nero? = Perch=E8 il=20 selettore classe prevale su quello semplice con elemento? = Provare=20 per credere: esempio.

Il primo concetto da imparare =E8 quello di peso. = Si=20 riferisce alla maggiore o minore importanza da assegnare a = ciascuna=20 regola. Un primo criterio di importanza =E8 dato = dall'origine del=20 foglio di stile. Quando visualizziamo una pagina (X)HTML = possono=20 entrare in gioco nel modificare lo stile degli elementi tre = diversi=20 fogli di stile:

foglio dell'autore=20
foglio dell'utente=20
foglio predefinito del browser

In ordine di importanza avremo: foglio = dell'autore, foglio=20 dell'utente, foglio predefinito del browser.

Tutti i software di navigazione di ultima generazione = consentono=20 una gestione di questo aspetto. E' possibile, ad esempio, = far s=EC che=20 il browser ignori i CSS definiti dall'autore delle pagine e=20 formattare queste ultime con un CSS realizzato dall'utente. = E=20 ancora, come vedremo, =E8 possibile modificare questa = gerarchia con=20 l'uso della parola chiave !important. Di base, = per=F2, l'ordine=20 =E8 quello definito qui sopra.

Specificit=E0

La specificit=E0, come il nome pu=F2 suggerire, descrive = il peso=20 relativo delle varie regole all'interno di un foglio di = stile.=20 Esistono regole ben precise per calcolarla e sono quelle che = applica=20 lo user agent di un browser quando si trova davanti ad un = CSS.

I fattori del calcolo sono tre e ciascuno di essi = rappresenta il=20 valore di una tripletta. Per prima cosa si conta il numero = di=20 selettori ID presenti nella regola. Si passa quindi a = verificare la presenza di classi e = pseudo-classi.=20 Infine si conta il numero di elementi definiti nella = regola.=20 Mai come in questo caso urge l'esempio. Prima regola:

#titolo {color: black;}

Calcolo: un ID, 0 classi, 0 elementi. Tripletta = dei=20 valori: 1-0-0

.classe1 {background: #C00;}

0 ID, 1 classe, 0 elementi. Tripletta: 0-1-0

h1 {color: red;}

0 ID, 0 classi, un elemento. Tripletta: 0-0-1

Il peso specifico della prima regola =E8 il maggiore. = Quello=20 dell'ultima il minore. In pratica: gli ID pesano pi=F9 delle = classi=20 che pesano pi=F9 dei singoli elementi. Non commettete = l'errore di=20 valutare il numero pi=F9 grande a prescindere dalla sua = posizione.=20 Questa regola presenta la seguente specificit=E0 1-0-0:

#paragrafo {color: green;}

ed =E8 pi=F9 importante di questa che ha i seguenti = valori 0-0-2:

div p {color: red;}

Subito la prova. Se osservate il terzo esempio di questa pagina vedrete che il paragrafo = sar=E0 verde=20 e non rosso.

Il concetto di cascade

Ed ora la summa di tutto quello cha abbiamo detto. Il = concetto e=20 il meccanismo di cascade spiegato con parole = semplici. E che=20 sia un elemento chiave lo capite dal nome stesso di quello = che state=20 studiando: Cascading Style Sheets. Tenteremo di ricostruire = il=20 procedimento di un browser quando incontra un foglio di = stile e lo=20 rende sul monitor del nostro computer.

1. Per prima cosa controlla il target stabilito con = l'attributo=20 media o con dichiarazioni equivalenti. Scarta quindi = tutti=20 gli stili riferiti alla stampa o ad altri supporti. Allo = stesso=20 tempo scarta tutte le regole che non trovino corrispondenza = negli=20 elementi strutturali del documento.

2. Comincia ad ordinare per peso e origine = secondo=20 le regole viste sopra. C'=E8 un CSS definito dall'autore? = User=E0=20 quello. Altrimenti verificher=E0 la presenza di un foglio di = stile=20 utente e in sua assenza applicher=E0 le sue regole = stilistiche=20 predefinite.

3. Quindi calcola la specificit=E0 dei selettori e in = caso di=20 conflitto tra regole usa questo criterio di prevalenza.

4. Se non ci sono conflitti o se peso, origine e = specificit=E0=20 coincidono, viene applicata la regola pi=F9 vicina = all'elemento nel=20 codice del documento. L'ordine, se le dichiarazioni degli = stili sono=20 fatte nell'ordine pi=F9 corretto e logico, =E8 quindi il = seguente: gli=20 stili in linea prevalgono su quelli incorporati = che a=20 loro volta prevalgono su quelli collegati.

Esempi e commenti in questa=20 pagina.

Importanza

Ed ora il concetto di importanza. Semplice e lineare la = regola:=20 se una dichiarazione viene accompagnata dalla parola chiave=20 !important essa balza al primo posto nell'ordine di=20 applicazione a prescindere da peso, origine, specificit=E0 e = ordine.=20 Ancora un esempio per verificare il = concetto.

L=20 e z i o n e s u c c e s s i v=20 = a
[ S o m m a r i = o=20 ] =