Herança de propriedades CSS
Suponha que temos um parágrafo e dentro dele algum
texto na tag i:
<p>
This is some <i>text</i> in paragraph.
</p>
Vamos colorir os parágrafos em vermelho:
p {
color: red;
}
Como resultado, não apenas o texto do parágrafo será colorido,
mas também o texto da tag i:
Tudo se deve ao fato de que a propriedade color
é herdada. Isso significa que se
a tag pai tiver uma cor definida,
essa cor será aplicada aos descendentes. Nem todas
as propriedades CSS são herdadas, mas muitas são (das que
você já conhece - todas são herdadas).
No entanto, se desejar, é possível sobrescrever a propriedade do pai, definindo um seletor para o descendente. Por exemplo, vamos definir a cor vermelha para o parágrafo e azul para o itálico:
<p>
This is some <i>text</i> in paragraph.
</p>
p {
color: red;
}
i {
color: blue;
}
:
Nesse caso, a ordem dos seletores no código CSS
não importa. Se trocarmos o seletor i e o seletor p de lugar, tudo funcionará
da mesma forma:
<p>
This is some <i>text</i> in paragraph.
</p>
i {
color: blue;
}
p {
color: red;
}
:
Estudando o código, diga qual cor o
texto na tag b terá:
<p>
This is some <b>text</b> in paragraph.
</p>
p {
color: blue;
}
Estudando o código, diga qual cor o
texto na tag b terá:
<p>
This is some <b>text</b> in paragraph.
</p>
p {
color: blue;
}
b {
color: red;
}
Estudando o código, diga qual cor o
texto na tag b terá:
<p>
This is some <b>text</b> in paragraph.
</p>
b {
color: red;
}
p {
color: blue;
}
Estudando o código, diga qual cor o
texto na tag li terá:
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
ul {
color: blue;
}
Estudando o código, diga qual cor o
texto na tag li terá:
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
ul {
color: blue;
}
li {
color: red;
}
Estudando o código, diga qual cor o
texto na tag i terá:
<ul>
<li>text <i>italic</i> text</li>
<li>text <i>italic</i> text</li>
<li>text <i>italic</i> text</li>
</ul>
ul {
color: blue;
}
li {
color: red;
}
i {
color: green;
}
Estudando o código, diga qual tamanho o
texto na tag i terá:
<ul>
<li>text <i>italic</i> text</li>
<li>text <i>italic</i> text</li>
<li>text <i>italic</i> text</li>
</ul>
i {
font-size: 30px;
}
ul {
font-size: 20px;
}
li {
color: red;
font-weight: bold;
}
