CSS հատկությունների ժառանգում

Ենթադրենք ունենք պարբերություն, և դրա մեջ ինչ-որ տեքստ i տեգում.

html<p>
  This is some <i>text</i> in paragraph.
</p>

Եկեք պարբերությունները ներկենք կարմիր գույնով.

cssp {
  color: red;
}

Արդյունքում կներկվի ոչ միայն պարբերության տեքստը, այլև i տեգի տեքստը.

Ամբողջ բանը նրանում է, որ color հատկությունը ժառանգվում է: Սա նշանակում է, որ եթե ծնողական տեգի համար սահմանված է որոշակի գույն, ապա այդ գույնը կունենան նաև ժառանգները: Ոչ բոլոր CSS հատկություններն են ժառանգվում, բայց շատերը (ձեզ արդեն հայտնիներից՝ բոլորը ժառանգվում են):

Ցանկության դեպքում, սակայն, կարելի է վերասահմանել ծնողի հատկությունը՝ նշելով ժառանգի սելեկտորը: Օրինակ, եկեք պարբերությանը տանք կարմիր գույն, իսկ թեքագիր տեքստին՝ կապույտ.

html<p>
  This is some <i>text</i> in paragraph.
</p>
cssp {
  color: red;
}
i {
  color: blue;
}

Результат:

Սելեկտորների հերթականությունը CSS կոդում այս դեպքում նշանակություն չունի: Եթե տեղերով փոխենք i սելեկտորը և p սելեկտորը, ամեն ինչ կաշխատի նույն կերպ.

html<p>
  This is some <i>text</i> in paragraph.
</p>
cssi {
  color: blue;
}
p {
  color: red;
}

Результат:

Задание 1

Ուսումնասիրելով կոդը, ասեք՝ ինչ գույն կունենա տեքստը b տեգում.

html<p>
  This is some <b>text</b> in paragraph.
</p>
cssp {
  color: blue;
}
Задание 2

Ուսումնասիրելով կոդը, ասեք՝ ինչ գույն կունենա տեքստը b տեգում.

html<p>
  This is some <b>text</b> in paragraph.
</p>
cssp {
  color: blue;
}
b {
  color: red;
}
Задание 3

Ուսումնասիրելով կոդը, ասեք՝ ինչ գույն կունենա տեքստը b տեգում.

html<p>
  This is some <b>text</b> in paragraph.
</p>
cssb {
  color: red;
}
p {
  color: blue;
}
Задание 4

Ուսումնասիրելով կոդը, ասեք՝ ինչ գույն կունենա տեքստը li տեգում.

html<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>
cssul {
  color: blue;
}
Задание 5

Ուսումնասիրելով կոդը, ասեք՝ ինչ գույն կունենա տեքստը li տեգում.

html<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>
cssul {
  color: blue;
}
li {
  color: red;
}
Задание 6

Ուսումնասիրելով կոդը, ասեք՝ ինչ գույն կունենա տեքստը i տեգում.

html<ul>
  <li>text <i>italic</i> text</li>
  <li>text <i>italic</i> text</li>
  <li>text <i>italic</i> text</li>
</ul>
cssul {
  color: blue;
}
li {
  color: red;
}
i {
  color: green;
}
Задание 7

Ուսումնասիրելով կոդը, ասեք՝ ինչ չափ կունենա տեքստը i տեգում.

html<ul>
  <li>text <i>italic</i> text</li>
  <li>text <i>italic</i> text</li>
  <li>text <i>italic</i> text</li>
</ul>
cssi {
  font-size: 30px;
}
ul {
  font-size: 20px;
}
li {
  color: red;
  font-weight: bold;
}