Το Χαρακτηριστικό Κλάσης HTML
Το χαρακτηριστικό κλάσης HTML χρησιμοποιείται για να καθορίσει μια κλάση για ένα στοιχείο HTML.
Πολλά στοιχεία HTML μπορούν να μοιράζονται την ίδια κλάση.
Χρήση του Χαρακτηριστικού class
Το χαρακτηριστικό class χρησιμοποιείται συχνά για να αναφέρεται σε ένα όνομα κλάσης σε ένα φύλλο στυλ. Μπορεί επίσης να χρησιμοποιηθεί από ένα JavaScript για την πρόσβαση και την αλληλεπίδραση με στοιχεία που έχουν το συγκεκριμένο όνομα κλάσης.
Στο παρακάτω παράδειγμα έχουμε τρία στοιχεία
με ένα χαρακτηριστικό class με την τιμή “city”. Όλα τα τρία στοιχεία
θα λάβουν τον ίδιο στυλ σύμφωνα με τον κανόνα .city που ορίζεται στην ενότητα head:
<head>
<style>
.city {
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<div class="city">Αθήνα</div>
<div class="city">Θεσσαλονίκη</div>
<div class="city">Πάτρα</div>
</body>
Στο παραπάνω παράδειγμα, τα τρία στοιχεία
θα έχουν μπλε χρώμα και μέγεθος γραμματοσειράς 20px λόγω του κανόνα που εφαρμόζεται στην κλάση “city”.
Στο παρακάτω παράδειγμα έχουμε δύο στοιχεία με ένα χαρακτηριστικό class με την τιμή “note”. Και τα δύο στοιχεία θα λάβουν τον ίδιο στυλ σύμφωνα με τον κανόνα .note που ορίζεται στην ενότητα head:
<head>
<style>
.note {
color: red;
font-style: italic;
}
</style>
</head>
<body>
<span class="note">Σημείωση 1</span>
<span class="note">Σημείωση 2</span>
</body>
Στο παραπάνω παράδειγμα, τα δύο στοιχεία θα έχουν κόκκινο χρώμα και κλίση γραμματοσειράς λόγω του κανόνα που εφαρμόζεται στην κλάση “note”.
[adinserter block=”2″]
Η σύνταξη για την κλάση (class) είναι η εξής: γράφουμε ένα τελεία (.) χαρακτήρα, ακολουθούμενο από το όνομα της κλάσης. Έπειτα, ορίζουμε τις ιδιότητες CSS μέσα σε αγκύλες {}:
.className {
property1: value1;
property2: value2;
/* Πρόσθετες ιδιότητες */
}
Παράδειγμα:
.note {
color: red;
font-size: 14px;
font-weight: bold;
}
Στο παραπάνω παράδειγμα, έχουμε το όνομα κλάσης “note” και ορίζουμε τις ιδιότητες CSS που θα εφαρμοστούν σε στοιχεία με αυτήν την κλάση. Συγκεκριμένα, το κείμενο θα έχει κόκκινο χρώμα, μέγεθος γραμματοσειράς 14px και θα είναι έντονο.
Ένα στοιχείο HTML μπορεί να ανήκει σε περισσότερες από μία κλάσεις.
Για να καθορίσουμε πολλαπλές κλάσεις, χωρίζουμε τα ονόματα των κλάσεων με ένα κενό, π.χ. <div class=”city main”>. Το στοιχείο θα λάβει τα στιλ CSS από όλες τις καθορισμένες κλάσεις.
Στο παρακάτω παράδειγμα, το πρώτο στοιχείο <h2> ανήκει ταυτόχρονα και στην κλάση “city” και στην κλάση “main” και θα λάβει τα CSS στιλ από και τις δύο κλάσεις:
<style>
.city {
color: blue;
}
.main {
font-size: 24px;
}
</style>
<h2 class="city main">Τίτλος</h2>
Στο παραπάνω παράδειγμα, το πρώτο στοιχείο <h2> θα έχει μπλε χρώμα κειμένου και μέγεθος γραμματοσειράς 24px λόγω των κλάσεων “city” και “main”.
Διάφορα στοιχεία HTML μπορούν να αναφέρονται στην ίδια κλάση.
Στο παρακάτω παράδειγμα, τόσο το στοιχείο <h2> όσο και το στοιχείο <p> αναφέρονται στην κλάση “city” και θα μοιραστούν το ίδιο στιλ:
<style>
.city {
color: blue;
font-size: 18px;
}
</style>
<h2 class="city">Τίτλος</h2>
<p class="city">Κείμενο παραδείγματος</p>
Στο παραπάνω παράδειγμα, τόσο το <h2> όσο και το <p> θα έχουν μπλε χρώμα κειμένου και μέγεθος γραμματοσειράς 18px, καθώς ανήκουν στην κλάση “city”.
[adinserter block=”3″]
Το όνομα κλάσης μπορεί επίσης να χρησιμοποιηθεί από τη JavaScript για να εκτελέσει συγκεκριμένες εργασίες για συγκεκριμένα στοιχεία.
Η JavaScript μπορεί να αποκτήσει πρόσβαση σε στοιχεία με ένα συγκεκριμένο όνομα κλάσης μέσω της μεθόδου getElementsByClassName():
Παρακάτω παρουσιάζεται ένα παράδειγμα χρήσης της μεθόδου getElementsByClassName() στη JavaScript για να προσπελάσουμε στοιχεία με μια συγκεκριμένη κλάση:
<p class="highlight">Κείμενο παράδειγμα 1</p>
<p>Κείμενο παράδειγμα 2</p>
<p class="highlight">Κείμενο παράδειγμα 3</p>
<script>
// Ανάκτηση όλων των στοιχείων με την κλάση "highlight"
var elements = document.getElementsByClassName("highlight");
// Επανάληψη μέσω των στοιχείων και εκτέλεση ενεργειών
for (var i = 0; i < elements.length; i++) {
// Προσθήκη στυλ CSS στα στοιχεία με την κλάση "highlight"
elements[i].style.color = "red";
elements[i].style.fontWeight = "bold";
}
</script>
Στο παραπάνω παράδειγμα, χρησιμοποιούμε τη μέθοδο getElementsByClassName("highlight") για να ανακτήσουμε όλα τα στοιχεία με την κλάση “highlight”. Έπειτα, μετά από αυτό, εφαρμόζουμε μια σειρά από ενέργειες σε αυτά τα στοιχεία, όπως η αλλαγή του χρώματος σε κόκκινο και η καθορισμός του στυλ γραμματοσειράς ως bold (έντονη).