CSS қасиеттерін мұрагерлік

Бізде абзац бар делік, оның ішінде 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;
}