Τα χαρακτηριστικά class και id. Καθολικός επιλογέας και μοναδικό αναγνωριστικό

ΗΛΕΚΤΡΟΝΙΚΑ ΕΙΔΗ 13.04.2019

ΗΛΕΚΤΡΟΝΙΚΑ ΕΙΔΗ

Κάθε στοιχείο HTML μπορεί να έχει ένα χαρακτηριστικό ταυτότητα. Προορίζεται για την αναγνώριση οποιασδήποτε συγκεκριμένης ετικέτας. Θα πρέπει να υπάρχει μόνο μία ετικέτα με μια συγκεκριμένη τιμή χαρακτηριστικού σε ολόκληρη τη σελίδα HTML ταυτότητα. Έχοντας πολλά στοιχεία με την ίδια τιμή ταυτότηταδεν επιτρέπεται και μπορεί να οδηγήσει σε σφάλμα. Τιμή χαρακτηριστικού ταυτότηταμπορεί να αποτελείται από γράμματα του λατινικού αλφαβήτου, αριθμούς, κάτω παύλες και παύλες. Επιπλέον, η τιμή του χαρακτηριστικού μπορεί να ξεκινήσει με Λατινικό γράμμαή από υπογράμμιση (αλλά όχι από αριθμό ή άλλο χαρακτήρα). Επιπλέον, οι τιμές των χαρακτηριστικών ταυτότηταδιάκριση πεζών-κεφαλαίων. Χαρακτηριστικό ταυτότηταονομάζεται καθολική επειδή μπορεί να χρησιμοποιηθεί με οποιαδήποτε στοιχεία HTML.
Στο CSS, ο επιλογέας αναγνωριστικού περιέχει το σύμβολο (#) , ακολουθούμενη αμέσως από την τιμή του χαρακτηριστικού ταυτότητα. Για παράδειγμα, ο ακόλουθος επιλογέας αναγνωριστικού ταιριάζει με το στοιχείο

, τιμή χαρακτηριστικού ταυτότηταπου ισούται με κεφάλαιο 7:
#κεφάλαιο 7 (χρώμα φόντου:#FF00FF;)
Μετά την περιγραφή του αναγνωριστικού, θα πρέπει να συμπεριληφθεί στην ετικέτα:

Κεφαλίδα δεύτερου επιπέδου με αναγνωριστικό

Παράδειγμα: Χρήση αναγνωριστικού

Δοκιμάστε το μόνοι σας"

Κεφαλίδα δεύτερου επιπέδου με αναγνωριστικό

Επικεφαλίδα δεύτερου επιπέδου

Κεφαλίδα δεύτερου επιπέδου με αναγνωριστικό

Επικεφαλίδα δεύτερου επιπέδου

Τάξεις

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

Αφού περιγράψετε την κλάση, θα πρέπει να την συμπεριλάβετε στην αρχική ετικέτα του στοιχείου:

Επικεφαλίδα δεύτερου επιπέδου

Παράδειγμα: Εφαρμογή χαρακτηριστικών ταυτότηταΚαι τάξη

Δοκιμάστε το μόνοι σας"

Επικεφαλίδα δεύτερου επιπέδου με αναγνωριστικό και class=test

Επικεφαλίδα δεύτερου επιπέδου με class=test

Επικεφαλίδα δεύτερου επιπέδου

Επικεφαλίδα δεύτερου επιπέδου με class=test πορτοκαλί

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

Σύνταξη

class="<имя класса>"

Αξίες

Στην HTML4, τα ονόματα κλάσεων μπορεί να περιέχουν γράμματα (A-Z, a-z), αριθμούς (0-9), παύλες (-) και κάτω παύλες (_) και δεν πρέπει να ξεκινούν με αριθμό. Η χρήση ρωσικών γραμμάτων στα μαθήματα είναι απαράδεκτη. Το HTML5 καταργεί αυτούς τους περιορισμούς, αλλά για συμβατότητα με παλαιότερα προγράμματα περιήγησης και JavaScript, συνιστάται να τηρείτε αυτούς τους κανόνες.

Προεπιλεγμένη τιμή

Παράδειγμα

χαρακτηριστικό κλάσης

Για τεχνητός φωτισμόςΣτις εγκαταστάσεις χρησιμοποιούνται λαμπτήρες φθορισμού. Διακρίνονται από υψηλή φωτεινή απόδοση, μεγάλη διάρκεια διάρκεια ζωής, χαμηλή φωτεινότητα της φωτεινής επιφάνειας, κοντά στη φυσική φασματική σύνθεση του εκπεμπόμενου φωτός, που εξασφαλίζει καλή απόδοση χρώματος.

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

Προσδιορισμός

Κάθε προδιαγραφή περνά από διάφορα στάδια έγκρισης.

Σύσταση - Η προδιαγραφή έχει εγκριθεί από το W3C και συνιστάται ως πρότυπο.
Σύσταση υποψηφίου ( Πιθανή σύσταση ) - η ομάδα που είναι υπεύθυνη για το πρότυπο είναι ικανοποιημένη που εκπληρώνει τους στόχους της, αλλά απαιτεί βοήθεια από την κοινότητα ανάπτυξης για την εφαρμογή του προτύπου.
Προτεινόμενη σύσταση Προτεινόμενη σύσταση) - σε αυτό το στάδιο το έγγραφο υποβάλλεται στο Γνωμοδοτικό Συμβούλιο του W3C για τελική έγκριση.
Εργαζόμενο προσχέδιο - Μια πιο ώριμη έκδοση ενός προσχεδίου που έχει συζητηθεί και τροποποιηθεί για έλεγχο από την κοινότητα.
προσχέδιο του συντάκτη ( Εκδοτικό προσχέδιο) - μια πρόχειρη έκδοση του προτύπου μετά από αλλαγές που έγιναν από τους συντάκτες του έργου.
προσχέδιο ( Σχέδιο προδιαγραφών) - η πρώτη πρόχειρη έκδοση του προτύπου.

