Nifhmu kif IFrames jaħdem fid-disinn ta 'websajt
Meta tinkorpora element fl- HTML tiegħek, għandek żewġ opportunitajiet biex żżid stili CSS miegħu:
- Tista 'stil l-IFRAME innifsu.
- Tista 'tpinġi l-paġna ġewwa l-IFRAME (taħt ċerti kondizzjonijiet).
Bl-użu ta 'CSS biex Style l-Element IFRAME
L-ewwel ħaġa li għandek tikkonsidra meta grafika l-iframes tiegħek hija l-IFRAME innifsu. Filwaqt li bosta browsers jinkludu iframes mingħajr ħafna stili żejda, għadu idea tajba li żżid xi stili biex iżżommhom konsistenti.
Hawn huma xi stili CSS I dejjem jinkludu fuq l-iframes tiegħi:
- marġni: 0;
- padding: 0;
- fruntiera: ħadd;
- wisa ': valur ;
- għoli: il- valur ;
Bil-wisa 'u l-għoli stabbiliti għad-daqs li joqgħod fid-dokument tiegħi. Hawn huma eżempji ta 'frejm mingħajr stili u waħda biss bl-elementi bażiċi stiljati. Kif tistgħu taraw, dawn l-istili l-aktar sempliċement ineħħu l-fruntiera madwar l-iframe, iżda jiżguraw ukoll li l-browsers kollha juru li iframe bl-istess marġini, ikkuttunar u dimensjonijiet.
HTML5 jirrakkomanda li tuża l-proprjetà ta 'overflow biex tneħħi l-vireg tal-iscroll, iżda li mhix affidabbli. Mela jekk trid tneħħi jew tibdel il-vireg tal-iscroll, għandek tuża l-attribut ta 'scrolling fuq l-iframe tiegħek ukoll. Biex tuża l-attribut ta 'scrolling, żidha bħal kull attribut ieħor u mbagħad tagħżel waħda mit-tliet valuri: iva, le, jew awto. iva jgħidlekx lill-browser biex dejjem jinkludi bars ta 'l-iscroll anke jekk ma jkunux meħtieġa. l-ebda jgħid li tneħħi l-vireg tal-iscroll kemm jekk ikunu meħtieġa kif ukoll jekk le.
auto hija l-inadempjenza u tinkludi l-vireg tal-iscroll meta huma meħtieġa u tneħħihom meta ma jkunux.
Hawnhekk tidher kif tista 'titfi l-iscroll bil-attribut ta' scrolling:
scrolling = "le" >
Dan huwa iframe.
Biex itfi l-scrolling f'HTML5 suppost għandek tuża l-proprjetà ta 'overflow. Imma kif tista 'tara f'dawn l-eżempji din ma taħdimx b'mod affidabbli fil-browsers kollha s'issa.
Ara kif tista 'tinxtegħel il-ħin kollu mal-proprjetà ta' overflow:
stil = "overflow: scroll;" >
Dan huwa iframe.
M'hemm l- ebda mod biex itfi l-scrolling kompletament mal-proprjetà overflow.
Bosta disinjaturi jridu li l-iframes tagħhom jingħaqdu ma 'l-isfond tal-paġna li huma fuq hekk li l-qarrejja ma jafux li l-iframes huma saħansitra hemm. Imma tista 'wkoll iżżid stili biex tagħmilhom jispikkaw. L-aġġustament tal-fruntieri sabiex l-iframe juri b'mod aktar faċli huwa faċli. Sempliċement tuża l-proprjetà tal-istil tal-fruntiera (jew il-proprjetajiet relatati tal-fruntiera, tal-fruntiera, tal-fruntiera tax-xellug u tal-qiegħ) biex tfassal il-fruntieri:
iframe {
top tal-fruntiera: # c00 1px bit-tikek;
dritt tal-fruntiera: # c00 2px bit-tikek;
xellug fuq il-fruntiera: # c00 2px bit-tikek;
qiegħ tal-qiegħ: # c00 4px bit-tikek;
}
Imma m'għandekx tieqaf bil-iscroll u l-fruntieri għall-istili tiegħek. Tista 'tapplika ħafna stili CSS oħra għall-iframe tiegħek. Dan l-eżempju juża stili CSS3 biex jagħti lill-iframe shadow, kantunieri ttundjati, u dawwarha 20 grad.
iframe {
margin-top: 20px;
qiegħ tal-marġni: 30px;
-moz-border-radium: 12px;
-webkit-border-radium: 12px;
raġġ tal-fruntiera: 12px;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
kaxxa-dell: 4px 4px 14px # 000;
-moz-transform: dawwar (20deg);
-webkit-transform: dawwar (20deg);
-o-transform: dawwar (20deg);
-ms-trasformat: dawwar (20deg);
filtru: progid: DXImageTransform.Microsoft.BasicImage (rotazzjoni = .2);
}
Stiljar tal-Kontenut ta 'l-Iframe
L-istil tal-kontenut ta 'iframe huwa bħad-grafika ta' kwalunkwe paġna web oħra. Imma, irid ikollok aċċess biex teditja l-paġna . Jekk ma tistax torganizza l-paġna (per eżempju, fuq sit ieħor).
Jekk tista 'teditja l-paġna, allura tista' żżid folja stil esterna jew stili dritt fid-dokument bħad inti tkun stil kwalunkwe paġna web oħra fuq is-sit tiegħek.