Saltar al contenido

Τρόπος χρήσης πολλαπλών τάξεων CSS σε ένα στοιχείο

4 de junio de 2021

Τα Cascading Style Sheets καθορίζουν την εμφάνιση ενός στοιχείου ιστοσελίδας συνδέοντας τα χαρακτηριστικά που εφαρμόζετε σε αυτό το στοιχείο. Αυτά τα χαρακτηριστικά μπορούν να είναι είτε ένα αναγνωριστικό είτε μια κλάση και, όπως όλα τα χαρακτηριστικά, προσθέτουν χρήσιμες πληροφορίες στα στοιχεία στα οποία είναι προσαρτημένα.

E + / Getty Images
Ανάλογα με το χαρακτηριστικό που προσθέτετε σε ένα στοιχείο, μπορείτε να γράψετε έναν επιλογέα CSS για να εφαρμόσετε τα απαραίτητα οπτικά στυλ που απαιτούνται για την επίτευξη της εμφάνισης και της αίσθησης για αυτό το στοιχείο και τον ιστότοπο στο σύνολό του. Ενώ είτε τα αναγνωριστικά είτε τα μαθήματα λειτουργούν με σκοπό τη σύνδεση σε αυτούς με κανόνες CSS, οι σύγχρονες μέθοδοι σχεδιασμού ιστοσελίδων ευνοούν τις τάξεις σε σχέση με τα αναγνωριστικά, εν μέρει, επειδή είναι λιγότερο συγκεκριμένες και ευκολότερες στην εργασία.

Ένα ή περισσότερα μαθήματα σε CSS;

Στις περισσότερες περιπτώσεις, εκχωρείτε ένα χαρακτηριστικό μιας κλάσης σε ένα στοιχείο, αλλά στην πραγματικότητα δεν περιορίζεστε σε μία μόνο τάξη με τον τρόπο που είστε με τα αναγνωριστικά. Ενώ ένα στοιχείο μπορεί να έχει μόνο ένα χαρακτηριστικό ID, μπορείτε να δώσετε ένα στοιχείο πολλές κατηγορίες και, σε ορισμένες περιπτώσεις, κάτι τέτοιο θα κάνει τη σελίδα σας ευκολότερη στο στυλ και πολύ πιο ευέλικτη. Εάν πρέπει να αντιστοιχίσετε πολλές κατηγορίες σε ένα στοιχείο, προσθέστε τις πρόσθετες τάξεις και απλώς διαχωρίστε τις με ένα κενό στο χαρακτηριστικό σας. Για παράδειγμα, αυτή η παράγραφος έχει τρεις κατηγορίες:











Αυτό θα ήταν το κείμενο της παραγράφου type = «code»> Ορίζει τις ακόλουθες τρεις κατηγορίες στην ετικέτα παραγράφου:

  • Pullquote
  • Επιλεγμένο
  • Αριστερά

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

.pullquote {…}
.επιλεγμένο {…}
σ. αριστερά {…}

type = «code»> Σε αυτά τα παραδείγματα, οι δηλώσεις CSS και τα ζεύγη τιμών εμφανίζονται μέσα στα σγουρά τιράντες, έτσι θα εφαρμοστούν αυτά τα στυλ στον κατάλληλο επιλογέα. Εάν ορίσετε μια τάξη σε ένα συγκεκριμένο στοιχείο (για παράδειγμα, σ. αριστερά), μπορείτε ακόμα να το χρησιμοποιήσετε ως μέρος μιας λίστας τάξεων. Ωστόσο, να γνωρίζετε ότι θα επηρεάσει μόνο εκείνα τα στοιχεία που καθορίζονται στο CSS. Με άλλα λόγια, το σ. αριστερά Το στυλ θα ισχύει μόνο για παραγράφους με αυτήν την τάξη, αφού ο επιλογέας σας λέει ότι θα το εφαρμόσει σε «παραγράφους με τιμή κλάσης αριστερά«Αντίθετα, οι άλλοι δύο επιλογείς στο παράδειγμα δεν καθορίζουν ένα συγκεκριμένο στοιχείο, επομένως θα ισχύουν για οποιοδήποτε στοιχείο που χρησιμοποιεί αυτές τις τιμές κλάσης.

Πολλαπλές τάξεις, σημασιολογία και JavaScript

Ένα άλλο πλεονέκτημα της χρήσης πολλών τάξεων είναι ότι αυξάνει τις δυνατότητες αλληλεπίδρασης. Εφαρμόστε νέες τάξεις σε υπάρχοντα στοιχεία χρησιμοποιώντας JavaScript χωρίς να καταργήσετε καμία από τις αρχικές τάξεις. Μπορείτε επίσης να χρησιμοποιήσετε τάξεις για να ορίσετε τη σημασιολογία ενός στοιχείου – προσθέστε επιπλέον κλάσεις για να ορίσετε τι σημαίνει αυτό το στοιχείο σημασιολογικά. Αυτή η προσέγγιση είναι ο τρόπος λειτουργίας των μικρομορφών.

