Når du legger inn et element i din HTML, har du to muligheter til å legge til CSS-stiler i den:
- Du kan style
IFRAME
seg selv. - Du kan style siden inne i
IFRAME
(under visse forhold).
Bruke CSS til å style IFRAME-elementet
Det første du bør vurdere når du styler iframes, er.
IFRAME
- seg selv. Mens de fleste nettlesere inkluderer iframes uten mange ekstra stiler, er det fortsatt lurt å legge til noen stiler for å holde dem konsistente. Her er noen CSS-stiler vi alltid inkluderer iframes:
margin: 0;
polstring: 0;
grense: ingen;
bredde: verdi;
høyde: verdi;
Med.
bredde
og.
høyde
angi størrelsen som passer i dokumentet mitt. Her er eksempler på en ramme uten stiler og en med bare det grunnleggende. Som du kan se, fjerner disse stilene for det meste bare rammen rundt iframe, men de sørger også for at alle nettlesere viser iframe med samme marginer, polstring og dimensjoner.HTML5 anbefaler at du bruker.
flyte
egenskap for å fjerne rullefeltene i en bla boksen, men det er ikke pålitelig. Så hvis du vil fjerne eller endre rullefeltene, bør du bruke.
rulling
attributt på iframe også. For å bruke.
rulling
attributt, legg det til som et hvilket som helst annet attributt, og velg deretter en av tre verdier:
ja
,
Nei
, eller.
auto
.
ja
ber nettleseren om å alltid inkludere rullefelt, selv om de ikke er nødvendige.
Nei
sier å fjerne alle rullefelt, enten det er nødvendig eller ikke.
auto
er standard og inkluderer rullefeltene når det trengs, og fjerner dem når de ikke er det. Slik slår du av å bla med.
rulling
attributt: rulling = "nei">
Dette er en iframe.
For å slå av rulling i HTML5 skal du bruke.
flyte
eiendom. Men som du kan se i disse eksemplene, fungerer det ikke pålitelig i alle nettlesere ennå. Slik slår du på å bla hele tiden med.
flyte
property: style = "overflow: scroll;">
Dette er en iframe.
Det er aldri for å slå av rullingen helt med.
flyte
eiendom. Mange designere vil at iframes deres skal smelte inn i bakgrunnen på siden de er på, slik at leserne ikke vet at iframes er der. Men du kan også legge til stiler for å få dem til å skille seg ut. Det er enkelt å justere kantene slik at iframe vises lettere. Bare bruk.
grense
stilegenskap (eller det er relatert.
grensetopp
,
grense-høyre
,
grense-venstre
, og.
kantbunn
egenskaper) for å style kantene: iframe {
border-top: # c00 1px stiplet;
border-right: # c00 2px stiplet;
border-left: # c00 2px stiplet;
border-bottom: # c00 4px stiplet;
}
Men du bør ikke slutte med å rulle og grenser for stilene dine. Du kan bruke mange andre CSS-stiler på iframe. Dette eksemplet bruker CSS3-stiler for å gi iframe en skygge, avrundede hjørner og roterte den 20 grader.
iframe {
margin-top: 20px;
margin-bunn: 30 px;
-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;
bokseskygge: 4px 4px 14px # 000;
-moz-transform: roter (20deg);
-webkit-transform: roter (20deg);
-o-transform: roter (20deg);
-ms-transform: roter (20deg);
filter: progid: DXImageTransform. Microsoft. BasicImage (rotasjon = .2);
}
Styling av Iframe-innholdet
Styling av innholdet på en iframe er akkurat som å style en hvilken som helst annen webside. Men du må ha tilgang til å redigere siden. Hvis du ikke kan redigere siden (for eksempel på en annen side).
Hvis du kan redigere siden, kan du legge til et eksternt stilark eller stiler rett i dokumentet, akkurat som du vil stile en hvilken som helst annen webside på nettstedet ditt.