Kui kinnistate elemendi oma HTML, teil on sellele CSS-stiilide lisamiseks kaks võimalust:
- Saate kujundada
IFRAME
ise. - Lehte saate kujundada lehe siseküljel
IFRAME
(teatud tingimustel).
CSR-i kasutamine IFRAME-elemendi kujundamiseks
Esimene asi, mida peaksite iframe'i kujundamisel arvesse võtma, on.
IFRAME
- ise. Kuigi enamik brausereid sisaldab iframe'i ilma palju lisastiile, on siiski mõistlik lisada mõned stiilid, et need oleksid järjepidevad. Siin on mõned CSS-i stiilid, mida alati kaasame ifraamid:
varu: 0;
polster: 0;
piir: puudub;
laius: väärtus;
kõrgus: väärtus;
Koos.
laius
ja.
kõrgus
määrake minu dokumendile sobiv suurus. Siin on näited raamidest, millel pole stiile ja millest on kujundatud ainult põhitõed. Nagu näete, eemaldavad need stiilid enamasti iframe'i ümbritseva piiri, kuid tagavad ka selle, et kõik brauserid kuvavad seda iframe'i sama veerise, polsterduse ja mõõtmetega.HTML5 soovitab teil kasutada.
ülevoolu
atribuut a kerimisribade eemaldamiseks kerimiskast
, kuid see pole usaldusväärne. Seega, kui soovite kerimisribasid eemaldada või muuta, peaksite kasutama nuppu.kerimine
atribuut ka teie iframe'is. Kasutamiseks.
kerimine
atribuut, lisage see nagu iga teine atribuut ja seejärel valige üks kolmest väärtusest:
jah
,
ei
või.
automaatne
.
jah
käsib brauseril lisada kerimisribad ka siis, kui neid pole vaja.
ei
ütleb, et eemaldage kõik kerimisribad, kui vaja või mitte.
automaatne
on vaikimisi ja sisaldab kerimisribasid, kui neid vaja on, ja eemaldab need, kui neid pole. Siit saate teada, kuidas nupuga.
kerimine
atribuut: kerimine = "ei">
See on iframe.
HTML5-s kerimise väljalülitamiseks peaksite kasutama.
ülevoolu
vara. Kuid nagu näete nendest näidetest, ei tööta see veel kõigis brauserites usaldusväärselt. Siit saate teada, kuidas lülitate klahviga kogu aeg kerimise sisse.
ülevoolu
atribuut: style = "overflow: scroll;">
See on iframe.
Seal on pole võimalik klahviga kerimine täielikult välja lülitada.
ülevoolu
vara. Paljud disainerid soovivad, et nende iframe'id sulanduksid kokku lehe taustaga, kus nad on, nii et lugejad ei teaks, et iframe-id on olemas. Kuid saate ka stiile lisada, et need eristuksid. Ääriste reguleerimine nii, et iframe oleks hõlpsam, on lihtne. Kasutage lihtsalt.
piir
stiilis vara (või see on seotud.
border-top
,
piir-parem
,
piir-vasak
ja.
piir-põhi
omadused) piiride kujundamiseks: iframe {
ääreosa: # c00 1px punktiir;
ääris paremal: # c00 2px punktiir;
ääris vasakul: # c00 2px punktiir;
ääris-põhi: # c00 4px punktiir;
}
Kuid te ei tohiks lõpetada oma stiilide kerimisega ja piiridega. Iframe'i saate rakendada palju muid CSS-i stiile. Selles näites kasutatakse CSS3 stiile, et anda iframe'ile vari, ümardatud nurgad ja pöörata seda 20 kraadi.
iframe {
ülemine serv: 20 pikslit;
alumine serv: 30 pikslit;
-moz-piiri-raadius: 12px;
-veebikomplekt-raadiuse raadius: 12px;
piiri raadius: 12 pikslit;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
kasti vari: 4px 4px 14px # 000;
-moz-muundamine: pööramine (20deg);
-veebikomplekti teisendamine: pööramine (20deg);
-o-muundamine: pööramine (20 kraadi);
-ms-muundamine: pööramine (20deg);
filter: progid: DXImageTransform. Microsoft. BasicImage (pöörlemine = .2);
}
Iframe'i sisu kujundamine
Iframe'i sisu stiil on täpselt nagu mis tahes muu veebisaidi stiil. Aga sina peab lehe muutmiseks olema juurdepääs. Kui te ei saa lehte muuta (näiteks see asub mõnel teisel saidil).
Kui saate lehte redigeerida, saate otse dokumendi lisada välise stiililehe või stiilid, nagu stiiliksite oma saidi mis tahes muu veebilehe.