HTML හි ටැග් සමූහගත කිරීම සඳහා div ටැගය

පෙර පාඩමේදී අපි span ටැගය විශ්ලේෂණය කළා, එය පෙළ කොටසක් යම් ආකාරයකින් හෙලදැක්වීමට ඉඩ සලසයි. ඒ හා සමානව විශේෂ div ටැගයක් ද ඇත, එය ටැග් කිහිපයක් සමූහගත කිරීමට ඉඩ සලසයි එවිට පසුව ඒවා සමඟ එකවර යමක් කළ හැකිය.

උදාහරණයක් ලෙස, අපි div ටැග භාවිතයෙන් යටිකුරු කොටස් සමූහගත කරමු:

<div class="block1">
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div class="block2">
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>

පළමු කණ්ඩායමෙහි ඇති අංග සඳහා අපි රතු පැහැයක් නියම කරමු, දෙවන කණ්ඩායමේ අංග සඳහා - කොළ පැහැයක්:

.block1 {
	color: red;
}
.block2 {
	color: green;
}

පහත කේතය ලබා දී ඇත:

<div>
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div>
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div>
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>

පළමු div හි අන්තර්ගතය රතු පැහැයට පාන්දර කරන්න, දෙවන div හි අන්තර්ගතය - කොළ පැහැයට, තුන්වන div හි අන්තර්ගතය - නිල් පැහැයට. මේ සඳහා සෑම div එකකටම එහිම පන්තියක් ලබා දෙන්න.

පහත කේතය ලබා දී ඇත:

<div>
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div>
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div>
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div>
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>

පළමු හා තුන්වන div හි අන්තර්ගතය රතු පැහැයට පාන්දර කරන්න, දෙවන div හි අන්තර්ගතය හා සිව්වන div හි අන්තර්ගතය - කොළ පැහැයට. මේ සඳහා පළමු හා තුන්වන div සඳහා එක් පන්තියක් ලබා දෙන්න, දෙවන හා සිව්වන div සඳහා - වෙනත් පන්තියක් ලබා දෙන්න.