Etiqueta div para agrupar etiquetas en HTML
En la lección anterior analizamos la etiqueta
span, que permite resaltar de alguna manera
un fragmento de texto. También existe una etiqueta
especial div, que permite agrupar
varias etiquetas para luego hacer algo
con ellas simultáneamente.
Supongamos, por ejemplo, que usando las etiquetas div
agrupamos los párrafos:
<div class="block1">
<p>
text
</p>
<p>
text
</p>
</div>
<div class="block2">
<p>
text
</p>
<p>
text
</p>
</div>
Apliquemos el color rojo a los elementos del primer grupo, y el color verde a los elementos del segundo grupo:
.block1 {
color: red;
}
.block2 {
color: green;
}
Dado el siguiente código:
<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>
Colorea el contenido del primer div en rojo, el contenido del segundo div - en verde, y el contenido del tercer div - en azul. Asigna para ello una clase diferente a cada div.
Dado el siguiente código:
<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>
Colorea el contenido del primer y tercer div en rojo, el contenido del segundo div y del cuarto - en verde. Para ello, asigna una misma clase al primer y tercer div, y otra clase diferente al segundo y cuarto div.
