Div-taggen for gruppering av tagger i HTML
I forrige leksjon analyserte vi taggen
span, som lar oss markere
et lite stykke tekst på en eller annen måte. Det finnes også en spesiell
tagg div, som lar oss gruppere
flere tagger for deretter å gjøre noe
med dem samtidig.
La oss for eksempel ved hjelp av div-tagger
gruppere avsnitt:
<div class="block1">
<p>
text
</p>
<p>
text
</p>
</div>
<div class="block2">
<p>
text
</p>
<p>
text
</p>
</div>
La oss tildele rød farge til elementene fra den første gruppen, og grønn farge til elementene fra den andre gruppen - grønn:
.block1 {
color: red;
}
.block2 {
color: green;
}
Følgende kode er gitt:
<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>
Farg innholdet i den første div-en i rød farge, innholdet i den andre div-en - i grønn, og innholdet i den tredje div-en - i blå. Tilordne hver div sin egen klasse for å gjøre dette.
Følgende kode er gitt:
<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>
Farg innholdet i den første og tredje div-en i rød farge, innholdet i den andre og fjerde div-en - i grønn. For å gjøre dette, gi den første og tredje div-en én klasse, og den andre og fjerde - en annen klasse.