CSS aýratynlyklarynyň miras alnysy

Bizde bir abzas, we onuň içinde i teginde bir tekst bolsun:

html<p>
  Bu abzastaky käbir <i>tekst</i>.
</p>

Geliň abzaslary gyzyl reňke boýaýalyň:

cssp {
  color: red;
}

Netijede diňe abzastyň teksti däl, eýsem i teginiň teksti hem boýalýar:

Mesele şonda ýatýar, color aýratynlygy miras alnyar. Bu şuny aňladýar, eger atalaryň teginde bir reňk kesgitlenen bolsa, şol reňk çagalarynda hem bolýar. Hemme CSS aýratynlyklary miras alınmaýar, ýöne köpleri (siziň häzir biliňiz ýaly bolanlaryň hemmesi miras alnýar).

Isleseňiz, şonda ata aýratynlygyny üýtgedip, çaga saýlaýjysyny kesgitlemek bilen bilersiňiz. Mysal üçin, abzasa gyzyl reňk, eğil ýazgysa gök reňk bereliň:

html<p>
  Bu abzastaky käbir <i>tekst</i>.
</p>

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

Результат:

CSS kodyndaky saýlaýjylaryň tertibi bu ýagdaýda möhüm däl. Eger ýerlerini üýtgetseňiz i saýlaýjysyny we p saýlaýjysyny, hemme zat işleýşini dowam etdirer şol ýaly:

html<p>
  Bu abzastaky käbir <i>tekst</i>.
</p>

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

Результат:

Задание 1

Kody öwreniň, b tegindäki tekstiň haýsy reňkde boljakdygyny aýdyň:

html<p>
  Bu abzastaky käbir <b>tekst</b>.
</p>

cssp {
  color: blue;
}

Задание 2

Kody öwreniň, b tegindäki tekstiň haýsy reňkde boljakdygyny aýdyň:

html<p>
  Bu abzastaky käbir <b>tekst</b>.
</p>

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

Задание 3

Kody öwreniň, b tegindäki tekstiň haýsy reňkde boljakdygyny aýdyň:

html<p>
  Bu abzastaky käbir <b>tekst</b>.
</p>

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

Задание 4

Kody öwreniň, li tegindäki tekstiň haýsy reňkde boljakdygyny aýdyň:

html<ul>
  <li>tekst</li>
  <li>tekst</li>
  <li>tekst</li>
</ul>

cssul {
  color: blue;
}

Задание 5

Kody öwreniň, li tegindäki tekstiň haýsy reňkde boljakdygyny aýdyň:

html<ul>
  <li>tekst</li>
  <li>tekst</li>
  <li>tekst</li>
</ul>

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

Задание 6

Kody öwreniň, i tegindäki tekstiň haýsy reňkde boljakdygyny aýdyň:

html<ul>
  <li>tekst <i>eğil ýazy</i> tekst</li>
  <li>tekst <i>eğil ýazy</i> tekst</li>
  <li>tekst <i>eğil ýazy</i> tekst</li>
</ul>

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

Задание 7

Kody öwreniň, i tegindäki tekstiň haýsy ölçegde boljakdygyny aýdyň:

html<ul>
  <li>tekst <i>eğil ýazy</i> tekst</li>
  <li>tekst <i>eğil ýazy</i> tekst</li>
  <li>tekst <i>eğil ýazy</i> tekst</li>
</ul>

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