CSS Özellik Kalıtımı
Diyelim ki bir paragrafımız var ve içinde i
etiketi içinde bir metin var:
<p>
This is some <i>text</i> in paragraph.
</p>
Paragrafları kırmızı renge boyayalım:
p {
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:
<p>
This is some <i>text</i> in paragraph.
</p>
p {
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:
<p>
This is some <i>text</i> in paragraph.
</p>
i {
color: blue;
}
p {
color: red;
}
:
Kodu inceleyerek, b etiketindeki
metnin hangi renge sahip olacağını söyleyin:
<p>
This is some <b>text</b> in paragraph.
</p>
p {
color: blue;
}
Kodu inceleyerek, b etiketindeki
metnin hangi renge sahip olacağını söyleyin:
<p>
This is some <b>text</b> in paragraph.
</p>
p {
color: blue;
}
b {
color: red;
}
Kodu inceleyerek, b etiketindeki
metnin hangi renge sahip olacağını söyleyin:
<p>
This is some <b>text</b> in paragraph.
</p>
b {
color: red;
}
p {
color: blue;
}
Kodu inceleyerek, li etiketindeki
metnin hangi renge sahip olacağını söyleyin:
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
ul {
color: blue;
}
Kodu inceleyerek, li etiketindeki
metnin hangi renge sahip olacağını söyleyin:
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
ul {
color: blue;
}
li {
color: red;
}
Kodu inceleyerek, i etiketindeki
metnin hangi renge sahip olacağını söyleyin:
<ul>
<li>text <i>italic</i> text</li>
<li>text <i>italic</i> text</li>
<li>text <i>italic</i> text</li>
</ul>
ul {
color: blue;
}
li {
color: red;
}
i {
color: green;
}
Kodu inceleyerek, i etiketindeki
metnin hangi boyuta sahip olacağını söyleyin:
<ul>
<li>text <i>italic</i> text</li>
<li>text <i>italic</i> text</li>
<li>text <i>italic</i> text</li>
</ul>
i {
font-size: 30px;
}
ul {
font-size: 20px;
}
li {
color: red;
font-weight: bold;
}
