IFrames veb dizaynında necə işlədiyini başa düşmək
HTML-də bir element yerləşdirdiyiniz zaman, CSS üslubları əlavə etmək üçün iki imkanı var:
- IFRAME-in özünü tərtib edə bilərsiniz.
- Sayfayı IFRAME (müəyyən şərtlər altında) daxilində tərtib edə bilərsiniz.
IFRAME Elementini CSS-lə istifadə etməklə
İframeinizi tərtib edərkən nəzərə almaq lazım olan ilk şey IFRAME-in özüdür. Çox brauzerlər çox əlavə üslub olmadan iframe içərsə də, onları ardıcıl tutmaq üçün bəzi üslubları əlavə etmək yaxşı bir fikirdir.
Mən həmişə mənim iframalarımda daxil etdiyim bəzi CSS üslubları:
- margin: 0;
- padding: 0;
- sərhəd: none;
- genişlik: dəyər ;
- boy: dəyər ;
Genişlik və hündürlükdə sənədimə uyğun olan ölçüyə görə. Burada üsluba malik olmayan bir çərçivə nümunəsi və sadələşdirilmiş əsaslar yalnız birdir. Gördüyünüz kimi, bu üslublar əsasən iframe ətrafındakı sərhədləri düzəldir, eyni zamanda bütün brauzerlər eyni margin, padding və ölçüləri ilə iframe göstərməsini təmin edirlər.
HTML5 , kaydırma çubuklarını çıxarmaq üçün taşma özelliğini kullanmanızı tövsiyə edir, lakin bu etibarlı deyil. Belə ki, kaydırma çubuklarını aradan qaldırmaq və ya dəyişdirmək istəyirsinizsə, iframeinizdə kaydırma atributunu istifadə etməliyəm. Kaydırma xüsusiyyətindən istifadə etmək üçün hər hansı digər xüsusiyyət kimi əlavə edin və sonra üç dəyərdən birini seçin: bəli, yox və ya avtomatik. bəli, ehtiyac olmadıqda belə hər zaman hərəkət paneli daxil etmək üçün brauzerə məlumat verir. lazımlı və ya lazım olmayan bütün kaydırma çubuklarını çıxarmaz.
avtomatik default və onlara lazım olduqda kaydırma çubuqları daxildir və olmadıqda onları aradan qaldırır.
Kaydırma atributu ilə kaydırmayı necə söndürmək olar:
scrolling = "no" >
Bu iframe'dir.
HTML5'te kaydırma funksiyasını söndürmək üçün taşma özelliğini kullanmanız lazımdır. Ancaq bu nümunələrdə gördüyünüz kimi hələlik bütün brauzerlərdə etibarlı işləmir.
Budur daşqın mülkiyyəti ilə hər zaman hərəkət etmək üçün açılacaqsınız:
style = "overflow: scroll;" >
Bu iframe'dir.
Kaydırmayı tamamen taşma özelliği ile söndürmenin bir yolu yoxdur .
Bir çox dizaynerlər, onların iframeləri səhifənin arxa planı ilə qarışdırmaq istəyirlər, belə ki, oxucular iframe hətta orada olduğunu bilmirlər. Amma siz onları fərqləndirmək üçün üslub əlavə edə bilərsiniz. Iframe daha asan göründüyü üçün sərhədlərin düzəldilməsi asandır. Sərhədləri tərtib etmək üçün sərhəd stilinin (ya da bununla bağlı sərhəd-üst, sərhəd-sağ, sərhəd-sol və sərhəd-aşağı xüsusiyyətləri) istifadə edin:
iframe {
sərhədsiz: # c00 1px nöqtə;
sərhəd hüququ: # c00 2px nöqtə;
sərhəd sol: # c00 2px nöqtə;
border-bottom: # c00 4px nöqtə;
}
Ancaq üslublarınız üçün kayma və sərhədlərlə dayanmırsınız. Siz iframeinizə bir çox başqa CSS üslubuna müraciət edə bilərsiniz. Bu nümunə iframe bir kölgə, yuvarlatılmış küncləri vermək və 20 dərəcə döndərmək üçün CSS3 üslublarını istifadə edir.
iframe {
margin-top: 20px;
margin-bottom: 30px;
-moz-sərhəd radiusu: 12px;
-webkit-border-radius: 12px;
sərhəd radiusu: 12px;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
qutu kölgəsi: 4px 4px 14px # 000;
-moz-transform: döndürme (20deg);
-webkit-transform: dönüş (20deg);
-o-transform: döndürün (20deg);
-ms-transform: döndürme (20deg);
filter: prod.: DXImageTransform.Microsoft.BasicImage (rotasiya = .2);
}
Iframe məzmununu tərtib etmək
Bir iframe məzmununu üslubu başqa bir veb-səhifəni tərtib etmək kimi. Lakin, səhifəni düzəldə bilərsiniz . Əgər səhifəni redaktə edə bilmirsinizsə (məsələn, başqa bir saytda).
Sayfayı düzenleyebiliyorsanız, sitenizdeki başqa bir web sayfasını stil etdiyiniz kimi, xarici stil ya da üslubları da belgede sağa ekleyebilirsiniz.