Χρήση κλάσεων στυλ και αναγνωριστικών

Βοήθημα Classes and IDs Επεκτείνετε το CSS

Η δημιουργία ιστότοπων στο σημερινό ιστό απαιτεί μια βαθιά κατανόηση του CSS (Cascading Style Sheets). Αυτές είναι οι οδηγίες που δίνετε σε έναν ιστότοπο για να καθορίσετε τον τρόπο με τον οποίο θα σχεδιαστεί στο παράθυρο του προγράμματος περιήγησης. Εφαρμόζετε μια σειρά "στυλ" στο έγγραφο HTML που θα δημιουργήσει την εμφάνιση και την αίσθηση της ιστοσελίδας σας.

Υπάρχουν πολλοί τρόποι εφαρμογής των προαναφερθέντων στυλ σε ένα έγγραφο, αλλά πολλές φορές θέλετε να χρησιμοποιήσετε ένα στυλ μόνο σε ορισμένα από τα στοιχεία ενός εγγράφου, αλλά όχι σε όλες τις περιπτώσεις αυτού του στοιχείου.

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

Επιλογείς κλάσης

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


p {χρώμα: # 0000ff; }}
p.alert {χρώμα: # ff0000; }}

Αυτά τα στυλ θα έδιναν το χρώμα όλων των παραγράφων σε μπλε χρώμα (# 0000ff), αλλά οποιαδήποτε παράγραφος με χαρακτηριστικό κλάσης της "ειδοποίησης" θα αντικαταστάθηκε με κόκκινο (# ff0000). Αυτό συμβαίνει επειδή το χαρακτηριστικό κλάσης έχει υψηλότερη ειδικότητα από τον πρώτο κανόνα CSS, ο οποίος χρησιμοποιεί μόνο έναν επιλογέα ετικετών.

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

Ακολουθεί ο τρόπος με τον οποίο αυτό θα μπορούσε να χρησιμοποιηθεί σε κάποια σήμανση HTML:


Αυτή η παράγραφος θα εμφανίζεται με μπλε χρώμα, η οποία είναι η προεπιλογή για τη σελίδα.


Αυτή η παράγραφος θα είναι επίσης μπλε.


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

Σε αυτό το παράδειγμα, το στυλ του "p.alert" θα εφαρμοζόταν μόνο σε στοιχεία παραγράφου που χρησιμοποιούν αυτή την κατηγορία "alert". Εάν θέλετε να χρησιμοποιήσετε αυτή την τάξη σε πολλά στοιχεία HTML, απλώς θα καταργήσετε το στοιχείο HTML από την αρχή του (μόνο να είστε βέβαιος να αφήσετε την περίοδο (.) στη θέση του), όπως αυτό:


.alert {background-color: # ff0000;}

Αυτή η τάξη είναι πλέον διαθέσιμη σε οποιοδήποτε στοιχείο που την χρειάζεται. Κάθε κομμάτι της HTML που έχει μια τιμή χαρακτηριστικού κλάσης "ειδοποίησης" θα πάρει τώρα αυτό το στυλ. Στο HTML που ακολουθεί, έχουμε τόσο ένα εδάφιο όσο και ένα επίπεδο τίτλου 2 που χρησιμοποιούν την κλάση "συναγερμού". Και οι δύο θα έχουν χρώμα φόντου κόκκινου με βάση το CSS που μόλις δείξαμε.


Αυτή η παράγραφος θα είναι γραμμένη με κόκκινο χρώμα.

Και αυτό το h2 θα είναι επίσης κόκκινο.

Στις ιστοσελίδες σήμερα, τα χαρακτηριστικά κλάσης χρησιμοποιούνται συχνά στα περισσότερα στοιχεία, επειδή είναι πιο εύκολο να εργαστούν με μια προοπτική ειδικότητας που είναι τα αναγνωριστικά. Θα βρείτε τις περισσότερες τρέχουσες σελίδες HTML που πρέπει να συμπληρωθούν με χαρακτηριστικά κλάσης, μερικά από τα οποία επαναλαμβάνονται πολλές φορές σε ένα έγγραφο και άλλα που μπορεί να εμφανίζονται μόνο μία φορά.

Εκκινητές ταυτότητας

Ο επιλογέας ταυτότητας σάς επιτρέπει να δώσετε ένα όνομα σε ένα συγκεκριμένο στυλ χωρίς να το συσχετίσετε με μια ετικέτα ή άλλο στοιχείο HTML . Ας υποθέσουμε ότι είχατε διαίρεση στη σήμανση HTML που περιέχει πληροφορίες σχετικά με ένα συμβάν.

Θα μπορούσατε να δώσετε σε αυτόν τον διαχωρισμό ένα χαρακτηριστικό ταυτότητας "συμβάντος" και, στη συνέχεια, αν θέλετε να περιγράψετε τη διαίρεση με ένα μαύρο σύνορο πλάτους 1 pixel γράφετε έναν κωδικό ταυτότητας όπως αυτό:


#event {σύνορα: 1px στερεό # 000; }}

Η πρόκληση με τους επιλογείς ταυτότητας είναι ότι δεν μπορούν να επαναληφθούν σε ένα έγγραφο HTML. Πρέπει να είναι μοναδικά (μπορείτε να χρησιμοποιήσετε το ίδιο αναγνωριστικό σε πολλές σελίδες του ιστότοπού σας, αλλά μόνο μία φορά σε κάθε ξεχωριστό έγγραφο HTML). Επομένως, αν είχατε 3 γεγονότα που όλοι χρειάζονταν αυτό το όριο, θα έπρεπε να τους δώσετε τα αναγνωριστικά χαρακτηριστικά των "event1", "event2" και "event3" και να στυλ κάθε ένα από αυτά. Θα ήταν επομένως πολύ πιο εύκολο να χρησιμοποιήσετε το προαναφερθέν χαρακτηριστικό της κατηγορίας του "συμβάντος" και να τα στυλίσατε όλα ταυτόχρονα.

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

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

Θα προσθέσετε απλώς την τιμή αυτού του χαρακτηριστικού, που προηγείται από το σύμβολο #, στο χαρακτηριστικό href του συνδέσμου, όπως αυτό:

Αυτός είναι ο σύνδεσμος

Όταν κάνετε κλικ ή αγγίξει, αυτός ο σύνδεσμος θα μεταβεί στο τμήμα της σελίδας που έχει αυτό το χαρακτηριστικό ταυτότητας. Αν κανένα στοιχείο στη σελίδα δεν χρησιμοποίησε αυτήν την τιμή αναγνωριστικού, ο σύνδεσμος δεν θα έκανε τίποτα.

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

Αρχικό άρθρο από την Jennifer Krynin. Επεξεργασμένο από τον Jeremy Girard στις 8/9/17