Ketika Anda menanamkan elemen di HTML Anda, Anda memiliki dua peluang untuk menambahkan gaya CSS ke dalamnya:
- Anda dapat mengatur gaya
IFRAME diri.
- Anda dapat menata halaman di dalam
IFRAME (dalam kondisi tertentu).
Menggunakan CSS untuk Menata Elemen IFRAME
Hal pertama yang harus Anda pertimbangkan saat menata iframe adalah
IFRAME
margin: 0; padding: 0; border: none; lebar: nilai ; tinggi: nilai ; Dengan lebar
dan tinggi
di set ke ukuran yang pas di dokumen saya. Berikut ini contoh bingkai tanpa gaya dan satu dengan hanya gaya dasar. Seperti yang Anda lihat, gaya ini sebagian besar hanya menghapus perbatasan di sekitar iframe, tetapi mereka juga memastikan bahwa semua browser menampilkan iframe dengan margin, padding, dan dimensi yang sama.HTML5 menyarankan Anda untuk menggunakan meluap
properti untuk menghapus bilah gulir, tetapi itu tidak dapat diandalkan. Jadi jika Anda ingin menghapus atau mengubah bilah gulir, Anda harus menggunakan menggulir
atribut pada iframe Anda juga. Untuk menggunakan menggulir
atribut, tambahkan seperti atribut lainnya dan kemudian pilih salah satu dari tiga nilai: iya nih
, tidak
, atau mobil
iya nih
memberi tahu browser untuk selalu menyertakan bilah gulir meskipun tidak diperlukan. tidak
mengatakan untuk menghapus semua bar gulir apakah diperlukan atau tidak. mobil
adalah default dan menyertakan scroll bar ketika dibutuhkan dan menghapusnya ketika tidak. Berikut adalah cara mematikan scrolling dengan mengguliratribut: scrolling = "no"> Untuk mematikan bergulir di HTML5 Anda seharusnya menggunakan meluap
milik. Tetapi seperti yang Anda lihat pada contoh ini, ia tidak berfungsi dengan baik di semua browser. Beginilah cara Anda mengaktifkan bergulir sepanjang waktu dengan meluapproperti: style = "overflow: scroll;"> Ada tidak mungkin untuk mematikan guling sepenuhnya dengan meluap
milik. Banyak desainer menginginkan iframes mereka untuk berbaur dengan latar belakang halaman yang ada sehingga pembaca tidak tahu bahwa iframes ada di sana. Tetapi Anda juga dapat menambahkan gaya untuk membuatnya menonjol. Menyesuaikan batas sehingga iframe lebih mudah ditampilkan. Cukup gunakan berbatasan
properti gaya (atau itu terkait batas atas
, kanan-batas
, kiri-batas
, dan batas bawahproperti) untuk menata batas: iframe {border-top: # c00 1px bertitik;border-right: # c00 2px dotted;kiri-batas: # c00 2px titik-titik;border-bottom: # c00 4px dotted;}
Tetapi Anda tidak harus berhenti dengan menggulir dan membatasi untuk gaya Anda. Anda dapat menerapkan banyak gaya CSS lainnya ke iframe Anda. Contoh ini menggunakan gaya CSS3 untuk memberi iframe bayangan, sudut membulat, dan memutarnya 20 derajat. iframe {margin atas: 20px;margin-bottom: 30px;-moz-border-radius: 12px;-webkit-border-radius: 12px;border-radius: 12px;-moz-box-shadow: 4px 4px 14px # 000;-webkit-box-shadow: 4px 4px 14px # 000;box-shadow: 4px 4px 14px # 000;-moz-transform: rotate (20deg);-webkit-transform: rotate (20deg);-o-transform: memutar (20deg);-ms-transform: rotate (20deg);filter: progid: DXImageTransform.Microsoft.BasicImage (rotasi = .2);} Styling isi iframe sama seperti menata halaman web lainnya. Tapi kamu harus memiliki akses untuk mengedit halaman . Jika Anda tidak dapat mengedit halaman (misalnya, di situs lain). Jika Anda dapat mengedit halaman, maka Anda dapat menambahkan style sheet eksternal atau gaya tepat di dokumen seperti Anda akan menata halaman web lain di situs Anda.
Ini adalah iframe.
Ini adalah iframe.
Styling Konten Iframe
