Πώς να χρησιμοποιήσετε τον επιλογέα ταυτότητας στο CSS

Ενδέχεται 17, 2024

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

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

Βασικός κώδικας

. . .

Παράδειγμα

. . .

Επιλογή επιλογής

Μέσα στις ετικέτες, θα παρατηρήσετε ότι ο επιλογέας ταυτότητας αρχίζει με το σύμβολο κατατεμαχισμού (#) και ακολουθείται με το όνομα που αντιστοιχίζετε στον επιλογέα ταυτότητας. Όπως και με τον επιλογέα κλάσης, μπορείτε να χρησιμοποιήσετε οποιοδήποτε όνομα θέλετε, αλλά είναι καλύτερο εάν το όνομα υποδεικνύει τι θα χρησιμοποιηθεί ο επιλογέας ταυτότητας. Στο παράδειγμα, το χρησιμοποιούμε για να αναγνωρίσουμε ένα ειδικό τμήμα του κειμένου.

{αξία περιουσίας;}

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

. . .

Όταν χρησιμοποιείτε τον επιλογέα ταυτότητας στο σώμα της ιστοσελίδας, θα χρησιμοποιήσετε το χαρακτηριστικό id στην ετικέτα HTML που ανοίγει. Η τιμή για το χαρακτηριστικό id είναι το μοναδικό όνομα που δίνεται στον επιλογέα ταυτότητας, στην περίπτωση αυτή "special_text". (id = "value") Με αυτόν τον τρόπο ο επιλογέας "συνδέει" το στυλ με εκείνη την ετικέτα HTML στην οποία θέλετε να εφαρμόσετε το στυλ. Στο παραπάνω παράδειγμα, ο επιλογέας ταυτότητας θα τοποθετηθεί μόνο μέσα σε ένα

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

Οδηγίες Βίντεο: Honest liars -- the psychology of self-deception: Cortney Warren at TEDxUNLV (Ενδέχεται 2024).

Πώς να χρησιμοποιήσετε τον επιλογέα ταυτότητας σε CSS, HTML, τύπους κανόνων CSS, πώς να χρησιμοποιήσετε τον επιλογέα ταυτότητας, τον επιλογέα ταυτότητας CSS

Προηγούμενο Άρθρο

Επόμενο Άρθρο

Σχετικά Άρθρα

Υπολογιστές

Σύνδεση χαρακτήρων με PHP String Operators

Ενδέχεται 2024

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

Υπολογιστές

Προβολή παρουσίασης JavaScript με το CSS

Ενδέχεται 2024

Σε ένα προηγούμενο άρθρο δημιουργήσαμε μια πολύ απλή προβολή διαφανειών JavaScript. Αυτή η προβολή διαφανειών είναι εντελώς λειτουργική και μάλιστα εμφανίζει κάτι κατάλληλο για άτομα που δεν...