Hogyan stílusos IFrames CSS-sel

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 a

  IFRAME maga.

• Beállíthatja az oldalt a

  IFRAME (bizonyos feltételek mellett).

A CSS segítségével stílus az IFRAME elem

Az első dolog, amit figyelembe kell venned az iframes stílus kialakításakor

IFRAME

• maga. 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 … val

szélesség

és

magasság

a dokumentumomhoz illeszkedő méretre állí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.HTML5 azt ajánlja, hogy használja a

túlcsordulás

tulajdonságot a görgetősávok eltávolítására, de ez nem megbízható. Tehát ha le szeretné távolítani vagy megváltoztatni a görgetősávokat, akkor használja a

görgetés

attribútum az iframe-en is. A

görgetés

attribútumot, add hozzá, mint bármelyik másik attribútumot, majd válasszon egyet az alábbi három érték közül:

Igen

,

nem

, vagy

kocsi

Igen

a böngészőnek mindig tartalmaznia kell a görgetősávokat, még akkor is, ha nincs rá szükség.

nem

azt mondja, hogy eltávolít minden görgetősávot, akár szükséges, akár nem.

kocsi

az alapértelmezett, és tartalmazza a görgetősávokat, amikor szükség van rá, és eltávolítja őket, ha nem. Így fordulhat le a görgetéssel a

görgetésattribútum: scrolling = "no">
Ez egy iframe.

A HTML5-ben történő görgetés kikapcsolásához a

túlcsordulás

ingatlan. De ahogy ezekben a példákban látható, mégsem működik megbízhatóan minden böngészőben. Íme, hogyan kapcsolja be folyamatosan a görgetést a

túlcsordulástulajdonság: style = "túlcsordulás: scroll;">
Ez egy iframe.

Van semmiképpen a görgetés teljesen kikapcsolása a gombbal

túlcsordulás

ingatlan. 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ű. Csak használja a

határ

(vagy ehhez kapcsolódik)

border-top

,

border-jobbra

,

border-left

, és

border-bottomproperties) a szegélyek stílusához: 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 te vagy hozzáférhet az oldal szerkesztéséhez . 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.