Kitengo cha div cha kuweka vitengo vya lebo pamoja katika HTML
Katika somo lililopita tulichambua kitengo
span, kinachoruhusu kuangazia
sehemu fulani ya maandishi. Pia kuna kitengo maalum
div, kinachoruhusu kuweka
lebo kadhaa pamoja, ili baadaye kuzifanyia
kitu kwa wakati mmoja.
Kwa mfano, kwa kutumia vitengo vya div
tutaweka aya pamoja:
<div class="block1">
<p>
maandishi
</p>
<p>
maandishi
</p>
</div>
<div class="block2">
<p>
maandishi
</p>
<p>
maandishi
</p>
</div>
Wacha tuwaweke vipengee kutoka kikundi cha kwanza rangi nyekundu, na vipengee kutoka kikundi cha pili - rangi ya kijani:
.block1 {
color: red;
}
.block2 {
color: green;
}
Imepitiwa na msimbo ufuatao:
<div>
<h2>Kichwa</h2>
<p>
maandishi
</p>
<p>
maandishi
</p>
</div>
<div>
<h2>Kichwa</h2>
<p>
maandishi
</p>
<p>
maandishi
</p>
<p>
maandishi
</p>
</div>
<div>
<h2>Kichwa</h2>
<p>
maandishi
</p>
<p>
maandishi
</p>
<p>
maandishi
</p>
<p>
maandishi
</p>
</div>
Paka yaliyomo kwenye div ya kwanza kwa rangi nyekundu , yaliyomo kwenye div ya pili - kwa kijani, na yaliyomo kwenye div ya tatu - kwa rangi ya samawati. Weka kwa kila div darasa lake.
Imepitiwa na msimbo ufuatao:
<div>
<h2>Kichwa</h2>
<p>
maandishi
</p>
<p>
maandishi
</p>
</div>
<div>
<h2>Kichwa</h2>
<p>
maandishi
</p>
<p>
maandishi
</p>
</div>
<div>
<h2>Kichwa</h2>
<p>
maandishi
</p>
<p>
maandishi
</p>
</div>
<div>
<h2>Kichwa</h2>
<p>
maandishi
</p>
<p>
maandishi
</p>
</div>
Paka yaliyomo kwenye div ya kwanza na ya tatu kwa rangi nyekundu, yaliyomo kwenye div ya pili na ya nne - kwa kijani. Kwa hili div ya kwanza na ya tatu peana darasa moja, na div ya pili na ya nne - darasa tofauti.
