Kada ugradite element u HTML, imate dvije mogućnosti za dodavanje CSS stilova:
- Možete stilizirati
IFRAME sebe.
- Možete stilizirati stranicu unutar
IFRAME (pod određenim uvjetima).
Upotreba CSS-a za stil IFRAME elementa
Prva stvar koju biste trebali uzeti u obzir prilikom oblikovanja vaših iframes je
IFRAME
margina: 0; padding: 0; granica: none; širina: vrijednost ; visina: vrijednost ; Uz širina
i visina
postavite na veličinu koja odgovara mom dokumentu. Evo primjera okvira bez stilova i jedne sa samo osnovnim stilom. Kao što možete vidjeti, ti stilovi uglavnom uklanjaju obrub oko iframea, ali također osiguravaju da svi preglednici prikazuju iframe s iste margine, padding i dimensions.HTML5 preporučuje da koristite prelijevanje
za uklanjanje trake za pomicanje, ali to nije pouzdano. Dakle, ako želite ukloniti ili promijeniti trake za pomicanje, trebali biste upotrijebiti sklizanje
atribut na vašem iframeu. Da biste upotrijebili sklizanje
dodajte ga kao bilo koji drugi atribut, a zatim odaberite jednu od tri vrijednosti: Da
, Ne
, ili auto
Da
govori pregledniku da uvijek uključuje trake za pomicanje čak i ako nisu potrebne. Ne
kaže da uklanja sve trake za pomicanje ako je potrebno ili ne. auto
je zadana i uključuje trake za pomicanje kada su potrebne i uklanja ih kada nisu.Ovo je kako isključiti pomicanje s sklizanjeatribut: pomicanje = „ne”> Da biste isključili pomicanje u HTML5, trebali biste upotrijebiti prelijevanje
nekretnine. No, kao što možete vidjeti u ovim primjerima, još uvijek ne funkcionira pouzdano u svim preglednicima. Evo kako biste se uključili tijekom čitavog pomicanja sa sustavom prelijevanjesvojstvo: style = "overflow: scroll;"> Tamo je nema šanse za potpuno isključivanje pomicanja pomoću prelijevanje
nekretnine. Mnogi dizajneri žele da se njihovi iframeovi uklopi u pozadinu stranice na kojoj se nalaze, tako da čitatelji ne znaju da su iframeovi čak i tamo. Ali možete dodati i stilove kako bi ih se istaknulo. Podešavanje granica kako bi se iframe lakše pokazao lako je. Upotrijebite samo granica
(ili je povezano border-top
, granica-pravo
, granica-lijevo
, i border-bottomsvojstva) za stilizaciju granica: iframe {granični vrh: # c00 1 piksela;granica-desno: # c00 2px isprekidano;granica lijevo: # c00 2px isprekidano;granični dno: # c00 4px isprekidano;}
Ali ne biste se trebali zaustaviti pomicanje i granice za svoje stilove. Možete primijeniti puno drugih CSS stilova u svoj iframe. Ovaj primjer upotrebljava CSS3 stilove kako bi iframe imao sjenu, zaobljeni kutovi i okrenuo ga za 20 stupnjeva. iframe {margin-top: 20 piksela;margina-dno: 30 piksela;-moz-granični polumjer: 12px;-webkit-border-radius: 12px;granični polumjer: 12px;-moz-box-shadow: 4px 4px 14px # 000;-webkit-box-shadow: 4px 4px 14px # 000;okvirna sjena: 4 x 4 x 14 x 000;-moz-transformacija: rotirati (20deg);-webkit-transformacija: rotirati (20deg);-O-transformacije: rotiraju (20deg);Ms-transformacija: rotirati (20deg);Filter: ProgID: DXImageTransform.Microsoft.BasicImage (rotacija = .2);} Oblikovanje sadržaja iframea je baš kao oblik bilo koje druge web stranice. Ali ti mora imati pristup uređivanju stranice , Ako ne možete uređivati stranicu (na primjer, na nekom drugom mjestu). Ako možete urediti stranicu, možete dodati vanjski stilski stil ili stilove izravno u dokument kao što biste htjeli oblikovati bilo koju drugu web stranicu na svojoj web stranici.
Ovo je iframe.
Ovo je iframe.
Stiliranje sadržaja iframea
