Нехай у нас є абзац, а у ньому якийсь
текст у тезі i:
<p>
якийсь <i>текст</i> в абзаці
</p>
Давайте пофарбуємо абзаци у червоний колір:
p {
color: red;
}
В результаті пофарбується не лише текст абзацу,
але й текст тега i:
Справа в тому, що властивість color
успадковується. Це означає, що якщо
у батьківського тегу заданий якийсь колір,
то такий колір буде й нащадків. Успадковуються
не всі CSS властивості, але багато (з тих, що
ви вже знаєте – всі успадковуються).
За бажанням, однак, можна перевизначити властивість батька, поставивши селектор нащадка. Наприклад, давайте абзацу поставимо червоний колір, а курсиву – блакитний:
<p>
якийсь <i>текст</i> в абзаці
</p>
p {
color: red;
}
i {
color: blue;
}
:
Порядок селекторів у коді CSS у такому випадку не має значення. Якщо переставити місцями селектор i та селектор p, все буде працювати так само:
<p>
якийсь <i>текст</i> в абзаці
</p>
i {
color: blue;
}
p {
color: red;
}
:
Вивчивши код, скажіть який колір матиме
текст у тезі b:
<p>
якийсь <b>текст</b> в абзаці
</p>
p {
color: blue;
}
Вивчивши код, скажіть який колір матиме
текст у тезі b:
<p>
якийсь <b>текст</b> в абзаці
</p>
p {
color: blue;
}
b {
color: red;
}
Вивчивши код, скажіть який колір матиме
текст у тезі b:
<p>
якийсь <b>текст</b> в абзаці
</p>
b {
color: red;
}
p {
color: blue;
}
Вивчивши код, скажіть який колір матиме
текст у тезі li:
<ul>
<li>текст</li>
<li>текст</li>
<li>текст</li>
</ul>
ul {
color: blue;
}
Вивчивши код, скажіть який колір матиме
текст у тезі li:
<ul>
<li>текст</li>
<li>текст</li>
<li>текст</li>
</ul>
ul {
color: blue;
}
li {
color: red;
}
Вивчивши код, скажіть який колір матиме
текст у тезі i:
<ul>
<li>текст <i>курсив</i> текст</li>
<li>текст <i>курсив</i> текст</li>
<li>текст <i>курсив</i> текст</li>
</ul>
ul {
color: blue;
}
li {
color: red;
}
i {
color: green;
}
Вивчивши код, скажіть який колір матиме
текст у тезі i:
<ul>
<li>текст <i>курсив</i> текст</li>
<li>текст <i>курсив</i> текст</li>
<li>текст <i>курсив</i> текст</li>
</ul>
i {
font-size: 30px;
}
ul {
font-size: 20px;
}
li {
color: red;
font-weight: bold;
}