Мероси хусусиятҳои CSS
Фарз мекунем, ки мо як абзас дорем, ва дар он матне
дар барчасби i:
<p>
This is some <i>text</i> in paragraph.
</p>
Биёед абзасҳоро ба ранги сурх ранг кунем:
p {
color: red;
}
Дар натиҷа на танҳо матни абзас,
балки матни барчасби i ранг мегирад:
Ҳамаи кор дар он аст, ки хусусияти color
мерос бурда мешавад. Ин маънои онро дорад, ки агар
барои барчаси волидайн ранг муайян карда шуда бошад,
ҳамон ранг ба фарзандон низ мерасад. Ҳамаи хусусиятҳои CSS мерос бурда намешаванд, аммо бисёре аз онҳо мерос бурда мешаванд (аз онҳое, ки
шумо аллакай медонед - ҳамаашон мерос бурда мешаванд).
Агар хоҳиш дошта бошед, аммо, шумо метавонед хусусияти волидайнро бо муайян кардани селектори фарзанд аз нав таъин кунед. Масалан, биёед ба абзас ранги сурх диҳем, ва ба курсив - ранги обӣ:
<p>
This is some <i>text</i> in paragraph.
</p>
p {
color: red;
}
i {
color: blue;
}
:
Тартиби селекторҳо дар рамзи CSS дар ин ҳолат
аҳамият надорад. Агар селектори i ва селектори p-ро иваз кунед, ҳама чиз ҳамон тавр кор мекунад:
<p>
This is some <i>text</i> in paragraph.
</p>
i {
color: blue;
}
p {
color: red;
}
:
Пас аз омӯхтани рамз, бигӯед кадом рангро
матн дар барчасби b хоҳад дошт:
<p>
This is some <b>text</b> in paragraph.
</p>
p {
color: blue;
}
Пас аз омӯхтани рамз, бигӯед кадом рангро
матн дар барчасби b хоҳад дошт:
<p>
This is some <b>text</b> in paragraph.
</p>
p {
color: blue;
}
b {
color: red;
}
Пас аз омӯхтани рамз, бигӯед кадом рангро
матн дар барчасби b хоҳад дошт:
<p>
This is some <b>text</b> in paragraph.
</p>
b {
color: red;
}
p {
color: blue;
}
Пас аз омӯхтани рамз, бигӯед кадом рангро
матн дар барчасби li хоҳад дошт:
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
ul {
color: blue;
}
Пас аз омӯхтани рамз, бигӯед кадом рангро
матн дар барчасби li хоҳад дошт:
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
ul {
color: blue;
}
li {
color: red;
}
Пас аз омӯхтани рамз, бигӯед кадом рангро
матн дар барчасби i хоҳад дошт:
<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;
}
Пас аз омӯхтани рамз, бигӯед кадом андозаро
матн дар барчасби i хоҳад дошт:
<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;
}
