Jak stylovat IFrames pomocí CSS

Porozumění tomu, jak fungují IFrames při tvorbě webových stránek

Při vkládání prvku do kódu HTML máte dvě příležitosti přidávat do něj styly CSS :

Použití CSS pro stylování prvku IFRAME

První věc, kterou byste měli zvážit při stylování vašich rámců iframe, je samotný IFRAME. Zatímco většina prohlížečů obsahuje prvky iframe bez mnoha dalších stylů, je stále vhodné přidat některé styly, aby byly konzistentní.

Zde jsou některé styly CSS, které vždy obsahuji na rámcích iframe:

S šířkou a výškou nastavenou na velikost, která odpovídá mému dokumentu. Zde jsou příklady rámce bez stylů a jeden se základy jen stylizované. Jak můžete vidět, tyto styly převážně odstraní okraj kolem prvku iframe, ale také zajistí, aby všechny prohlížeče zobrazovaly, zda mají rámy se stejnými okraji, polstrováním a rozměry.

HTML5 doporučuje použít funkci přetečení k odstranění posuvných prvků, ale to není spolehlivé. Pokud tedy chcete odstranit nebo změnit posuvníky, měli byste také použít atribut pro rolování v rámci iframe. Chcete-li použít atribut pro posun, přidejte jej jako každý jiný atribut a vyberte jednu ze tří hodnot: ano, ne nebo auto. ano, řekne prohlížeči vždy, aby obsahoval posuvníky, i když nejsou potřebné. žádná řeč odstraní všechny posuvníky, zda je potřeba nebo ne.

auto je výchozí a obsahuje posuvníky, když jsou potřebné, a odstraní je, když nejsou.

Zde je postup vypnutí rolování pomocí atributu rolování:

scrolling = "no" >
Jedná se o iframe.

Chcete-li vypnout posun v HTML5, použijete vlastnost přetečení. Ale jak vidíte v těchto příkladech , nefunguje spolehlivě ve všech prohlížečích.

Zde je návod, jak byste se stále pohybovali s vlastností přetečení:

style = "overflow: scroll;"
Jedná se o iframe.

Neexistuje žádný způsob, jak úplně vypnout posun s vlastností přetečení.

Mnoho návrhářů si přeje, aby se jejich iframy spojily s pozadím stránky, na které se nacházejí, aby čtenáři nevěděli, že jsou i iframy. Ale můžete také přidat styly, které jim vyniknou. Nastavení okrajů tak, aby se lišta rychleji objevila, je snadná. Použijte vlastnost hraničního stylu (nebo její příbuzná hranice, okrajová pravá, levostranná a dolní hraniční vlastnost) pro stylování okrajů:

iframe {
okraj: # c00 1px bodkovaný;
border-right: # c00 2px bodkované;
border-left: # c00 2px bodkované;
border-bottom: # c00 4px bodkovaný;
}}

Ale neměli byste přestat s rolováním a hranicemi pro vaše styly. Můžete použít mnoho dalších stylů CSS do rámce iframe. Tento příklad používá styly CSS3, které dávají iframe stín, zaoblené rohy a otáčí je o 20 stupňů.

iframe {
okraj: 20px;
margin-bottom: 30px;

-moz-okraj-poloměr: 12px;
-webkit-okraj-poloměr: 12px;
okraj okraje: 12 pixelů;

-moz-box-stín: 4px 4px 14px # 000;
-webkit-box-stín: 4px 4px 14px # 000;
box-stín: 4px 4px 14px # 000;

-moz-transform: otočit (20deg);
-webkit-transform: otočení (20deg);
-o-transformace: otočit (20deg);
-ms-transform: otočení (20deg);
filtr: progid: DXImageTransform.Microsoft.BasicImage (rotace = .2);
}}

Styling obsahu iframe

Styling obsahu rámce iframe je stejně jako styling jakékoli jiné webové stránky. Musíte však mít přístup k úpravě stránky . Pokud nemůžete stránku upravit (například na jiném webu).

Pokud můžete stránku upravit, můžete do dokumentu přidat vnější styl stylů nebo stylů, stejně jako byste si na své webové stránky přizpůsobili jakoukoli jinou webovou stránku.