В предыдущем уроке мы с вами разобрали тег
span, который позволяет как-то выделить
кусочек текста. Существует также специальный
тег div, который позволяет сгруппировать
несколько тегов, чтобы затем сними сделать
что-нибудь одновременно.
Пусть для примера с помощью тегов div
мы сгруппируем абзацы:
<div class="block1">
<p>
текст
</p>
<p>
текст
</p>
</div>
<div class="block2">
<p>
текст
</p>
<p>
текст
</p>
</div>
Давайте элементам из первой группы назначим красный цвет, а элементам из второй группы - зеленый:
.block1 {
color: red;
}
.block2 {
color: green;
}
Дан следующий код:
<div>
<h2>заголовок</h2>
<p>
текст
</p>
<p>
текст
</p>
</div>
<div>
<h2>заголовок</h2>
<p>
текст
</p>
<p>
текст
</p>
<p>
текст
</p>
</div>
<div>
<h2>заголовок</h2>
<p>
текст
</p>
<p>
текст
</p>
<p>
текст
</p>
<p>
текст
</p>
</div>
Покрасьте содержимое первого дива в красный цвет, содержимое второго дива - в зеленый, а содержимое третьего дива - с голубой. Задайте для этого каждому диву свой класс.
Дан следующий код:
<div>
<h2>заголовок</h2>
<p>
текст
</p>
<p>
текст
</p>
</div>
<div>
<h2>заголовок</h2>
<p>
текст
</p>
<p>
текст
</p>
</div>
<div>
<h2>заголовок</h2>
<p>
текст
</p>
<p>
текст
</p>
</div>
<div>
<h2>заголовок</h2>
<p>
текст
</p>
<p>
текст
</p>
</div>
Покрасьте содержимое первого и третьего дива в красный цвет, содержимое второго дива и четвертого - в зеленый. Для этого первому и третьему дивам дайте один класс, а второму и четвертому - другой класс.