Kapag nag-embed ka ng isang elemento sa iyong HTML, mayroon kang dalawang mga pagkakataon upang magdagdag ng mga estilo ng CSS dito:
- Maaari mong estilo ang
IFRAME mismo.
- Maaari mong estilo ang pahina sa loob ng
IFRAME (sa ilalim ng ilang mga kundisyon).
Paggamit ng CSS sa Estilo ng IFRAME Element
Ang unang bagay na dapat mong isaalang-alang kapag ang estilo ng iyong mga iframe ay ang
IFRAME
margin: 0; padding: 0; border: none; lapad: halaga ; taas: halaga ; Kasama ang lapad
at taas
itakda sa sukat na akma sa aking dokumento. Narito ang mga halimbawa ng isang frame na walang mga estilo at isa na may lamang ang mga pangunahing kaalaman na naka-istilong. Tulad ng makikita mo, ang mga estilo na ito ay halos alisin lamang ang hangganan sa paligid ng iframe, ngunit tinitiyak din nila na ipinapakita ng lahat ng mga browser ang iframe na may parehong mga margin, padding, at mga dimensyon. Inirerekomenda ng HTML5 na gamitin mo ang pag-apaw
ari-arian upang alisin ang mga scroll bar, ngunit hindi ito maaasahan. Kaya kung gusto mong alisin o palitan ang mga scroll bar, dapat mong gamitin ang scroll
katangian sa iyong iframe pati na rin. Upang gamitin ang scroll
katangian, idagdag ito tulad ng anumang iba pang katangian at pagkatapos ay pumili ng isa sa tatlong mga halaga: oo
, hindi
, o auto
oo
Sinasabi sa browser na palaging isama ang mga scroll bar kahit na hindi sila kinakailangan. hindi
nagsasabi na alisin ang lahat ng scroll bar kung kailangan o hindi. auto
ay ang default at kabilang ang mga scroll bar kapag kinakailangan ang mga ito at inaalis ang mga ito kapag sila ay hindi.Narito kung paano i-off ang pag-scroll gamit ang scrollkatangian: pag-scroll = "hindi"> Upang i-off ang pag-scroll sa HTML5 dapat mong gamitin ang pag-apaw
ari-arian. Subalit tulad ng nakikita mo sa mga halimbawang ito hindi ito gumagawang mapagkakatiwalaan sa lahat ng mga browser. Narito kung paano mo i-on ang pag-scroll sa lahat ng oras sa pag-apawari-arian: style = "overflow: scroll;"> Mayroong walang paraan upang i-off ang pag-scroll nang buo sa pag-apaw
ari-arian. Gusto ng maraming taga-disenyo na ang kanilang mga iframe sa pagsasama-sama sa background ng pahina na sila ay sa gayon na ang mga mambabasa ay hindi alam na ang mga iframe ay kahit doon. Ngunit maaari ka ring magdagdag ng mga estilo upang maitayo ang mga ito. Ang pagsasaayos ng mga hangganan upang mas madali ang pagpapakita ng iframe. Gamitin lamang ang hangganan
estilo ng ari-arian (o kaugnay nito hangganan-itaas
, hangganan-kanan
, hangganan-kaliwa
, at hangganan-ilalimmga katangian) sa estilo ng mga hangganan: iframe {hangganan-itaas: # c00 1px may tuldok;hangganan-kanan: # c00 2px may tuldok;hangganan-kaliwa: # c00 2px may tuldok;hangganan-ilalim: # c00 4px may tuldok;}
Ngunit hindi ka dapat huminto sa pag-scroll at mga hangganan para sa iyong mga estilo. Maaari kang maglapat ng maraming iba pang mga estilo ng CSS sa iyong iframe. Gumagamit ang halimbawang ito ng mga estilo ng CSS3 upang bigyan ang iframe ng isang anino, bilugan na mga sulok, at pinaikot ito ng 20 degree. iframe {margin-top: 20px;margin-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-transform: paikutin (20deg);-webkit-transform: paikutin (20deg);-o-transform: paikutin (20deg);-mag-transform: paikutin (20deg);filter: progid: DXImageTransform.Microsoft.BasicImage (pag-ikot = .2);} Pag-istilo ng mga nilalaman ng isang iframe ay katulad ng pag-istilo ng anumang iba pang web page. Pero ikaw dapat may access sa pag-edit ng pahina . Kung hindi mo mai-edit ang pahina (halimbawa, ito ay sa ibang site). Kung maaari mong i-edit ang pahina, maaari kang magdagdag ng isang panlabas na estilo ng estilo o mga estilo mismo sa dokumento tulad ng nais mong mag-estilo ng anumang iba pang web page sa iyong site.
Ito ay isang iframe.
Ito ay isang iframe.
Pag-istilo ng Mga Nilalaman ng Iframe