Πλεονεκτήματα πολλαπλών τάξεων

Η τοποθέτηση πολλών τάξεων μπορεί να διευκολύνει την προσθήκη ειδικών εφέ σε στοιχεία χωρίς να χρειάζεται να δημιουργήσετε ένα εντελώς νέο στυλ για αυτό το στοιχείο. Για παράδειγμα, για να μετακινήσετε στοιχεία προς τα αριστερά ή προς τα δεξιά, μπορείτε να γράψετε δύο κατηγορίες: αριστερά

type = «code»> και δεξιά

type = «code»> με απλώς float: left;

type = «code»> και float: right;

type = «code»> σε αυτά. Στη συνέχεια, όποτε είχατε ένα στοιχείο που χρειάζεστε για να αιωρήσετε αριστερά, απλώς προσθέσατε την κλάση «αριστερά» στη λίστα κατηγοριών. Ωστόσο, υπάρχει μια λεπτή γραμμή για να περπατήσετε. Να θυμάστε ότι τα πρότυπα ιστού υπαγορεύουν το διαχωρισμό του στυλ και της δομής. Η δομή αντιμετωπίζεται χρησιμοποιώντας HTML ενώ το στυλ είναι σε CSS. Εάν το έγγραφο HTML σας είναι γεμάτο με στοιχεία που έχουν όλα ονόματα τάξεων όπως «κόκκινο» ή «αριστερά», τα οποία είναι ονόματα που υπαγορεύουν το πώς πρέπει να φαίνονται τα στοιχεία και όχι τι είναι, ξεπερνάτε αυτή τη γραμμή μεταξύ δομής και στυλ.

Μειονεκτήματα πολλαπλών τάξεων

Το μεγαλύτερο μειονέκτημα της χρήσης πολλών ταυτόχρονων τάξεων στα στοιχεία σας είναι ότι μπορεί να τους κάνει λίγο δύσκολους να δουν και να διαχειριστούν με την πάροδο του χρόνου. Μπορεί να γίνει δύσκολο να προσδιοριστεί ποια στυλ επηρεάζουν ένα στοιχείο και αν κάποια σενάρια το επηρεάζουν. Πολλά από τα διαθέσιμα πλαίσια σήμερα, όπως το Bootstrap, χρησιμοποιούν βαριά στοιχεία με πολλές κατηγορίες. Αυτός ο κωδικός μπορεί να ξεφορτωθεί και να δουλέψει πολύ γρήγορα εάν δεν είστε προσεκτικοί. Όταν χρησιμοποιείτε πολλές κατηγορίες, διατρέχετε επίσης τον κίνδυνο του στυλ για μια κατηγορία που υπερισχύει του στυλ μιας άλλης. Αυτή η σύγκρουση μπορεί τότε να δυσκολευτεί να καταλάβει γιατί τα στυλ σας δεν εφαρμόζονται ακόμη και όταν φαίνεται ότι πρέπει. Παραμείνετε ενήμεροι για την ειδικότητα, ακόμη και με τα χαρακτηριστικά που εφαρμόζονται σε αυτό το ένα στοιχείο. Χρησιμοποιώντας ένα εργαλείο όπως τα εργαλεία για Webmasters στο Google Chrome, μπορείτε να δείτε πιο εύκολα πώς τα μαθήματά σας επηρεάζουν τα στυλ σας και να αποφύγετε αυτό το πρόβλημα αντικρουόμενων στυλ και χαρακτηριστικών.

Αναφέρετε αυτό το άρθρο

Μορφή mla apa chicago Η αναφορά σας

Kyrnin, Jennifer. «Τρόπος χρήσης πολλαπλών τάξεων CSS σε ένα στοιχείο.» ThoughtCo, 2 Ιουνίου 2021, thinkco.com/using-multiple-classes-on-single-element-3466930.
Kyrnin, Jennifer. (2021, 2 Ιουνίου) Τρόπος χρήσης πολλαπλών τάξεων CSS σε ένα στοιχείο. Ανακτήθηκε από το https://www.thoughtco.com/using-multiple-classes-on-single-element-3466930
Kyrnin, Jennifer. «Τρόπος χρήσης πολλαπλών τάξεων CSS σε ένα στοιχείο.» ThoughtCo. https://www.thoughtco.com/using-multiple-classes-on-single-element-3466930 (πρόσβαση στις 4 Ιουνίου 2021).

αντιγραφή παραπομπής