Revision 261358 of Cascata ed ereditarietà

  • Slug della versione: Conoscere_i_CSS/Cascata_ed_ereditarietà
  • Titolo della versione: Cascata ed ereditarietà
  • ID versione: 261358
  • Data di creazione
  • Autore: Indigo
  • Versione corrente? No
  • Commento /* Informazioni: Cascata ed ereditarietà */
Etichette: 

Contenuto della versione

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.

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.

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>Opzioni, o dal file userContent.css nel tuo profilo del browser.

Un'altra parte deriva infine dal foglio di stile associato al documento dal server del wiki.


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.

Di più...
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.

Action: Using inheritance

Edit your sample CSS file.

Add this line by copying and pasting it. It does not really matter whether you add it above or below the line that is already there. However, adding it at the top is more logical because in your document the P element is the parent of the STRONG element:

p {color: blue; text-decoration: underline;}

Now refresh your browser to see the effect on your sample document. The underlining affects all the text in the paragraph, including the initial letters. The STRONG elements have inherited the underlined style from their parent P element.

But the STRONG elements are still red. The red color is their own style, so it has priority over the blue color of their parent P element.

Before
Cascading Style Sheets
After
Cascading Style Sheets


Challenge
Change your stylesheet so that only the red letters are underlined:
Cascading Style Sheets


What next?

If you had difficulty understanding this page, or if you have other comments about it, please contribute to its Discussion page.

Your sample style sheet specifies styles for tags, P and STRONG, changing the style of the corresponding elements throughout your document. The next page describes how to specify style in more selective ways: Selectors

{{ wiki.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" } ) }}

Sorgente della versione

<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>
<h3 name="Informazioni:_Cascata_ed_ereditariet.C3.A0"> Informazioni: Cascata ed ereditarietà </h3>
<p>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 style="font-weight:bold; text-align:left;">Esempio
</caption><tbody><tr>
<td> 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.
<p>Un'altra parte deriva infine dal foglio di stile associato al documento dal server del wiki.
</p>
</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 style="font-weight:bold; text-align:left;">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 name="Action:_Using_inheritance"> Action: Using inheritance </h3>
<p>Edit your sample CSS file.
</p><p>Add this line by copying and pasting it.
It does not really matter whether you add it above or below the line that is already there.
However, adding it at the top is more logical because in your document the P element is the parent of the STRONG element:
</p>
<pre>p {color: blue; text-decoration: underline;}
</pre>
<p>Now refresh your browser to see the effect on your sample document.
The underlining affects all the text in the paragraph, including the initial letters.
The STRONG elements have inherited the underlined style from their parent P element.
</p><p>But the STRONG elements are still red.  The red color is their own style, so it has priority over the blue color of their parent P element.
</p>
<table>
<tbody><tr>
<td>
<table style="border:2px outset #36b; padding:1em;margin-right:2em;">
<caption style="font-weight:bold; text-align:left;">Before
</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 style="font-weight:bold; text-align:left;">After
</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 style="font-weight:bold; text-align:left;">Challenge
</caption><tbody><tr>
<td> Change your stylesheet so that only the red letters are underlined:
<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 name="What_next.3F"> What next? </h4>
<p>If you had difficulty understanding this page, or if you have other comments about it, please contribute to its <a href="Talk:it/CSS/Getting_Started/Cascading_and_inheritance">Discussion</a> page.
</p><p>Your sample style sheet specifies styles for tags, <code>P</code> and <code>STRONG</code>,
changing the style of the corresponding elements throughout your document.
The next page describes how to specify style in more selective ways:
<b><a href="it/CSS/Getting_Started/Selectors">Selectors</a></b>
</p>{{ wiki.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" } ) }}
Ripristina questa versione