Apabila anda memasukkan elemen dalam HTML anda, anda mempunyai dua peluang untuk menambah gaya CSS kepadanya:
- Anda boleh gaya
IFRAME sendiri.
- Anda boleh gaya halaman di dalamnya
IFRAME (dalam keadaan tertentu).
Menggunakan CSS ke Gaya Elemen IFRAME
Perkara pertama yang perlu anda pertimbangkan apabila menggayakan iframes anda ialah
IFRAME
margin: 0; padding: 0; sempadan: tiada; lebar: nilai ; ketinggian: nilai ; Dengan lebar
dan ketinggian
tetapkan saiz yang sesuai dengan dokumen saya. Berikut adalah contoh-contoh bingkai tanpa gaya dan satu dengan hanya asas yang digayakan. Seperti yang anda dapat lihat, gaya ini kebanyakannya hanya mengalih keluar sempadan di sekitar iframe, tetapi mereka juga memastikan bahawa semua pelayar memaparkan iframe itu dengan margin yang sama, padding, dan dimensi. HTML5 mengesyorkan bahawa anda menggunakan limpahan
harta untuk mengeluarkan bar skrol, tetapi itu tidak boleh dipercayai. Jadi jika anda mahu mengeluarkan atau menukar bar skrol, anda harus menggunakannya menatal
atribut pada iframe anda juga. Untuk menggunakan menatal
atribut, tambahnya seperti mana-mana atribut lain dan kemudian memilih salah satu daripada tiga nilai: ya
, tidak
, atau auto
ya
memberitahu penyemak imbas untuk sentiasa memasukkan bar skrol walaupun mereka tidak diperlukan. tidak
kata untuk membuang semua bar skrol sama ada diperlukan atau tidak. auto
adalah lalai dan termasuk bar tatal bila diperlukan dan mengalihkannya apabila mereka tidak. Di sini ialah cara mematikan menatal dengan menatalatribut: menatal = "tidak"> Untuk mematikan menatal dalam HTML5, anda sepatutnya menggunakan limpahan
harta. Tetapi seperti yang anda lihat dalam contoh ini, ia tidak berfungsi dengan pasti di semua pelayar. Berikut adalah cara anda menghidupkan menatal sepanjang masa dengan limpahanharta: style = "overflow: scroll;"> Terdapat tiada cara untuk mematikan menatal sepenuhnya dengan limpahan
harta. Ramai pereka mahukan iframes mereka untuk menggabungkan dengan latar belakang halaman mereka supaya pembaca tidak tahu bahawa iframes ada di sana. Tetapi anda juga boleh menambah gaya untuk menjadikannya menonjol. Melaraskan sempadan supaya iframe muncul lebih mudah adalah mudah. Hanya gunakan sempadan
gaya hartanah (atau ia berkaitan sempadan atas
, betul-betul
, sempadan kiri
, dan sempadan bawahciri-ciri) mengikut gaya sempadan: iframe {border-top: # c00 1px dihiasi;sempadan kanan: # c00 2px bertitik;border-left: # c00 2px dihiasi;sempadan bawah: # c00 4px dihiasi;}
Tetapi anda tidak perlu berhenti dengan menatal dan bersempadan untuk gaya anda. Anda boleh memohon banyak gaya CSS lain ke iframe anda. Contoh ini menggunakan gaya CSS3 untuk memberikan iframe bayangan, sudut bulat, dan diputarnya 20 darjah. iframe {margin-top: 20px;margin-bottom: 30px;-moz-border-radius: 12px;-webkit-border-radius: 12px;jejari jejari: 12px;-moz-box-shadow: 4px 4px 14px # 000;-webkit-box-shadow: 4px 4px 14px # 000;box-shadow: 4px 4px 14px # 000;-moz-transform: berputar (20deg);-webkit-transform: berputar (20deg);-o-transform: putar (20deg);-ms-transform: putar (20deg);penapis: progid: DXImageTransform.Microsoft.BasicImage (putaran = .2);} Menggayakan kandungan iframe adalah seperti menggayakan halaman web yang lain. Tetapi anda mesti mempunyai akses untuk mengedit halaman . Jika anda tidak boleh mengedit halaman (contohnya, di laman lain). Sekiranya anda boleh mengedit halaman, anda boleh menambah lembaran gaya luaran atau gaya tepat di dalam dokumen seperti yang anda akan gaya laman web lain di laman web anda.
Ini adalah iframe.
Ini adalah iframe.
Menggayakan Kandungan Iframe
