Die div-tag vir die groepering van etikette in HTML
In die vorige les het ons die
span-etiket ontleed, wat dit moontlik maak om 'n stukkie teks te benadruk. Daar is ook 'n spesiale
etikett div wat dit moontlik maak om verskeie etikette te groepeer sodat jy iets gelyktydig met hulle kan doen.
Laat ons byvoorbeeld die paragrawe groepeer met behulp van die div-etikette:
<div class="block1">
<p>
teks
</p>
<p>
teks
</p>
</div>
<div class="block2">
<p>
teks
</p>
<p>
teks
</p>
</div>
Kom ons ken 'n rooi kleur toe aan elemente uit die eerste groep, en 'n groen kleur aan elemente uit die tweede groep:
.block1 {
color: red;
}
.block2 {
color: green;
}
Die volgende kode word gegee:
<div>
<h2>Titel</h2>
<p>
teks
</p>
<p>
teks
</p>
</div>
<div>
<h2>Titel</h2>
<p>
teks
</p>
<p>
teks
</p>
<p>
teks
</p>
</div>
<div>
<h2>Titel</h2>
<p>
teks
</p>
<p>
teks
</p>
<p>
teks
</p>
<p>
teks
</p>
</div>
Kleur die inhoud van die eerste div in rooi, die inhoud van die tweede div in groen, en die inhoud van die derde div in blou. Ken vir elkeen 'n unieke klas toe.
Die volgende kode word gegee:
<div>
<h2>Titel</h2>
<p>
teks
</p>
<p>
teks
</p>
</div>
<div>
<h2>Titel</h2>
<p>
teks
</p>
<p>
teks
</p>
</div>
<div>
<h2>Titel</h2>
<p>
teks
</p>
<p>
teks
</p>
</div>
<div>
<h2>Titel</h2>
<p>
teks
</p>
<p>
teks
</p>
</div>
Kleur die inhoud van die eerste en derde div in rooi, en die inhoud van die tweede en vierde div in groen. Ken vir die eerste en derde div een klas toe, en vir die tweede en vierde div 'n ander klas.
