Hvordan utforme IFrames med CSS

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

To menn som koder på datamaskiner — vgajic / Getty Images

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.

instagram viewer

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.