Наслеђивање 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;
}
