Ereditarietà delle proprietà CSS
Supponiamo di avere un paragrafo, e al suo interno del
testo nel tag i:
<p>
Questo è del <i>testo</i> in un paragrafo.
</p>
Coloriamo i paragrafi in rosso:
p {
color: red;
}
Di conseguenza, non solo si colorerà il testo del paragrafo,
ma anche il testo del tag i:
Il punto è che la proprietà color
è ereditata. Ciò significa che se
al tag genitore è assegnato un certo colore,
quel colore sarà anche per i discendenti. Non tutte
le proprietà CSS sono ereditate, ma molte (di quelle che
conosci già - tutte sono ereditate).
Tuttavia, se lo si desidera, è possibile sovrascrivere la proprietà del genitore, impostando un selettore per il discendente. Ad esempio, assegniamo al paragrafo il colore rosso e al corsivo il colore blu:
<p>
Questo è del <i>testo</i> in un paragrafo.
</p>
p {
color: red;
}
i {
color: blue;
}
:
L'ordine dei selettori nel codice CSS in questo caso
non ha importanza. Se si scambiano il selettore
i e il selettore p, tutto funzionerà
allo stesso modo:
<p>
Questo è del <i>testo</i> in un paragrafo.
</p>
i {
color: blue;
}
p {
color: red;
}
:
Studiando il codice, dite di che colore sarà
il testo nel tag b:
<p>
Questo è del <b>testo</b> in un paragrafo.
</p>
p {
color: blue;
}
Studiando il codice, dite di che colore sarà
il testo nel tag b:
<p>
Questo è del <b>testo</b> in un paragrafo.
</p>
p {
color: blue;
}
b {
color: red;
}
Studiando il codice, dite di che colore sarà
il testo nel tag b:
<p>
Questo è del <b>testo</b> in un paragrafo.
</p>
b {
color: red;
}
p {
color: blue;
}
Studiando il codice, dite di che colore sarà
il testo nel tag li:
<ul>
<li>testo</li>
<li>testo</li>
<li>testo</li>
</ul>
ul {
color: blue;
}
Studiando il codice, dite di che colore sarà
il testo nel tag li:
<ul>
<li>testo</li>
<li>testo</li>
<li>testo</li>
</ul>
ul {
color: blue;
}
li {
color: red;
}
Studiando il codice, dite di che colore sarà
il testo nel tag i:
<ul>
<li>testo <i>corsivo</i> testo</li>
<li>testo <i>corsivo</i> testo</li>
<li>testo <i>corsivo</i> testo</li>
</ul>
ul {
color: blue;
}
li {
color: red;
}
i {
color: green;
}
Studiando il codice, dite che dimensione avrà
il testo nel tag i:
<ul>
<li>testo <i>corsivo</i> testo</li>
<li>testo <i>corsivo</i> testo</li>
<li>testo <i>corsivo</i> testo</li>
</ul>
i {
font-size: 30px;
}
ul {
font-size: 20px;
}
li {
color: red;
font-weight: bold;
}
