Saat Anda menyematkan elemen di HTML, Anda memiliki dua peluang untuk menambahkan gaya CSS ke dalamnya:
- Anda dapat gaya
IFRAME
diri. - Anda dapat menata halaman di dalam
IFRAME
(dalam kondisi tertentu).
Menggunakan CSS untuk Memberi Gaya pada Elemen IFRAME
Hal pertama yang harus Anda pertimbangkan saat menata iframe Anda adalah.
IFRAME
- diri. Meskipun sebagian besar browser menyertakan iframe tanpa banyak gaya tambahan, sebaiknya tambahkan beberapa gaya agar tetap konsisten. Berikut adalah beberapa gaya CSS yang selalu kami sertakan iframe:
margin: 0;
bantalan: 0;
perbatasan: tidak ada;
lebar: nilai;
tinggi: nilai;
Dengan.
lebar
dan.
tinggi
atur ke ukuran yang sesuai dengan dokumen saya. Berikut adalah contoh bingkai tanpa gaya dan bingkai dengan gaya dasar saja. Seperti yang Anda lihat, sebagian besar gaya ini hanya menghapus batas di sekitar iframe, tetapi juga memastikan bahwa semua browser menampilkan iframe itu dengan margin, padding, dan dimensi yang sama.HTML5 menyarankan agar Anda menggunakan.
meluap
properti untuk menghapus bilah gulir di dalam a kotak gulir, tapi itu tidak dapat diandalkan. Jadi jika Anda ingin menghapus atau mengubah bilah gulir, Anda harus menggunakan.
bergulir
atribut pada iframe Anda juga. Untuk menggunakan.
bergulir
atribut, tambahkan seperti atribut lainnya lalu pilih salah satu dari tiga nilai:
Iya
,
tidak
, atau.
mobil
.
Iya
memberi tahu browser untuk selalu menyertakan bilah gulir meskipun tidak diperlukan.
tidak
mengatakan untuk menghapus semua bilah gulir apakah diperlukan atau tidak.
mobil
adalah default dan menyertakan bilah gulir saat dibutuhkan dan menghapusnya saat tidak diperlukan. Berikut adalah cara mematikan pengguliran dengan.
bergulir
atribut: scrolling="tidak">
Ini adalah iframe.
Untuk mematikan pengguliran di HTML5 Anda seharusnya menggunakan.
meluap
Properti. Tetapi seperti yang Anda lihat dalam contoh ini, itu belum bekerja dengan andal di semua browser. Inilah cara Anda mengaktifkan pengguliran sepanjang waktu dengan.
meluap
properti: style="overflow: scroll;">
Ini adalah iframe.
Ada tidak mungkin untuk mematikan pengguliran sepenuhnya dengan.
meluap
Properti. Banyak desainer ingin iframe mereka menyatu dengan latar belakang halaman tempat mereka berada sehingga pembaca tidak tahu bahwa iframe ada di sana. Tetapi Anda juga dapat menambahkan gaya untuk membuatnya menonjol. Menyesuaikan batas sehingga iframe lebih mudah muncul itu mudah. Gunakan saja.
berbatasan
properti gaya (atau itu terkait.
perbatasan-atas
,
batas-kanan
,
perbatasan-kiri
, dan.
perbatasan-bawah
properties) untuk menata batas: iframe {
border-top: #c00 1px bertitik;
batas-kanan: #c00 2px bertitik;
batas kiri: #c00 2px bertitik;
border-bottom: #c00 4px bertitik;
}
Tetapi Anda tidak boleh berhenti dengan menggulir dan membatasi gaya Anda. Anda dapat menerapkan banyak gaya CSS lain ke iframe Anda. Contoh ini menggunakan gaya CSS3 untuk memberi iframe bayangan, sudut membulat, dan memutarnya 20 derajat.
iframe {
margin-atas: 20px;
margin-bawah: 30px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
batas-radius: 12px;
-moz-box-shadow: 4px 4px 14px #000;
-webkit-box-shadow: 4px 4px 14px #000;
bayangan kotak: 4px 4px 14px #000;
-moz-transform: memutar (20deg);
-webkit-transform: memutar (20deg);
-o-transform: memutar (20 derajat);
-ms-transform: memutar (20 derajat);
filter: progid: DXImageTransform. Microsoft. BasicImage (rotasi=.2);
}
Menata Isi Iframe
Menata konten iframe sama seperti menata laman web lainnya. Tapi kamu harus memiliki akses untuk mengedit halaman. Jika Anda tidak dapat mengedit halaman (misalnya, halaman tersebut ada di situs lain).
Jika Anda dapat mengedit halaman, maka Anda dapat menambahkan lembar gaya eksternal atau gaya langsung di dokumen seperti Anda akan menata halaman web lain di situs Anda.