När du bäddar in ett element i din HTMLhar du två möjligheter att lägga till CSS-stilar till den:
- Du kan forma
IFRAME
sig. - Du kan utforma sidan inuti
IFRAME
(under vissa förhållanden).
Använd CSS för att utforma IFRAME-elementet
Det första du bör tänka på när du stylar dina iframes är.
IFRAME
- sig. Medan de flesta webbläsare innehåller iframes utan många extra stilar, är det fortfarande en bra idé att lägga till några stilar för att hålla dem konsekventa. Här är några CSS-stilar som vi alltid inkluderar iframes:
marginal: 0;
stoppning: 0;
gräns: ingen;
bredd: värde;
höjd: värde;
Med.
bredd
och.
höjd
ställ in den storlek som passar i mitt dokument. Här är exempel på en ram utan stilar och en med bara grunderna. Som du ser tar dessa stilar vanligtvis bara bort gränsen runt iframe, men de ser också till att alla webbläsare visar den iframe med samma marginaler, vaddering och dimensioner.HTML5 rekommenderar att du använder.
svämma över
egenskap för att ta bort rullningslisterna inom a
rullruta, men det är inte tillförlitligt. Så om du vill ta bort eller ändra rullningslisten bör du använda.rullning
attribut på din iframe också. Att använda.
rullning
attribut, lägg till det som alla andra attribut och välj sedan ett av tre värden:
ja
,
Nej
, eller.
bil
.
ja
säger till webbläsaren att alltid inkludera rullningslister även om de inte behövs.
Nej
säger att ta bort alla rullningslister oavsett om det behövs eller inte.
bil
är standard och inkluderar rullningslisterna när de behövs och tar bort dem när de inte är det. Så här stänger du av rullning med.
rullning
attribute: scrolling = "no">
Det här är en iframe.
För att stänga av rullning i HTML5 ska du använda.
svämma över
fast egendom. Men som du kan se i dessa exempel fungerar det inte pålitligt i alla webbläsare än. Så här skulle du slå på att rulla hela tiden med.
svämma över
property: style = "overflow: scroll;">
Det här är en iframe.
Det finns aldrig för att stänga av rullningen helt med.
svämma över
fast egendom. Många designers vill att deras iframes ska smälta in i bakgrunden på den sida de är på så att läsarna inte vet att iframesna finns ens. Men du kan också lägga till stilar så att de sticker ut. Det är enkelt att justera gränserna så att iframe lättare visas. Använd bara.
gräns
stilegenskap (eller det är relaterat.
gräns-topp
,
gräns-höger
,
gräns-vänster
och.
gräns-botten
egenskaper) för att utforma gränserna: iframe {
border-top: # c00 1px prickad;
border-right: # c00 2px prickad;
border-left: # c00 2px prickad;
border-bottom: # c00 4px prickad;
}
Men du bör inte sluta med att rulla och gränsar för dina stilar. Du kan använda många andra CSS-stilar på din iframe. Detta exempel använder CSS3-stilar för att ge iframe en skugga, rundade hörn och roterade den 20 grader.
iframe {
margin-top: 20px;
marginal-botten: 30 pixlar;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
gränsradie: 12 pixlar;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
box-shadow: 4px 4px 14px # 000;
-moz-transform: rotera (20deg);
-webkit-transform: rotera (20deg);
-o-transform: rotera (20deg);
-ms-transform: rotera (20deg);
filter: progid: DXImageTransform. Microsoft. BasicImage (rotation = .2);
}
Styling av Iframe-innehållet
Styling av innehållet i en iframe är precis som att forma alla andra webbsidor. Men du måste ha åtkomst för att redigera sidan. Om du inte kan redigera sidan (till exempel finns den på en annan webbplats).
Om du kan redigera sidan kan du lägga till ett externt formatmall eller formatmallar direkt i dokumentet precis som du skulle utforma någon annan webbsida på din webbplats.