Razumevanje, kako IFrames dela pri oblikovanju spletnih strani
Ko vstavite element v svoj HTML , imate dve možnosti, da dodate sloge CSS :
- Sami lahko oblikujete IFRAME.
- Stran lahko oblikujete znotraj programa IFRAME (pod določenimi pogoji).
Uporaba CSS za oblikovanje elementa IFRAME
Prva stvar, ki jo morate upoštevati pri oblikovanju vaših iframov, je IFRAME sama. Medtem ko večina brskalnikov vključuje iframes brez veliko dodatnih stilov, je še vedno dobra ideja, da dodate nekaj slogov, da jih ohranite dosledno.
Tukaj je nekaj stilov CSS, ki jih vedno vključim v moje iframe:
- marža: 0;
- oblazinjenje: 0;
- meja: nič;
- širina: vrednost ;
- višina: vrednost ;
S širino in višino nastavite na velikost, ki ustreza mojemu dokumentu. Tukaj so primeri okvirja brez slogov in eden s samo osnovami. Kot lahko vidite, ti slogi večinoma samo odstranijo rob okrog okvirja, temveč tudi zagotovijo, da vsi brskalniki prikazujejo, če je tok z istimi robovi, oblazinjenjem in dimenzijami.
HTML5 priporoča, da uporabite lastnost prelivanja, da odstranite drsne palice, vendar to ni zanesljivo. Torej, če želite odstraniti ali spremeniti drsne vrstice, uporabite tudi drsni atribut tudi v vašem iframeju. Če želite uporabiti atribut drsenja, ga dodajte kot katerikoli drug atribut in izberite eno od treh vrednosti: da, ne ali samodejno. Da pove brskalniku, da vedno vsebuje drsne trakove, tudi če niso potrebni. ne pravi, da bi odstranili vse drsne trakove, ne glede na to, ali so potrebni ali ne.
avto je privzeto in vključuje drsne palice, kadar so potrebni, in jih odstranijo, ko niso.
Tukaj je, kako izklopite pomikanje z atributom drsenja:
pomikanje = "ne" >
To je iframe.
Če želite izklopiti drsenje v HTML5, morate uporabiti lastnost prelivanja. Toda, kot si lahko ogledate v teh primerih, še vedno ne deluje zanesljivo v vseh brskalnikih.
Evo, kako bi ves čas vklopili drsenje s lastnostjo prelivanja:
style = "overflow: pomikanje;" >
To je iframe.
Ni mogoče popolnoma izključiti pomikanja s funkcijo prelivanja.
Mnogi oblikovalci želijo, da se njihovi okvirji zmešajo v ozadju strani, na kateri so, tako da bralci ne vedo, ali so celoframe celo tam. Prav tako lahko dodate sloge, da bi jih izstopali. Prilagajanje mej, tako da je okvirček bolj enostaven, je preprost. Uporabite samo lastnost mejnega sloga (ali njegove povezane mejne, mejne-desne, mejne-leve in mejne vrednosti), da oblikujete robove:
iframe {
border-top: # c00 1px dotted;
border-right: # c00 2px dotted;
border-left: # c00 2px dotted;
border-bottom: # c00 4px dotted;
}
Vendar se ne bi smeli ustavljati s pomikanjem in mejami za svoje sloge. V svoj okvir lahko uporabite veliko drugih stilov CSS. Ta primer uporablja sloge CSS3, da bi iframe postal senca, zaobljeni koti in jo zavrteli za 20 stopinj.
iframe {
margin-top: 20px;
margin-bottom: 30px;
-moz-meja-polmer: 12px;
-webkit-border-radius: 12px;
meja-polmer: 12px;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
box-shadow: 4px 4px 14px # 000;
-moz-transform: vrtite (20deg);
-webkit-transform: rotiraj (20deg);
-o-transform: vrtite (20deg);
-ms-transformacija: rotiraj (20deg);
filter: progid: DXImageTransform.Microsoft.BasicImage (rotacija = .2);
}
Oblikovanje vsebine Iframe
Styling vsebine iframe je prav tako kot styling katero koli drugo spletno stran. Vendar morate imeti dostop do urejanja strani . Če strani ne morete urejati (na primer, je na drugem spletnem mestu).
Če lahko uredite stran, lahko v dokumentu dodate zunanji slogovni slog ali sloge prav tako, kot bi slogali katero koli drugo spletno stran na vašem spletnem mestu.