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