Ako štýl IFrames s CSS

Keď vložíte prvok do súboru HTML, máte dve príležitosti pridať k nim štýly CSS:

  • Môžete štýl
    IFRAME
    sám.
  • Stránku môžete štýlovať vo vnútri stránky
    IFRAME
    (za určitých podmienok).

Štýl prvku IFRAME pomocou CSS

Dvaja muži kódujúci na počítačoch
vgajic / Getty Images

Prvá vec, ktorú by ste mali brať do úvahy pri vytváraní štýlu prvkov iframe, je.

IFRAME
  • sám. Aj keď väčšina prehľadávačov obsahuje prvky iframe bez množstva ďalších štýlov, stále je dobré pridať niektoré štýly, aby boli konzistentné. Tu uvádzame niekoľko štýlov CSS, ktoré vždy zahrnieme iframe:
    okraj: 0;
  • výplň: 0;
  • hranica: žiadna;
  • šírka: hodnotu;
  • výška: hodnotu;

Vďaka.

šírka

a.

výška

nastavená na veľkosť, ktorá sa zmestí do môjho dokumentu. Tu sú príklady rámčeka bez štýlov a rámčeka, ktorý má iba základné štýly. Ako vidíte, tieto štýly väčšinou iba odstránia orámovanie rámca iframe, ale tiež zabezpečujú, aby všetky prehliadače zobrazovali tento prvok iframe s rovnakými okrajmi, výplňou a rozmermi.HTML5 odporúča používať.

prepad

vlastnosť na odstránenie posuvníkov v rámci a

instagram viewer
rolovacie pole, ale to nie je spoľahlivé. Takže ak chcete odstrániť alebo zmeniť posuvníky, mali by ste použiť.

rolovanie

atribút aj na vašom iframe. Ak chcete použiť.

rolovanie

atribút, pridajte ho ako každý iný atribút a potom vyberte jednu z troch hodnôt:

Áno

,

č

alebo

auto

.

Áno

hovorí prehľadávaču, aby vždy zahŕňal posuvné pruhy, aj keď ich nie je potrebné.

č

hovorí, že je potrebné odstrániť všetky posuvníky, či už sú potrebné alebo nie.

auto

je predvolené a obsahuje posuvné lišty, ak sú potrebné, a odstráni ich, ak nie sú potrebné. Tu je postup, ako vypnúť posúvanie pomocou.

rolovanie
atribút: rolovanie = "nie">
Toto je iframe.

Na vypnutie posúvania v HTML5 by ste mali používať.

prepad

nehnuteľnosť. Ako však môžete vidieť v týchto príkladoch, zatiaľ to nefunguje spoľahlivo vo všetkých prehľadávačoch. Tu je príklad, ako by ste zapli neustále rolovanie pomocou.

prepad
property: style = "overflow: scroll;">
Toto je iframe.

Existuje v žiadnom prípade úplne vypnúť posúvanie pomocou.

prepad

nehnuteľnosť. Mnoho návrhárov chce, aby ich rámce iframe splývali s pozadím stránky, na ktorej sa nachádzajú, aby čitatelia nevedeli, že rámce iframe vôbec existujú. Môžete však tiež pridať štýly, aby vynikli. Úprava okrajov tak, aby sa iframe ľahšie zobrazovala, je jednoduchá. Stačí použiť.

hranica

vlastnosť štýlu (alebo to súvisí.

border-top

,

hraničná-pravá

,

hranica-ľavá

a

hraničné dno
vlastnosti) na úpravu hraníc: iframe {
horný okraj: # c00 1px bodkované;
border-right: # c00 2px bodkované;
ľavé orámovanie: # c00 2px bodkované;
spodný okraj: # c00 4px bodkované;
}

Nemali by ste však prestať s posúvaním a ohraničením svojich štýlov. Na svoj iframe môžete použiť množstvo ďalších štýlov CSS. Tento príklad používa štýly CSS3 na to, aby dal prvku iframe tieň, zaoblené rohy a otočil ho o 20 stupňov.

iframe {
horný okraj: 20px;
spodný okraj: 30px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
polomer ohraničenia: 12px;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
tieň boxu: 4px 4px 14px # 000;
-moz-transformácia: rotácia (20 stupňov);
-webkit-transformácia: otočenie (20deg);
-o-transformácia: rotácia (20 stupňov);
-ms-transformácia: otočenie (20deg);
filter: progid: DXImageTransform. Microsoft. BasicImage (rotácia = .2);
}

Styling obsahu iframe

Styling obsahu prvku iframe je rovnako ako styling akejkoľvek inej webovej stránky. Ale ty Musíte mať prístup na úpravu stránky. Ak nemôžete stránku upraviť (napríklad je na inom webe).

Ak môžete stránku upraviť, môžete priamo v dokumente pridať externú šablónu štýlov alebo štýly rovnako, ako by ste štýlovali akúkoľvek inú webovú stránku na svojom webe.