HTML-div-tagi elementtien ryhmittelyyn

Edellisessä oppitunnissa käsittelimme span-tagin, jonka avulla voit korostaa pientä tekstipalasta. On olemassa myös erityinen div-tagi, jonka avulla voit ryhmitellä useita elementtejä, jotta voit tehdä niille jotain yhtaikaa.

Esimerkkinä ryhmittelemme div-tagien avulla kappaleet:

html<div class="block1">
  <p>
    teksti
  </p>
  <p>
    teksti
  </p>
</div>
<div class="block2">
  <p>
    teksti
  </p>
  <p>
    teksti
  </p>
</div>

Annetaan ensimmäisen ryhmän elementeille punainen väri ja toisen ryhmän elementeille - vihreä väri:

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

Задание 1

Annettu seuraava koodi:

html<div>
  <h2>Otsikko</h2>
  <p>
    teksti
  </p>
  <p>
    teksti
  </p>
</div>
<div>
  <h2>Otsikko</h2>
  <p>
    teksti
  </p>
  <p>
    teksti
  </p>
  <p>
    teksti
  </p>
</div>
<div>
  <h2>Otsikko</h2>
  <p>
    teksti
  </p>
  <p>
    teksti
  </p>
  <p>
    teksti
  </p>
  <p>
    teksti
  </p>
</div>

Värjää ensimmäisen divin sisältö punaiseksi, toisen divin sisältö - vihreäksi, ja kolmannen divin sisältö - siniseksi. Anna jokaiselle diville oma luokka tätä varten.

Задание 2

Annettu seuraava koodi:

html<div>
  <h2>Otsikko</h2>
  <p>
    teksti
  </p>
  <p>
    teksti
  </p>
</div>
<div>
  <h2>Otsikko</h2>
  <p>
    teksti
  </p>
  <p>
    teksti
  </p>
</div>
<div>
  <h2>Otsikko</h2>
  <p>
    teksti
  </p>
  <p>
    teksti
  </p>
</div>
<div>
  <h2>Otsikko</h2>
  <p>
    teksti
  </p>
  <p>
    teksti
  </p>
</div>

Värjää ensimmäisen ja kolmannen divin sisältö punaiseksi, toisen ja neljännen divin sisältö - vihreäksi. Anna tätä varten ensimmäiselle ja kolmannelle diville yksi luokka, ja toiselle ja neljännelle - toinen luokka.