Το πρότυπο ζωντανής HTML (Living) ξεχωρίζει - δεν τηρεί την παραδοσιακή αρίθμηση εκδόσεων, αφού βρίσκεται υπό συνεχή ανάπτυξη και ενημερώνεται τακτικά.

Προγράμματα περιήγησης

Οι παρακάτω συμβολισμοί χρησιμοποιούνται στον πίνακα του προγράμματος περιήγησης.

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

Υπάρχουν επτά τύποι αυτών - ετικέτα, κλάση, αναγνωριστικό, καθολική, ιδιότητες, καθώς και ψευδοκλάσεις και ψευδοστοιχεία. Λίγο πολύ, έτσι δεν είναι; Λοιπόν, δεν πειράζει, ας τα δούμε όλα σιγά σιγά και με λεπτομερή παραδείγματα.

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

Επιλογείς ετικετών και κλάσεων στο CSS

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

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

Στο παραπάνω παράδειγμα, η πρώτη γραμμή δείχνει έναν επιλογέα ετικέτας (στοιχείου) που αναγκάζει το χρώμα της γραμματοσειράς να είναι κόκκινο για όλα τα κοντέινερ Div.

Περιεχόμενα ενός κανονικού δοχείου Div

Στη δεύτερη γραμμή βλέπουμε ένα παράδειγμα σύνθετου επιλογέα στον οποίο έχουμε τα εξής νέο στοιχείο, Πως τάξη. Είναι εγγεγραμμένο ως . Μπορούμε να χρησιμοποιήσουμε ένα αυθαίρετο όνομα ως τιμή για την κλάση χρησιμοποιώντας τα σύμβολα ,,,[_],[-].

Αλλά εκτός από την τάξη, η γλώσσα σήμανσης στυλ χρησιμοποιεί επίσης Id. Ποια είναι η διαφορά μεταξύ μιας κλάσης και ενός αναγνωριστικού; Η αξία του τελευταίου πρέπει να είναι μοναδική, γιατί Το αναγνωριστικό είναι ένα μοναδικό αναγνωριστικόγια μια ετικέτα Html και το όνομά της (τιμή) μπορεί να χρησιμοποιηθεί μόνο μία φορά στον κώδικα.

