path: root/files/it/learn/css/building_blocks/cascade_and_inheritance/index.html

---
title: Cascata ed ereditarietà
slug: Conoscere_i_CSS/Cascata_ed_ereditarietà
tags:
  - Conoscere_i_CSS
translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance
---
<p>
</p><p>Questa pagina delinea come diversi fogli di stile interagiscano in cascata e come gli elementi ereditino lo stile dai loro elementi genitori.
</p><p>Verranno aggiunte delle informazioni al foglio di stile di esempio, modificando lo stile di molte parti del documento con una sola mossa.
</p><p><a class="external" href="http://www.example.com">link title</a>== 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.
</p><p>Le tre sorgenti principali di informazioni sullo stile che generano la cascata sono:
</p>
<ul><li>Lo stile predefinito del browser per il linguaggio di marcatura
</li><li>Lo stile specficato dall'utente che sta leggendo il documento
</li><li>Lo stile collegato al documento dal suo autore
</li></ul>
<p>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.
</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;">
<caption>Esempio
Quando leggi questo articolo della guida nel tuo browser Mozilla, parte dello stile che vedi proviene da quello predefinito del browser per l'HTML. Un altra parte potrebbe essere definita dalle impostazioni del browser nel menu Strumenti&gt;Opzioni, o dal file <code>userContent.css</code> nel tuo profilo del browser. Un'altra parte deriva infine dal foglio di stile associato al documento dal server del wiki.
</caption><tbody><tr><td></td></tr></tbody></table>
<p><br>
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.
</p><p>Gli elementi STRONG sono rossi. Questo è stato definto dal tuo foglio di stile di esempio.
</p><p>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.
</p><p>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.
</p><p>Per gli stili ereditati, lo stile proprio del nodo figlio ha la precedenza su quello ereditato dal genitore.
</p><p>Questo non è l'unico ordine di precedenze che viene applicato, ma lo riprenderemo più avanti nella guida.
</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4;">
<caption>Di più...
</caption><tbody><tr>
<td> I CSS forniscono un modo all'utente per prevalere sullo stile definito dall'autore del documento, utilizzando la parola chiave <code>!important</code>.
<p>Questo significa anche che l'autore del documento non può prevedere esattamente cosa vedrà l'utente.
</p><p>Per consocere tutti i dettagli circa la cascata e l'ereditarietà, guarda la sezione relativa a <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">"Assegnare valori alle proprietà, Cascata ed ereditarietà"</a>(EN) nelle specifiche dei CSS.
</p>
</td></tr></tbody></table>
<h3 id="Azione:_Utilizzare_l.27ereditariet.C3.A0" name="Azione:_Utilizzare_l.27ereditariet.C3.A0"> Azione: Utilizzare l'ereditarietà </h3>
<p>Modifica il tuo file CSS di esempio.
</p><p>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>
<pre>p {color: blue; text-decoration: underline;}
</pre>
<p>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.
</p><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.
</p>
<table>
<tbody><tr>
<td>
<table style="border: 2px outset #36b; padding: 1em; margin-right: 2em;">
<caption>Prima
</caption><tbody><tr>
<td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets
</td></tr></tbody></table>
</td><td>
<table style="border: 2px outset #36b; padding: 1em;">
<caption>Dopo
</caption><tbody><tr>
<td style="color: blue; text-decoration: underline;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets
</td></tr></tbody></table>
</td></tr></tbody></table>
<p><br>
</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;">
<caption>Esercizi
</caption><tbody><tr>
<td> Cambia il foglio di stile per fare in modo che solo le lettere rosse risultino sottolineate:
<table style="border: 2px outset #36b; padding: 1em;">
<tbody><tr>
<td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets
</td></tr></tbody></table>
</td></tr></tbody></table>
<p><br>
</p>
<h4 id="Cos.27altro.3F" name="Cos.27altro.3F"> Cos'altro? </h4>
<p>Se hai avuto difficoltà a comprendere questa pagina, o sei hai dei commenti a proposito, utilizza questa pagina di <a>Discussione</a>.
</p><p>Il foglio di stile d'esempio specifica lo stile per i tag <code>P</code> e <code>STRONG</code> modificandone lo stile per tutto il documento. La prossima pagina spiega come specificare lo stile in modo più selettivo:
<b><a href="it/Conoscere_i_CSS/I_Selettori">I Selettori</a></b>
</p>{{ languages( { "en": "en/CSS/Getting_Started/Cascading_and_inheritance", "fr": "fr/CSS/Premiers_pas/Cascade_et_h\u00e9ritage", "ja": "ja/CSS/Getting_Started/Cascading_and_inheritance", "pl": "pl/CSS/Na_pocz\u0105tek/Kaskadowo\u015b\u0107_i_dziedziczenie", "pt": "pt/CSS/Como_come\u00e7ar/Cascata_e_heran\u00e7a" } ) }}