Trashëgimia e Vetive CSS

Le të themi se kemi një paragraf, dhe në të një tekst në tagun i:

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

Le t'i ngjyrosim paragrafët me ngjyrë të kuqe:

cssp {
  color: red;
}

Si rezultat, jo vetëm teksti i paragrafit do të ngjyroset, por edhe teksti i tagut i:

E gjitha ka të bëjë me faktin se vetia color trashëgohet. Kjo do të thotë se nëse tagu prind ka caktuar një ngjyrë të caktuar, ata do të kenë të njëjtën ngjyrë edhe tek pasardhësit. Jo të gjitha vetitë CSS trashëgohen, por shumë prej tyre (ato që ju tashmë i njihni - të gjitha trashëgohen).

Sidoqoftë, nëse dëshironi, mund të rishkruani vetinë e prindit duke caktuar një përzgjedhës për pasardhësin. Për shembull, le t'i caktojmë paragrafit ngjyrën e kuqe dhe tekstit të pjerrët (italic) ngjyrën e kaltër:

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

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

Результат:

Rendi i përzgjedhësve në kodin CSS në këtë rast nuk ka rëndësi. Nëse ndërroni vendet përzgjedhësit i dhe përzgjedhësin p, gjithçka do të funksionojë në të njëjtën mënyrë:

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

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

Результат:

Задание 1

Duke studiuar kodin, thuani se çfarë ngjyre do të ketë teksti në tagun b:

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

cssp {
  color: blue;
}

Задание 2

Duke studiuar kodin, thuani se çfarë ngjyre do të ketë teksti në tagun b:

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

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

Задание 3

Duke studiuar kodin, thuani se çfarë ngjyre do të ketë teksti në tagun b:

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

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

Задание 4

Duke studiuar kodin, thuani se çfarë ngjyre do të ketë teksti në tagun li:

html<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>

cssul {
  color: blue;
}

Задание 5

Duke studiuar kodin, thuani se çfarë ngjyre do të ketë teksti në tagun li:

html<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>

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

Задание 6

Duke studiuar kodin, thuani se çfarë ngjyre do të ketë teksti në tagun 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

Duke studiuar kodin, thuani se çfarë madhësie do të ketë teksti në tagun 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;
}