Υποενότητα 4.1 Επιλογείς: Επιλογέας κλάσης

Επιλογέας κλάσης

Η κλάση (class)είναι ένας άλλος τύπος επιλογέα. Σε αντίθεση με το id, η τάξη δεν είναι μοναδική. Αυτό σημαίνει ότι η ίδια κλάση μπορεί να χρησιμοποιηθεί πολλές φορές σε μια σελίδα HTML.

Ο επιλογέας κλάσης δημιουργείται από μια περίοδο period . που ακολουθείται απόό το όνομα του επιλογέα. Ο επιλογέας κλάσης επιλέγει στοιχεία με το όνομα (class attribute - name).

Έτσι στο CSS μας η κλάση θα είναι:

.mypadding {padding-top: 5px;}

Και στο HTML θα έχουμε:

<p class=”mypadding”> This paragraph will have 5px padding from top </p>

Επιπλέον, ένα στοιχείο μπορεί να έχει πολλαπλές κλάσεις.

Παράδειγμα:

<p class=”mypadding myborder mycenter myfontsize”> This paragraph has reference to four classes </p>

Πότε χρησιμοποιούμε επιλογείς κλάσεων;
Οι επιλογείς κλάσης χρησιμοποιούνται όταν θέλουμε να εφαρμόσουμε το ίδιο στυλ σε πολλά στοιχεία στη σελίδα μας, αλλά όχι σε όλα τα στοιχεία του ίδιου τύπου.

Φανταστείτε ότι έχετε μια σελίδα με 100 <p> and 5 <ul> ετικέτες (tags).

Ας υποθέσουμε ότι θέλετε να εφαρμόσετε το ίδιο στυλ σε 50 από αυτές τις ετικέτες <p> και σε μία <ul>. Στην περίπτωση αυτή, η κλάση είναι ο κατάλληλος επιλογέας.

Εάν θέλετε να εφαρμόσετε το ίδιο στυλ σε όλες τις ετικέτες <p, τότε ο κατάλληλος επιλογέας θα ήταν ο επιλογέας στοιχείων <p> .

Παράδειγμα

Οι κανόνες CSS:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
        .fontBlue {color:blue}
        .fontRed {color:red}
        .baclLime {background:lime}
        .backGrey {background:lightgrey}
    </style>
  </head>
  <body>
    <p class="fontBlue baclLime">My first paragraph</p>
    <p class="fontBlue backGrey">My second paragraph</p>
    <p class="fontRed baclLime">My third paragraph</p>
    <p class="fontRed backGrey">My fourth paragraph</p>
  </body>
</html>

θα δημιουργήσουν μια σελίδα που εμφανίζεται ως:

multiple classes

Άσκηση

Ανοίξτε τον επεξεργαστή κώδικα, δημιουργήστε ένα νέο αρχείο και αποθηκεύστε το ως exersice04.1.02.html στον φάκελο "Exercises".
Αντιγράψτε τον παραπάνω κώδικα και επικολλήστε τον στο νέο αρχείο.
Επεξεργαστείτε το αρχείο. Στον browser θα πρέπει να εμφανίζεται η επόμενη εικόνα:

multiple classes

Λύση: