Ora che sappiamo cosa sono i CSS (fogli di stile in cascata), dobbiamo capire in che modo le regole interagiscono fra di loro.

Per scoprirlo bisogna mettere in luce alcuni aspetti fondamentali:

  1. Ereditarietà;
  2. Conflitti;
  3. Origine;
  4. Peso e specificità.

Ereditarietà

Quando parliamo di ereditarietà ci riferiamo a quel meccanismo in cui i tag “figli” ereditano lo stile dei “parenti”, a patto che non venga applicato uno stile specifico per un determinato discendente. Mi spiego meglio con un esempio:


1

Come potete vedere l’elemento <p> che è dentro al <div> che è dentro al <body> ha ereditato il colore rosso del parente (ovvero il padre del padre 🙂 ).

CONFLITTI

Prima di parlare di peso e origine bisogna definire il concetto di conflitto.

Ci troviamo di fronte a un conflitto quando per un dato elemento di una pagina html sono specificati due valori diversi di una data proprietà CSS. Ad esempio, esiste una dichiarazione CSS per impostare il colore rosso e al tempo stesso ce n’è un’altra per impostare il colore blue. In questo caso si verifica un conflitto e dobbiamo capire quale delle due vince.

Nell’esempio sopra abbiamo dei conflitti per il tag <h1>. Questo elemento si trova dentro il <body> e quindi riceve in eredità “color: red”; inoltre, dato che è un <h1> riceve “color: green” dal selettore tag <h1>; infine, dato che ha id “titolo” riceve “color:blue”. Abbiamo quindi un conflitto e dobbiamo capire di quale colore sarà quel testo. Per sapere di che colore sarà dobbiamo capire il principio di origine, il peso e la specificità.

Nota bene: rispetto alla proprietà “background-color: yellow” che è nella dichiarazione del selettore <h1> non vi sussiste alcun conflitto dato che è l’unica proprietà specificata per quel determinato tag e sarà quindi applicata normalmente.

Origine

Prima di tutto bisogna sapere che di default il browser (in assenza di un foglio di stile incluso nella pagina html) applicherà le proprie regole CSS. Vi ricordate quando abbiamo fatto le prime pagine senza usare i CSS? I link erano sempre underlined e in blue, non è vero? 🙂 Bene, erano così perché il vostro browser ha un CSS di default che dice che i link devono essere visualizzati in quel modo quando nell’html non vi è nessun altro CSS.

Tornando al concetto di origine, un primo modo per risolvere i conflitti è identificare l’origine del CSS. Il foglio di stile più importante sarà quello incorporato nel documento html; a seguire verranno applicati gli stili previsti dal CSS di default del browser. Altre informazioni le tratteremo quando parleremo di css reset.

PESO E SPECIFICITà

Il concetto di base è quello per il quale il selettore CSS con maggior specificità vince!

In realtà vi sono delle regole di calcolo leggermente più complesse che ora vi illustrerò. Parliamo quindi di peso.

Il peso sono tre numeri, ovvero una tripletta. Il primo numero identifica il numero di selettori per id, il secondo è il numero di selettori per classe, il terzo è il numero di selettori per elemento.

Il peso vincente sarà quello con il primo numero a sinistra più grande. Facciamo degli esempi:

  • Il peso 1-0-2 vince sul peso 1-0-1 (perché ha un numero di selettori di elemento più grande);
  • Il peso 1-1-0 vince sul peso 1-0-3 (perché ha un numero di selettori di classe più grande);
  • Il peso 1-0-0 vince sul peso 0-2-2 (perché ha un numero di selettori di id più grande, anche se ha un maggior numero di selettori di classi e di elementi).

Se c’è un conflitto ed il peso è il medesimo vince la regola scritta più in basso. Se è embedded nell’attributo style del tag html allora vince.

Vediamo un secondo esempio in cui il peso è scritto nei commenti:


1

Facile, vero? 🙂




Add Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.