Pag-unawa sa kung paano gumagana ang IFrames sa disenyo ng website
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 mismo. Kasama sa karamihan sa mga browser ang mga iframe na walang maraming dagdag na mga estilo, isang magandang ideya pa rin na magdagdag ng ilang mga estilo upang panatilihing pare-pareho ang mga ito.
Narito ang ilang mga estilo ng CSS na laging kinabibilangan ko sa aking mga iframe:
- margin: 0;
- padding: 0;
- border: none;
- lapad: halaga ;
- taas: halaga ;
Gamit ang lapad at taas na nakatakda sa laki 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 ang lahat ng mga browser ay nagpapakita ng iframe na may parehong mga gilid, padding, at sukat.
Inirerekomenda ng HTML5 na ginagamit mo ang overflow property 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 katangian ng pag-scroll sa iyong iframe. Upang gamitin ang katangian ng pag-scroll, idagdag ito tulad ng anumang iba pang katangian at pagkatapos ay pumili ng isa sa tatlong mga halaga: oo, hindi, o auto. oo nagsasabi sa browser na laging isama ang mga scroll bar kahit na hindi sila kinakailangan. walang sabi upang alisin ang lahat ng scroll bar kung kailangan o hindi.
Ang 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 katangian ng pag-scroll:
scroll = "no" >
Ito ay isang iframe.
Upang i-off ang pag-scroll sa HTML5 dapat mong gamitin ang overflow property. Subalit tulad ng nakikita mo sa mga halimbawang ito hindi ito gumagawang mapagkakatiwalaan sa lahat ng mga browser.
Narito kung paano mo i-scroll sa lahat ng oras sa overflow property:
style = "overflow: scroll;" >
Ito ay isang iframe.
Walang paraan upang i-off ang pag-scroll nang lubusan sa overflow property.
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 estilo ng hangganan ng hangganan (o ito ay may kaugnayan sa hangganan-itaas, hangganan-kanan, hangganan-kaliwa, at mga hangganan-ilalim na mga katangian) upang estilo ang mga hanggahan:
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 Iframe
Pag-istilo ng mga nilalaman ng isang iframe ay katulad ng pag-istilo ng anumang iba pang web page. Subalit, dapat kang magkaroon ng 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.