HTML div tags grupēšanai

Iepriekšējā nodarbībā mēs apskatījām span tagu, kas ļauj kaut kā izcelt teksta daļiņu. Pastāv arī īpašs tags div, kas ļauj sagrupēt vairākus tagus, lai pēc tam ar tiem vienlaicīgi varētu kaut ko izdarīt.

Piemēram, izmantojot div tagus, sagrupēsim rindkopas:

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

Piešķirsim elementiem no pirmās grupas sarkano krāsu, bet elementiem no otrās grupas - zaļo krāsu:

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

Dots šāds kods:

<div>
	<h2>Virsraksts</h2>
	<p>
		teksts
	</p>
	<p>
		teksts
	</p>
</div>
<div>
	<h2>Virsraksts</h2>
	<p>
		teksts
	</p>
	<p>
		teksts
	</p>
	<p>
		teksts
	</p>
</div>
<div>
	<h2>Virsraksts</h2>
	<p>
		teksts
	</p>
	<p>
		teksts
	</p>
	<p>
		teksts
	</p>
	<p>
		teksts
	</p>
</div>

Izkrāsojiet pirmā div saturu sarkanā krāsā, otrā div saturu - zaļā, un trešā div saturu - gaiši zilā. Iestatiet katram div savu klasi.

Dots šāds kods:

<div>
	<h2>Virsraksts</h2>
	<p>
		teksts
	</p>
	<p>
		teksts
	</p>
</div>
<div>
	<h2>Virsraksts</h2>
	<p>
		teksts
	</p>
	<p>
		teksts
	</p>
</div>
<div>
	<h2>Virsraksts</h2>
	<p>
		teksts
	</p>
	<p>
		teksts
	</p>
</div>
<div>
	<h2>Virsraksts</h2>
	<p>
		teksts
	</p>
	<p>
		teksts
	</p>
</div>

Izkrāsojiet pirmā un trešā div saturu sarkanā krāsā, otrā un ceturtā div saturu - zaļā krāsā. Šim nolūkam pirmajam un trešajam div piešķiriet vienu klasi, bet otrajam un ceturtajam - citu klasi.