---

Наследование CSS свойств

Пусть у нас есть абзац, а в нем какой-то текст в теге i:
<p>
	This is some <i>text</i> in paragraph.
</p>

Давайте покрасим абзацы в красный цвет:
p {
	color: red;
}

В результате покрасится не только текст абзаца, но и текст тега i:

Все дело в том, что свойство color наследуется. Это значит, что если у родительского тега задан какой-то цвет, то такой цвет будет и потомков. Наследуются не все CSS свойства, но многие (из тех, что вы уже знаете - все наследуются).

При желании, однако, можно переопределить свойство родителя, задав селектор потомка. Например, давайте абзацу зададим красный цвет, а курсиву - голубой:
<p>
	This is some <i>text</i> in paragraph.
</p>
p {
	color: red;
}
i {
	color: blue;
}

Результат выполнения кода:

Порядок селекторов в CSS коде в таком случае не имеет значения. Если переставить местами селектор i и селектор p, все будет работать так же:
<p>
	This is some <i>text</i> in paragraph.
</p>
i {
	color: blue;
}
p {
	color: red;
}

Результат выполнения кода:


№1
 Изучив код, скажите какой цвет будет иметь текст в теге b:
<p>
	This is some <i>text</i> in paragraph.
</p>
p {
	color: blue;
}

если внутри p, то голубой

№2
 Изучив код, скажите какой цвет будет иметь текст в теге b:
<p>
	This is some <i>text</i> in paragraph.
</p>
p {
	color: blue;
}
b {
	color: red;
}

красный

№3
 Изучив код, скажите какой цвет будет иметь текст в теге b:
<p>
	This is some <i>text</i> in paragraph.
</p>
b {
	color: red;
}
p {
	color: blue;
}

красный



№4
 Изучив код, скажите какой цвет будет иметь текст в теге li:
<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>
ul {
	color: blue;
}
голубой
№5⊗jsPmSMMA

Изучив код, скажите какой цвет будет иметь текст в теге li:
<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>
ul {
	color: blue;
}
li {
	color: red;
}
 красный
№6⊗jsPmSMMA

Изучив код, скажите какой цвет будет иметь текст в теге i:
<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;
}

зеленый
№7⊗jsPmSMMA

Изучив код, скажите какой размер будет иметь текст в теге i:
<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;
}

30px