Questa pagina delinea come diversi fogli di stile interagiscano in cascata e come gli elementi ereditino lo stile dai loro elementi genitori.
Verranno aggiunte delle informazioni al foglio di stile di esempio, modificando lo stile di molte parti del documento con una sola mossa.
link title== Headline text ==== Informazioni: Cascata ed ereditarietà == Lo stile finale di un elemento può essere definito in molti luoghi diversi, che possono intergire fra loro in modo complesso. Questa complessa interazione rende i CSS molto potenti, ma può anche rendere una correzione confusa e difficile.
Le tre sorgenti principali di informazioni sullo stile che generano la cascata sono:
- Lo stile predefinito del browser per il linguaggio di marcatura
- Lo stile specficato dall'utente che sta leggendo il documento
- Lo stile collegato al documento dal suo autore
Lo stile dell'utente modifica lo stile predefinito del browser. Lo stile dell'autore del documento modifica ulteriormente lo stile. In questa guida tu sei l'autore del documento di esempio, e verrà considerato solo il foglio di stile dell'autore.
Quando apri il documento di esempio con il browser, gli elementi STRONG sono più marcati del resto del testo. Questo effetto deriva dallo stile predefinito del browser per l'HTML.
Gli elementi STRONG sono rossi. Questo è stato definto dal tuo foglio di stile di esempio.
Gli elementi STRONG inoltre ereditano gran parte dello stile dell'elemento P, poiché ne sono figli. Allo stesso modo l'elemento P eredita gran parte dello stile dall'elemento BODY.
Negi stili in cascata, il foglio di stile dell'autore ha la precedenza, quindi viene il foglio dell'utente ed infine quello predefinito del browser.
Per gli stili ereditati, lo stile proprio del nodo figlio ha la precedenza su quello ereditato dal genitore.
Questo non è l'unico ordine di precedenze che viene applicato, ma lo riprenderemo più avanti nella guida.
I CSS forniscono un modo all'utente per prevalere sullo stile definito dall'autore del documento, utilizzando la parola chiave !important.
Questo significa anche che l'autore del documento non può prevedere esattamente cosa vedrà l'utente. Per consocere tutti i dettagli circa la cascata e l'ereditarietà, guarda la sezione relativa a "Assegnare valori alle proprietà, Cascata ed ereditarietà"(EN) nelle specifiche dei CSS. |
Azione: Utilizzare l'ereditarietà
Modifica il tuo file CSS di esempio.
Aggiungi la seguente linea facendo copia e incolla. Non è molto importante dove viene incollata. In ogni caso è più logico aggiungerla all'inizio perché nel documento l'elemento P è genitore dell'elemento STRONG:
p {color: blue; text-decoration: underline;}
Ora aggiorna il browser e nota i cambiamenti al docuemnto di esempio. La sottolineatura influenza tutto il testo contenuto nel paragrafo, incluse le lettere iniziali. L'elemento STRON ha ereditato lo stile sottolineato dall'elemento genitore P.
Ma gli elementi STRONG continuano ad essere di colore rosso. Questo perché il colore rosso è lo stile proprio dell'elemento, che prevale sull'elemento blu dell'elemento P.
|
|
Cambia il foglio di stile per fare in modo che solo le lettere rosse risultino sottolineate:
|
Cos'altro?
Se hai avuto difficoltà a comprendere questa pagina, o sei hai dei commenti a proposito, utilizza questa pagina di Discussione.
Il foglio di stile d'esempio specifica lo stile per i tag P e STRONG modificandone lo stile per tutto il documento. La prossima pagina spiega come specificare lo stile in modo più selettivo:
I Selettori