Miten tyylistä IFrames CSS: llä

Kun upotat elementin HTML-muotoon, sinulla on kaksi mahdollisuutta lisätä CSS-tyylit siihen:

• Voit muotoilla

  IFRAME itse.

• Voit muotoilla sivun sisään

  IFRAME (tietyin edellytyksin).

CSS: n käyttäminen tyylin IFRAME-elementtiin

Ensimmäinen asia, joka sinun pitäisi harkita, kun muotoilette iframes on

IFRAME

• itse. Vaikka useimmat selaimet sisältävät iframeja ilman paljon ylimääräisiä tyylejä, on silti hyvä lisätä joitain tyylit pitämään ne yhdenmukaisina. Seuraavassa on joitain CSS-tyyliä, jotka olen aina sisällytetty iframe-tiedostoihini:

  marginaali: 0;

• pehmuste: 0;

• raja: ei yhtään;

• leveys: arvo ;

• korkeus: arvo ;

Kanssa

leveys

ja

korkeus

asetettu kokoon, joka sopii asiakirjalleni. Seuraavassa on esimerkkejä kehyksestä, jossa ei ole tyylejä ja joista vain perusasiat on muotoiltu. Kuten näet, nämä tyylejä vain poistavat vain reunan iframe-kehän ympäriltä, ​​mutta ne myös varmistavat, että kaikki selaimet näyttävät, että iframe, jossa on samat marginaalit, pehmuste ja mitat.HTML5 suosittelee käyttämään

ylivuoto

ominaisuus poistaa vierityspalkit, mutta se ei ole luotettava. Joten jos haluat poistaa tai muuttaa vierityspalkkeja, käytä

vieritys

attribuutti myös iframe-kehäsi. Käytä

vieritys

attribuutti, lisää se kuten mikä tahansa muu attribuutti ja valitse sitten jokin kolmesta arvosta:

Joo

,

ei

, tai

auto

Joo

kertoo selaimesta aina vierityspalkkeja, vaikka niitä ei tarvita.

ei

sanoo poistaaksesi kaikki vierityspalkit tarpeen mukaan.

auto

on oletusarvo ja sisältää vierityspalkit, kun niitä tarvitaan, ja poistaa ne, kun ne eivät ole.

vieritysmäärite: vieritys = "no">
Tämä on iframe.

Jos haluat poistaa HTML5-selauksen käytöstä, käytä

ylivuoto

omaisuutta. Mutta kuten näissä esimerkeissä näet, se ei toimi luotettavasti kaikissa selaimissa. Näin voit ottaa käyttöön selaamisen koko ajan

ylivuotoomaisuus: style = "ylivuoto: vieritys;">
Tämä on iframe.

On ei onnistu sammuttaa vieritys kokonaan

ylivuoto

omaisuutta. Monet suunnittelijat haluavat, että iframit sekoittuvat sivun taustallaan, jotta lukijat eivät tiedä, että iframit ovat edes olemassa. Mutta voit myös lisätä tyylejä, jotta ne erottuvat. Rajojen säätäminen niin, että iframe näyttää helpommin, on helppoa. Käytä vain

reunus

(tai se on yhteydessä siihen)

border-top

,

border-right

,

border-left

, ja

border-bottomominaisuudet), jotta reunukset voidaan muotoilla: iframe {border-top: # c00 1px pisteviiva;raja-oikea: # c00 2px pisteviiva;raja-vasen: # c00 2px pisteviiva;raja-pohja: # c00 4px pisteviiva;}

Mutta sinun ei pitäisi lopettaa selausta ja rajoja tyylillesi. Voit käyttää paljon muita CSS-tyylejä iframe-muotoosi. Tässä esimerkissä CSS3-tyylit antavat iframe-varjon, pyöristetyt kulmat ja pyörivät sitä 20 astetta.

iframe {margin-top: 20px;marginaalipohja: 30px;-moz-raja-säde: 12px;-webkit-border-radius: 12px;raja-säde: 12px;-moz-box-shadow: 4px 4px 14px # 000;-webkit-box-shadow: 4px 4px 14px # 000;laatikko-varjo: 4px 4px 14px # 000;-moz-muunnos: pyöritä (20deg);-webkit-muunnos: kierrä (20deg);-o-muunnos: kierrä (20deg);-MS-muunnos: pyöritä (20deg);suodatin: progid: DXImageTransform.Microsoft.BasicImage (kierto = 0,2);}

Iframe-sisällön muotoilu

Iframe-sisällön muotoilu on aivan kuin minkä tahansa muun verkkosivun muotoilu. Mutta sinä on voitava muokata sivua . Jos sivua ei voi muokata (esimerkiksi se on toisella sivustolla).

Jos voit muokata sivua, voit lisätä ulkoisen tyylitiedoston tai tyylejä suoraan dokumenttiin aivan kuten minkä tahansa sivuston muuhun verkkosivuun.