Όταν ενσωματώνετε ένα στοιχείο στο HTML, έχετε δύο ευκαιρίες να προσθέσετε στυλ CSS σε αυτό:
- Μπορείτε να το στυλ
IFRAME
εαυτό. - Μπορείτε να προσθέσετε στυλ στη σελίδα μέσα στο
IFRAME
(υπό ορισμένες συνθήκες).
Χρήση CSS για το στυλ του στοιχείου IFRAME
Το πρώτο πράγμα που πρέπει να λάβετε υπόψη κατά το στυλ των iframe σας είναι το.
IFRAME
- εαυτό. Ενώ τα περισσότερα προγράμματα περιήγησης περιλαμβάνουν iframes χωρίς πολλά επιπλέον στυλ, είναι ακόμα καλή ιδέα να προσθέσετε κάποια στυλ για να τα διατηρήσετε συνεπή. Ακολουθούν ορισμένα στυλ CSS στα οποία συμπεριλαμβάνουμε πάντα iframes:
περιθώριο: 0;
επένδυση: 0;
περίγραμμα: κανένα;
πλάτος: αξία;
ύψος: αξία;
Με την.
πλάτος
και.
ύψος
ορίστε στο μέγεθος που ταιριάζει στο έγγραφό μου. Ακολουθούν παραδείγματα ενός πλαισίου χωρίς στυλ και ενός μόνο με τα βασικά στυλ. Όπως μπορείτε να δείτε, αυτά τα στυλ απλώς καταργούν το περίγραμμα γύρω από το iframe, αλλά διασφαλίζουν επίσης ότι όλα τα προγράμματα περιήγησης εμφανίζουν αυτό το iframe με τα ίδια περιθώρια, παραγέμισμα και διαστάσεις.HTML5 συνιστά να χρησιμοποιείτε το.
ξεχείλισμα
ιδιότητα για να αφαιρέσετε τις γραμμές κύλισης μέσα σε ένα πλαίσιο κύλισης, αλλά αυτό δεν είναι αξιόπιστο. Επομένως, εάν θέλετε να αφαιρέσετε ή να αλλάξετε τις γραμμές κύλισης, θα πρέπει να χρησιμοποιήσετε το.
κύλιση
χαρακτηριστικό και στο iframe σας. Για να χρησιμοποιήσετε το.
κύλιση
χαρακτηριστικό, προσθέστε το όπως οποιοδήποτε άλλο χαρακτηριστικό και, στη συνέχεια, επιλέξτε μία από τις τρεις τιμές:
Ναί
,
όχι
, ή.
αυτο
.
Ναί
λέει στο πρόγραμμα περιήγησης να περιλαμβάνει πάντα γραμμές κύλισης, ακόμη και αν δεν είναι απαραίτητες.
όχι
λέει για να αφαιρέσετε όλες τις γραμμές κύλισης, εάν χρειάζεται ή όχι.
αυτο
είναι η προεπιλογή και περιλαμβάνει τις γραμμές κύλισης όταν είναι απαραίτητες και τις αφαιρεί όταν δεν είναι. Εδώ είναι πώς να απενεργοποιήσετε την κύλιση με το.
κύλιση
χαρακτηριστικό: scrolling = "no">
Αυτό είναι ένα iframe.
Για να απενεργοποιήσετε την κύλιση σε HTML5, πρέπει να χρησιμοποιήσετε το.
ξεχείλισμα
ιδιοκτησία. Ωστόσο, όπως μπορείτε να δείτε σε αυτά τα παραδείγματα, δεν λειτουργεί ακόμα αξιόπιστα σε όλα τα προγράμματα περιήγησης. Δείτε πώς θα ενεργοποιήσετε την κύλιση όλη την ώρα με το.
ξεχείλισμα
ιδιότητα: style = "overflow: scroll;">
Αυτό είναι ένα iframe.
Υπάρχει με τιποτα για να απενεργοποιήσετε πλήρως την κύλιση με το.
ξεχείλισμα
ιδιοκτησία. Πολλοί σχεδιαστές θέλουν τα iframe τους να συνδυάζονται με το φόντο της σελίδας στην οποία βρίσκονται, έτσι ώστε οι αναγνώστες να μην γνωρίζουν ότι τα iframe είναι ακόμη εκεί. Αλλά μπορείτε επίσης να προσθέσετε στυλ για να τα κάνετε να ξεχωρίζουν. Η προσαρμογή των περιγραμμάτων έτσι ώστε το iframe να εμφανίζεται πιο εύκολα είναι εύκολη. Απλώς χρησιμοποιήστε το.
σύνορο
ιδιοκτησία στυλ (ή σχετίζεται.
σύνορα-κορυφή
,
περίγραμμα δεξιά
,
αριστερά στα σύνορα
, και.
σύνορα-κάτω
ιδιότητες) για να ορίσετε τα περιγράμματα: iframe {
περίγραμμα κορυφής: # c00 1px διάστικτο;
περίγραμμα-δεξιά: # c00 2px με τελείες;
περίγραμμα-αριστερά: # c00 2px με τελείες;
περίγραμμα-κάτω: # c00 4px με τελείες;
}
Αλλά δεν πρέπει να σταματάτε με κύλιση και περιγράμματα για τα στυλ σας. Μπορείτε να εφαρμόσετε πολλά άλλα στυλ CSS στο iframe σας. Αυτό το παράδειγμα χρησιμοποιεί στυλ CSS3 για να δώσει στο iframe μια σκιά, στρογγυλεμένες γωνίες και το περιστράφηκε 20 μοίρες.
iframe {
margin-top: 20 εικονοστοιχεία;
margin-bottom: 30px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
ακτίνα περιγράμματος: 12px;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
box-shadow: 4px 4px 14px # 000;
-moz-transform: περιστροφή (20deg);
-webkit-transform: περιστροφή (20deg);
-o-transform: περιστροφή (20deg)
-ms-transform: περιστροφή (20deg);
φίλτρο: progid: DXImageTransform. Microsoft BasicImage (περιστροφή = .2);
}
Προσδιορισμός των περιεχομένων Iframe
Το στυλ του περιεχομένου ενός iframe είναι ακριβώς όπως το στυλ οποιασδήποτε άλλης ιστοσελίδας. Αλλά εσύ πρέπει να έχει πρόσβαση για επεξεργασία της σελίδας. Εάν δεν μπορείτε να επεξεργαστείτε τη σελίδα (για παράδειγμα, βρίσκεται σε άλλο ιστότοπο).
Εάν μπορείτε να επεξεργαστείτε τη σελίδα, τότε μπορείτε να προσθέσετε ένα εξωτερικό φύλλο στυλ ή στυλ ακριβώς στο έγγραφο, όπως θα κάνατε στυλ σε οποιαδήποτε άλλη ιστοσελίδα στον ιστότοπό σας.