Wanneer u een element insluit in uw HTML, hebt u twee mogelijkheden om er CSS-stijlen aan toe te voegen:
- Je kunt de
IFRAME
zelf. - U kunt de pagina opmaken in de
IFRAME
(onder bepaalde omstandigheden).
CSS gebruiken om het IFRAME-element op te maken
Het eerste waar u rekening mee moet houden bij het stylen van uw iframes is de.
IFRAME
- zelf. Hoewel de meeste browsers iframes bevatten zonder veel extra stijlen, is het toch een goed idee om enkele stijlen toe te voegen om ze consistent te houden. Hier zijn enkele CSS-stijlen die we altijd opnemen in iframes:
marge: 0;
opvulling: 0;
grens: geen;
breedte: waarde;
hoogte: waarde;
Met de.
breedte
en.
hoogte
ingesteld op het formaat dat in mijn document past. Hier zijn voorbeelden van een montuur zonder stijlen en een met alleen de basisstijlen. Zoals u kunt zien, verwijderen deze stijlen meestal alleen de rand rond het iframe, maar ze zorgen er ook voor dat alle browsers dat iframe weergeven met dezelfde marges, opvulling en afmetingen.HTML5 raadt u aan om de.
overloop
eigenschap om de schuifbalken binnen a. te verwijderen scroll box, maar dat is niet betrouwbaar. Dus als u de schuifbalken wilt verwijderen of wijzigen, moet u de.
scrollen
attribuut ook op uw iframe. Om het te gebruiken.
scrollen
kenmerk, voeg het toe zoals elk ander kenmerk en kies vervolgens een van de drie waarden:
Ja
,
Nee
, of.
auto
.
Ja
vertelt de browser om altijd schuifbalken op te nemen, zelfs als ze niet nodig zijn.
Nee
zegt om alle schuifbalken te verwijderen, of dat nu nodig is of niet.
auto
is de standaardinstelling en bevat de schuifbalken wanneer ze nodig zijn en verwijdert ze wanneer dat niet het geval is. Hier leest u hoe u scrollen uitschakelt met de.
scrollen
attribuut: scrollen = "nee">
Dit is een iframe.
Om scrollen in HTML5 uit te schakelen, moet je de.
overloop
eigendom. Maar zoals je in deze voorbeelden kunt zien, werkt het nog niet in alle browsers betrouwbaar. Hier ziet u hoe u de hele tijd scrollen zou inschakelen met de.
overloop
eigenschap: style="overflow: scroll;">
Dit is een iframe.
Er is echt niet om het scrollen volledig uit te schakelen met de.
overloop
eigendom. Veel ontwerpers willen dat hun iframes opgaan in de achtergrond van de pagina waarop ze zich bevinden, zodat lezers niet weten dat de iframes er zijn. Maar je kunt ook stijlen toevoegen om ze te laten opvallen. Het aanpassen van de randen zodat het iframe gemakkelijker wordt weergegeven, is eenvoudig. Gebruik gewoon de.
grens
stijleigenschap (of het is gerelateerd.
border-top
,
grens-rechts
,
grens-links
, en.
border-bottom
eigenschappen) om de randen op te maken: iframe {
border-top: #c00 1px gestippeld;
grens-rechts: #c00 2px gestippeld;
border-links: #c00 2px gestippeld;
border-bottom: #c00 4px gestippeld;
}
Maar je moet niet stoppen met scrollen en randen voor je stijlen. U kunt veel andere CSS-stijlen toepassen op uw iframe. In dit voorbeeld worden CSS3-stijlen gebruikt om het iframe een schaduw te geven, afgeronde hoeken en 20 graden te draaien.
iframe {
marge-top: 20px;
marge-onder: 30px;
-moz-grens-radius: 12px;
-webkit-grens-radius: 12px;
grens-radius: 12px;
-moz-box-schaduw: 4px 4px 14px #000;
-webkit-box-schaduw: 4px 4px 14px #000;
doosschaduw: 4px 4px 14px #000;
-moz-transformatie: roteren (20deg);
-webkit-transform: roteren (20deg);
-o-transformatie: roteren (20deg);
-ms-transformatie: roteren (20deg);
filter: progid: DXImageTransform. Microsoft. BasicImage (rotatie=.2);
}
De Iframe-inhoud stylen
Het stylen van de inhoud van een iframe is net als het stylen van een andere webpagina. Maar jij moet toegang hebben om de pagina te bewerken. Als u de pagina niet kunt bewerken (deze bevindt zich bijvoorbeeld op een andere site).
Als u de pagina kunt bewerken, kunt u een externe stylesheet of stijlen direct in het document toevoegen, net zoals u elke andere webpagina op uw site zou opmaken.