Pochopenie toho, ako fungujú IFrames pri tvorbe webových stránok
Pri vkladaní prvku do kódu HTML máte dve príležitosti na pridanie štýlov CSS :
- Štýl IFRAME môžete sám upraviť.
- Stránku vo vnútri IFRAME môžete upraviť (za určitých podmienok).
Použitie CSS na štýl elementu IFRAME
Prvá vec, ktorú by ste mali zvážiť pri štýle vašich iframe, je samotný IFRAME. Zatiaľ čo väčšina prehliadačov obsahuje rámce iframe bez mnohých ďalších štýlov, je stále dobré pridať niektoré štýly, aby boli konzistentné.
Tu sú niektoré štýly CSS, ktoré vždy obsahujem na mojich rámcoch iframe:
- rozpätie: 0;
- polstrovanie: 0;
- hranica: žiadna;
- šírka: hodnota ;
- výška: hodnota ;
So šírkou a výškou nastavenou na veľkosť, ktorá sa hodí do môjho dokumentu. Tu sú príklady rámca bez štýlov a jeden so základmi štylizovaných. Ako vidíte, tieto štýly väčšinou len odstráni okraj okolo rámčeka iframe, ale tiež zabezpečia, aby všetky prehliadače zobrazovali, či sú rámčeky s rovnakými okrajmi, polstrovaním a rozmermi.
HTML5 odporúča, aby ste použili vlastnosť pretečenia na odstránenie posuvných pruhov, ale to nie je spoľahlivé. Ak chcete odstrániť alebo zmeniť posúvacie pruhy, mali by ste tiež použiť atribút posúvania na čipe iframe. Ak chcete použiť atribút rolovania, pridajte ho ako akýkoľvek iný atribút a potom zvoľte jednu z troch hodnôt: áno, nie alebo auto. áno, hovorí, že prehliadač vždy obsahuje posuvníky, aj keď nie sú potrebné. žiadny hovor odstráni všetky posuvné lišty, či sú alebo nie sú potrebné.
auto je predvolené a obsahuje posuvné lišty, keď sú potrebné, a odstráni ich, keď nie sú.
Tu je postup vypnutia posúvania pomocou atribútu rolovania:
rolovanie = "nie" >
Toto je iframe.
Ak chcete vypnúť posúvanie v jazyku HTML5, mali by ste používať vlastnosť pretečenia. Ale ako vidíte v týchto príkladoch , zatiaľ nefunguje spoľahlivo vo všetkých prehliadačoch.
Tu je návod, ako by ste mali vždy prechádzať s vlastnosťou pretečenia:
style = "overflow: scroll;" >
Toto je iframe.
Neexistuje žiadny spôsob, ako úplne vypnúť posúvanie s vlastnosťou pretečenia.
Mnohí dizajnéri chcú, aby sa ich iframy spojili s pozadím stránky, na ktorej sa nachádzajú, aby čitatelia nevedeli, či sú rámce iframe dokonca aj tam. Môžete však tiež pridať štýly, aby ste vynikli. Nastavenie okrajov tak, aby sa lišta zobrazila ľahšie, je jednoduchá. Stačí použiť vlastnosť hraničného štýlu (alebo súvisí s hraničným okrajom, pravou hranicou, ľavou hranicou a vlastnosťami na okraji spodnej hranice) na štýl ohraničenia:
iframe {
okraj: # c00 1px bodkovaný;
border-right: # c00 2px bodkované;
border-left: # c00 2px bodkované;
border-bottom: # c00 4px bodkované;
}
Ale nemali by ste prestať s rolovaním a hranicami pre vaše štýly. Môžete aplikovať veľa ďalších štýlov CSS na vašom iframe. Tento príklad používa štýly CSS3 na to, aby daný rám vložil tieň, zaoblené rohy a otočil ho o 20 stupňov.
iframe {
margin-top: 20px;
margin-bottom: 30px;
-moz-okraj-polomer: 12px;
-webkit-border-radius: 12px;
polomer okrajov: 12 pixlov;
-moz-box-tieň: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
box-tieň: 4px 4px 14px # 000;
-moz-transformácie: otočenie (20deg);
-webkit-transformácie: otáčania (20deg);
-o-transformácie: otočenie (20deg);
-MS-transformácie: otočenie (20deg);
Filter: ProgID: DXImageTransform.Microsoft.BasicImage (rotácia = 0,2);
}
Štýlovanie obsahu rámčeka iframe
Vytváranie obsahu rámčeka iframe je rovnako ako styling každej inej webovej stránky. Musíte však mať prístup k úprave stránky . Ak nemôžete upraviť stránku (napríklad je to na inej stránke).
Ak môžete stránku upraviť, môžete pridať externý štýl štýlov alebo štýlov priamo do dokumentu rovnako, ako by ste navrhovali akúkoľvek inú webovú stránku na vašom webe.