Το χαρακτηριστικό class

Το χαρακτηριστικό class ορίζει μία ή περισσότερες κλάσεις για ένα στοιχείο (με στοιχείο εννοείται η ετικέτα).

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

Υπάρχει επίσης και το χαρακτηριστικό id, το οποίο, παρόμοια με το χαρακτηριστικό class, επιτρέπει την επιλογή στοιχείων σε μια σελίδα HTML.

Η διαφορά μεταξύ του χαρακτηριστικού class και του χαρακτηριστικού id είναι ότι το class επιλέγει μια ομάδα στοιχείων (ακόμα και αν δοθεί σε ένα μόνο στοιχείο - μπορεί στη συνέχεια να δοθεί και σε άλλο), ενώ το id επιλέγει ένα μοναδικό στοιχείο (δεν πρέπει να υπάρχει άλλο στοιχείο με το ίδιο id στην ίδια ιστοσελίδα, διαφορετικά θα προκύψει σύγκρουση).

Πώς να καταλάβετε τι να δώσετε σε ένα στοιχείο - κλάση ή id; Κλάση δίνεται σε εκείνα τα στοιχεία που επαναλαμβάνονται στις σελίδες του ιστότοπου (ώστε να μην γράφουμε πολλές φορές τον ίδιο κώδικα CSS). Ακόμα και αν αυτό το στοιχείο είναι προς το παρόν μοναδικό, αλλά αισθάνεστε ότι παρόμοια στοιχεία μπορεί να εμφανιστούν στο μέλλον - δώστε του κλάση. Εάν, από την άλλη πλευρά, είστε σίγουροι ότι ένα τέτοιο στοιχείο είναι μοναδικό - τότε δώστε του id. Αν και στην παρούσα στιγμή υπάρχει μια τάση να δίνονται σε όλα τα στοιχεία κλάσεις, και να αφήνονται τα id για το JavaScript, αυτή η πρακτική δεν είναι γενικά αποδεκτή.

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

Τα ονόματα των κλάσεων πρέπει να αποτελούνται από αγγλικούς χαρακτήρες, αριθμούς, χωρίς κενά (το κενό διαχωρίζει τις κλάσεις μεταξύ τους, αντί για αυτό μπορείτε να χρησιμοποιήσετε κάτω παύλα ή παύλα). Οι κλάσεις δεν πρέπει να ξεκινούν με αριθμό (στο HTML5 επιτρέπεται ήδη, αλλά δεν θα λειτουργεί σε παλιά προγράμματα περιήγησης).

Τα ονόματα για τις κλάσεις πρέπει να δίνονται στα αγγλικά (και όχι στα ρωσικά, απλά με αγγλικούς χαρακτήρες!). Τα ονόματα πρέπει να έχουν νόημα, να αντικατοπτρίζουν την ουσία της κλάσης.

Παράδειγμα

Ας ορίσουμε κόκκινο χρώμα κειμένου για όλες τις παραγράφους με κλάση test:

<p class="test">Παράγραφος με κλάση test.</p>
<p>Παράγραφος ελέγχου χωρίς κλάση.</p>

.test {
	color: red;
}

Παράδειγμα . Πολλαπλές κλάσεις για ένα στοιχείο

Εδώ ας ορίσουμε στην πρώτη παράγραφο πολλές κλάσεις - test1 και test2 (θα τις γράψουμε διαχωρισμένες με κενό). Η κλάση test1 ορίζει κόκκινο χρώμα κειμένου, ενώ η κλάση test2 ορίζει μέγεθος γραμματοσειράς σε 20px. Στη δεύτερη παράγραφο δόθηκε μόνο η κλάση test1 (αυτή η παράγραφος θα γίνει κόκκινη), ενώ στην τρίτη παράγραφο - η κλάση test2 (αυτή η παράγραφος θα έχει μέγεθος γραμματοσειράς 20px). Η πρώτη παράγραφος, που έχει δύο κλάσεις, θα έχει ταυτόχρονα και κόκκινο χρώμα και μέγεθος γραμματοσειράς σε 20px:

<p class="test1 test2">Παράγραφος με δύο κλάσεις test1 και test2.</p>
<p class="test1">Παράγραφος με κλάση test1.</p>
<p class="test2">Παράγραφος με κλάση test2.</p>
<p>Παράγραφος ελέγχου χωρίς κλάσεις.</p>

.test1 {
	color: red;
}
.test2 {
	font-size: 20px;
}

Δείτε επίσης

το χαρακτηριστικό id,
που ορίζει μοναδικά αναγνωριστικά για τα στοιχεία