Η ετικέτα div για την ομαδοποίηση ετικετών σε HTML
Στο προηγούμενο μάθημα αναλύσαμε την ετικέτα
span, που επιτρέπει τον επισημασμό
ενός τμήματος κειμένου. Υπάρχει επίσης η ειδική
ετικέτα div, που επιτρέπει την ομαδοποίηση
πολλών ετικετών, ώστε στη συνέχεια να κάνουμε
κάτι μαζί με όλες ταυτόχρονα.
Ας χρησιμοποιήσουμε ως παράδειγμα τις ετικέτες div
για να ομαδοποιήσουμε παραγράφους:
<div class="block1">
<p>
κείμενο
</p>
<p>
κείμενο
</p>
</div>
<div class="block2">
<p>
κείμενο
</p>
<p>
κείμενο
</p>
</div>
Ας ορίσουμε κόκκινο χρώμα για τα στοιχεία της πρώτης ομάδας και πράσινο χρώμα για τα στοιχεία της δεύτερης ομάδας:
.block1 {
color: red;
}
.block2 {
color: green;
}
Δίνεται ο ακόλουθος κώδικας:
<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 τη δική του κλάση.
Δίνεται ο ακόλουθος κώδικας:
<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 μία κλάση, και στο δεύτερο και στο τέταρτο - μια άλλη κλάση.