Uno dei concetti fondamentali dei CSS è quello di ereditarietà, in questa lezione cercheremo di spiegare, in modo semplice, cos’è e come sfruttarla all’interno dei nostri fogli di stile.
Il DOM (cenni)
Il concetto di ereditarietà, per essere compreso a pieno, deve essere affrontato tenendo bene a mente una caratteristica tipica dei documenti HTML, cioè quella di essere rappresentabili come un albero dove il documento è la radice ed i vari tag che lo compongono costituiscono una serie di ramificazioni sempre più profonde.
Questa "visione" del documento HTML prende il nome di DOM (acronimo di Document Object Model) ed è la forma di rappresentazione dei documenti strutturati scelta come standard dal W3C.
Ogni volta che il browser scarica una pagina web, quindi, questa viene "trasformata" (o scomposta) in un albero DOM al fine di poter accedere, rapidamente, a ciascun elemento del documento e di poterne modificare, dinamicamente, la struttura, il contenuto e lo stile.
Ereditarietà
CSS, come abbiamo detto, è il linguaggio di presentazione di un documento pertanto il DOM di quest’ultimo rappresenta un importante fattore di riferimento anche per il primo. Attraverso il DOM, infatti, CSS è in grado di tracciare relazioni e parentele tra i vari elementi della pagina (come, in parte, abbiamo già visto nelle lezioni precedenti) e ad identificare con chiarezza i collegamenti tra elementi genitori e discendenti al fine di applicare, appunto, l’ereditarietà cioè la capacità dei secondi di assumere (alcune) caratteristiche definite per i primi.
Per fare un esempio possiamo dire che tutti gli elementi del <body> ereditano le caratteristiche definite per questo tag, pertanto mediante questa regola CSS
body { color: #FF0000; }tutti gli elementi visibili della pagina (in quanto discendenti di <body>) erediteranno il colore rosso per il testo.
Nel nostro esempio abbiamo fatto riferimento al tag <body> tuttavia, è evidente, che quanto illustrato si applica a qualsiasi tag e agli elementi in esso contenuti. Quindi se definiamo una regola del tipo:
p { color: #FF0000; }Il colore rosso verrà ereditato, ad esempio, dagli <span> e dai <b> eventualmente presenti all’interno dei paragrafi in quanto figli di questi ultimi.
Ma quali proprietà vengono eriditate dagli elementi discendenti? Non tutte. CSS si dimostra "intelligente" in tal senso escludendo l’ereditarietà per alcune proprietà che non avrebbe senso "tramandare" a figli e nipoti.
Volendo semplificare il discorso possiamo dire che NON si ereditano tutte le proprietà attinenti al box model quindi, bordi, margini, padding, dimensioni, sfondi, ecc. Non avrebbe senso, infatti, applicare automaticamente il bordo del contenitore anche a tutti gli elementi in esso contenuti!
E’ evidente che il web designer non deve sentirsi limitato da questa caratteristica: il fatto che un elemento erediti alcune caratteristiche dell’elemento genitore o di altro ascendente non significa che tali caratteristiche non possano essere "sovrascritte". Tornando all’esempio di partenza:
body { color: #FF0000; }
p { color: #000000; }Con questo semplice stile abbiamo definito, infatti, un colore rosso per tutti i testi della pagina ma, allo stesso tempo, abbiamo assegnato il colore nero ai testi dei paragrafi e le proprietà definite in questa regola specifica prevalgono su quelle ereditate.
