Div-taggen för att gruppera taggar i HTML

I föregående lektion gick vi igenom taggen span, som gör det möjligt att markera en bit text på något sätt. Det finns också en speciell tagg div som gör det möjligt att gruppera flera taggar för att sedan göra något med dem samtidigt.

Låt oss som ett exempel använda taggarna div för att gruppera stycken:

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

Låt oss tilldela element från den första gruppen röd färg, och element från den andra gruppen - grön färg:

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

Följande kod ges:

<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>

Färga innehållet i den första diven i röd färg, innehållet i den andra diven - i grön, och innehållet i den tredje diven - i blå. Tilldela varje div en egen klass för detta.

Följande kod ges:

<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>

Färga innehållet i den första och tredje diven i röd färg, innehållet i den andra diven och fjärde - i grön. För att göra detta, ge den första och tredje diven en klass, och den andra och fjärde - en annan klass.