Για να αποφύγουμε την επανάληψη του κώδικα, χρησιμοποιούμε πολλαπλές κλάσεις σε HTML και CSS. Με το CSS, μπορούμε επίσης να ορίσουμε και να διαμορφώσουμε και τις δύο κλάσεις μαζί και να χρησιμοποιήσουμε πολλές κλάσεις σε ένα στοιχείο, εκχωρώντας τους διαφορετικά αναγνωριστικά κλάσεων. Αυτή η προσέγγιση μπορεί να ακολουθηθεί χρησιμοποιώντας τη σύνταξη διαχωρισμένου χώρου για την προσθήκη πολλαπλών κλάσεων σε ένα στοιχείο HTML.
Σε αυτό το άρθρο, θα μάθουμε πώς να προσθέτουμε πολλές κλάσεις σε ένα στοιχείο.
Πώς να χρησιμοποιήσετε πολλές κλάσεις στο CSS;
Για να χρησιμοποιηθούν δύο ή περισσότερες κλάσεις σε ένα στοιχείο, κάθε αναγνωριστικό κλάσης θα χωρίζεται από ένα κενό.
Πρέπει να ακολουθήσετε την ακόλουθη σύνταξη για να χρησιμοποιήσετε πολλές κλάσεις σε ένα στοιχείο:
< h1 class = 'class_1 class_2 class_3' > παραδίδοντας... η >
Σε ένα μόνο στοιχείο HTML, μπορείτε να συμπεριλάβετε περισσότερες από μία κλάσεις διαχωρίζοντάς τις με ένα κενό. Για τη διευκόλυνσή σας, εδώ είναι ένα παράδειγμα.
Παράδειγμα: Χρήση πολλαπλών κλάσεων στο CSS
Στο παρακάτω παράδειγμα, θα δημιουργήσουμε:
- Μια επικεφαλίδα που χρησιμοποιεί την ετικέτα
και εκχωρεί το όνομα της κλάσης ' επικεφαλίδα '.
- Στη συνέχεια, θα δημιουργήσουμε μια άλλη επικεφαλίδα και θα την αντιστοιχίσουμε σε δύο διαφορετικές κλάσεις: επικεφαλίδα ' και ' γραμμή '. Αυτά τα αναγνωριστικά κλάσεων χωρίζονται με ένα κενό:
HTML
h1 >
< h1 τάξη = 'γραμμή τίτλου' >
Πολλαπλές Τάξεις σε Ένα Στοιχείο
h1 >
Τώρα, ας μεταβούμε στο αρχείο CSS και ας εφαρμόσουμε ορισμένες ιδιότητες CSS που αναφέρονται παρακάτω:
- Ορίστε το χρώμα φόντου στην επικεφαλίδα χρησιμοποιώντας τη συνάρτηση rgb() ως ' (69, 51, 151) '.
- Ορίστε το στυλ γραμματοσειράς ' πλάγια γραφή ” για την επικεφαλίδα.
Στην τάξη HTML, η πρώτη επικεφαλίδα χρησιμοποιεί το όνομα της κλάσης ' επικεφαλίδα '. Έτσι, το στυλ που καθορίζεται στην καθορισμένη κλάση θα εφαρμοστεί στην πρώτη επικεφαλίδα:
.επικεφαλίδα {
χρώμα φόντου: rgb ( 69 , 51 , 151 ) ;
στυλ γραμματοσειράς: πλάγια γραφή
}
Για το ' γραμμή ” τάξη, έχουμε:
- Ορίστε το χρώμα της επικεφαλίδας χρησιμοποιώντας τη συνάρτηση rgb() ως ' (255, 0, 0) '.
- Εφαρμογή κειμένου-διακόσμησης-γραμμής ως ' υπογραμμίζω '.
Η δεύτερη επικεφαλίδα θα χρησιμοποιήσει τα στυλ και των δύο κατηγοριών: επικεφαλίδα ' και ' γραμμή ” τάξη:
.γραμμή {χρώμα: rgb ( 255 , 0 , 0 ) ;
text-decoration-line:underline;
}
Μετά την εφαρμογή, ελέγξτε το αποτέλεσμα:
Από την έξοδο, μπορείτε να παρατηρήσετε ότι η δεύτερη επικεφαλίδα χρησιμοποιεί και τις δύο κλάσεις CSS.
συμπέρασμα
Για να χρησιμοποιήσετε πολλές κλάσεις σε ένα μόνο στοιχείο, χρησιμοποιήστε διαφορετικά αναγνωριστικά κλάσεων που χωρίζονται με λευκά κενά. Χρησιμοποιώντας αυτό, μπορούμε να εφαρμόσουμε διαφορετικές ιδιότητες CSS ταυτόχρονα. Μας επιτρέπει να επαναχρησιμοποιήσουμε την κλάση όπου υπάρχουν παρόμοια στοιχεία. Αυτό το άρθρο εξήγησε πώς να χρησιμοποιήσετε πολλές κλάσεις σε ένα μόνο στοιχείο και να το διαμορφώσετε μαζί με ένα παράδειγμα.