Διαδοχικά φύλλα στυλ καθορίστε την εμφάνιση ενός στοιχείου ιστοσελίδας συνδέοντας τα χαρακτηριστικά που εφαρμόζετε σε αυτό το στοιχείο. Αυτά τα χαρακτηριστικά μπορούν να είναι είτε ένα αναγνωριστικό είτε μια κλάση και, όπως όλα τα χαρακτηριστικά, προσθέτουν χρήσιμες πληροφορίες στα στοιχεία στα οποία είναι προσαρτημένα.
Ανάλογα με το χαρακτηριστικό που προσθέτετε σε ένα στοιχείο, μπορείτε να γράψετε έναν επιλογέα CSS για να εφαρμόσετε το απαραίτητα οπτικά στυλ που απαιτούνται για να επιτευχθεί η εμφάνιση και η αίσθηση αυτού του στοιχείου και του ιστότοπου συνολικά.
Ενώ είτε τα αναγνωριστικά είτε τα μαθήματα λειτουργούν με σκοπό τη σύνδεση με τους κανόνες CSS, το μοντέρνο σχεδιασμό ιστοσελίδων Οι μέθοδοι ευνοούν τις τάξεις σε σχέση με τα αναγνωριστικά, εν μέρει, επειδή είναι λιγότερο συγκεκριμένες και ευκολότερες στην εργασία.
Ένα ή περισσότερα μαθήματα σε CSS;
Στις περισσότερες περιπτώσεις, εκχωρείτε ένα χαρακτηριστικό μιας κλάσης σε ένα στοιχείο, αλλά στην πραγματικότητα δεν περιορίζεστε σε μία μόνο τάξη με τον τρόπο που είστε με τα αναγνωριστικά. Ενώ ένα στοιχείο μπορεί να έχει μόνο ένα χαρακτηριστικό ID, μπορείτε να δώσετε ένα στοιχείο σε πολλές κατηγορίες και, σε ορισμένες περιπτώσεις, κάτι τέτοιο θα κάνει τη σελίδα σας πιο εύκολη στο στυλ και πολλά άλλα εύκαμπτος.
Εάν πρέπει να αντιστοιχίσετε πολλές κατηγορίες σε ένα στοιχείο, προσθέστε τις πρόσθετες τάξεις και απλώς διαχωρίστε τις με ένα κενό στο χαρακτηριστικό σας.
Για παράδειγμα, αυτή η παράγραφος έχει τρεις κατηγορίες:
Αυτό θα ήταν το κείμενο της παραγράφου
Αυτό ορίζει τις ακόλουθες τρεις κατηγορίες στην ετικέτα παραγράφου:
- Pullquote
- Επιλεγμένο
- Αριστερά
Παρατηρήστε τα κενά μεταξύ καθεμιάς από αυτές τις τιμές κλάσης. Αυτοί οι χώροι είναι εκείνοι που τους δημιουργούν ως διαφορετικές, ατομικές τάξεις. Αυτός είναι και ο λόγος για τον οποίο τα ονόματα των τάξεων δεν μπορούν να έχουν κενά σε αυτά, γιατί κάτι τέτοιο θα τα ορίζει ως ξεχωριστές τάξεις.
Μόλις εισαγάγετε τις τιμές της τάξης σας HTML, μπορείτε στη συνέχεια να τα ορίσετε ως τάξεις στο CSS σας και να εφαρμόσετε τα στυλ που θέλετε να προσθέσετε. Για παράδειγμα.
.pullquote {... }
.επιλεγμένο {... }
σ. αριστερά {... }
Σε αυτά τα παραδείγματα, οι δηλώσεις CSS και τα ζεύγη τιμών εμφανίζονται μέσα στα σγουρά τιράντες, έτσι θα εφαρμοστούν αυτά τα στυλ στον κατάλληλο επιλογέα.
Αν εσύ ορίστε μια κλάση σε ένα συγκεκριμένο στοιχείο (για παράδειγμα, σ. αριστερά), μπορείτε ακόμα να το χρησιμοποιήσετε ως μέρος μιας λίστας τάξεων. Ωστόσο, να γνωρίζετε ότι θα επηρεάσει μόνο εκείνα τα στοιχεία που καθορίζονται στο CSS. Με άλλα λόγια, το σ. αριστερά Το στυλ θα ισχύει μόνο για παραγράφους με αυτήν την τάξη, αφού ο επιλογέας σας λέει ότι θα το εφαρμόσει σε "παραγράφους με τιμή κλάσης αριστερά"Αντίθετα, οι άλλοι δύο επιλογείς στο παράδειγμα δεν καθορίζουν ένα συγκεκριμένο στοιχείο, επομένως θα ισχύουν για οποιοδήποτε στοιχείο που χρησιμοποιεί αυτές τις τιμές κλάσης.
Πολλαπλές τάξεις, σημασιολογία και JavaScript
Ένα άλλο πλεονέκτημα της χρήσης πολλών τάξεων είναι ότι αυξάνει τις δυνατότητες αλληλεπίδρασης.
Εφαρμόστε νέες τάξεις σε υπάρχοντα στοιχεία χρησιμοποιώντας JavaScript χωρίς να καταργήσετε καμία από τις αρχικές τάξεις. Μπορείτε επίσης να χρησιμοποιήσετε τάξεις για να ορίσετε το σημασιολογία ενός στοιχείου - Προσθέστε επιπλέον κλάσεις για να ορίσετε τι σημαίνει αυτό το στοιχείο σημασιολογικά. Αυτή η προσέγγιση είναι πώς Μικρομορφές έργα.
Πλεονεκτήματα πολλαπλών τάξεων
Η τοποθέτηση πολλών τάξεων μπορεί να διευκολύνει την προσθήκη ειδικών εφέ σε στοιχεία χωρίς να χρειάζεται να δημιουργήσετε ένα εντελώς νέο στυλ για αυτό το στοιχείο.
Για παράδειγμα, για να μετακινήσετε στοιχεία προς τα αριστερά ή προς τα δεξιά, μπορείτε να γράψετε δύο κατηγορίες:
αριστερά.
και.
σωστά.
με απλά.
float: αριστερά;
και.
επιπλέουν: δεξιά;
σε αυτούς. Στη συνέχεια, όποτε είχατε ένα στοιχείο που χρειάζεστε για να αιωρήσετε αριστερά, απλώς προσθέσατε την κλάση "αριστερά" στη λίστα τάξεων.
Ωστόσο, υπάρχει μια λεπτή γραμμή για να περπατήσετε. Να θυμάστε ότι τα πρότυπα ιστού υπαγορεύουν το διαχωρισμό του στυλ και της δομής. Η δομή αντιμετωπίζεται χρησιμοποιώντας HTML ενώ το στυλ είναι σε CSS. Εάν το έγγραφο HTML σας είναι γεμάτο με στοιχεία που όλα έχουν ονόματα τάξεων όπως "κόκκινο" ή "αριστερά", τα οποία είναι ονόματα που υπαγορεύστε πώς πρέπει να φαίνονται τα στοιχεία και όχι τι είναι, ξεπερνάτε αυτή τη γραμμή μεταξύ δομής και στυλ.
Μειονεκτήματα πολλαπλών τάξεων
Το μεγαλύτερο μειονέκτημα της χρήσης πολλών ταυτόχρονων τάξεων στα στοιχεία σας είναι ότι μπορεί να τους κάνει λίγο δύσκολους να δουν και να διαχειριστούν με την πάροδο του χρόνου. Μπορεί να γίνει δύσκολο να προσδιοριστεί ποια στυλ επηρεάζουν ένα στοιχείο και αν κάποια σενάρια το επηρεάζουν. Πολλά από τα διαθέσιμα πλαίσια σήμερα, όπως το Bootstrap, χρησιμοποιούν βαριά στοιχεία με πολλές κατηγορίες. Αυτός ο κωδικός μπορεί να ξεφορτωθεί και να δουλέψει πολύ γρήγορα εάν δεν είστε προσεκτικοί.
Όταν χρησιμοποιείτε πολλές κατηγορίες, διατρέχετε επίσης τον κίνδυνο του στυλ για μια κατηγορία που υπερισχύει του στυλ μιας άλλης. Αυτή η σύγκρουση μπορεί τότε να δυσκολευτεί να καταλάβει γιατί τα στυλ σας δεν εφαρμόζονται ακόμη και όταν φαίνεται ότι πρέπει. Παραμείνετε ενήμεροι για την ειδικότητα, ακόμη και με τα χαρακτηριστικά που εφαρμόζονται σε αυτό το ένα στοιχείο.
Χρησιμοποιώντας ένα εργαλείο όπως τα εργαλεία για Webmasters στο Google Chrome, μπορείτε να δείτε πιο εύκολα πώς τα μαθήματά σας επηρεάζουν τα στυλ σας και να αποφύγετε αυτό το πρόβλημα αντικρουόμενων στυλ και χαρακτηριστικών.