Amikor beágyaz egy elemet a HTML, két lehetőséged van CSS stílusok hozzáadására:
- Stílusozhatja a
IFRAME
maga. - Stílusozhatja az oldalt a
IFRAME
(bizonyos feltételek mellett).
A CSS használata az IFRAME elem stílusához
Az első dolog, amit figyelembe kell vennie az iframe-ek kialakításakor, az a.
IFRAME
- maga. Míg a legtöbb böngésző sok ifi stílussal nem rendelkező iframe-et tartalmaz, mégis jó ötlet hozzáadni néhány stílust az egységességük érdekében. Íme néhány CSS stílus, melyeket mindig tartalmazunk iframe-ek:
margó: 0;
párnázás: 0;
határ: nincs;
szélesség: érték;
magasság: érték;
A... val.
szélesség
és.
magasság
állítsa be a dokumentumba illő méretre. Íme néhány példa egy keretre, amely nem tartalmaz stílusokat, és olyanra, amely csak az alapokat formázza. Amint láthatja, ezek a stílusok többnyire csak eltávolítják az iframe körüli szegélyt, de azt is biztosítják, hogy minden böngésző ugyanazon margókkal, kitöltéssel és dimenziókkal jelenítse meg ezt az iframe-et.HTML5 javasolja, hogy használja a.
túlcsordulás
tulajdonságot a görgetősávok eltávolításához a görgető mező, de ez nem megbízható. Tehát, ha el akarja távolítani vagy megváltoztatni a gördítősávokat, használja a.
görgetés
attribútumot az iframe-en is. A.
görgetés
attribútumot, adja hozzá, mint bármely más attribútumot, majd válassza a három érték egyikét:
Igen
,
nem
, vagy.
auto
.
Igen
azt mondja a böngészőnek, hogy mindig tartalmazzon görgetősávokat, még akkor is, ha nincs szükség rájuk.
nem
azt mondja, hogy távolítsa el az összes gördítősávot, ha szükséges vagy sem.
auto
az alapértelmezett, és magában foglalja a görgetősávokat, amikor szükség van rájuk, és eltávolítja azokat, amikor nincsenek. Így kapcsolhatja ki a görgetést a.
görgetés
attribútum: scrolling = "nem">
Ez egy iframe.
A HTML5-ben történő görgetés kikapcsolásához állítólag a.
túlcsordulás
ingatlan. De amint láthatja ezekből a példákból, még nem működik megbízhatóan az összes böngészőben. Így kapcsolhatja be a folytonos görgetést a.
túlcsordulás
tulajdonság: style = "overflow: scroll;">
Ez egy iframe.
Van semmiképpen hogy teljesen kikapcsolja a görgetést a.
túlcsordulás
ingatlan. Sok tervező azt szeretné, ha az iframe-ek beolvadnának az oldal hátterébe, ahol vannak, hogy az olvasók ne tudják, hogy az iframe-ek még ott is vannak. De stílusokat is felvehet, hogy kiemelkedjenek. A határok beállítása úgy, hogy az iframe könnyebben megjelenjen, könnyű. Csak használja a.
határ
stílusú tulajdonság (vagy ez összefügg.
border-top
,
határ-jobb
,
határ-bal
, és.
határfenék
tulajdonságok) a határok stílusához: iframe {
border-top: # c00 1px pontozott;
jobb-jobb: # c00 2px pontozott;
határ-bal: # c00 2px pontozott;
alsó-alsó: # c00 4px pontozott;
}
De nem szabad abbahagynia a stílusok görgetését és szegélyeit. Sok más CSS stílust alkalmazhat az iframe-jére. Ez a példa CSS3 stílusokat használ az iframe árnyékának, lekerekített sarkainak és 20 fokkal elforgatásának.
iframe {
margin-top: 20px;
margin-bottom: 30px;
-moz-határ-sugár: 12px;
-webkit-border-radius: 12px;
határsugár: 12 képpont;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
box-shadow: 4px 4px 14px # 000;
-moz-transzformáció: forgatás (20deg);
-webkit-transzformáció: forgatás (20deg);
-o-transzformáció: forgatás (20deg);
-ms-transzformáció: forgatás (20deg);
szűrő: progid: DXImageTransform. Microsoft. BasicImage (forgatás = .2);
}
Az Iframe tartalmának stílusa
Az iframe tartalmának megtervezése ugyanolyan, mint bármely más weboldal stílusa. De te hozzáféréssel kell rendelkeznie az oldal szerkesztéséhez. Ha nem tudja szerkeszteni az oldalt (például egy másik webhelyen van).
Ha szerkesztheti az oldalt, akkor hozzáadhat egy külső stíluslapot vagy stílusokat közvetlenül a dokumentumba, ugyanúgy, mint a webhely bármely más weboldalát.