Kada ugrađujete element u svoj HTML, imate dvije prilike za dodavanje CSS stilova:
- Možete stilizirati
IFRAME
sebe. - Stranicu možete stilizirati unutar
IFRAME
(pod određenim uvjetima).
Korištenje CSS-a za oblikovanje IFRAME elementa
Prva stvar koju biste trebali uzeti u obzir prilikom oblikovanja svojih iframeova je.
IFRAME
- sebe. Iako većina preglednika uključuje iframe-ove bez puno dodatnih stilova, ipak je dobro dodati neke stilove kako bi bili dosljedni. Evo nekoliko CSS stilova koje uvijek uključujemo iframe:
marža: 0;
popunjavanje: 0;
granica: nema;
širina: vrijednost;
visina: vrijednost;
Uz.
širina
i.
visina
postaviti na veličinu koja odgovara mom dokumentu. Evo primjera okvira bez stilova i onog sa samo osnovnim stilovima. Kao što vidite, ti stilovi uglavnom samo uklanjaju obrub oko iframea, ali ujedno osiguravaju da svi preglednici prikazuju taj iframe s istim marginama, ulošcima i dimenzijama.HTML5 preporučuje da koristite.
prelijevanje
svojstvo uklanjanja traka za pomicanje unutar a
pomični okvir, ali to nije pouzdano. Dakle, ako želite ukloniti ili promijeniti trake za pomicanje, trebali biste koristiti.pomicanje
atribut i na vašem iframeu. Da biste koristili.
pomicanje
atribut, dodajte ga kao i bilo koji drugi atribut, a zatim odaberite jednu od tri vrijednosti:
Da
,
Ne
, ili.
auto
.
Da
govori pregledniku da uvijek uključi trake za pomicanje čak i ako nisu potrebne.
Ne
kaže ukloniti sve trake za pomicanje bez obzira na to je li potrebno.
auto
je zadani i uključuje trake za pomicanje kad su potrebne i uklanja ih kada nisu. Evo kako isključiti pomicanje pomoću.
pomicanje
atribut: pomicanje = "ne">
Ovo je iframe.
Da biste isključili pomicanje u HTML5, trebali biste koristiti.
prelijevanje
imovine. Ali kao što možete vidjeti u ovim primjerima, to još uvijek ne radi pouzdano u svim preglednicima. Evo kako biste uključili stalno pomicanje pomoću.
prelijevanje
svojstvo: style = "overflow: scroll;">
Ovo je iframe.
Tamo je nema šanse za potpuno isključivanje pomicanja pomoću.
prelijevanje
imovine. Mnogi dizajneri žele da se njihovi okviri okvira stapaju s pozadinom stranice na kojoj se nalaze, tako da čitatelji ne znaju da li su okviri okvira uopće. Ali možete dodati i stilove kako bi se istakli. Jednostavno je prilagoditi granice kako bi se iframe lakše prikazao. Samo upotrijebite.
granica
svojstvo stila (ili je povezano.
granica-vrh
,
granica-desno
,
granica-lijevo
, i.
granica-dno
svojstva) za oblikovanje obruba: iframe {
border-top: # c00 1px točkasto;
rub-desno: # c00 2 piksela točkasto;
obrub-lijevo: # c00 2 piksela točkasto;
obrub-dno: # c00 4 piksela točkasto;
}
Ali ne biste trebali prestati s pomicanjem i obrubima za svoje stilove. Na svoj iframe možete primijeniti puno drugih CSS stilova. Ovaj primjer koristi CSS3 stilove kako bi iframe dao sjenku, zaobljene kutove i zakrenuo ga za 20 stupnjeva.
iframe {
margin-top: 20px;
margina-dno: 30 piksela;
-moz-radijus-granice: 12px;
-webkit-radijus-granice: 12px;
radijus obruba: 12 piksela;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
kutija-sjena: 4px 4px 14px # 000;
-moz-transformiraj: rotiraj (20deg);
-webkit-transformiraj: rotiraj (20deg);
-o-transformirati: rotirati (20deg);
-ms-transformiraj: rotiraj (20deg);
filtar: progid: DXImageTransform. Microsoft. BasicImage (rotacija = .2);
}
Stiliziranje sadržaja okvira
Stiliziranje sadržaja iframea jednako je oblikovanju bilo koje druge web stranice. Ali ti mora imati pristup uređivanju stranice. Ako ne možete urediti stranicu (na primjer, nalazi se na drugoj stranici).
Ako možete urediti stranicu, tada možete dodati vanjsku tablicu stilova ili stilove izravno u dokument baš kao što biste oblikovali bilo koju drugu web stranicu na svojoj web lokaciji.