CSS касиеттеринин мурастоосу

Абзацыбыз бар болсун, ал эми анда i тегиндеги кандайдыр бир текст болсун:

html<p>
  Бул абзацтагы <i>текст</i>.
</p>

Келгиле, абзацтарды кызыл түскө боёлойлу:

cssp {
  color: red;
}

Натыйжада абзацтын тексти гана эмес, i тегинин тексти да кызыл болот:

Мындай болушунун себеби, color касиети мурасталат. Бул дегенди билдирет, эгерде ата-тегинин түсү белгиленсе, ал түс балдар тегтерине да өтөт. Бардык CSS касиеттери эмес, бирок көптөрү (сиз билгендердин ичинен - бардыгы) мурасталат.

Каалоо боюнча, бирок, ата-тегинин касиетин, бала теги үчүн селекторду белгилеп, өзгөртсө болот. Мисалы, абзацка кызыл түс, ал эми курсивке көк түс берели:

html<p>
  Бул абзацтагы <i>текст</i>.
</p>

cssp {
  color: red;
}
i {
  color: blue;
}

Результат:

Бул учурда CSS кодундагы селекторлордун тартиби мааниге ээ эмес. Эгерде i жана p селекторлорун орундарын алмаштырсак, баары ошол сыяктуу иштей берет:

html<p>
  Бул абзацтагы <i>текст</i>.
</p>

cssi {
  color: blue;
}
p {
  color: red;
}

Результат:

Задание 1

Кодду изилдеп, b тегиндеги текст кандай түскө ээ болоруңузду айтыңыз:

html<p>
  Бул абзацтагы <b>текст</b>.
</p>

cssp {
  color: blue;
}

Задание 2

Кодду изилдеп, b тегиндеги текст кандай түскө ээ болоруңузду айтыңыз:

html<p>
  Бул абзацтагы <b>текст</b>.
</p>

cssp {
  color: blue;
}
b {
  color: red;
}

Задание 3

Кодду изилдеп, b тегиндеги текст кандай түскө ээ болоруңузду айтыңыз:

html<p>
  Бул абзацтагы <b>текст</b>.
</p>

cssb {
  color: red;
}
p {
  color: blue;
}

Задание 4

Кодду изилдеп, li тегиндеги текст кандай түскө ээ болоруңузду айтыңыз:

html<ul>
  <li>текст</li>
  <li>текст</li>
  <li>текст</li>
</ul>

cssul {
  color: blue;
}

Задание 5

Кодду изилдеп, li тегиндеги текст кандай түскө ээ болоруңузду айтыңыз:

html<ul>
  <li>текст</li>
  <li>текст</li>
  <li>текст</li>
</ul>

cssul {
  color: blue;
}
li {
  color: red;
}

Задание 6

Кодду изилдеп, i тегиндеги текст кандай түскө ээ болоруңузду айтыңыз:

html<ul>
  <li>текст <i>курсив</i> текст</li>
  <li>текст <i>курсив</i> текст</li>
  <li>текст <i>курсив</i> текст</li>
</ul>

cssul {
  color: blue;
}
li {
  color: red;
}
i {
  color: green;
}

Задание 7

Кодду изилдеп, i тегиндеги текст кандай өлчөмгө ээ болоруңузду айтыңыз:

html<ul>
  <li>текст <i>курсив</i> текст</li>
  <li>текст <i>курсив</i> текст</li>
  <li>текст <i>курсив</i> текст</li>
</ul>

cssi {
  font-size: 30px;
}
ul {
  font-size: 20px;
}
li {
  color: red;
  font-weight: bold;
}