iFrame Styles

iFrame Styles


En iFrame brukes til å sette inn en ekstern HTML-side til en webside. Dette gjøres ved hjelp av "<iframe>" tag, som kan ha forskjellige stiler knyttet til den. For eksempel, det er visse rammestiler som du kan definere, og du kan bruke CSS (Cascading Style Sheet) i iFrame. Med en liten bit av Javascript, kan du også inkludere stiler fra den overordnede siden i iFrame.

Frame Styles

Ved bruk av <iframe> tag i HTML-dokumentet, kan du definere flere stiler for rammen. Dette inkluderer justere, border, høyde, bredde, margin og rulle. For eksempel <iframe width = "100px" height = "300px" scrolling = "auto"> vil gi deg en iFrame med en bredde på 100 piksler, en høyde på 300 piksler, og inkluderer en scrollbar hvis dokumentet er lengre enn dette høyde. Disse stilene bevirke selve rammen, ikke innholdet i denne rammen.

interne Styles

Du kan bruke CSS-kode for å definere stiler innenfor en ramme også. For å gjøre dette, setter du inn "<style type =" text / css ">" øverst på dokumentet du vil legge inn din iFrame. Deretter definere stiler ved å sette inn "body {" - fulgt av attributtene du vil. Et nyttig stil å bruke, er å definere din scrollbar farge slik at hvis iFrame har rulle, vil den bli vist i den stilen du ønsker. For å gjøre denne typen:

<Style type = "text / css">

kropp {

scrollbar-basen-color: blue;

scrollbar-pil-color: red; }

</ Style>

Dette vil gi deg en scrollbar som er blå, med røde piler på toppen og bunnen.

iFrame stil

Hvis du bruker en ekstern CSS-stilark, kan du også definere ulike iFrame stiler på det, i stedet for direkte i dokumentet. Dette er nyttig hvis du ønsker å holde iframes konsistent over flere forskjellige dokumenter. For å gjøre dette, åpner opp eksternt stilark og skriv inn "iframe {" - derfra, angi egenskapene du vil konsekvent. For eksempel:

iframe {

width: 300px;

height: 300px;

frameborder: 1; }

vil automatisk sette iframes som er 300 av 300 piksler, og med en ramme rundt dem, uten at du må definere disse stilene hver gang.

Javascript script~~POS=HEADCOMP

Du kan også bruke Javascript-kode i forbindelse med din iFrame-koden for å påvirke de interne stiler av din iFrame. Hva dette vil gjøre er iboende stilen fra dokumentet du setter inn din iFrame og bruke den for innholdet i iFrame. Dette kan være nyttig hvis du ønsker å ha eksternt innhold være den samme for flere ulike websider, men ønsker utseendet kan endres basert på hvilken side det er på. For fullstendig informasjon om hvordan du bruker denne Javascript.