Když vložíte prvek do svého HTML, máte dvě příležitosti přidat styly CSS:
- Můžete stylovat
IFRAME
sám. - Stránku můžete stylovat uvnitř
IFRAME
(za určitých podmínek).
Styling prvku IFRAME pomocí CSS
První věcí, kterou byste při stylování prvků iframe měli vzít v úvahu, je.
IFRAME
- sám. Zatímco většina prohlížečů obsahuje prvky iframe bez mnoha zvláštních stylů, je stále dobré přidat některé styly, aby byly konzistentní. Zde jsou některé styly CSS, které vždy zahrneme iframe:
okraj: 0;
výplň: 0;
ohraničení: žádné;
šířka: hodnota;
výška: hodnota;
S.
šířka
a.
výška
nastavena na velikost, která odpovídá mému dokumentu. Zde jsou příklady rámečku bez stylů a rámečku, který má pouze základní styl. Jak vidíte, tyto styly většinou pouze odstraňují ohraničení kolem iframe, ale také zajišťují, aby všechny prohlížeče zobrazovaly tento iframe se stejnými okraji, polstrováním a rozměry.HTML5 doporučuje použít.
přetékat
vlastnost k odstranění posuvníků v rámci a rolovací pole, ale to není spolehlivé. Pokud tedy chcete odstranit nebo změnit posuvníky, měli byste použít.
rolování
atribut i na vašem iframe. Chcete-li použít.
rolování
přidejte jako každý jiný atribut a poté vyberte jednu ze tří hodnot:
Ano
,
Ne
nebo
auto
.
Ano
řekne prohlížeči, aby vždy zahrnoval posuvníky, i když nejsou potřeba.
Ne
říká, že je třeba odstranit všechny posuvníky, ať už je to nutné nebo ne.
auto
je výchozí a zahrnuje posuvníky, když jsou potřeba, a odstraní je, pokud nejsou. Zde je způsob, jak vypnout posouvání pomocí.
rolování
atribut: rolování = "ne">
Toto je iframe.
Chcete-li vypnout posouvání v HTML5, měli byste použít.
přetékat
vlastnictví. Ale jak vidíte v těchto příkladech, zatím to spolehlivě nefunguje ve všech prohlížečích. Zde je návod, jak byste zapnuli rolování po celou dobu pomocí.
přetékat
property: style = "overflow: scroll;">
Toto je iframe.
Tady je v žádném případě úplně vypnout rolování pomocí.
přetékat
vlastnictví. Mnoho návrhářů chce, aby jejich prvky iframe splývaly s pozadím stránky, na které se nacházejí, aby čtenáři nevěděli, že prvky iframe tam jsou. Můžete však také přidat styly, aby vynikly. Úprava okrajů tak, aby se iframe zobrazoval snadněji, je snadná. Stačí použít.
okraj
vlastnost stylu (nebo to souvisí.
nahoře
,
pravý okraj
,
levý okraj
, a.
spodní okraj
vlastnosti) pro styl ohraničení: iframe {
border-top: # c00 1px tečkovaný;
border-right: # c00 2px tečkovaný;
levý okraj: # c00 2px tečkovaný;
spodní okraj: # c00 4px tečkovaný;
}
Ale neměli byste přestat s posouváním a ohraničením svých stylů. Na svůj iframe můžete použít spoustu dalších stylů CSS. Tento příklad používá styly CSS3 k tomu, aby dal iframe stín, zaoblené rohy a otočil jej o 20 stupňů.
iframe {
horní okraj: 20px;
spodní okraj: 30px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
poloměr ohraničení: 12px;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
stín boxu: 4px 4px 14px # 000;
-moz-transformace: rotace (20deg);
-webkit-transformace: rotace (20deg);
-o-transformace: otočit (20deg);
-ms-transformace: otočit (20deg);
filtr: progid: DXImageTransform. Microsoft. BasicImage (rotace = .2);
}
Styling obsahu iframe
Styling obsahu iframe je stejně jako styling jakékoli jiné webové stránky. Ale ty musí mít přístup k úpravě stránky. Pokud nemůžete stránku upravit (například je na jiném webu).
Pokud můžete stránku upravit, můžete přímo v dokumentu přidat externí šablonu stylů nebo styly, jako byste stylovali jakoukoli jinou webovou stránku na vašem webu.