Cuando incrusta un elemento en su HTML, tiene dos oportunidades para agregarle estilos CSS:
- Puedes diseñar el
IFRAME sí mismo.
- Puedes diseñar la página dentro de la
IFRAME (bajo ciertas condiciones).
Usando CSS para diseñar el elemento IFRAME
Lo primero que debe tener en cuenta al diseñar sus iframes es la
IFRAME
margen: 0; relleno: 0; frontera: ninguna; anchura: valor ; altura: valor ; Con el anchura
y altura
Establecer en el tamaño que se ajuste en mi documento. A continuación, se incluyen ejemplos de un marco sin estilos y otro con los elementos básicos con estilo. Como puede ver, estos estilos solo eliminan el borde alrededor del iframe, pero también aseguran que todos los navegadores muestren ese iframe con los mismos márgenes, relleno y dimensiones. HTML5 recomienda que use el rebosar
Propiedad para eliminar las barras de desplazamiento, pero eso no es confiable. Por lo tanto, si desea eliminar o cambiar las barras de desplazamiento, debe utilizar la desplazamiento
atribuye en tu iframe también. Usar el desplazamiento
atributo, agréguelo como cualquier otro atributo y luego elija uno de los tres valores: sí
, no
o auto
sí
le dice al navegador que siempre incluya barras de desplazamiento incluso si no son necesarias. no
dice para eliminar todas las barras de desplazamiento si es necesario o no. auto
es el valor predeterminado e incluye las barras de desplazamiento cuando son necesarias y las elimina cuando no lo son. A continuación, le indicamos cómo desactivar el desplazamiento con la barra de desplazamiento. desplazamientoatributo: desplazamiento = "no"> Para desactivar el desplazamiento en HTML5 se supone que debe utilizar el rebosar
propiedad. Pero como puede ver en estos ejemplos, aún no funciona de manera confiable en todos los navegadores. Así es como activaría el desplazamiento todo el tiempo con el rebosarpropiedad: estilo = "desbordamiento: desplazamiento;"> Ahi esta de ninguna manera para desactivar el desplazamiento completamente con el rebosar
propiedad. Muchos diseñadores quieren que sus iframes se mezclen con el fondo de la página en la que están, de modo que los lectores no sepan que los iframes están ahí. Pero también puedes agregar estilos para resaltarlos. Ajustar los bordes para que el iframe aparezca más fácilmente es fácil. Solo usa el frontera
propiedad de estilo (o está relacionada borde superior
, borde derecho
, borde izquierdo
y borde inferiorpropiedades) para diseñar los bordes: iframe {borde superior: # c00 1px punteado;borde derecho: # c00 2px punteado;borde izquierdo: # c00 2px punteado;borde inferior: # c00 4px punteado;}
Pero no debes parar con el desplazamiento y los bordes de tus estilos. Puedes aplicar muchos otros estilos CSS a tu iframe. Este ejemplo utiliza estilos CSS3 para dar al iframe una sombra, esquinas redondeadas y girado 20 grados. iframe {margen superior: 20px;margen inferior: 30px;-moz-border-radius: 12px;-webkit-border-radius: 12px;radio del borde: 12px;-moz-box-shadow: 4px 4px 14px # 000;-webkit-box-shadow: 4px 4px 14px # 000;caja-sombra: 4px 4px 14px # 000;-moz-transform: rotate (20deg);-webkit-transform: rotate (20deg);-o-transformar: rotar (20deg);-ms-transformar: rotar (20deg);filtro: progid: DXImageTransform.Microsoft.BasicImage (rotación = .2);} Diseñar el contenido de un iframe es como diseñar cualquier otra página web. Pero tu Debe tener acceso para editar la página. . Si no puede editar la página (por ejemplo, está en otro sitio). Si puede editar la página, puede agregar una hoja de estilo externa o estilos directamente en el documento como si fuera un estilo de cualquier otra página web en su sitio.
Este es un iframe.
Este es un iframe.
Estilo de los contenidos de iframe
