Unsaon Pag-istilo sa IFrames sa CSS

Ang pagsabut kon giunsa sa pagtrabaho sa IFrames sa disenyo sa website

Sa dihang imong gibutang ang usa ka elemento sa imong HTML , adunay duha ka mga oportunidad sa pagdugang sa estilo sa CSS niini:

Paggamit sa CSS sa Estilo ang IFRAME Element

Ang unang butang nga angay nimong tagdon sa dihang ang estilo sa imong mga iframe mao ang IFRAME mismo. Samtang ang kadaghanan sa mga browser naglakip sa mga iframe nga walay daghan nga mga estilo, kini usa gihapon ka maayong ideya sa pagdugang sa pipila ka mga estilo aron kini mahiangay.

Ania ang pipila ka mga estilo sa CSS nga kanunay nakong iapil sa akong mga iframe:

Uban ang gilapdon ug gitas-on nga gibutang sa gidak-on nga mohaum sa akong dokumento. Ania ang mga pananglitan sa usa ka bayanan nga walay mga estilo ug usa nga adunay mga sumbanan. Sumala sa imong makita, kini nga mga estilo kasagaran lang nga magwagtang sa utlanan palibot sa iframe, apan kini usab nagsiguro nga ang tanan nga mga browser nagpakita nga ang iframe nga adunay parehas nga mga margin, padding, ug mga sukod.

Girekomendar sa HTML5 nga imong gamiton ang overflow property aron makuha ang scroll bar, apan dili kasaligan. Busa kon gusto nimo tangtangon o usbon ang scroll bar, kinahanglan nimo gamiton usab ang scroll attribute sa imong iframe. Aron gamiton ang atribut sa pag-scroll, idugang kini sama sa bisan unsang lain nga hiyas ug unya pagpili sa usa sa tulo ka mga hiyas: oo, dili, o awto. Oo nagsulti sa browser nga kanunay maglakip sa scroll bars bisan kung wala sila gikinahanglan. wala'y nag-ingon nga kuhaon ang tanang mga scroll bar kung gikinahanglan o dili.

Ang awto mao ang default ug naglakip sa mga scroll bar sa diha nga kini gikinahanglan ug magwagtang niini kon sila dili.

Mao kini kung unsaon pagputol sa scroll sa kinaiya sa pag-scroll:

scrolling = "dili" >
Kini usa ka iframe.

Sa pagputol sa pag-scroll sa HTML5 kinahanglang gamiton nimo ang overflow property. Apan sumala sa imong makita niini nga mga panig-ingnan kini wala magamit nga masaligan sa tanang mga browsers.

Ania kung unsaon nimo pag-usab ang pag-scroll sa tanan nga panahon uban sa overflow property:

style = "overflow: scroll;" >
Kini usa ka iframe.

Walay paagi sa pagsalikway sa linukot sa bug-os sa overflow property.

Daghang mga tigdesinyo gusto sa ilang mga iframe nga magsagol sa background sa panid nga ilang gisulat aron ang mga magbabasa dili mahibal-an nga ang mga iframe anaa pa. Apan mahimo ka usab nga makadugang sa mga estilo aron kini makapahayag. Ang pag-adjust sa mga utlanan aron nga ang dugang nga iframe mas daling sayon. Gamita lamang ang estilo sa estilo sa utlanan (o kini may kalabutan sa utlanan-ibabaw, utlanan sa tuo, utlanan-wala, ug mga propiedad nga ubos sa utlanan) sa estilo sa mga utlanan:

iframe {
border-top: # c00 1px dotted;
utlanan sa tuo: # c00 2px tuldok;
utlanan-wala: # c00 2px tuldok;
border-bottom: # c00 4px dotted;
}

Apan ayaw paghunong uban sa pag-scroll ug mga utlanan alang sa imong estilo. Mahimo nimo mapadapat ang daghang lain nga estilo sa CSS sa imong iframe. Kini nga pananglitan naggamit sa mga estilo sa CSS3 aron paghatag sa iframe og usa ka anino, mga rounded nga mga kanto, ug giputol kini nga 20 degrees.

iframe {
Giklaseklase: 20px;
giladmon-bottom: 30px;

-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;

-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
box-shadow: 4px 4px 14px # 000;

-moz-pagbag-o: rotate (20deg);
-webkit-transform: rotate (20deg);
-o-usab-usab: rotate (20deg);
-mga pagbag-o: i-rotate (20deg);
filter: progid: DXImageTransform.Microsoft.BasicImage (rotation = .2);
}

Pag-istilo sa mga Kaundan sa Iframe

Ang pag-istilo sa sulod sa usa ka iframe susama sa pag-istilo sa bisan unsa nga web page. Apan, kinahanglan nimo nga ma-access ang pag-usab sa panid . Kon dili nimo ma-edit ang panid (pananglitan, anaa kini sa laing site).

Kon mahimo nimo ma-edit ang panid, mahimo nimong madugangan ang estilo sa estilo sa eksternal o estilo mismo sa dokumento sama sa imong pag-style sa bisan unsa nga web page sa imong site.