Kun upotat elementin HTML, sinulla on kaksi mahdollisuutta lisätä siihen CSS-tyylejä:
- Voit muotoilla
IFRAME
itse. - Voit muotoilla sivun
IFRAME
(tietyin ehdoin).
CSS: n käyttäminen IFRAME-elementin muotoiluun
Ensimmäinen asia, joka sinun tulisi ottaa huomioon muotoillessasi iframe-kehyksiäsi on.
IFRAME
- itse. Vaikka useimmat selaimet sisältävät iframe-kehyksiä ilman paljon ylimääräisiä tyylejä, on silti hyvä lisätä joitain tyylejä, jotta ne pysyvät yhtenäisinä. Tässä on joitain CSS-tyylejä, joihin aina sisällytämme iframe-kehykset:
marginaali: 0;
pehmuste: 0;
raja: ei mitään;
leveys: arvo;
korkeus: arvo;
Kanssa.
leveys
ja.
korkeus
Aseta asiakirjaan sopiva koko. Tässä on esimerkkejä kehyksestä, jossa ei ole tyylejä ja jossa on vain perusasiat. Kuten näette, nämä tyylit poistavat enimmäkseen vain reunan iframe-kehyksen ympäriltä, mutta ne myös varmistavat, että kaikki selaimet näyttävät kyseisen iframe-kehyksen samoilla marginaaleilla, täytteillä ja mitoilla.HTML5 suosittelee, että käytät.
ylivuoto
ominaisuus poistaa vierityspalkit a: n sisällä vieritysruutu, mutta se ei ole luotettava. Joten jos haluat poistaa tai muuttaa vierityspalkkeja, käytä.
vieritys
attribuutti myös iframe-kehyksessäsi. Voit käyttää.
vieritys
määritteen, lisää se kuten kaikki muut määritteet ja valitse sitten yksi kolmesta arvosta:
Joo
,
ei
tai.
auto
.
Joo
käskee selainta sisällyttämään vierityspalkit aina, vaikka niitä ei tarvita.
ei
sanoo poistavan kaikki vierityspalkit tarvittaessa tai ei.
auto
on oletusarvo ja sisältää vierityspalkit, kun niitä tarvitaan, ja poistaa ne, kun niitä ei tarvita. Näin voit poistaa vierityksen käytöstä.
vieritys
attribute: scrolling = "ei">
Tämä on iframe.
Jos haluat poistaa vierityksen käytöstä HTML5: ssä, sinun on käytettävä.
ylivuoto
omaisuus. Mutta kuten näette esimerkeistä, se ei vielä toimi luotettavasti kaikissa selaimissa. Näin voit ottaa vierityksen käyttöön koko ajan.
ylivuoto
ominaisuus: style = "overflow: scroll;">
Tämä on iframe.
On ei todellakaan poistaaksesi vierityksen kokonaan käytöstä.
ylivuoto
omaisuus. Monet suunnittelijat haluavat, että iframe-kehykset sekoittuvat nykyisen sivun taustaan, jotta lukijat eivät tiedä, että iframe-kehykset ovat siellä. Mutta voit myös lisätä tyylejä, jotta ne erottuvat. Reunojen säätäminen niin, että iframe näkyy helpommin, on helppoa. Käytä vain.
rajalla
tyylinen omaisuus (tai se liittyy.
raja-alkuun
,
raja-oikea
,
raja-vasen
ja.
reunan pohja
ominaisuudet) reunojen muotoiluun: iframe {
border-top: # c00 1px pisteviiva;
reuna-oikea: # c00 2px pisteviiva;
reuna-vasen: # c00 2px pisteviiva;
reunapohja: # c00 4px pisteviiva;
}
Mutta sinun ei pidä lopettaa tyylisi vierittämistä ja reunoja. Voit käyttää iframe-kehykseen paljon muita CSS-tyylejä. Tässä esimerkissä CSS3-tyylit antavat iframe-kehykselle varjon, pyöristetyt kulmat ja kiertävät sitä 20 astetta.
iframe {
yläreuna: 20 kuvapistettä;
alareuna: 30 kuvapistettä;
-moz-raja-säde: 12 kuvapistettä;
-webkit-raja-säde: 12px;
reunan säde: 12 kuvapistettä;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
laatikko-varjo: 4px 4px 14px # 000;
-moz-muunnos: kiertää (20 astetta);
-webkit-muunnos: kiertää (20 astetta);
-o-muunnos: kiertää (20 astetta);
-ms-muunnos: kiertää (20 astetta);
suodatin: progid: DXImageTransform. Microsoft. BasicImage (kierto = .2);
}
Iframe-sisällön muotoilu
Iframe-kehyksen sisällön muotoilu on kuin minkä tahansa muun verkkosivun muotoilu. Mutta sinä on oltava pääsy sivun muokkaamiseen. Jos et voi muokata sivua (esimerkiksi, se on toisella sivustolla).
Jos voit muokata sivua, voit lisätä ulkoisen tyylisivun tai tyylit suoraan asiakirjaan samalla tavalla kuin tyylistäisit minkä tahansa muun sivustosi verkkosivun.