Η ετικέτα div για την ομαδοποίηση ετικετών σε HTML

Στο προηγούμενο μάθημα αναλύσαμε την ετικέτα span, που επιτρέπει τον επισημασμό ενός τμήματος κειμένου. Υπάρχει επίσης η ειδική ετικέτα div, που επιτρέπει την ομαδοποίηση πολλών ετικετών, ώστε στη συνέχεια να κάνουμε κάτι μαζί με όλες ταυτόχρονα.

Ας χρησιμοποιήσουμε ως παράδειγμα τις ετικέτες div για να ομαδοποιήσουμε παραγράφους:

html<div class="block1">
  <p>
    κείμενο
  </p>
  <p>
    κείμενο
  </p>
</div>
<div class="block2">
  <p>
    κείμενο
  </p>
  <p>
    κείμενο
  </p>
</div>

Ας ορίσουμε κόκκινο χρώμα για τα στοιχεία της πρώτης ομάδας και πράσινο χρώμα για τα στοιχεία της δεύτερης ομάδας:

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

Задание 1

Δίνεται ο ακόλουθος κώδικας:

html<div>
  <h2>Τίτλος</h2>
  <p>
    κείμενο
  </p>
  <p>
    κείμενο
  </p>
</div>
<div>
  <h2>Τίτλος</h2>
  <p>
    κείμενο
  </p>
  <p>
    κείμενο
  </p>
  <p>
    κείμενο
  </p>
</div>
<div>
  <h2>Τίτλος</h2>
  <p>
    κείμενο
  </p>
  <p>
    κείμενο
  </p>
  <p>
    κείμενο
  </p>
  <p>
    κείμενο
  </p>
</div>

Βάψτε το περιεχόμενο του πρώτου div σε κόκκινο χρώμα, το περιεχόμενο του δεύτερου div - σε πράσινο, και το περιεχόμενο του τρίτου div - σε γαλάζιο. Ορίστε για αυτό σε κάθε div τη δική του κλάση.

Задание 2

Δίνεται ο ακόλουθος κώδικας:

html<div>
  <h2>Τίτλος</h2>
  <p>
    κείμενο
  </p>
  <p>
    κείμενο
  </p>
</div>
<div>
  <h2>Τίτλος</h2>
  <p>
    κείμενο
  </p>
  <p>
    κείμενο
  </p>
</div>
<div>
  <h2>Τίτλος</h2>
  <p>
    κείμενο
  </p>
  <p>
    κείμενο
  </p>
</div>
<div>
  <h2>Τίτλος</h2>
  <p>
    κείμενο
  </p>
  <p>
    κείμενο
  </p>
</div>

Βάψτε το περιεχόμενο του πρώτου και τρίτου div σε κόκκινο χρώμα, το περιεχόμενο του δεύτερου div και του τέταρτου - σε πράσινο. Για αυτό, δώστε στο πρώτο και στο τρίτο div μία κλάση, και στο δεύτερο και στο τέταρτο - μια άλλη κλάση.