Når du legger inn et element i HTML-en din, har du to muligheter til å legge til CSS-stiler for det:
- Du kan style the
IFRAME seg selv.
- Du kan style siden inne i
IFRAME (under visse forhold).
Bruke CSS til Style IFRAME Element
Det første du bør vurdere når styling your iframes er
IFRAME
margin: 0; polstring: 0; grense: ingen; bredde: verdi ; høyde: verdi ; Med bredde
og høyde
sett til størrelsen som passer i dokumentet mitt. Her er eksempler på en ramme uten stiler og en med bare det grunnleggende stilen. Som du kan se, fjerner disse stilene for det meste bare grensen rundt iframe, men de sikrer også at alle nettlesere viser at iframe med samme marginer, polstring og dimensjoner. HTML5 anbefaler at du bruker flyte
egenskap for å fjerne rullefeltene, men det er ikke pålitelig. Så hvis du vil fjerne eller endre rullefeltene, bør du bruke rulle
attributt på iframe også. For å bruke rulle
attributt, legg det til som et annet attribut og velg deretter en av tre verdier: ja
, Nei
, eller auto
ja
forteller at nettleseren alltid skal inkludere rullestenger, selv om de ikke er nødvendig. Nei
sier å fjerne alle rullefeltene om nødvendig eller ikke. auto
er standard og inkluderer rullefeltene når de trengs, og fjerner dem når de ikke er. Her kan du slå av rulling med rulleattributt: rulling = "no"> For å slå av rulling i HTML5 skal du bruke flyte
eiendom. Men som du kan se i disse eksemplene, virker det ikke pålitelig i alle nettlesere ennå. Slik kan du slå på hele tiden med flyteeiendom: style = "overflow: scroll;"> Det er aldri for å slå av rullingen helt med flyte
eiendom. Mange designere vil at deres iframes skal blande seg sammen med bakgrunnen til siden de er på, slik at leserne ikke vet at iframene er der selv. Men du kan også legge til stiler for å få dem til å skille seg ut. Justering av grenser slik at iframe viser seg lettere, er lett. Bare bruk grense
stil eiendom (eller det er relatert border-top
, border-right
, border-left
, og nedre kantegenskaper) for å style grensene: iframe {border-top: # c00 1px prikket;border-right: # c00 2px prikket;border-left: # c00 2px prikket;border-bottom: # c00 4px prikket;}
Men du bør ikke slutte med å rulle og grense for stilene dine. Du kan bruke mange andre CSS-stiler til din iframe. Dette eksemplet bruker CSS3-stiler for å gi iframe en skygge, avrundede hjørner, og roterte den 20 grader. iframe {margin-topp: 20px;margin-bunn: 30px;-moz-grense-radius: 12px;-webkit-grense-radius: 12px;border-radius: 12px;-moz-boks-skygge: 4px 4px 14px # 000;-webkit-boks-skygge: 4px 4px 14px # 000;bokseskygge: 4px 4px 14px # 000;-moz-transform: rotere (20deg);-webkit-transform: roter (20deg);-o-transform: roter (20deg);-MS-transform: rotere (20deg);filter: progid: DXImageTransform.Microsoft.BasicImage (rotasjon = 0,2);} Styling innholdet i en iframe er akkurat som styling noen annen webside. Men du må ha tilgang til å redigere siden . Hvis du ikke kan redigere siden (for eksempel er det på et annet nettsted). Hvis du kan redigere siden, kan du legge til et eksternt stilark eller stiler rett i dokumentet, akkurat som du ville stille en hvilken som helst annen nettside på nettstedet ditt.
Dette er en iframe.
Dette er en iframe.
Styling av Iframe Innhold
