Κατανόηση του ψευδο-στοιχείου πριν και μετά
Το Cascading Style Sheet (CSS) προορίζεται κυρίως για την εφαρμογή στυλ στη σήμανση HTML, ωστόσο σε ορισμένες περιπτώσεις όταν η προσθήκη επιπλέον σήμανσης στο έγγραφο είναι περιττή ή δεν είναι δυνατή, υπάρχει στην πραγματικότητα ένα χαρακτηριστικό γνώρισμα στο CSS που μας επιτρέπει να προσθέσουμε επιπλέον σήμανση χωρίς να διαταράξουμε το πραγματικό έγγραφο, δηλαδή το έγγραφο ψευδο-στοιχεία.
Έχετε ακούσει για αυτόν τον όρο, ειδικά όταν παρακολουθείτε κάποια από τα μαθήματα μας.
Υπάρχουν στην πραγματικότητα μερικά μέλη της οικογένειας CSS που έχουν ταξινομηθεί ως ψευδο-στοιχεία Όπως :πρώτη γραμμή, :πρώτο γράμμα, ::επιλογή, :πριν και :μετά. Αλλά, για αυτό το άρθρο, θα περιορίσουμε την κάλυψή μας μόνο στο :πριν και :μετά, “ψευδο-στοιχεία” εδώ θα αναφερθώ συγκεκριμένα και στα δύο. Θα εξετάσουμε αυτό το συγκεκριμένο θέμα από τα βασικά στοιχεία.
Η σύνταξη και η υποστήριξη προγράμματος περιήγησης
ο ψευδο-στοιχεία στην πραγματικότητα ήταν γύρω από τότε CSS1, αλλά το :πριν και :μετά που συζητάμε εδώ απελευθερώθηκαν στο CSS2.1. Στην αρχή, το ψευδο-στοιχεία χρησιμοποιήστε μεμονωμένο παχύ έντερο για τη σύνταξη, στη συνέχεια, καθώς εξελίχθηκε ο ιστός, στο CSS3 το ψευδο-στοιχεία αναθεωρήθηκαν για να χρησιμοποιηθούν διπλά παχέος εντέρου ::πριν & & ::μετά - να το διακρίνει ψευδο-τάξεις (δηλ. :φτερουγίζω, :ενεργός, και ούτω καθεξής).
Ωστόσο, αν χρησιμοποιείτε τη μορφή μονού παχέος εντέρου ή διπλού παχέος εντέρου, τα προγράμματα περιήγησης θα αναγνωρίζουν ακόμα. Και δεδομένου ότι ο Internet Explorer 8 υποστηρίζει μόνο τη μορφή ενιαίου παχέος εντέρου, είναι ασφαλέστερο να χρησιμοποιήσετε το τετράγωνο μεμονωμένου παχέος εντέρου εάν θέλετε ευρύτερη συμβατότητα με το πρόγραμμα περιήγησης.
Τι κάνει?
Με λίγα λόγια, το ψευδο-στοιχεία θα εισάγει ένα επιπλέον στοιχείο πριν ή μετά το στοιχείο του περιεχομένου, οπότε όταν τα προσθέτουμε και τα δύο, είναι τεχνικά ίσα με την ακόλουθη σήμανση.
:πριν Αυτό το κύριο περιεχόμενο. :μετά
Αλλά αυτά τα στοιχεία δεν παράγονται στην πραγματικότητα στο έγγραφο. Είναι ακόμα ορατά στην επιφάνεια, αλλά δεν θα τα βρείτε στην πηγή εγγράφων, έτσι ώστε να είναι πρακτικά μιλώντας απομίμηση στοιχεία.
Χρησιμοποιώντας ψευδο-στοιχεία
Χρησιμοποιώντας ψευδο-στοιχεία είναι σχετικά εύκολη. την ακόλουθη σύνταξη επιλογέας: πριν θα προσθέσει ένα στοιχείο πριν τον επιλογέα περιεχομένου ενώ αυτή η σύνταξη επιλογέας: μετά θα προσθέσει μετά από αυτό, και για να προσθέσει ένα περιεχόμενο μέσα τους μπορούμε να χρησιμοποιήσουμε το περιεχόμενο ιδιοκτησία.
Για παράδειγμα, το παρακάτω απόσπασμα θα προσθέσει ένα εισαγωγικό εισαγωγικό πριν και μετά το blockquote.
blockquote: πριν από το content: open-quote; blockquote: μετά από content: close-quote;
Σχεδίαση ψευδο-στοιχείων
Παρά το γεγονός ότι είναι ένα ψεύτικο στοιχείο, το ψευδο-στοιχεία πραγματικά ενεργεί σαν α “πραγματικός” στοιχείο; είμαστε σε θέση να προσθέσουμε οποιαδήποτε δήλωση στυλ πάνω τους, όπως αλλαγή χρώματος, προσθήκη φόντου, προσαρμογή του μεγέθους γραμματοσειράς, ευθυγράμμιση του κειμένου μέσα σε αυτό και ούτω καθεξής.
blockquote: πριν από το content: open-quote; μέγεθος γραμματοσειράς: 24pt; κείμενο-ευθυγράμμιση: κέντρο; γραμμή-ύψος: 42px; χρώμα: #fff; background: #ddd; float: αριστερά. θέση: σχετική. κορυφή: 30px; blockquote: μετά από content: close-quote; μέγεθος γραμματοσειράς: 24pt; κείμενο-ευθυγράμμιση: κέντρο; γραμμή-ύψος: 42px; χρώμα: #fff; background: #ddd; float: δεξιά? θέση: σχετική. κάτω: 40px;
Καθορισμός της διάστασης
Τα παραγόμενα στοιχεία είναι, από προεπιλογή, ένα στοιχείο σε επίπεδο γραμμής, οπότε όταν πρόκειται να καθορίσουμε το ύψος και το πλάτος, πρέπει πρώτα να το ορίσουμε ως στοιχείο μπλοκ χρησιμοποιώντας το εμφάνιση: μπλοκ δήλωση.
blockquote: πριν από το content: open-quote; μέγεθος γραμματοσειράς: 24pt; κείμενο-ευθυγράμμιση: κέντρο; γραμμή-ύψος: 42px; χρώμα: #fff; background: #ddd; float: αριστερά. θέση: σχετική. κορυφή: 30px; ακτίνα-ακτίνα: 25px; / ** ορίστε το ως στοιχείο μπλοκ ** / οθόνη: μπλοκ? ύψος: 25px; πλάτος: 25px; blockquote: μετά από content: close-quote; μέγεθος γραμματοσειράς: 24pt; κείμενο-ευθυγράμμιση: κέντρο; γραμμή-ύψος: 42px; χρώμα: #fff; background: #ddd; float: δεξιά? θέση: σχετική. κάτω: 40px; ακτίνα-ακτίνα: 25px; / ** ορίστε το ως στοιχείο μπλοκ ** / οθόνη: μπλοκ? ύψος: 25px; πλάτος: 25px;
Συνδέστε την εικόνα φόντου
Μπορούμε επίσης να αντικαταστήσουμε το περιεχόμενο με μια εικόνα και όχι μόνο απλό κείμενο. παρόλο που το περιεχόμενο Η ιδιοκτησία παρέχει α url () string για να εισαγάγετε μια εικόνα, αλλά στις περισσότερες περιπτώσεις προτιμώ πολύ τη χρήση του Ιστορικό ιδιότητα για μεγαλύτερο έλεγχο της συνημμένης εικόνας.
blockquote: πριν από περιεχόμενο: ""; μέγεθος γραμματοσειράς: 24pt; κείμενο-ευθυγράμμιση: κέντρο; γραμμή-ύψος: 42px; χρώμα: #fff; float: αριστερά. θέση: σχετική. κορυφή: 30px; ακτίνα-ακτίνα: 25px; υπόβαθρο: διεύθυνση url (images / quotationmark.png) -3px -3px #ddd; εμφάνιση: μπλοκ? ύψος: 25px; πλάτος: 25px; blockquote: μετά από περιεχόμενο: ""; μέγεθος γραμματοσειράς: 24pt; κείμενο-ευθυγράμμιση: κέντρο; γραμμή-ύψος: 42px; χρώμα: #fff; float: δεξιά? θέση: σχετική. κάτω: 40px; ακτίνα-ακτίνα: 25px; υπόβαθρο: διεύθυνση url (εικόνες / εισαγωγικό σημείωμα.png) -1px -32px #ddd; εμφάνιση: μπλοκ? ύψος: 25px; πλάτος: 25px;
Ωστόσο, όπως μπορείτε να δείτε από το απόσπασμα παραπάνω, εξακολουθούμε να δηλώνουμε το περιεχόμενο ιδιότητα και αυτή τη φορά με μια άδεια συμβολοσειρά. ο περιεχόμενο ιδιοκτησία είναι απαιτούμενο και πρέπει πάντα να εφαρμόζεται. διαφορετικά το ψευδο-στοιχείο δεν θα δουλέψει απολύτως.
Συνδυασμός με ψευδο-τάξεις
Αν και είναι ένα διαφορετικό είδος ψευδής, μπορούμε να χρησιμοποιήσουμε το ψευδο-τάξεις μαζί με ψευδο-στοιχεία μαζί σε έναν κανόνα CSS, για παράδειγμα, αν θέλουμε να το μετατρέψουμε υπόβαθρο εισαγωγικού σημείου λίγο πιο σκούρα όταν πετάμε πάνω από το blockquote.
blockquote: hover: μετά, blockquote: hover: πριν από το background-color: # 555;
Προσθήκη εφέ μετάβασης
Και μπορούμε να εφαρμόσουμε ακόμη και το μετάβαση ιδιοκτησία τους για να δημιουργήσουν ένα χαριτωμένο αποτέλεσμα μετάβασης χρώματος.
μετάβαση: όλα τα 350ms; -ο-μετάβαση: όλα τα 350ms; -moz-transition: όλα τα 350ms; -μετάβαση ιστού: όλα τα 350ms;
Δυστυχώς όμως, το φαινόμενο μετάβασης φαίνεται να λειτουργεί μόνο στην τελευταία έκδοση του Firefox. Ας ελπίσουμε ότι περισσότεροι περιηγητές θα καλύψουν τη διαφορά για να επιτρέψουν την εφαρμογή της ιδιότητας μετάβασης ψευδο-στοιχεία στο μέλλον.
- Διαδήλωση
- Λήψη πηγής
Περισσότερη έμπνευση
Για να σας εμπνεύσουμε, έχουμε επιλέξει τρία δροσερά παραδείγματα που μπορούν να σας δώσουν ιδέες για το σχεδιασμό ιστοσελίδων σας.
Συναρπαστικές σκιές
Σε αυτό το σεμινάριο ο Paul Underwood εξήγησε πώς να δημιουργήσει ένα πιο ρεαλιστικό και συναρπαστικό φαινόμενο σκιάς χρησιμοποιώντας :πριν και :μετά ψευδο-στοιχεία. Και οι δύο είναι τοποθετημένες απολύτως και τοποθετούνται στο πίσω μέρος με αρνητικός z-δείκτης αξία.
Σωρευτικό εφέ εικόνας
Χρησιμοποιώντας το ψευδο-στοιχεία για τη δημιουργία ενός εικονικού στοιχειοθετημένου εφέ εικόνας μόνο με μια εικόνα στην σήμανση είναι επίσης δυνατή. ο ψευδο-στοιχεία χρησιμοποιείται για να δημιουργήσει μια ψευδαίσθηση των στοιβάζονται εικόνων στο πίσω μέρος της πραγματικής εικόνας χρησιμοποιώντας αρνητικά z-δείκτης.
συμπέρασμα
Πseudo-στοιχεία είναι απλά “δροσερός” και τελικά χρησιμοποιήσιμο, βασικά έχουμε δύο στοιχεία μπόνους για κάθε στοιχείο που προσθέτουμε χωρίς να παρεμβαίνουμε στην πραγματική δομή HTML καθόλου και στη συνέχεια να τα μετατρέψουμε σε σχεδόν όλα που μπορούμε να φανταστούμε.
Υπάρχουν πραγματικά κάποια βελτίωση για ψευδο-στοιχεία που είναι επί του παρόντος υπό επεξεργασία, όπως ψευδο-στοιχεία φωλιάσματος div :: πριν από :: πριν από περιεχόμενο: "; και πολλαπλά ψευδο-στοιχεία div :: πριν (3) περιεχόμενο: "; η οποία προφανώς θα ανοίξει πολύ περισσότερες δυνατότητες στην πρακτική του σχεδιασμού ιστοσελίδων στο μέλλον. Ενώ υλοποιούνται σε τρέχοντα προγράμματα περιήγησης, ας περιμένουμε υπομονετικά για τώρα.
