Quando você incorpora um elemento em seu HTML, você tem duas oportunidades para adicionar estilos CSS a ele:
- Você pode estilizar o
IFRAME
em si. - Você pode estilizar a página dentro do
IFRAME
(sob certas condições).
Usando CSS para definir o estilo do elemento IFRAME
A primeira coisa que você deve considerar ao definir o estilo de seus iframes é o.
IFRAME
- em si. Embora a maioria dos navegadores inclua iframes sem muitos estilos extras, ainda é uma boa ideia adicionar alguns estilos para mantê-los consistentes. Aqui estão alguns estilos CSS que sempre incluímos em iframes:
margem: 0;
preenchimento: 0;
fronteira: nenhum;
largura: valor;
altura: valor;
Com o.
largura
e.
altura
definido para o tamanho que cabe no meu documento. Aqui estão exemplos de uma moldura sem estilos e uma com apenas o estilo básico. Como você pode ver, esses estilos basicamente removem a borda ao redor do iframe, mas também garantem que todos os navegadores exibam esse iframe com as mesmas margens, preenchimento e dimensões.HTML5 recomenda que você use o.
transbordar
propriedade para remover as barras de rolagem dentro de um caixa de rolagem, mas isso não é confiável. Portanto, se quiser remover ou alterar as barras de rolagem, você deve usar o.
rolagem
atributo em seu iframe também. Para usar o.
rolagem
atributo, adicione-o como qualquer outro atributo e escolha um dos três valores:
sim
,
não
, ou.
auto
.
sim
diz ao navegador para sempre incluir barras de rolagem, mesmo se elas não forem necessárias.
não
diz para remover todas as barras de rolagem, sejam necessárias ou não.
auto
é o padrão e inclui as barras de rolagem quando são necessárias e as remove quando não são. Veja como desativar a rolagem com o.
rolagem
atributo: scrolling = "no">
Este é um iframe.
Para desligar a rolagem em HTML5, você deve usar o.
transbordar
propriedade. Mas, como você pode ver nesses exemplos, ele ainda não funciona de maneira confiável em todos os navegadores. Veja como você ativaria a rolagem o tempo todo com o.
transbordar
propriedade: style = "overflow: scroll;">
Este é um iframe.
Há de jeito nenhum para desligar a rolagem completamente com o.
transbordar
propriedade. Muitos designers desejam que seus iframes se misturem ao plano de fundo da página em que estão, para que os leitores não saibam que os iframes estão lá. Mas você também pode adicionar estilos para destacá-los. Ajustar as bordas para que o iframe apareça mais facilmente é fácil. Basta usar o.
fronteira
propriedade de estilo (ou relacionada.
borda superior
,
fronteira direita
,
borda esquerda
, e.
borda inferior
propriedades) para definir o estilo das bordas: iframe {
border-top: # c00 1px pontilhado;
borda direita: # c00 2px pontilhado;
borda esquerda: # c00 2px pontilhado;
border-bottom: # c00 4px pontilhado;
}
Mas você não deve parar com a rolagem e as bordas de seus estilos. Você pode aplicar muitos outros estilos CSS ao seu iframe. Este exemplo usa estilos CSS3 para dar ao iframe uma sombra, cantos arredondados e girá-lo 20 graus.
iframe {
margem superior: 20px;
margin-bottom: 30px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
raio da borda: 12px;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
sombra da caixa: 4px 4px 14px # 000;
-moz-transform: rotate (20deg);
-webkit-transform: rotate (20deg);
-o-transformada: girar (20deg);
-ms-transform: girar (20deg);
filtro: progid: DXImageTransform. Microsoft. BasicImage (rotação = 0,2);
}
Estilizando o conteúdo do Iframe
Definir o estilo do conteúdo de um iframe é como definir o estilo de qualquer outra página da web. Mas você deve ter acesso para editar a página. Se você não pode editar a página (por exemplo, está em outro site).
Se você pode editar a página, pode adicionar uma folha de estilo externa ou estilos diretamente no documento, como faria com qualquer outra página da web em seu site.