Quan incorporeu un element al vostre codi HTML, teniu dues possibilitats d'afegir-hi estils CSS:
- Podeu fer-ne l'estil
IFRAME ella mateixa.
- Podeu personalitzar la pàgina dins de la
IFRAME (sota certes condicions).
Ús de CSS per a l'estil de l'element IFRAME
El primer que hauríeu de tenir en compte en dissenyar els vostres iframes és el
IFRAME
marge: 0; farcit: 0; frontera: cap; ample: valor ; alçada: valor ; Amb el amplada
i altura
ajusteu-vos a la mida que s'adapti al document. A continuació, es mostren exemples d'un marc sense estils i un d'ells amb els principis bàsics. Com podeu veure, aquests estils simplement eliminen la vora de l'iframe, però també asseguren que tots els navegadors mostrin aquest iframe amb els mateixos marges, farcit i dimensions.HTML5 recomana que utilitzeu el desbordament
propietat per eliminar les barres de desplaçament, però això no és fiable. Per tant, si voleu eliminar o canviar les barres de desplaçament, haureu d'utilitzar el desplaçament
atribueix al vostre iframe també. Per utilitzar el desplaçament
atribueu-lo, afegiu-lo com qualsevol altre atribut i, a continuació, trieu un dels tres valors: sí
, no
, o auto
sí
indica al navegador que inclogui sempre barres de desplaçament, encara que no siguin necessàries. no
diu que esborreu totes les barres de desplaçament necessàries o no. auto
és el valor predeterminat i inclou les barres de desplaçament quan són necessàries i les elimina quan no ho són. Aquí és com desactivar el desplaçament amb la desplaçamentatribut: desplaçament = "no"> Per desactivar el desplaçament a HTML5 se suposa que heu d'utilitzar el desbordament
propietat. Però, com podeu veure en aquests exemples, encara no funciona de manera fiable en tots els navegadors. A continuació us indiquem com podeu activar el desplaçament tot el temps amb el desbordamentpropietat: style = "overflow: scroll;"> Hi ha de cap manera per desactivar el desplaçament completament amb el desbordament
propietat. Molts dissenyadors volen que els seus iframes es barregin amb el rerefons de la pàgina on estiguin perquè els lectors no saben que els iframes són fins i tot allà. Però també podeu afegir estils per fer-los ressaltar. Ajustar les vores perquè l'iframe es mostri més fàcilment sigui fàcil. Només has d'utilitzar el frontera
propietat d'estil (o està relacionada frontera superior
, frontera-dreta
, frontera-esquerra
, i límit inferiorpropietats) per a estil les fronteres: iframe {frontera superior: # c00 1px puntejada;frontera-dreta: # c00 2px puntejada;frontera esquerra: # c00 2px puntejada;frontera inferior: # c00 4px puntejada;}
Però no hauríeu d'aturar-vos amb el desplaçament i les vores dels vostres estils. Podeu aplicar molts altres estils CSS al vostre iframe. Aquest exemple utilitza estils CSS3 per donar a l'iframe una ombra, cantonades arrodonides i girar-la 20 graus. iframe {marge superior: 20 px;marge inferior: 30 px;-moz-frontera-ràdio: 12 px;-webkit-border-radius: 12 px;radi límit: 12 px;-moz-box-shadow: 4px 4px 14px # 000;-webkit-box-shadow: 4px 4px 14px # 000;caixa-ombra: 4px 4px 14px # 000;-moz-transformar: girar (20deg);-webkit-transform: rotar (20deg);-o-transformar: girar (20deg);-ms-transformar: girar (20deg);filtre: progid: DXImageTransform.Microsoft.BasicImage (rotació = .2);} Estilitzar els continguts d'un iframe és com dibuixar qualsevol altra pàgina web. Però tu ha de tenir accés per editar la pàgina . Si no podeu editar la pàgina (per exemple, és a un altre lloc). Si podeu editar la pàgina, podeu afegir un full d'estils o estils externs al document tal com ho faria si voleu escriure qualsevol altra pàgina web del vostre lloc.
Aquest és un iframe.
Aquest és un iframe.
Dissenyant el contingut d'Iframe