Και η τιμή για την κλάση δεν είναι μοναδική και μπορεί να χρησιμοποιηθεί για οποιαδήποτε μεγάλη ποσότηταστοιχεία στον κώδικα. Εκείνοι. διαφορετικές ετικέτες(Div, P, H1, κ.λπ.) μπορούν να έχουν την ίδια τιμή για το χαρακτηριστικό κλάσης τους:

Πώς χρησιμοποιείται σε Επιλογείς CSS? Αποδεικνύεται ότι το όνομά του είναι γραμμένο με μια τελεία μπροστά.

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

Αλλά αυτό δεν θα συμβεί καθόλου γιατί επιλέξαμε το όνομα της τάξης "Μπλε". Θα μπορούσαμε να το ονομάσουμε οτιδήποτε (ακόμα και "xyz") και το χρώμα στο παράδειγμά μας έχει οριστεί ακριβώς όπως έχει εκχωρηθεί για τον επιλογέα με αυτήν την κλάση. Ελπίζω να είναι ξεκάθαρο αυτό; Ας αλλάξουμε το όνομα (τιμή) της κλάσης στο παράδειγμα:

Παράγραφος με κείμενο

Εκείνοι. Τώρα έχουμε την κλάση XYZ και έναν κανόνα γραμμένο για αυτήν:

Xyz (χρώμα:μπλε)

Χρωμάτισε το κείμενο της παραγράφου μπλε. Αυτό το παράδειγμα υπογραμμίζει για άλλη μια φορά όνομα για το χαρακτηριστικό classμπορείτε να χρησιμοποιήσετε οποιοδήποτε. Ωστόσο, ας συνεχίσουμε.

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

Div (χρώμα:κόκκινο) div.a123 (χρώμα:πράσινο) .xyz (χρώμα:μπλε)

Ας φανταστούμε επίσης ότι στον κώδικα Html έχουμε τα ακόλουθα στοιχεία:

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

Ας δούμε τώρα γιατί το πρόγραμμα περιήγησης ερμήνευσε το στυλ αυτών των στοιχείων κώδικα Html με αυτόν τον τρόπο. Για το πρώτο κοντέινερ Div, στο οποίο δεν καθορίζεται κατηγορία, θα ισχύει ο κανόνας CSS που ισχύει για όλα τα κοντέινερ: div (χρώμα: κόκκινο). Κατά συνέπεια, το περιεχόμενό του θα χρωματιστεί κόκκινο. Αυτό έπρεπε να φανεί.

Στην ετικέτα του δεύτερου Div έχουμε την κλάση “a123”. Σε αυτήν την περίπτωση, θα εφαρμοστούν οι κανόνες CSS που αντιστοιχούν στο "div.a123" (επειδή έχουμε απλώς μια ετικέτα Div με το χαρακτηριστικό class="a123" γραμμένο σε αυτήν). Επομένως, το περιεχόμενο του δεύτερου δοχείου θα χρωματιστεί πράσινο χρώμα.

Αλλά μάλλον προσέξατε ότι μπορείτε να κάνετε αίτηση και στο δεύτερο Div πρώτο CSSο κανόνας "div (χρώμα:κόκκινο)", γιατί προορίζεται για όλα τα δοχεία χωρίς εξαίρεση. Αυτό έχει ως αποτέλεσμα μια αντίφαση που επιλύεται Τρόπος CSSεισάγοντας μια έννοια.

Θα μιλήσουμε για αυτό λεπτομερώς λίγο αργότερα, αλλά προς το παρόν θα πω απλώς ότι η προτεραιότητα του "div.a123" (για το δεύτερο Div στο υπό εξέταση παράδειγμα) θα είναι υψηλότερη.

Παρεμπιπτόντως, μια παρόμοια κατάσταση προκύπτει με το τρίτο Div από το παράδειγμά μας. Υπάρχουν δύο επιλογές για αυτό: ο επιλογέας ετικετών "div" και ο επιλογέας κλάσης ".xyz". Και πάλι, για λόγους που δεν έχω εξηγήσει ακόμη από εμένα (διαβάστε σχετικά στον σύνδεσμο ακριβώς παραπάνω), η προτεραιότητα του τελευταίου θα είναι υψηλότερη, επομένως τα περιεχόμενα του τρίτου δοχείου θα έχουν μπλε χρώμα.

