Când încorporați un element în HTML, aveți două oportunități de a adăuga stiluri CSS la acesta:
- Puteți stiliza
IFRAME
în sine. - Puteți stiliza pagina în interiorul
IFRAME
(sub anumite conditii).
Utilizarea CSS pentru a stiliza elementul IFRAME
Primul lucru pe care ar trebui să îl luați în considerare atunci când vă stilizați iframe-urile este.
IFRAME
- în sine. În timp ce majoritatea browserelor includ iframe fără multe stiluri suplimentare, este încă o idee bună să adăugați câteva stiluri pentru a le menține coerente. Iată câteva stiluri CSS pe care le includem întotdeauna iframe:
marja: 0;
umplutură: 0;
hotar: nici unul;
lăţime: valoare;
înălţime: valoare;
Cu.
lăţime
și.
înălţime
setat la dimensiunea care se potrivește documentului meu. Iată exemple de cadru fără stiluri și unul cu doar elementele de bază. După cum puteți vedea, aceste stiluri elimină mai ales marginea din jurul iframe-ului, dar asigură, de asemenea, că toate browserele afișează acel iframe cu aceleași margini, umplutură și dimensiuni.HTML5 vă recomandă să utilizați.
revărsare
proprietate pentru a elimina barele de defilare din interiorul unui caseta de derulare, dar asta nu este fiabil. Deci, dacă doriți să eliminați sau să modificați barele de defilare, ar trebui să utilizați.
defilare
atribut și pe iframe. Pentru a utiliza.
defilare
atribut, adăugați-l ca orice alt atribut și apoi alegeți una dintre cele trei valori:
da
,
Nu
, sau.
auto
.
da
spune browserului să includă întotdeauna bare de defilare chiar dacă nu sunt necesare.
Nu
spune să eliminați toate barele de defilare, indiferent dacă este necesar sau nu.
auto
este implicit și include barele de defilare atunci când sunt necesare și le elimină atunci când nu sunt. Iată cum să dezactivați derularea cu.
defilare
atribut: scrolling = "nu">
Acesta este un iframe.
Pentru a dezactiva derularea în HTML5, ar trebui să utilizați.
revărsare
proprietate. Dar, după cum puteți vedea în aceste exemple, nu funcționează încă în mod sigur în toate browserele. Iată cum ați porni derularea tot timpul cu ajutorul.
revărsare
property: style = "overflow: scroll;">
Acesta este un iframe.
Există în nici un caz pentru a opri derularea completă cu.
revărsare
proprietate. Mulți designeri doresc ca iframe-urile lor să se amestece cu fundalul paginii pe care se află, astfel încât cititorii să nu știe că iframe-urile sunt chiar acolo. Dar puteți adăuga și stiluri pentru a le face să iasă în evidență. Reglarea marginilor astfel încât iframe-ul să apară mai ușor este ușoară. Folosiți doar.
frontieră
proprietatea stilului (sau este înrudită.
de sus-frontieră
,
frontieră-dreapta
,
frontieră-stânga
, și.
marginea de jos
proprietăți) pentru a stiliza marginile: iframe {
border-top: # c00 1px punctat;
border-right: # c00 2px punctat;
border-left: # c00 2px punctat;
chenar-fund: # c00 4px punctat;
}
Dar nu ar trebui să vă opriți cu derularea și marginile pentru stilurile dvs. Puteți aplica o mulțime de alte stiluri CSS pe iframe. Acest exemplu folosește stiluri CSS3 pentru a da iframei o umbră, colțuri rotunjite și rotit cu 20 de grade.
iframe {
marginea de sus: 20 px;
marginea de jos: 30 px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
raza chenarului: 12px;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
cutie-umbră: 4px 4px 14px # 000;
-moz-transformare: rotire (20deg);
-webkit-transform: rotire (20deg);
-o-transformare: rotire (20deg);
-ms-transform: rotire (20deg);
filtru: progid: DXImageTransform. Microsoft. Imagine de bază (rotație = .2);
}
Stilizarea conținutului Iframe
Stilarea conținutului unui iframe este la fel ca stilul oricărei alte pagini web. Dar tu trebuie să aibă acces pentru a edita pagina. Dacă nu puteți edita pagina (de exemplu, este pe un alt site).
Dacă puteți edita pagina, puteți adăuga o foaie de stil externă sau stiluri chiar în document, așa cum ați stiliza orice altă pagină web de pe site-ul dvs.