Revision 261355 of Cascata ed ereditarietà

  • Slug della versione: Conoscere_i_CSS/Cascata_ed_ereditarietà
  • Titolo della versione: Cascata ed ereditarietà
  • ID versione: 261355
  • Data di creazione
  • Autore: Indigo
  • Versione corrente? No
  • Commento copia/incolla inglese
Etichette: 

Contenuto della versione

This page outlines how stylesheets interact in a cascade, and how elements inherit style from their parents.

You add to your sample stylesheet, using inheritance to alter the style of many parts of your document in one step.

Information: Cascading and inheritance

The final style for an element can be specified in many different places, which can interact in a complex way. This complex interaction makes CSS powerful, but it can also make it confusing and difficult to debug.

Three main sources of style information form a cascade. They are:

  • The browser's default style for the markup language
  • Style specified by a user who is reading the document
  • The style linked to the document by its author

The user's style modifies the browser's default style. The document author's style then modifies the style some more. In this tutorial, you are the author of your sample document, and you only work with author stylesheets.

Example
When you read this document in your Mozilla browser, part of the style that you see comes from your browser's defaults for HTML.

Part of the style might come from your browser settings in Options, or from a userContent.css file in your browser profile.

Part of the style comes from stylesheets linked to the document by the wiki server.


When you open your sample document in your browser, the STRONG elements are bolder than the rest of the text. This comes from the browser's default style for HTML.

The STRONG elements are red. This comes from your own sample stylesheet.

The STRONG elements also inherit much of the P element's style, because they are its children. In the same way, the P element inherits much of the BODY element's style.

For styles in the cascade, author stylesheets have priority, then reader stylesheets, then the browser's defaults.

For inherited styles, a child node's own style has priority over style inherited from its parent.

These are not the only priorities that apply. A later page in this tutorial will explain more.

More details
CSS also provides a way for the reader to override the document author's style, by using the keyword !important.

This means that as a document author, you cannot always predict exactly what your readers will see.

If you want to know all the details of cascading and inheritance, see Assigning property values, Cascading, and Inheritance in the CSS Specification.

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>This page outlines how stylesheets interact in a cascade, and how elements inherit style from their parents.
</p><p>You add to your sample stylesheet, using inheritance to alter the style of many parts of your document in one step.
</p>
<h3 name="Information:_Cascading_and_inheritance"> Information: Cascading and inheritance </h3>
<p>The final style for an element can be specified in many different places, which can interact in a complex way.
This complex interaction makes CSS powerful, but it can also make it confusing and difficult to debug.
</p><p>Three main sources of style information form a cascade.
They are:
</p>
<ul><li>The browser's default style for the markup language
</li><li>Style specified by a user who is reading the document
</li><li>The style linked to the document by its author
</li></ul>
<p>The user's style modifies the browser's default style.
The document author's style then modifies the style some more.
In this tutorial, you are the author of your sample document, and you only work with author stylesheets.
</p>
<table style="border:1px solid #36b; padding:1em; background-color:#fffff4;">
<caption style="font-weight:bold; text-align:left;">Example
</caption><tbody><tr>
<td> When you read this document in your Mozilla browser, part of the style that you see comes from your browser's defaults for HTML.
<p>Part of the style might come from your browser settings in Options, or from a <code>userContent.css</code> file in your browser profile.
</p><p>Part of the style comes from stylesheets linked to the document by the wiki server.
</p>
</td></tr></tbody></table>
<p><br>
When you open your sample document in your browser, the STRONG elements are bolder than the rest of the text.  This comes from the browser's default style for HTML.
</p><p>The STRONG elements are red.  This comes from your own sample stylesheet.
</p><p>The STRONG elements also inherit much of the P element's style, because they are its children.  In the same way, the P element inherits much of the BODY element's style.
</p><p>For styles in the cascade, author stylesheets have priority, then reader stylesheets, then the browser's defaults.
</p><p>For inherited styles, a child node's own style has priority over style inherited from its parent.
</p><p>These are not the only priorities that apply.  A later page in this tutorial will explain more.
</p>
<table style="border:1px solid #36b; padding:1em; background-color:#f4f4f4;">
<caption style="font-weight:bold; text-align:left;">More details
</caption><tbody><tr>
<td> CSS also provides a way for the reader to override the document author's style, by using the keyword <code>!important</code>.
<p>This means that as a document author, you cannot always predict exactly what your readers will see.
</p><p>If you want to know all the details of cascading and inheritance, see <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">Assigning property values, Cascading, and Inheritance</a> in the CSS Specification.
</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