Ας προχωρήσουμε. Στο παραπάνω παράδειγμα, έχουμε μια ετικέτα παραγράφου P, η οποία περιέχει class="a123". Τελικά φαίνεται πως αυτό το στοιχείοδεν εμπίπτει σε κανέναν από τους τρεις επιλογείς που καθορίσαμε (και οι τρεις το έχασαν).

Έχει μια τομή μόνο με τη δεύτερη επιλογή, αλλά αυτός ο επιλογέας θα χρησιμοποιηθεί μόνο για ετικέτες "Div" με κλάση "a123" και όχι για την ετικέτα παραγράφου P. Ως αποτέλεσμα, το χρώμα του κειμένου σε αυτήν την παράγραφο θα παραμείνει το προεπιλεγμένο , δηλ. μαύρος.

Στη συνέχεια στο παράδειγμα έχουμε ένα στοιχείο παραγράφου με class="xyz". Ο τελευταίος κανόνας CSS ".xyz (χρώμα:μπλε)" θα εφαρμοστεί σε αυτό. Επομένως, το κείμενο αυτής της παραγράφου θα χρωματιστεί μπλε. Εδώ, νομίζω, όλα είναι ξεκάθαρα.

Καθολικός επιλογέας και μοναδικό αναγνωριστικό

Τώρα ας περάσουμε στα Id που ήδη ανέφερα. Όταν βλέπουμε κάτι στον κώδικα CSS ένα χασίς μπροστά, τότε αυτό σημαίνει ότι έχουμε να κάνουμε με Id:

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

Επομένως, συνήθως γράφουν απλώς έναν κατακερματισμό (hash), ακολουθούμενο αμέσως από την τιμή (όνομα) του χαρακτηριστικού Id. Ας υποθέσουμε ότι έχουμε γράψει επόμενος κανόναςγια αναγνωριστικό:

#πίσω (χρώμα:κόκκινο)

και ο κώδικας περιέχει το ακόλουθο τμήμα:

το οποίο, ως αποτέλεσμα της εφαρμογής του κανόνα μετά το "#back" σε αυτόν, θα ερμηνευτεί από το πρόγραμμα περιήγησης ως εξής:

Div κοντέινερ με μοναδικό αναγνωριστικό

Το CSS παρέχει επίσης γενικός επιλογέας που υποδεικνύεται με έναν αστερίσκο, που δείχνει ότι αυτόν τον κανόναθα ισχύει γενικά για οποιοδήποτε στοιχείο του κώδικα:

* (χρωμα μαυρο)

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

Επιλογείς χαρακτηριστικών και το μέλλον τους στο σύγχρονο CSS

Όλες οι επιλογές που περιγράφονται παραπάνω (ετικέτα, κλάση, αναγνωριστικό και καθολική) θα λειτουργούν σε όλα τα προγράμματα περιήγησης. Υπάρχουν όμως και άλλες επιλογές που δεν λειτουργούν παντού.

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

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

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

Πώς να χρησιμοποιήσετε άλλους επιλογείς που υπάρχουν στη γλώσσα; Χαρακτηριστικά HTML(όχι Id και όχι class); Αρκετά απλό - κλείστε τα μέσα αγκύλες :

(χρώμα: πράσινο)

Τώρα κάθε ετικέτα στον κώδικα Html που έχει γραμμένο τον «τίτλο» θα έχει πράσινο χρώμα κειμένου.

Πολύ βολικό, κατά τη γνώμη μου. Αλλά το όλο πρόβλημα με τη χρήση επιλογέων χαρακτηριστικών είναι αυτό δεν λειτουργούν σε IE 6 και παρακάτωγενικά ή λειτουργούν, αλλά μόνο εν μέρει. Μέχρι να μηδενιστεί το μερίδιο των χρηστών που έχουν πρόσβαση στο Διαδίκτυο χρησιμοποιώντας IE 6, αυτό βολικό τρόπο, πιθανότατα, δεν θα χρησιμοποιηθεί ευρέως στη διάταξη. Ωστόσο, πρέπει να γνωρίζετε την ύπαρξή τους και να μπορείτε να τα χρησιμοποιήσετε.

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

