Sådan style IFrames med CSS

Når du integrerer et element i din HTML, har du to muligheder for at tilføje CSS-stilarter til det:

Du kan style den
```
IFRAME
```
sig selv.
Du kan style siden inde i
```
IFRAME
```
(under visse betingelser).

Brug af CSS til at style IFRAME-elementet

To mænd, der koder på computere — vgajic / Getty Images

Den første ting du skal overveje, når du styler dine iframes, er.

IFRAME

sig selv. Mens de fleste browsere inkluderer iframes uden mange ekstra stilarter, er det stadig en god ide at tilføje nogle stilarter for at holde dem konsistente. Her er nogle CSS-stilarter, som vi altid inkluderer iframes:
```
margen: 0;
```
```
polstring: 0;
```
```
grænse: ingen;
```
```
bredde: værdi;
```
```
højde: værdi;
```

Med.

bredde

og.

højde

indstilles til den størrelse, der passer til mit dokument. Her er eksempler på en ramme uden stilarter og en med kun det grundlæggende stylet. Som du kan se, fjerner disse stilarter for det meste bare grænsen omkring iframe, men de sikrer også, at alle browsere viser den iframe med de samme margener, polstring og dimensioner.HTML5 anbefaler, at du bruger.

flyde over

instagram viewer

egenskab for at fjerne rullebjælkerne inden for en rulleboks, men det er ikke pålideligt. Så hvis du vil fjerne eller ændre rullebjælkerne, skal du bruge.

rulle

attribut på din iframe også. At bruge.

rulle

attribut, tilføj det som enhver anden attribut, og vælg derefter en af tre værdier:

Ja

ingen

, eller.

auto

Ja

fortæller browseren, at den altid skal omfatte rullepaneler, selvom de ikke er nødvendige.

ingen

siger at fjerne alle rullepaneler, uanset om det er nødvendigt eller ej.

auto

er standard og inkluderer rullepaneler, når de er nødvendige, og fjerner dem, når de ikke er det. Sådan deaktiveres rulning med.

rulle
attribute: scrolling = "no">
Dette er en iframe.

For at slå rulle fra i HTML5 skal du bruge.

flyde over

ejendom. Men som du kan se i disse eksempler fungerer det endnu ikke pålideligt i alle browsere. Her er hvordan du tænder på at rulle hele tiden med.

flyde over
property: style = "overflow: scroll;">
Dette er en iframe.

Der er ingen måde for at slukke for rulle helt med.

flyde over

ejendom. Mange designere vil have deres iframes til at blande sig med baggrunden for den side, de er på, så læserne ikke ved, at iframesne er der. Men du kan også tilføje stilarter for at få dem til at skille sig ud. Det er let at justere kanterne, så iframe lettere vises. Brug bare.

grænse

stilegenskab (eller det er relateret.

kant-top

grænse-højre

grænse-venstre

og.

kant-bund
egenskaber) for at style grænserne: iframe {
border-top: # c00 1px stiplet;
border-right: # c00 2px stiplet;
border-left: # c00 2px stiplet;
kant-bund: # c00 4px stiplet;
}

Men du skal ikke stoppe med at rulle og grænser efter dine stilarter. Du kan anvende mange andre CSS-stilarter på din iframe. Dette eksempel bruger CSS3-stilarter til at give iframe en skygge, afrundede hjørner og roteret den 20 grader.

iframe {
margin-top: 20 px;
margin-bund: 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;
box-shadow: 4px 4px 14px # 000;
-moz-transformation: roter (20deg);
-webkit-transformation: roter (20deg);
-o-transformation: roter (20deg);
-ms-transformation: roter (20deg);
filter: progid: DXImageTransform. Microsoft. BasicImage (rotation = .2);
}

Styling af Iframe-indholdet

Styling af indholdet af en iframe er ligesom styling af enhver anden webside. Men dig skal have adgang til at redigere siden. Hvis du ikke kan redigere siden (for eksempel på et andet sted).

Hvis du kan redigere siden, kan du tilføje et eksternt typografiark eller typografier lige i dokumentet, ligesom du vil style enhver anden webside på dit websted.