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 the

  IFRAME sig selv.

• Du kan style siden inde i

  IFRAME (under visse betingelser).

Brug CSS til Style IFRAME Element

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

IFRAME

• sig selv. Mens de fleste browsere indeholder iframes uden mange ekstra stilarter, er det stadig en god idé at tilføje nogle stilarter for at holde dem konsistente. Her er nogle CSS-stilarter, som jeg altid indeholder på mine iframes:

  margen: 0;

• polstring: 0;

• grænse: ingen;

• bredde: værdi ;

• højde: værdi ;

Med

bredde

og

højde

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

flyde over

ejendom for at fjerne rullefelterne, men det er ikke pålideligt. Så hvis du vil fjerne eller ændre rullestænger, skal du bruge

rulning

attribut på din iframe også. At bruge

rulning

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 altid inkludere rullestænger, selvom de ikke er nødvendige.

ingen

siger at fjerne alle rullestænger om nødvendigt eller ej.

auto

er standard og inkluderer rullestænger, når de er nødvendige, og fjerner dem, når de ikke er. Her kan du slukke for scrolling med

rulningattribut: rulning = "nej">
Dette er en iframe.

For at slukke for scrolling i HTML5 skal du bruge

flyde over

ejendom. Men som du kan se i disse eksempler fungerer det ikke pålideligt i alle browsere endnu. Sådan kan du tænde for at rulle hele tiden med

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

Der er ingen måde for at slukke for scrollningen helt med

flyde over

ejendom. Mange designere vil have deres iframes at blande sammen med baggrunden for den side, de er på, så læserne ikke ved, at iframerne er der selv. Men du kan også tilføje stilarter for at få dem til at skille sig ud. Justering af grænserne, så at iframe viser sig lettere, er let. Bare brug

grænse

stil ejendom (eller det er relateret

border-top

,

border-ret

,

border-venstre

, og

border-bottomegenskaber) til at style grænserne: iframe {border-top: # c00 1px punkteret;grænse-højre: # c00 2px punkteret;grænse-venstre: # c00 2px punkteret;border-bottom: # c00 4px punkteret;}

Men du bør ikke stoppe med at rulle og grense til dine stilarter. Du kan anvende mange andre CSS-stilarter til din iframe. Dette eksempel bruger CSS3-stilarter til at give iframe en skygge, afrundede hjørner og drejede den 20 grader.

iframe {margin-top: 20px;margin-bund: 30px;-moz-grænse-radius: 12px;-webkit-grænse-radius: 12px;grænse-radius: 12px;-moz-box-shadow: 4px 4px 14px # 000;-webkit-box-skygge: 4px 4px 14px # 000;box-skygge: 4px 4px 14px # 000;moz-transformation: rotere (20deg);-webkit-transformation: rotate (20deg);-o-transformation: rotate (20deg);-MS-transformation: rotere (20deg);filter: progid: DXImageTransform.Microsoft.BasicImage (rotation = 0,2);}

Styling af Iframe-indholdet

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

Hvis du kan redigere siden, kan du tilføje et eksternt stilark eller stilarter lige i dokumentet, ligesom du ville skrive en anden webside på dit websted.