Код вашей страницы

<html>
<head>
<style type="text/css">
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:blue;
}
.marked p
{
color:white;
}
</style>
</head>

<body>
<p>Этот параграф синего цвета и он выровнен по центру.</p>
<div class="marked">
<p>Этот параграф не должен быть синего цвета.</p>
</div>
<p>Параграф внутри элемента с классом "marked" сохраняет выравнивание, но меняет цвет. Это связано с тем, что в записи стиля (между тегами <style></style>) свойства параграфа стоят выше, чем свойства элемента div. Таким образом, браузер считывая стили сверху вниз, применяет из по очереди.</p>
</body>
</html>

Результат в окне браузера

Этот параграф синего цвета и он выровнен по центру.

Этот параграф не должен быть синего цвета.

Параграф внутри элемента с классом "marked" сохраняет выравнивание, но меняет цвет. Это связано с тем, что в записи стиля (между тегами <style></style>) свойства параграфа стоят выше, чем свойства элемента div. Таким образом, браузер считывая стили сверху вниз, применяет из по очереди.

К примерам CSS >> В раздел CSS >> На главную >>


HTML-верстка: инструменты и приемы профессиональной front-end разработки