Cuando inserta un elemento en su HTML, tiene dos oportunidades para agregarle estilos CSS:
- Puedes diseñar el
IFRAME
sí mismo. - Puede diseñar la página dentro del
IFRAME
(bajo ciertas condiciones).
Uso de CSS para diseñar el elemento IFRAME
Lo primero que debe considerar al diseñar sus iframes es el.
IFRAME
- sí mismo. Si bien la mayoría de los navegadores incluyen iframes sin muchos estilos adicionales, sigue siendo una buena idea agregar algunos estilos para mantenerlos consistentes. Aquí hay algunos estilos CSS que siempre incluimos en iframes:
margen: 0;
acolchado: 0;
borde: ninguno;
ancho: valor;
altura: valor;
Con el.
ancho
y.
altura
establezca el tamaño que se ajuste a mi documento. Aquí hay ejemplos de un marco sin estilos y uno con solo los estilos básicos. Como puede ver, estos estilos en su mayoría 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 utilice el.
Desbordamiento
propiedad para eliminar las barras de desplazamiento dentro de un cuadro de desplazamiento, pero eso no es confiable. Entonces, si desea eliminar o cambiar las barras de desplazamiento, debe usar la extensión.
desplazarse
atributo en su iframe también. Usar el.
desplazarse
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 que elimine todas las barras de desplazamiento, sean necesarias o no.
auto
es el predeterminado e incluye las barras de desplazamiento cuando se necesitan y las elimina cuando no lo son. A continuación se explica cómo desactivar el desplazamiento con.
desplazarse
atributo: scrolling = "no">
Este es un iframe.
Para desactivar el desplazamiento en HTML5, se supone que debe usar el archivo.
Desbordamiento
propiedad. Pero como puede ver en estos ejemplos, todavía no funciona de manera confiable en todos los navegadores. Así es como activarías el desplazamiento todo el tiempo con.
Desbordamiento
propiedad: estilo = "desbordamiento: desplazamiento;">
Este es un iframe.
Hay de ninguna manera para desactivar completamente el desplazamiento con el.
Desbordamiento
propiedad. Muchos diseñadores quieren que sus iframes se mezclen con el fondo de la página en la que se encuentran para que los lectores no sepan que los iframes están ahí. Pero también puede agregar estilos para que se destaquen. Ajustar los bordes para que el iframe se muestre 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 inferior
properties) para diseñar los bordes: iframe {
borde superior: # c00 1px punteado;
borde derecho: # c00 2px punteado;
borde izquierdo: # c00 2px con puntos;
borde inferior: # c00 4px punteado;
}
Pero no debe detenerse con el desplazamiento y los bordes de sus estilos. Puede aplicar muchos otros estilos CSS a su iframe. Este ejemplo usa estilos CSS3 para darle al iframe una sombra, esquinas redondeadas y rotarlo 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 de sombra: 4px 4px 14px # 000;
-moz-transform: rotar (20 grados);
-webkit-transform: rotar (20 grados);
-o-transformar: rotar (20 grados);
-ms-transform: rotar (20 grados);
filtro: progid: DXImageTransform. Microsoft. BasicImage (rotación = .2);
}
Aplicar estilo al contenido del iframe
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, tal como lo haría con cualquier otra página web de su sitio.