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;
}