HTML'деги тегдерди топтоо үчүн div теги

Акыркы сабакта биз бир аз текстти бөлүп көрсөтүүгө мүмкүндүк берген 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>Title</h2>
	<p>
		текст
	</p>
	<p>
		текст
	</p>
</div>
<div>
	<h2>Title</h2>
	<p>
		текст
	</p>
	<p>
		текст
	</p>
	<p>
		текст
	</p>
</div>
<div>
	<h2>Title</h2>
	<p>
		текст
	</p>
	<p>
		текст
	</p>
	<p>
		текст
	</p>
	<p>
		текст
	</p>
</div>

Биринчи дивдин ичин кызыл түскө, экинчи дивдин ичин жашыл түскө, үчүнчү дивдин ичин көк түскө боёңуз. Бул үчүн ар бир дивге өз классын бергиле.

Төмөнкү код берилген:

<div>
	<h2>Title</h2>
	<p>
		текст
	</p>
	<p>
		текст
	</p>
</div>
<div>
	<h2>Title</h2>
	<p>
		текст
	</p>
	<p>
		текст
	</p>
</div>
<div>
	<h2>Title</h2>
	<p>
		текст
	</p>
	<p>
		текст
	</p>
</div>
<div>
	<h2>Title</h2>
	<p>
		текст
	</p>
	<p>
		текст
	</p>
</div>

Биринчи жана үчүнчү дивдердин ичин кызыл түскө, экинчи жана төртүнчү дивдердин ичин жашыл түскө боёңуз. Бул үчүн биринчи жана үчүнчү дивдерге бир класс, экинчи жана төртүнчү дивдерге башка класс бергиле.