Ξεκινώντας το CSS
Το CSS βασίζεται σε κανόνες αντιστοίχισης προτύπων για να καθορίσει ποιο στυλ ισχύει για το στοιχείο στο έγγραφο. Αυτά τα μοτίβα ονομάζονται επιλογείς και κυμαίνονται από ονόματα ετικετών (για παράδειγμα, p για αντιστοίχιση ετικετών παραγράφων) με πολύ περίπλοκα μοτίβα που ταιριάζουν με πολύ συγκεκριμένα μέρη ενός εγγράφου (για παράδειγμα, το p # myid> b.highlight θα ταιριάζει με κάθε ετικέτα b μια κατηγορία επισημάνσεων που είναι παιδί της παραγράφου με το id myid).
Ένας επιλογέας CSS είναι το τμήμα μιας κλήσης στυλ CSS που προσδιορίζει ποιο μέρος της ιστοσελίδας πρέπει να είναι στυλ. Ο επιλογέας περιέχει μία ή περισσότερες ιδιότητες που καθορίζουν τον τρόπο με τον οποίο θα επιλεγεί το επιλεγμένο HTML .
Οι επιλογείς CSS
Υπάρχουν διάφοροι τύποι επιλογέων:
- επιλογείς τύπου - που ταιριάζουν με ένα συγκεκριμένο στοιχείο
- class selectors-ταιριάζουν στοιχεία με μια συγκεκριμένη κατηγορία
- Επιλογείς ταυτότητας - αντιστοιχούν στο στοιχείο με συγκεκριμένο αναγνωριστικό
- απογόνους επιλογής -μετασχηματίζοντας στοιχεία που είναι απόγονοι συγκεκριμένου στοιχείου
- τα στοιχεία επιλογής παιδιών που ταιριάζουν και τα οποία είναι παιδί του συγκεκριμένου στοιχείου
- επιλογείς γενικής χρήσης που ταιριάζουν με οποιοδήποτε στοιχείο
- γειτονικά στοιχεία επιλογής αδερφών - τα οποία ταιριάζουν αμέσως με ένα συγκεκριμένο στοιχείο
- τα στοιχεία αντιστοίχισης των επιλογέων με ένα συγκεκριμένο χαρακτηριστικό ή τιμή χαρακτηριστικού
- pseudo-class επιλογείς-ταιριάζουν στοιχεία με μια συγκεκριμένη ψευδο-τάξη
- Στοιχεία επιλογής ψευδο-στοιχείου που ταιριάζουν με συγκεκριμένες ιδιότητες ψευδο-στοιχείου
Στυλ μορφοποίησης CSS και επιλογείς CSS
Η μορφή ενός στυλ CSS μοιάζει με αυτό:
επιλογέας {style property: style; }}
Διαχωρίστε πολλαπλούς επιλογείς που έχουν το ίδιο στυλ με κόμματα. Αυτό ονομάζεται ομαδοποίηση επιλογής. Για παράδειγμα:
επιλογέας1 , επιλογέας2 {ιδιότητα στυλ: στυλ; }}
Ο επιλογέας ομαδοποίησης είναι ένας μηχανισμός στενογραφίας που διατηρεί τα στυλ CSS σας συμπαγή.
Η παραπάνω ομαδοποίηση θα είχε το ίδιο αποτέλεσμα με:
επιλογέας1 {ιδιότητα στυλ: στυλ; }}
επιλογέας2 {ιδιότητα στυλ: στυλ; }}
Πάντα να δοκιμάζετε τους επιλογείς CSS
Δεν υποστηρίζονται όλα τα προγράμματα περιήγησης σε όλους τους επιλογείς CSS. Έτσι, βεβαιωθείτε ότι έχετε δοκιμάσει τους επιλογείς σας σε όσο το δυνατόν περισσότερους browsers σε όσο περισσότερα λειτουργικά συστήματα μπορείτε. Αλλά αν χρησιμοποιείτε επιλογείς CSS 1 ή CSS2 θα πρέπει να είστε εντάξει.