Μπορείτε να υποδείξετε σε αυτά όχι μόνο το όνομα του χαρακτηριστικού, αλλά και η σημασία του:

(χρώμα: πράσινο)

Ως αποτέλεσμα, οι κανόνες CSS που καθορίζονται για έναν τέτοιο επιλογέα θα εφαρμοστούν μόνο στην ετικέτα που έχει έναν "τίτλο" με την τιμή "First Paragraph" (στο παράδειγμά μας αυτή θα είναι η δεύτερη γραμμή):

Το περιγραφόμενο παράδειγμα ήταν μια αυστηρή ισότητα, αλλά μπορείτε να γράψετε αυτόν τον επιλογέα ως εξής:

(χρώμα: πράσινο)

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

Η σύνταξη του επιλογέα χαρακτηριστικών ερμηνεύει «~=» καθώς «περιέχεται ολόκληρη η λέξη». Για παράδειγμα, για ένα στοιχείο με title="Second paragraph" CSS правило «color:green» уже применяться не будет.!}

Αλλά μπορείτε να το βάλετε αντί «*=» και τότε όχι μόνο θα ληφθούν υπόψη μεμονωμένες λέξειςπου καθορίζεται στον επιλογέα, αλλά και μέρη λέξεων (οποιοδήποτε κομμάτι κειμένου περιέχεται οπουδήποτε στο χαρακτηριστικό):

(χρώμα: πράσινο)

Σε αυτήν την περίπτωση, και για το στοιχείο με title="Δεύτερη παράγραφος" сработает правило «color:green» и его текст подкрасится !} πράσινος. Ελπίζω ότι αυτό είναι ξεκάθαρο. Υπάρχει επίσης ένας τέτοιος χειριστής όπως «^=» (ό,τι ξεκινά με την τιμή που καθορίζεται στις παρενθέσεις), που βοηθά στη δημιουργία ενός επιλογέα χαρακτηριστικών όπως αυτό:

(χρώμα: κόκκινο)

Πιθανότατα θυμάστε ότι το χαρακτηριστικό για τον καθορισμό . Έτσι, αρκετά συχνά εσωτερικούς συνδέσμουςστο site τα κάνουν σχετικά, αλλά τα εξωτερικά δεν μπορούν να γίνουν αλλιώς από το να τα κάνουν απόλυτα.

Επομένως, τα πάντα εξωτερικοί σύνδεσμοιθα ξεκινά με "http" και τα εσωτερικά μπορούν να καθοριστούν σε σχετική μορφή χωρίς τη χρήση "http". Οτι. Ο επιλογέας που καθορίζεται στο παράδειγμά μας θα το επιτρέψει χρωματίστε όλους τους εξωτερικούς συνδέσμους στον ιστότοπο(όλα απόλυτο) σε κόκκινο. Λοιπόν, τα σχετικά που δεν περιέχουν "http" θα παραμείνουν το χρώμα που υιοθετήθηκε για αυτούς από προεπιλογή. Νομίζω ότι είναι υπέροχο!!!

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

Ναι, υπάρχει άλλος χειριστής «$=» - οτιδήποτε τελειώνει με την τιμή που καθορίζεται σε εισαγωγικά:

(χρώμα: πράσινο)

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

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

Καλή σου τύχη! Τα λέμε σύντομα στις σελίδες του ιστότοπου του ιστολογίου

Μπορείτε να παρακολουθήσετε περισσότερα βίντεο μεταβαίνοντας στο

");">

Μπορεί να σας ενδιαφέρει

