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