Kai įterpiate elementą į savo HTML, turite dvi galimybes prie jo pridėti CSS stilių:
- Galite stiliaus
IFRAME
pats. - Galite stilizuoti puslapį viduje
IFRAME
(tam tikromis sąlygomis).
CSS naudojimas IFRAME elemento stiliui sukurti
Pirmas dalykas, į kurį turėtumėte atsižvelgti kurdami „iframe“ kadrą, yra.
IFRAME
- pats. Nors daugumoje naršyklių yra „iframe“ be daugybės papildomų stilių, vis tiek verta pridėti keletą stilių, kad jie būtų nuoseklūs. Štai keletas CSS stilių, kuriuos visada įtraukiame iframes:
paraštė: 0;
užpildas: 0;
riba: nėra;
plotis: vertė;
aukštis: vertė;
Su.
plotis
ir.
ūgio
nustatykite dydį, kuris tinka mano dokumentui. Čia yra rėmelių, neturinčių stiliaus, ir vieno, kuriame pateikiami tik pagrindai, pavyzdžiai. Kaip matote, šie stiliai dažniausiai tik pašalina kraštą aplink „iframe“, tačiau jie taip pat užtikrina, kad visose naršyklėse tas „iframe“ būtų rodomas tomis pačiomis paraštėmis, užpildu ir matmenimis.HTML5 rekomenduoja naudoti.
perpildyti
ypatybė pašalinti slinkties juostas a
slinkties laukelis, bet tai nėra patikima. Taigi, jei norite pašalinti arba pakeisti slinkties juostas, turėtumėte naudoti.slinkimas
atributas ir jūsų „iframe“. Norėdami naudoti.
slinkimas
atributą, pridėkite jį kaip ir bet kurį kitą atributą, tada pasirinkite vieną iš trijų reikšmių:
taip
,
ne
arba.
automatinis
.
taip
liepia naršyklei visada įtraukti slinkties juostas, net jei jų nereikia.
ne
sako pašalinti visas slinkties juostas, jei reikia ar ne.
automatinis
yra numatytasis ir apima slinkties juostas, kai jų reikia, ir pašalina, kai jų nėra. Štai kaip išjungti slinkimą naudojant.
slinkimas
atributas: scrolling = "no">
Tai yra „iframe“.
Norėdami išjungti slinkimą HTML5, turėtumėte naudoti.
perpildyti
nuosavybė. Bet kaip matote iš šių pavyzdžių, jis dar neveikia patikimai visose naršyklėse. Štai kaip įjungtumėte visą laiką slinkimą naudodami.
perpildyti
ypatybė: style = "overflow: scroll;">
Tai yra „iframe“.
Yra negali būti visiškai išjungti slinkimą su.
perpildyti
nuosavybė. Daugelis dizainerių nori, kad jų „iframes“ susilietų su puslapio, kuriame jie yra, fonu, kad skaitytojai nežinotų, jog „iframe“ netgi yra. Tačiau taip pat galite pridėti stilių, kad jie išsiskirtų. Lengva sureguliuoti kraštus taip, kad „iframe“ būtų rodomas lengviau. Tiesiog naudokitės.
sienos
stiliaus nuosavybė (arba ji yra susijusi.
pasienio viršuje
,
pasienis-dešinė
,
siena-kairė
ir.
sienos apačia
ypatybės), norėdami stilizuoti kraštines: iframe {
border-top: # c00 1px dots;
kraštas dešinėje: # c00 2px punktyras;
kraštas-kairė: # c00 2px punktyras;
kraštinė apačia: # c00 4 taškų taškuota;
}
Tačiau neturėtumėte sustoti slinkdami ir braižydami savo stilius. Savo „iframe“ galite pritaikyti daug kitų CSS stilių. Šiame pavyzdyje CSS3 stiliai naudojami norint suteikti „iframe“ šešėlį, užapvalintus kampus ir pasukti 20 laipsnių kampu.
iframe {
paraštė viršuje: 20 taškų;
paraštė apačioje: 30 taškų;
-moz-border-radius: 12 taškų;
-webkit-border-radius: 12 taškų;
krašto spindulys: 12 taškų;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
langelis-šešėlis: 4px 4px 14px # 000;
-moz-transformuoti: pasukti (20 laipsnių);
-webkit-transformuoti: pasukti (20deg);
-o-transformuoti: pasukti (20 laipsnių);
-ms-transformuoti: pasukti (20 laipsnių);
filtras: progid: DXImageTransform. „Microsoft“. „BasicImage“ (pasukimas = .2);
}
„Iframe“ turinio stilius
„Iframe“ turinio stilius yra toks pat, kaip ir bet kurio kito tinklalapio stilius. Bet tu turi turėti prieigą redaguoti puslapį. Jei negalite redaguoti puslapio (pavyzdžiui, jis yra kitoje svetainėje).
Jei galite redaguoti puslapį, galite pridėti išorinį stiliaus lapą ar stilius tiesiai į dokumentą taip, kaip stilizuotumėte bet kurį kitą savo svetainės tinklalapį.