Πώς να χρησιμοποιήσετε πριν και μετά τα ψευδοστοιχεία στο CSS

Πώς να χρησιμοποιήσετε πριν και μετά τα ψευδοστοιχεία στο CSS

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





Δείτε πώς μπορείτε να χρησιμοποιήσετε ψευδοστοιχεία στο CSS.



πώς να μορφοποιήσετε μια μονάδα usb

Κοινά ψευδοστοιχεία

Υπάρχει μια εκτενής λίστα ψευδοστοιχείων που είναι διαθέσιμα για να κάνουν τη ζωή ενός προγραμματιστή ιστού ευκολότερη. Μερικά από αυτά τα ψευδοστοιχεία περιλαμβάνουν:





  • Πριν
  • Μετά
  • Φόντο
  • Πρώτη γραμμή
  • Πρώτο γράμμα

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

Udευδοστοιχεία Παράδειγμα δομής


selector::pseudo-element{
/* css code */
}

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



Τα ψευδοστοιχεία πριν και μετά είναι τα πιο δημοφιλή στη λίστα και δεδομένου ότι υπάρχουν πολλοί πρακτικοί τρόποι χρήσης τους-δεν είναι δύσκολο να καταλάβουμε γιατί.

Χρήση του Πριν Pseευδοστοιχείου στο CSS

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



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

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



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

Χρήση του παραδείγματος Πριν από το ψευδοστοιχείο


.landingPage{
/* Arranges the text on the image overlay */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
/*sets the page to adjust to different screen sizes*/
height: 100vh;
}
.landingPage::before{
content:'';
/*imports an image*/
background: url(https://source.unsplash.com/_1EYIHRG014/1600x900)
no-repeat center/cover;
/*places an overlay on top of the image*/
opacity: 0.4;
/*makes the image visible*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

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





This is the result of using the before pseudo-element
to overlay and image with readable text.


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

Χρήση του After Pseudo-element στο CSS

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

Ένας τρόπος για να υποδείξετε ότι ένα πεδίο σε μια φόρμα απαιτεί δεδομένα είναι τοποθετώντας έναν αστερίσκο μετά την ετικέτα για αυτό το πεδίο. Το μετά ψευδο-στοιχείο παρέχει έναν πρακτικό τρόπο για να το κάνετε αυτό.

Χρήση του παραδείγματος After Pseudo-element


.required::after{
content: '*';
color: red;
}

Η εισαγωγή του παραπάνω κώδικα στην ενότητα CSS της φόρμας σας θα διασφαλίσει ότι κάθε ετικέτα που περιέχει την απαιτούμενη κλάση θα ακολουθείται άμεσα από έναν κόκκινο αστερίσκο. Το μετά ψευδο-στοιχείο είναι επίσης πρακτικό σε αυτό το παράδειγμα επειδή βοηθά στον διαχωρισμό του στιλ από τη δομή (που είναι πάντα ιδανικό στην ανάπτυξη λογισμικού.)

πόσο κοστίζει η αποστολή πρώτης αποθήκης

Η ιδιότητα περιεχομένου

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

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

Τώρα μπορείτε να χρησιμοποιήσετε ψευδοστοιχεία στο CSS

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

Μερίδιο Μερίδιο Τιτίβισμα ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ 10 απλά παραδείγματα κώδικα CSS που μπορείτε να μάθετε σε 10 λεπτά

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

Διαβάστε Επόμενο Σχετικά θέματα
  • Προγραμματισμός
  • Σχεδιασμός Ιστού
  • CSS
Σχετικά με τον Συγγραφέα Καντέισα Κιν(Δημοσιεύθηκαν 21 άρθρα)

Ο Kadeisha Kean είναι προγραμματιστής λογισμικού πλήρους στοίβας και τεχνικός/συγγραφέας τεχνολογίας. Έχει την ξεχωριστή ικανότητα να απλοποιήσει μερικές από τις πιο πολύπλοκες τεχνολογικές έννοιες. παραγωγή υλικού που μπορεί εύκολα να γίνει κατανοητό από κάθε αρχάριο τεχνολογίας. Είναι παθιασμένη με τη συγγραφή, την ανάπτυξη ενδιαφέροντος λογισμικού και τα ταξίδια στον κόσμο (μέσω ντοκιμαντέρ).

Περισσότερα από τον Kadeisha Kean

Εγγραφείτε στο newsletter μας

Εγγραφείτε στο ενημερωτικό μας δελτίο για τεχνικές συμβουλές, κριτικές, δωρεάν ebooks και αποκλειστικές προσφορές!

Κάντε κλικ εδώ για εγγραφή