Наследување на 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;
}
