Understeande hoe't IFrames wurkje yn webside ûntwerp
As jo in elemint yn jo HTML ynfiere , hawwe jo twa kânsen om CSS stilen oan te meitsjen:
- Jo kinne de IFRAME sels stylje.
- Jo kinne de side yn 'e IFRAME (ûnder bepaalde betingsten) stile.
Kies CSS nei Style it IFRAME-elemint
It earste ding dat jo beskôgje moatte as jo styl binne as IFRAME sels is. Hoewol de measte browsers ûnder oare binne as ramt fan in protte ekstra stilen, is it noch in goeie idee om guon stilen te bewarjen om se konsekwint te hâlden.
Hjir binne guon CSS-stylen dy't ik altyd op myn ynroppen opnimme:
- marzje: 0;
- padding: 0;
- grins: gjin;
- breed: wearde ;
- hichte: wearde ;
Mei de breedte en de hichte sette nei de grutte dy't past yn myn dokumint. Hjir binne foarbylden fan in ramt mei gjin stilen en ien mei allinich de basis basearre. As jo sjogge, sille dizze stilen meastal de râning om 'e râne fan' e râne brûke, mar se sorse ek dat alle browsers sjen litte as iframe mei deselde rânen, padding, en dimensjes.
HTML5 advisearret it gebrûk fan it oerflak-eigenskip om de scrollbalken te brûken, mar dat is net betrouber. As jo de scrollbalken fuortsmite of wizigje wolle, dan moatte jo it scrollende attribút ek brûke op jo iframe. Om it scrolling-attribje te brûken, foegje dit as elke oare attribút en selektearje ien fan trije wearden: ja, nee, of auto. Ja fertelt de blêder om altyd skrollbalken yn te nimmen as se net nedich binne. Nee seit dat alle rôlbalken fuorthelle binne of needsaaklik of net.
Auto is de standertwearde en befettet de scrollbalken as se nedich binne en bewarret se as se net binne.
Hjir is hoe jo it scrolljen fan 'e scrolling-attribút útsette:
scrolling = "no" >
Dit is in iframe.
Om HTML-blêderôf te skeakeljen moatte jo de oerflak eigenskip brûke. Mar as jo yn dizze foarbylden sjen kinne, wurket it noch net betrouber yn alle browsers.
Hjir is hoe't jo de hiele tiid trochgeane mei it oerflúzjend eigendom:
style = "overflow: scroll;"
Dit is in iframe.
Der is gjin manier om de scrolling folslein te meitsjen mei it oerflak eigendom.
In soad ûntwerper wolle dat har ynrjochtings yn 'e eftergrûn bliuwe mei de eftergrûn fan' e side dy't se binne op dat lêzers net witte dat de iene rammers sels dêr binne. Mar jo kinne ek stilen tafoegje om se út te stekken. It oanpassen fan de grinzen sadat it ietsrame mear leare sil is ienfâldich. Soargje it grûnstyl-eigendom (of it ferbân mei grinsrjochte, grinsrjochte, grinsrjochte, en grinzen-ûnder) om de rânen te stylen:
iframe {
border-top: # c00 1px dotted;
border-right: # c00 2px dotted;
border-left: # c00 2px dotted;
border-bottom: # c00 4px dotted;
}
Mar jo moatte net ophâlde mei skowen en grinzen foar jo stilen. Jo kinne in soad oare CSS-stilen oan jo iframe tapasse. Dit foarbyld brûkt gebrûk fan CSS3 om de iframe in skaad, rûne kanten te jaan en it 20 graden te rotearjen.
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: rotearje (20de);
-webkit-transform: rotearje (20de);
-o-transform: rotearje (20de);
-ms-transform: rotearje (20de);
filter: progid: DXImageTransform.Microsoft.BasicImage (rotaasje = .2);
}
Styling fan it Iframe-ynhâld
Styling fan de ynhâld fan in iframe is krekt lykas styling fan in oare webside. Mar, jo moatte tagong hawwe om de side te bewurkjen . As jo de side net bewurkje kinne (bygelyks it is op in oare side).
As jo de side bewurkje kinne, kinne jo in eksterne stylblêd taheakke yn it dokumint as jo in oare webside op jo side stjoere.