Αυτό το άρθρο παρουσιάζει ένα ενδιαφέρον και σημαντικό θέμα γνωστό ως Οι επιλογείς και το παρακολουθούν με μια πρακτική υποστήριξη. Οι ακόλουθοι δείκτες θα καλυφθούν σε αυτό το άρθρο,
- Στυλίστε στοιχεία HTML
- Επιλογείς CSS
- Επιλογέας αναγνωριστικών CSS
- Επιλογέας κατηγορίας CSS
- CSS Universal Selector
- Επιλογείς ομάδας CSS
Ας ξεκινήσουμε λοιπόν,
Στυλίστε στοιχεία HTML
Ας καταλάβουμε τι είναι το CSS προτού φτάσουμε στους επιλογείς CSS. Εάν το HTML πρέπει να θεωρηθεί σκελετός, τότε το CSS (Cascading Style Sheets) μοιάζει με τους μύες και το δέρμα. Ο εγκέφαλος είναι JavaScript. Έτσι, για μια ιστοσελίδα, τα στυλ CSS είναι ουσιαστικά η διάταξη και ο σχεδιασμός. Ακριβώς από τη θέση των εικόνων και του κειμένου έως το μέγεθος της γραμματοσειράς και το χρώμα φόντου, το CSS ελέγχει τον τρόπο εμφάνισης των στοιχείων HTML σε ένα πρόγραμμα περιήγησης.
Μπορείτε να κατανοήσετε καλύτερα το CSS, εάν έχετε καλή κατανόηση για το τι είναι οι επιλογείς CSS. Αυτοί οι επιλογείς σάς επιτρέπουν να στοχεύσετε συγκεκριμένα στοιχεία HTML, ώστε να μπορείτε να εφαρμόσετε το σωστό στυλ σε αυτά.
Ας καταλάβουμε πώς μπορούμε να επιλέξουμε στοιχεία HTML,
Πώς να επιλέξετε στοιχεία;
Ας πούμε, θέλετε μια συγκεκριμένη επικεφαλίδα να έχει διαφορετικό στυλ από το υπόλοιπο περιεχόμενο σε μια ιστοσελίδα. Τώρα, χρησιμοποιώντας τους επιλογείς CSS μπορείτε να στοχεύσετε αυτό το στοιχείο HTML για να το σχεδιάσετε διαφορετικά. Οι επιλογείς CSS βοηθούν στον καθορισμό των στοιχείων για τα οποία ισχύει ένα συγκεκριμένο σύνολο κανόνων CSS. Υπάρχουν διάφοροι τύποι επιλογών CSS που σας επιτρέπουν να επιλέξετε με ακρίβεια τα στοιχεία που θέλετε να σχεδιάσετε. Θα μπορούσατε να δώσετε σε ολόκληρη την ιστοσελίδα ένα γενικό στυλ και, στη συνέχεια, να εργαστείτε με τον τρόπο σας για να διαμορφώσετε άλλα στοιχεία της σελίδας.
Οι επιλογείς αποτελούν μέρος ενός κανόνα CSS και αυτοί οι επιλογείς έρχονται λίγο πριν από τη δήλωση των αποκλεισμών CSS. Για καλύτερη κατανόηση, μπορείτε να ανατρέξετε στην παρακάτω εικόνα.
Προχωρώντας με το άρθρο CSS Selectors
Επιλογείς CSS
Αυτός ο επιλογέας σάς επιτρέπει να επιλέξετε ένα στοιχείο HTML με το όνομά του.
Εξετάστε τον παρακάτω κώδικα:
p {text-align: κέντρο χρώματος: magenta}Αυτό το στυλ θα εφαρμοστεί σε κάθε παράγραφο.
Παράγραφος 1
Παράγραφος 2
Αυτός ο κωδικός θα σας δώσει την ακόλουθη έξοδο:
pass by value vs pass by referensi java
Αυτό το στυλ θα εφαρμοστεί σε κάθε παράγραφο
Παράγραφος 1
Παράγραφος 2
Στον παραπάνω κώδικα, τα στοιχεία HTML έχουν στοίχιση στο κέντρο και έχουν το χρώμα «ματζέντα».
Προχωρώντας με το άρθρο CSS Selectors
Επιλογέας αναγνωριστικών CSS
Επιλέγοντας το χαρακτηριστικό id ενός στοιχείου HTML, μπορείτε να επιλέξετε αυτό το συγκεκριμένο στοιχείο. Επειδή το αναγνωριστικό είναι μοναδικό σε μια σελίδα, μπορείτε να επιλέξετε το σωστό στοιχείο χρησιμοποιώντας το χαρακτηριστικό id.
Μπορείτε να επιλέξετε το στοιχείο HTML χρησιμοποιώντας το '#' ακολουθούμενο από το αναγνωριστικό αυτού του στοιχείου. Για παράδειγμα, το '#firstname' επιλέγει το στοιχείο όπου το αναγνωριστικό είναι 'όνομα'.
Εξετάστε τον ακόλουθο κώδικα:
# para1 {text-align: center color: πορτοκαλί}Γειά σου Κόσμε
Αυτή η παράγραφος δεν θα επηρεαστεί.
Η έξοδος για τον παραπάνω κώδικα είναι:
Γειά σου Κόσμε
Αυτή η παράγραφος δεν θα επηρεαστεί.
Όπως μπορείτε να δείτε στην παραπάνω έξοδο, συμπεριλαμβάνοντας το id = 'para1', μπορέσαμε να αλλάξουμε το χρώμα αυτού του στοιχείου σε πορτοκαλί. Το άλλο στοιχείο που δεν έχει αυτό παραμένει ανεπηρέαστο.
Προχωρώντας με το άρθρο CSS Selectors
Επιλογέας κατηγορίας CSS
Χρησιμοποιώντας τον επιλογέα κλάσης, μπορείτε να επιλέξετε στοιχεία HTML που έχουν ένα συγκεκριμένο χαρακτηριστικό κλάσης. Μπορείτε να ορίσετε τον επιλογέα χρησιμοποιώντας μια τελεία (σύμβολο πλήρους διακοπής) ακολουθούμενη από το όνομα της τάξης. Για παράδειγμα, το .intro επιλέγει τα στοιχεία όπου η τάξη είναι 'intro'. Ένα πράγμα που πρέπει να θυμάστε είναι ότι δεν μπορείτε ποτέ να ξεκινήσετε ένα όνομα τάξης με έναν αριθμό.
Εξετάστε τον ακόλουθο κώδικα:
.center {text-align: center color: ροζ}Αυτή η επικεφαλίδα είναι ροζ και στο κέντρο.
Αυτή η παράγραφος είναι ροζ και στο κέντρο.
Η έξοδος του παραπάνω κώδικα είναι:
Αυτή η επικεφαλίδα είναι ροζ και στο κέντρο.
Αυτή η παράγραφος είναι ροζ και στο κέντρο.
Μπορείτε να χρησιμοποιήσετε επιλογείς κλάσης CSS για ένα συγκεκριμένο στοιχείο. Εάν θέλετε να έχει στυλ μόνο ένα συγκεκριμένο στοιχείο, τότε μπορείτε να χρησιμοποιήσετε το όνομα του στοιχείου μαζί με τον επιλογέα τάξης.
Για παράδειγμα, λάβετε υπόψη τον ακόλουθο κώδικα:
p.center {text-align: center color: ροζ}Αυτή η επικεφαλίδα δεν επηρεάζεται
Αυτή η παράγραφος είναι ροζ και στο κέντρο.
Η έξοδος του παραπάνω κώδικα είναι:
Αυτή η επικεφαλίδα δεν επηρεάζεται
Αυτή η παράγραφος είναι ροζ και στο κέντρο.
Όπως μπορείτε να δείτε στην έξοδο, η επικεφαλίδα h2 δεν επηρεάζεται από το στυλ. Εφόσον έχουμε καθορίσει το 'p.center', μόνο η παράγραφος επηρεάζεται από το στυλ.
Προχωρώντας με αυτό το άρθρο CSS Selectors,
CSS Universal Selector
Αυτός ο τύπος επιλογέα μπορεί να θεωρηθεί ως χαρακτήρας μπαλαντέρ που επιλέγει όλα τα στοιχεία της σελίδας. Επιλέγει όλα τα στοιχεία της σελίδας και καθορίζεται από το '*'.
c ++ χρησιμοποιώντας χώρο ονομάτων
Για παράδειγμα, λάβετε υπόψη τον παρακάτω κώδικα:
* {color: darkgreen font-size: 30px}Αυτή είναι μια δοκιμή (μικρότερη γραμματοσειρά)
Αυτή είναι μια παράγραφος.
Η έξοδος για τον παραπάνω κώδικα είναι:
Γειά σου Κόσμε
Αυτή είναι μια δοκιμή (μικρότερη γραμματοσειρά)
Αυτή είναι μια παράγραφος.
Όπως μπορείτε να δείτε στην έξοδο, όλα τα στοιχεία που ορίζονται χρησιμοποιώντας τον επιλογέα ομάδας έχουν τον ίδιο ορισμό στυλ - είναι στοίχιση στο κέντρο και το χρώμα της γραμματοσειράς είναι κυανό.
Αυτό μας φέρνει στο τέλος αυτού του άρθρου.
Ρίξτε μια ματιά στο δικό μας που έρχεται με ζωντανή εκπαίδευση με καθοδήγηση εκπαιδευτή και πραγματική εμπειρία έργου. Αυτή η εκπαίδευση σας κάνει ικανό σε δεξιότητες για να εργαστείτε με τεχνολογίες ιστού back-end και front-end. Περιλαμβάνει εκπαίδευση σε Web Development, jQuery, Angular, NodeJS, ExpressJS και MongoDB.
Έχετε μια ερώτηση για εμάς; Παρακαλώ αναφέρετέ το στην ενότητα σχολίων του άρθρου και θα επικοινωνήσουμε μαζί σας.