Επιλογείς ψευδο-κλάσεων και ψευδο-στοιχείων στο CSS (hover, first-child, first-line και άλλα), σχέσεις μεταξύ Ετικέτες HTMLκώδικας
Προτεραιότητες σε Css και αύξησή τους λόγω Σημαντικό, συνδυασμός και ομαδοποίησης επιλογέων, στυλ χρήστη και συγγραφέα
Στυλ λίστας(τύπος, εικόνα, θέση) - Κανόνες Css για προσαρμογή εμφάνισηλίστες σε κώδικα HTML
Φόντο σε CSS (χρώμα, θέση, εικόνα, επανάληψη, συνημμένο) - τα πάντα για να ορίσετε το χρώμα φόντου ή εικόνα φόντου στοιχεία HTML
CSS - τι είναι, όπως πίνακες κλιμακωτά στυλσύνδεση με Κώδικας HTMLχρησιμοποιώντας Στυλ και Σύνδεσμο
Μονάδες ιδιοτήτων (pixel, Em και Ex) και κανόνες κληρονομικότητας στο CSS

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

Tag.ClassName (ιδιότητα1: τιμή; ιδιότητα2: τιμή; ...)

Στον επιλογέα, μετά το όνομα της ετικέτας, το όνομα της κλάσης γράφεται μέσα από μια τελεία. Ο προγραμματιστής έρχεται με το όνομα της κλάσης ο ίδιος. Το όνομα της τάξης πρέπει να ξεκινά με λατινικό γράμμα και μπορεί να περιέχει παύλα (-) και κάτω παύλα (_).

Στον κώδικα HTML, για να υποδείξει τη σύνδεση μιας ετικέτας με μια κλάση CSS, ένα χαρακτηριστικό γράφεται στην ετικέτα class="Όνομα τάξης".

Τώρα ένα απλό παράδειγμα χρήσης κλάσεων:

Μαθήματα σε CSS

Σε αυτό το παράδειγμα, χρησιμοποιώντας κλάσεις, ορίσαμε διαφορετικά χρώματα για τρεις λίστες που δημιουργούνται από την ετικέτα

Μαθήματα σε CSS

Αποτέλεσμα κωδικού:

Εικόνα 1. Ένα παράδειγμα χρήσης κλάσεων για τη δημιουργία μενού.

Φυσικά, σε αυτό το παράδειγμα τα μενού δεν είναι όμορφα, αλλά η ουσία του παραδείγματος είναι να δείξει πώς χρησιμοποιούνται οι κλάσεις σε αυτήν την περίπτωση.

Ας δούμε ένα άλλο απλό παράδειγμα χρήσης κλάσεων. Ας δημιουργήσουμε μια τάξη για σχεδιασμό παραγράφου (ετικέτα

) σε μορφή εισαγωγικού.

Μαθήματα σε CSS

CSS είναι ένα απαραίτητο εργαλείοστη διάταξη των εγγράφων html. Όπως είπε ο μεγάλος Τουταγχαμών:

Χρησιμοποιήστε το CSS σε όλους τους τομείς της ζωής σας: στην κουζίνα, στο μπάνιο, στον κήπο.

Λειτουργία κώδικα:

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

Μαθήματα σε CSS

Πλανήτης	Πόλη	Πληθυσμός
Γη	Τόκιο	Πολλά απο
Γη	Λονδίνο	Πολλά απο
Γη	Mukhosransk	Λίγοι
Άρης	Ευλοαί	Αγνωστος

Λειτουργία κώδικα:

Αξίζει όμως να σημειωθεί ότι αυτός ο κωδικός είναι εσφαλμένος. Το θέμα είναι ότι στο έγγραφο htmlόλες οι ετικέτες θα είναι το όνομα χρώμα του φόντου#519E70. Να κυβερνάς για μια ετικέτα ίσχυε μόνο σε έναν πίνακα με την κατηγορία πόλεις, ο επιλογέας θα πρέπει να είναι πίνακας.πόλεις ου (...).

Χρήση διαφορετικών τάξεων ταυτόχρονα

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

Ας δημιουργήσουμε ένα σύννεφο ετικετών εφαρμόζοντας δύο κλάσεις σε μία ετικέτα:

Μαθήματα σε CSS

Επιλογείς CSS Χρώματα στον πίνακα χρωμάτων CSS που εργάζονται με το μοντέλο πλαισίου CSS κειμένου

Ένα παράδειγμα αυτού του κώδικα: