Ko v svoj element vdelate element HTML, imate dve priložnosti, da mu dodate sloge CSS:
- Lahko slog
IFRAME
sama. - Stran lahko oblikujete znotraj
IFRAME
(pod določenimi pogoji).
Uporaba CSS za oblikovanje elementa IFRAME
Prva stvar, ki jo morate upoštevati pri oblikovanju okvirjev, je.
IFRAME
- sama. Medtem ko večina brskalnikov vključuje vstavljene okvire brez veliko dodatnih slogov, je vseeno dobro dodati nekaj stilov, da ostanejo dosledni. Tukaj je nekaj stilov CSS, ki jih vedno vključimo iframe:
marža: 0;
oblazinjenje: 0;
meja: nobena;
premer: vrednost;
višina: vrednost;
Z.
premer
in.
višina
nastavite na velikost, ki ustreza mojemu dokumentu. Tu so primeri okvirja brez slogov in tistega, ki ima samo osnove. Kot lahko vidite, ti slogi večinoma samo odstranijo obrobo okoli okvira iframe, hkrati pa zagotavljajo, da vsi brskalniki prikazujejo okvir iframe z enakimi robovi, oblazinjenjem in dimenzijami.HTML5 priporoča, da uporabite.
prelivanje
za odstranjevanje drsnih trakov znotraj
drsno polje, vendar to ni zanesljivo. Torej, če želite odstraniti ali spremeniti drsne trakove, uporabite.pomikanje
atribut tudi na vašem iframeju. Za uporabo.
pomikanje
atribut, ga dodajte kot kateri koli drug atribut in nato izberite eno od treh vrednosti:
ja
,
št
, ali.
samodejno
.
ja
brskalniku pove, da vedno vključuje drsne trakove, tudi če niso potrebni.
št
pravi, da odstranite vse drsnike, če je to potrebno ali ne.
samodejno
je privzeta in vključuje drsne trakove, kadar so potrebni, in jih odstrani, kadar niso. Tukaj je opisano, kako izklopite drsenje z.
pomikanje
atribut: pomikanje = "ne">
To je okvir.
Za izklop drsenja v HTML5 naj bi uporabili.
prelivanje
lastnine. A kot lahko vidite v teh primerih, še ne deluje zanesljivo v vseh brskalnikih. Evo, kako bi ves čas vklopili drsenje z.
prelivanje
lastnost: style = "overflow: scroll;">
To je okvir.
Tukaj je ni šans da popolnoma izklopite drsenje s tipko.
prelivanje
lastnine. Številni oblikovalci želijo, da se njihovi vstavljeni okviri zlijejo z ozadjem strani, na kateri so, tako da bralci ne vedo, ali so vstavljeni vstavki sploh. Lahko pa dodate tudi sloge, da bodo izstopali. Enostavno je prilagoditi obrobe, da se okvir iframe prikaže lažje. Samo uporabite.
meja
lastnost sloga (ali je povezana.
border-top
,
meja-desno
,
meja-levo
, in.
meja-dno
lastnosti) za oblikovanje robov: iframe {
border-top: # c00 1px pikčasto;
meja-desno: # c00 2px pikčasto;
obroba-levo: # c00 2px pikčasto;
border-bottom: # c00 4px pikčasto;
}
Ampak ne smete se ustaviti z drsenjem in obrobami za vaše sloge. Za svoj iframe lahko uporabite veliko drugih stilov CSS. Ta primer s slogi CSS3 daje okvirju iframe senco, zaobljene vogale in ga zasuka za 20 stopinj.
iframe {
margin-top: 20px;
margin-bottom: 30 slikovnih pik;
-moz-polmer-meje: 12 slikovnih pik;
-spletni-polmer-meje: 12 slikovnih pik;
polmer obrobe: 12 slikovnih pik;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
box-shadow: 4px 4px 14px # 000;
-moz-preobrazba: zasukaj (20deg);
-webkit-transform: zasukaj (20deg);
-o-preoblikovanje: vrtenje (20deg);
-ms-transformiraj: zasukaj (20deg);
filter: progid: DXImageTransform. Microsoft. BasicImage (rotacija = .2);
}
Oblikovanje vsebine okvirja
Oblikovanje vsebine iframeja je tako kot oblikovanje katere koli druge spletne strani. Ampak ti mora imeti dostop za urejanje strani. Če strani ne morete urediti (na primer na drugi strani).
Če lahko uredite stran, lahko dodate zunanji slog ali sloge kar v dokument, tako kot bi oblikovali katero koli drugo spletno stran na svojem spletnem mestu.