Megérteni, hogy az IFrames hogyan működik a weboldal tervezésében
Ha beágyaz egy elemet a HTML-be , akkor két lehetősége van CSS-stílusok hozzáadására:
- Beállíthatja az IFRAME-t.
- Az oldalt az IFRAME (bizonyos feltételek mellett) stílusban meg lehet formázni.
A CSS segítségével stílus az IFRAME elem
Az első dolog, amit meg kell fontolnod, ha az iframe-eket megformálod, maga az IFRAME. Bár a legtöbb böngésző iframe-eket tartalmaz, anélkül, hogy sok extra stílus lenne, még mindig jó ötlet, ha néhány stílust hozzáfűznének ahhoz, hogy konzisztensek maradjanak.
Íme néhány olyan CSS stílus, amelyet mindig az én iframe-jem tartalmaz:
- margin: 0;
- párnázottság: 0;
- határ: nincs;
- szélesség: érték ;
- magasság: érték ;
A szélesség és a magasság beállítása a dokumentumomhoz illő mérethez igazítva. Itt vannak olyan példák, amelyekben nincs stílus, és csak az alapok stílusa. Amint láthatja, ezek a stílusok többnyire csak eltávolítják az iframe keretét, de biztosítják, hogy minden böngésző megjelenítse az iframe azonos margóival, kitöltésével és méreteivel.
A HTML5 azt javasolja, hogy használja a túlcsordulási tulajdonságot a görgetősávok eltávolításához, de ez nem megbízható. Tehát, ha el szeretné távolítani vagy megváltoztatni a görgetősávokat, akkor az iframe esetében is használnia kell a görgetési attribútumot. A görgetési attribútum használatához add hozzá, mint bármelyik másik attribútumot, majd válasszon egyet három érték közül: igen, nem vagy automatikus. igen azt mondja a böngészőnek, hogy mindig tartalmazza a görgetősávokat, még akkor is, ha nincs rá szükség. nem mondja el, hogy szükség van-e minden görgetősáv eltávolítására, vagy sem.
Az automatikus beállítás az alapértelmezett, és tartalmazza a görgetősávokat, amikor szükséges, és eltávolítja őket, ha nem.
A görgetés tulajdonságának görgetése a következőképpen történik:
scrolling = "nem"
Ez egy iframe.
A HTML5-ben történő görgetés kikapcsolásához a túlcsordulási tulajdonságot kell használni. De ahogy ezekben a példákban látható, mégsem működik megbízhatóan minden böngészőben.
Az alábbiakban hogyan kapcsolja be folyamatosan a görgetést a túlcsordulási tulajdonsággal:
style = "túlcsordulás: scroll;"
Ez egy iframe.
Nem lehet teljesen lekapcsolni a görgetést a túlcsordulási tulajdonsággal.
Sok tervező azt akarja, hogy iframe-eik beilleszkedjenek az oldal hátterébe, hogy az olvasók ne tudják, hogy az iframe-ek még ott vannak. De akkor is hozzá stílusokat, hogy kiállnak. A határok beállítása, hogy az iframe könnyebben megjelenjen, könnyű. A szegélyek stílusának beállításához használja a határoló stílusú tulajdonságot (vagy a kapcsolódó határkeret, határvonal-jobb, határ-bal oldali és határ-alsó tulajdonságok):
iframe {
border-top: # c00 1px pontozott;
határ-jobb: # c00 2px pontozott;
határtalan balra: # c00 2px pontozott;
border-bottom: # c00 4px pontozott;
}
De ne hagyja abba a görgetést és a határokat a stílusokhoz. Számos más CSS-stílust alkalmazhat az iframe-jére. Ez a példa a CSS3 stílusokat használja, hogy az iframe egy árnyékot, lekerekített sarkokat és 20 fokot forgasson.
iframe {
margin-top: 20px;
margin-bottom: 30px;
-moz-határ-sugár: 12px;
-webkit-border-radius: 12px;
határ-sugár: 12px;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
box-shadow: 4px 4px 14px # 000;
-moz-transzformáció: forgatni (20deg);
-webkit-transzformáció: Forgatás (20deg);
-o-transzformáció: Forgatás (20deg);
-MS-transzformáció: forgatni (20deg);
szűrő: ProgAzon: DXImageTransform.Microsoft.BasicImage (forgatóképesség = .2);
}
Az Iframe tartalom megrajzolása
Az iframe tartalmának megrajzolása ugyanúgy mint bármely más weboldal megfogalmazása. De az oldal szerkesztéséhez hozzáféréssel kell rendelkeznie . Ha nem tudja szerkeszteni az oldalt (például egy másik webhelyen van).
Ha szerkesztheti az oldalt, akkor a dokumentumban közvetlenül hozzáilleszthet egy külső stíluslapot vagy stílusokat , ahogyan a webhelyén lévő bármely más weboldalt is megformálhatja.