Skilningur á hvernig IFrames vinnur í vefhönnun
Þegar þú setur inn þátt í HTML þínum , hefur þú tvö tækifæri til að bæta CSS stílum við það:
- Þú getur stíll IFRAME sjálft.
- Þú getur stíll síðuna inni í IFRAME (við vissar aðstæður).
Notaðu CSS til að stilla IFRAME Element
Það fyrsta sem þú ættir að íhuga þegar þú ert að stilla efnið þitt er IFRAME sjálft. Þó að flestir vafrar innihalda eframælar án mikillar viðbótarstíll, þá er það samt góð hugmynd að bæta við nokkrum stílum til að halda þeim í samræmi.
Hér eru nokkrar CSS stíll sem ég á alltaf með á efnunum mínum:
- framlegð: 0;
- padding: 0;
- landamæri: enginn;
- breidd: gildi ;
- hæð: gildi ;
Með breidd og hæð sett á þann stærð sem passar í skjalið mitt. Hér eru dæmi um ramma án stíll og einn með bara grunnatriði stíl. Eins og þú sérð eru þessar stafir að mestu bara fjarlægðir landamærin í kringum iframe, en þeir tryggja einnig að allir vöfrar sýna það iframe með sömu brún, púði og stærð.
HTML5 mælir með því að þú notir yfirgangseiginleikann til að fjarlægja skruntikurnar, en það er ekki áreiðanlegt. Svo ef þú vilt fjarlægja eða breyta skrúfustikunum, þá ættir þú einnig að nota flettitáknið á efninu þínu. Til að nota flettitáknið skaltu bæta því við eins og allir aðrir eiginleikar og veldu síðan einn af þremur gildum: já, nei eða sjálfvirkt. já segir að vafrinn sé alltaf með skrúfubrautum, jafnvel þótt þær séu ekki nauðsynlegar. nei segir að fjarlægja alla skruntanga hvort sem er þörf eða ekki.
sjálfvirkt farartæki er sjálfgefið og inniheldur flettistikur þegar þörf er á þeim og fjarlægir þær þegar þau eru ekki.
Svona er hægt að slökkva á því að fletta með skrúfuskránum:
rolla = "nei" >
Þetta er iframe.
Til að slökkva á því að fletta í HTML5 áttu að nota flæða eignina. En eins og þú sérð í þessum dæmum virkar það ekki áreiðanlega í öllum vöfrum.
Hérna er hvernig þú vilt kveikja á því að fletta allan tímann með flóðaeigninni:
style = "overflow: scroll;" >
Þetta er iframe.
Það er engin leið til að slökkva á skrúfunni alveg með flóðaeigninni.
Margir hönnuðir vilja að efnið þeirra blandi saman við bakgrunn síðunnar sem þeir eru á þannig að lesendur ekki vita að eframarnir séu jafnvel þar. En þú getur líka bætt við stílum til að láta þá standa út. Aðlaga landamæri þannig að eframiðið birtist betur er auðvelt. Notaðu bara landamærisstíl eignarinnar (eða það er tengt við landamæri, landamærin til hægri, landamærin til vinstri og eiginleika landamæranna) til að stilla landamæri:
iframe {
Landamæri efst: # c00 1px dotted;
landamærin til hægri: # c00 2px dotted;
landamærin til vinstri: # c00 2px dotted;
Border-bottom: # c00 4px dotted;
}
En þú ættir ekki að hætta við að fletta og landamæra fyrir stíl þinn. Þú getur sótt um mikið af öðrum CSS stílum til your iframe. Þetta dæmi notar CSS3 stíll til að gefa iframe skugga, ávalar horn og snúa það 20 gráður.
iframe {
framlegð-toppur: 20px;
framlegð-botn: 30px;
-moz-landamæris-radíus: 12px;
-webkit-landamæris-radíus: 12px;
Landamæris-radíus: 12px;
-moz-box-skuggi: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
kassi-skuggi: 4px 4px 14px # 000;
-moz-transform: snúið (20deg);
-webkit-transform: snúa (20deg);
-ó-umbreyta: snúa (20deg);
-ms-umbreyta: snúa (20deg);
sía: progid: DXImageTransform.Microsoft.BasicImage (snúningur = .2);
}
Stíll Efnisyfirlitið
Stílhrein innihald iframe er eins og að stilla hvaða aðra vefsíðu sem er. En þú verður að hafa aðgang að því að breyta síðunni . Ef þú getur ekki breytt síðunni (til dæmis er það á annarri síðu).
Ef þú getur breytt síðunni getur þú bætt við utanaðkomandi stílblað eða stíll rétt í skjalinu eins og þú myndir stilla hvaða aðra vefsíðu sem er á síðunni þinni.