İçine bir öğe gömdüğünüzde HTML, buna CSS stilleri eklemek için iki fırsatınız var:
- stil verebilirsiniz
IFRAME
kendisi. - Sayfanın içinde stil yapabilirsiniz.
IFRAME
(belirli şartlar altında).
IFRAME Öğesine Stil Vermek için CSS Kullanma
iframe'lerinizi şekillendirirken göz önünde bulundurmanız gereken ilk şey,.
IFRAME
- kendisi. Çoğu tarayıcı, fazladan stil içermeyen iframe'ler içerse de, bunları tutarlı tutmak için bazı stiller eklemek yine de iyi bir fikirdir. İşte her zaman dahil ettiğimiz bazı CSS stilleri iframe'ler:
kenar boşluğu: 0;
dolgu: 0;
sınır: yok;
Genişlik: değer;
yükseklik: değer;
İle.
Genişlik
ve.
yükseklik
belgeme uyan boyuta ayarlayın. Burada, stili olmayan ve yalnızca temel özellikleri olan bir çerçeve örneği verilmiştir. Gördüğünüz gibi, bu stiller çoğunlukla iframe'in etrafındaki kenarlığı kaldırır, ancak aynı zamanda tüm tarayıcıların bu iframe'i aynı kenar boşlukları, dolgu ve boyutlarla görüntülemesini sağlar.HTML5 kullanmanızı önerir.
taşma
içindeki kaydırma çubuklarını kaldırma özelliği
kaydırma kutusu, ama bu güvenilir değil. Bu yüzden kaydırma çubuklarını kaldırmak veya değiştirmek istiyorsanız, kullanmalısınız.kaydırma
özniteliği de iframe'inizde. kullanmak için.
kaydırma
öznitelik, başka herhangi bir öznitelik gibi ekleyin ve ardından üç değerden birini seçin:
Evet
,
Hayır
, veya.
Oto
.
Evet
tarayıcıya, gerekmeseler bile her zaman kaydırma çubukları eklemesini söyler.
Hayır
gerekli olsun veya olmasın tüm kaydırma çubuklarını kaldırmayı söylüyor.
Oto
varsayılandır ve gerektiğinde kaydırma çubuklarını içerir ve gerekmediğinde bunları kaldırır. ile kaydırmayı nasıl kapatacağınız aşağıda açıklanmıştır.
kaydırma
nitelik: kaydırma="hayır">
Bu bir iframe'dir.
HTML5'te kaydırmayı kapatmak için kullanmanız gerekir.
taşma
Emlak. Ancak bu örneklerde görebileceğiniz gibi henüz tüm tarayıcılarda güvenilir bir şekilde çalışmıyor. ile her zaman kaydırmayı nasıl açacağınız aşağıda açıklanmıştır.
taşma
özellik: style="overflow: kaydırma;">
Bu bir iframe'dir.
Var olmaz ile kaydırmayı tamamen kapatmak için.
taşma
Emlak. Birçok tasarımcı, iframe'lerinin bulundukları sayfanın arka planıyla uyum içinde olmasını ister, böylece okuyucular iframe'lerin orada olduğunu bile bilmezler. Ancak, onları öne çıkarmak için stiller de ekleyebilirsiniz. Kenarlıkları, iframe'in daha kolay görünmesi için ayarlamak kolaydır. Sadece kullanın.
sınır
stil özelliği (veya bununla ilgili.
sınır üstü
,
sınır-sağ
,
sınır-sol
, ve.
sınır-alt
özellikler) kenarlıkları biçimlendirmek için: iframe {
üst kenarlık: #c00 1 piksel noktalı;
sağ kenarlık: #c00 2 piksel noktalı;
sol kenarlık: #c00 2 piksel noktalı;
kenarlık-alt: #c00 4 piksel noktalı;
}
Ancak stilleriniz için kaydırma ve kenarlıklar ile durmamalısınız. iframe'inize birçok başka CSS stili uygulayabilirsiniz. Bu örnek, iframe'e gölge, yuvarlatılmış köşeler vermek ve onu 20 derece döndürmek için CSS3 stillerini kullanır.
iframe {
üst kenar boşluğu: 20 piksel;
kenar boşluğu-alt: 30 piksel;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
sınır yarıçapı: 12 piksel;
-moz-box-shadow: 4px 4px 14px #000;
-webkit-box-shadow: 4px 4px 14px #000;
kutu gölgesi: 4px 4px 14px #000;
-moz-dönüşüm: döndür (20 derece);
-webkit-dönüşüm: döndür (20 derece);
-o-dönüşüm: döndür (20 derece);
-ms-dönüşüm: döndür (20 derece);
filtre: progid: DXImageTransform. Microsoft. BasicImage (döndürme=.2);
}
Iframe İçeriklerini Şekillendirme
Bir iframe'in içeriğini şekillendirmek, diğer herhangi bir web sayfasını şekillendirmeye benzer. Ama sen sayfayı düzenlemek için erişimi olmalıdır. Sayfayı düzenleyemiyorsanız (örneğin, başka bir sitede).
Sayfayı düzenleyebiliyorsanız, sitenizdeki diğer herhangi bir web sayfasının stilini oluşturduğunuz gibi doğrudan belgeye harici bir stil sayfası veya stiller ekleyebilirsiniz.