Пусть у нас есть абзац, а в нем какой-то
текст в теге i:
<p>
какой-то <i>текст</i> в абзаце
</p>
Давайте покрасим абзацы в красный цвет:
p {
color: red;
}
В результате покрасится не только текст абзаца,
но и текст тега i:
Все дело в том, что свойство color
наследуется. Это значит, что если
у родительского тега задан какой-то цвет,
то такой цвет будет и потомков. Наследуются
не все CSS свойства, но многие (из тех, что
вы уже знаете - все наследуются).
При желании, однако, можно переопределить свойство родителя, задав селектор потомка. Например, давайте абзацу зададим красный цвет, а курсиву - голубой:
<p>
какой-то <i>текст</i> в абзаце
</p>
p {
color: red;
}
i {
color: blue;
}
:
Порядок селекторов в CSS коде в таком случае не имеет значения. Если переставить местами селектор i и селектор p, все будет работать так же:
<p>
какой-то <i>текст</i> в абзаце
</p>
i {
color: blue;
}
p {
color: red;
}
:
Изучив код, скажите какой цвет будет иметь
текст в теге b:
<p>
какой-то <b>текст</b> в абзаце
</p>
p {
color: blue;
}
Изучив код, скажите какой цвет будет иметь
текст в теге b:
<p>
какой-то <b>текст</b> в абзаце
</p>
p {
color: blue;
}
b {
color: red;
}
Изучив код, скажите какой цвет будет иметь
текст в теге b:
<p>
какой-то <b>текст</b> в абзаце
</p>
b {
color: red;
}
p {
color: blue;
}
Изучив код, скажите какой цвет будет иметь
текст в теге li:
<ul>
<li>текст</li>
<li>текст</li>
<li>текст</li>
</ul>
ul {
color: blue;
}
Изучив код, скажите какой цвет будет иметь
текст в теге li:
<ul>
<li>текст</li>
<li>текст</li>
<li>текст</li>
</ul>
ul {
color: blue;
}
li {
color: red;
}
Изучив код, скажите какой цвет будет иметь
текст в теге i:
<ul>
<li>текст <i>курсив</i> текст</li>
<li>текст <i>курсив</i> текст</li>
<li>текст <i>курсив</i> текст</li>
</ul>
ul {
color: blue;
}
li {
color: red;
}
i {
color: green;
}
Изучив код, скажите какой размер будет иметь
текст в теге i:
<ul>
<li>текст <i>курсив</i> текст</li>
<li>текст <i>курсив</i> текст</li>
<li>текст <i>курсив</i> текст</li>
</ul>
i {
font-size: 30px;
}
ul {
font-size: 20px;
}
li {
color: red;
font-weight: bold;
}