Σε αυτό το άρθρο
Η οικοδόμηση καλά στιλ ιστοσελίδων στον σημερινό ιστό απαιτεί μια βαθιά κατανόηση των Cascading Style Sheets. Εφαρμόστε μια σειρά από στυλ CSS στο έγγραφο HTML για να ενημερώσετε την εμφάνιση και την αίσθηση της ιστοσελίδας σας.
Χαρακτηριστικά τάξης και ταυτότητας
Οι σχεδιαστές πρέπει μερικές φορές να εφαρμόζουν ένα στυλ μόνο μερικοί των στοιχείων σε ένα έγγραφο, αλλά δεν είναι όλες οι εμφανίσεις αυτού του στοιχείου. Για να επιτύχετε αυτά τα επιθυμητά στυλ, χρησιμοποιήστε το τάξη και ταυτότητα Χαρακτηριστικά HTML. Αυτά τα χαρακτηριστικά είναι καθολικά χαρακτηριστικά που ισχύουν για σχεδόν κάθε ετικέτα HTML – οπότε είτε διαμορφώνετε διαιρέσεις, παραγράφους, συνδέσμους, λίστες ή οποιοδήποτε άλλο κομμάτι HTML στο έγγραφό σας, μπορείτε να στραφείτε σε χαρακτηριστικά κλάσης και αναγνωριστικού για να σας βοηθήσουμε να ολοκληρώσετε αυτήν την εργασία !
Επιλογείς τάξης
Ο επιλογέας τάξης ορίζει διάφορα στυλ στο ίδιο στοιχείο ή ετικέτα σε ένα έγγραφο. Για παράδειγμα, για να καλέσετε συγκεκριμένες ενότητες του κειμένου σας με διαφορετικό χρώμα ως ειδοποίηση, εκχωρήστε τις παραγράφους σας με τάξεις όπως αυτή: p {color: # 0000ff; }
p.alert {color: # ff0000; }
Αυτά τα στυλ θα ορίσουν το χρώμα του όλα παραγράφους σε μπλε (# 0000ff), αλλά οποιαδήποτε παράγραφος με χαρακτηριστικό κλάσης του συναγερμός αντ ‘αυτού με στυλ με κόκκινο χρώμα (# ff0000). Αυτό συμβαίνει επειδή το χαρακτηριστικό class έχει υψηλότερη ειδικότητα από τον πρώτο κανόνα CSS, ο οποίος χρησιμοποιεί μόνο έναν επιλογέα ετικετών. Όταν εργάζεστε με CSS, ένας πιο συγκεκριμένος κανόνας θα αντικαταστήσει έναν λιγότερο συγκεκριμένο. Έτσι, σε αυτό το παράδειγμα, ο γενικότερος κανόνας καθορίζει το χρώμα όλων των παραγράφων, αλλά ο δεύτερος, πιο συγκεκριμένος κανόνας από ότι παρακάμπτει αυτήν τη ρύθμιση μόνο σε ορισμένες παραγράφους. Δείτε πώς θα μπορούσε να χρησιμοποιηθεί σε κάποια σήμανση HTML:
Αυτή η παράγραφος θα εμφανίζεται με μπλε χρώμα, που είναι η προεπιλογή για τη σελίδα.
Αυτή η παράγραφος θα είναι επίσης μπλε.
Και αυτή η παράγραφος θα εμφανίζεται με κόκκινο χρώμα αφού το χαρακτηριστικό class θα αντικαταστήσει το τυπικό μπλε χρώμα από το στυλ επιλογέα στοιχείων.
type = «code»> Σε αυτό το παράδειγμα, το στυλ του σ. alert θα ισχύει μόνο για στοιχεία παραγράφων που το χρησιμοποιούν συναγερμός τάξη. Για να χρησιμοποιήσετε αυτήν την κλάση σε πολλά στοιχεία HTML, καταργήστε το στοιχείο HTML από την αρχή της κλήσης στυλ, όπως αυτό:
.alert {background-color: # ff0000;}
type = «code»> Αυτή η τάξη είναι πλέον διαθέσιμη σε οποιοδήποτε στοιχείο το χρειάζεται. Οποιοδήποτε κομμάτι του HTML σας έχει τιμή χαρακτηριστικού κλάσης συναγερμός θα πάρει τώρα αυτό το στυλ. Στο HTML παρακάτω, έχουμε μια παράγραφο και μια επικεφαλίδα επιπέδου δύο που χρησιμοποιούν το συναγερμός τάξη. Και οι δύο εμφανίζουν ένα κόκκινο χρώμα φόντου:
Αυτή η παράγραφος θα γράφτηκε με κόκκινο χρώμα.
type = «code»> Στους ιστότοπους σήμερα, τα χαρακτηριστικά τάξης χρησιμοποιούνται συχνά στα περισσότερα στοιχεία, επειδή είναι πιο εύκολο να δουλέψουν από μια σκοπιά εξειδίκευσης από ότι τα αναγνωριστικά. Θα βρείτε τις περισσότερες τρέχουσες σελίδες HTML που θα γεμίζουν με χαρακτηριστικά κλάσης, μερικές από τις οποίες επαναλαμβάνονται συχνά σε ένα έγγραφο και άλλες που ενδέχεται να εμφανίζονται μόνο μία φορά.
Επιλογείς ταυτότητας
Ο επιλογέας αναγνωριστικών ονομάζει ένα συγκεκριμένο στυλ χωρίς να το συσχετίζει με μια ετικέτα ή άλλο στοιχείο HTML. Ας υποθέσουμε μια διαίρεση στη σήμανση HTML που περιέχει πληροφορίες σχετικά με ένα συμβάν. Θα μπορούσατε να δώσετε σε αυτό το τμήμα ένα χαρακτηριστικό ID Εκδήλωσηκαι, στη συνέχεια, περιγράψτε αυτήν τη διαίρεση με ένα μαύρο περίγραμμα πλάτους 1 pixel: #event {περίγραμμα: 1px στερεό # 000; }
type = «code»> Η πρόκληση με τους επιλογείς ID είναι ότι δεν μπορούν να επαναληφθούν σε ένα έγγραφο HTML. Πρέπει να είναι μοναδικά (μπορείτε να χρησιμοποιήσετε το ίδιο αναγνωριστικό σε πολλές σελίδες του ιστότοπού σας, αλλά μόνο μία φορά σε κάθε μεμονωμένο έγγραφο HTML). Επομένως, για τρία συμβάντα που χρειάζονται όλοι αυτό το περίγραμμα, πρέπει να προσδιορίσετε τα χαρακτηριστικά ταυτότητας του εκδήλωση1, εκδήλωση2, και εκδήλωση3 και στυλ κάθε ένα από αυτά. Θα ήταν επομένως πολύ πιο εύκολο να χρησιμοποιήσετε το προαναφερθέν χαρακτηριστικό κλάσης του Εκδήλωση και στυλ τους όλα ταυτόχρονα.
Επιπλοκές των χαρακτηριστικών ταυτότητας
Μια άλλη πρόκληση με τα χαρακτηριστικά αναγνωριστικού είναι ότι έχουν υψηλότερη ειδικότητα από τα χαρακτηριστικά κλάσης. Για να παρακάμψετε ένα προηγουμένως καθιερωμένο στυλ, μπορεί να είναι δύσκολο να το κάνετε αν έχετε βασιστεί υπερβολικά σε αναγνωριστικά. Πολλοί προγραμματιστές ιστού έχουν απομακρυνθεί από τη χρήση αναγνωριστικών στη σήμανση τους, ακόμα κι αν σκοπεύουν να χρησιμοποιήσουν αυτήν την τιμή μόνο μία φορά, και αντίθετα έχουν στραφεί στα λιγότερο συγκεκριμένα χαρακτηριστικά κλάσης για σχεδόν όλα τα στυλ. Ο μοναδικός τομέας στον οποίο τα χαρακτηριστικά αναγνωρίσεων συμμετέχουν στο παιχνίδι είναι όταν θέλετε να δημιουργήσετε μια σελίδα με συνδέσμους αγκύρωσης στη σελίδα. Για παράδειγμα, σκεφτείτε έναν ιστότοπο σε στυλ παράλλαξης που περιέχει όλο το περιεχόμενο σε μία σελίδα με συνδέσμους που «μετακινούνται» σε διάφορα μέρη αυτής της σελίδας. Τα χαρακτηριστικά ταυτότητας και οι σύνδεσμοι κειμένου χρησιμοποιούν αυτούς τους συνδέσμους αγκύρωσης. Προσθέστε την τιμή αυτού του χαρακτηριστικού, πριν από το # σύμβολο, στο href χαρακτηριστικό του συνδέσμου, ως εξής: Αυτός είναι ο σύνδεσμος
type = «code»> Όταν κάνετε κλικ ή αγγίξετε, αυτός ο σύνδεσμος μεταβαίνει στο τμήμα της σελίδας που έχει αυτό το χαρακτηριστικό ID. Εάν κανένα στοιχείο στη σελίδα δεν χρησιμοποιεί αυτήν την τιμή αναγνωριστικού, ο σύνδεσμος δεν θα κάνει τίποτα. Για να δημιουργήσετε σύνδεση εντός σελίδας σε έναν ιστότοπο, απαιτείται η χρήση χαρακτηριστικών ID, αλλά μπορείτε ακόμα να στραφείτε σε τάξεις για γενικούς σκοπούς στυλ CSS. Αυτός είναι ο τρόπος με τον οποίο οι σχεδιαστές σημειώνουν σελίδες σήμερα – χρησιμοποιούν τους επιλογείς τάξης όσο το δυνατόν περισσότερο και στρέφονται μόνο σε αναγνωριστικά όταν χρειάζονται το χαρακτηριστικό για να ενεργούν όχι μόνο ως άγκιστρο για CSS αλλά και ως σύνδεσμος εντός της σελίδας.