CSS Özellik Kalıtımı

Diyelim ki bir paragrafımız var ve içinde i etiketi içinde bir metin var:

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

Paragrafları kırmızı renge boyayalım:

cssp {
  color: red;
}

Sonuç olarak sadece paragrafın metni değil, i etiketinin metni de kırmızı olacak:

Bunun nedeni, color özelliğinin kalıtsal olmasıdır. Bu, ebeveyn etiketin rengi belirlenmişse, aynı rengin alt öğelerde de olacağı anlamına gelir. Tüm CSS özellikleri kalıtsal değildir, ama birçoğu öyledir (şu ana kadar bildiklerinizden - hepsi kalıtsaldır).

Ancak istenirse, alt öğe için bir seçici belirleyerek ebeveynin özelliği geçersiz kılınabilir. Örneğin, paragrafa kırmızı rengi, eğik yazıya ise mavi rengi verelim:

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

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

Результат:

Bu durumda CSS kodundaki seçicilerin sırası önemli değildir. i seçicisi ile p seçicisinin yerleri değiştirilse de, her şey aynı şekilde çalışacaktır:

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

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

Результат:

Задание 1

Kodu inceleyerek, b etiketindeki metnin hangi renge sahip olacağını söyleyin:

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

cssp {
  color: blue;
}

Задание 2

Kodu inceleyerek, b etiketindeki metnin hangi renge sahip olacağını söyleyin:

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

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

Задание 3

Kodu inceleyerek, b etiketindeki metnin hangi renge sahip olacağını söyleyin:

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

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

Задание 4

Kodu inceleyerek, li etiketindeki metnin hangi renge sahip olacağını söyleyin:

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

cssul {
  color: blue;
}

Задание 5

Kodu inceleyerek, li etiketindeki metnin hangi renge sahip olacağını söyleyin:

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

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

Задание 6

Kodu inceleyerek, i etiketindeki metnin hangi renge sahip olacağını söyleyin:

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

Kodu inceleyerek, i etiketindeki metnin hangi boyuta sahip olacağını söyleyin:

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