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
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
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.