Ao incorporar um elemento em seu HTML, você tem duas oportunidades de 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
class = “ql-syntax”>
- 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 nos iframes: margin: 0;
- preenchimento: 0;
- fronteira: nenhum;
- largura: valor;
- altura: valor;
Com a largura
class = “ql-syntax”> e altura
class = “ql-syntax”> 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 overflow
class = “ql-syntax”> propriedade para remover as barras de rolagem dentro de uma caixa de rolagem, mas isso não é confiável. Então, se você quiser remover ou alterar as barras de rolagem, você deve usar o botão de rolagem
class = “ql-syntax”> atributo em seu iframe também. Para usar a rolagem
class = “ql-syntax”> attribute, adicione-o como qualquer outro atributo e escolha um dos três valores: sim
class = “ql-syntax”>, não
class = “ql-syntax”> ou auto
class = “ql-syntax”>. sim
class = “ql-syntax”> diz ao navegador para sempre incluir barras de rolagem, mesmo se elas não forem necessárias. não
class = “ql-syntax”> diz para remover todas as barras de rolagem, sejam necessárias ou não. auto
class = “ql-syntax”> é o padrão e inclui as barras de rolagem quando são necessárias e as remove quando não são. Aqui está como desligar a rolagem com a rolagem
atributo: scrolling = “no”>
Este é um iframe.
class = “ql-syntax”> Para desligar a rolagem em HTML5, você deve usar o overflow
class = “ql-syntax”> propriedade. Mas, como você pode ver nesses exemplos, ele ainda não funciona de maneira confiável em todos os navegadores. Veja como você ligaria a rolagem o tempo todo com o estouro
propriedade: overflow: scroll; “>
Este é um iframe.
class = “ql-syntax”> Existe de jeito nenhum para desligar a rolagem completamente com o estouro
class = “ql-syntax”> 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 a fronteira
class = “ql-syntax”> propriedade de estilo (ou sua borda superior
class = “ql-syntax”>, border-right
class = “ql-syntax”>, borda esquerda
class = “ql-syntax”> e border-bottom
propriedades) para estilizar as bordas: iframe {
border-top: # c00 1px pontilhado;
borda direita: # c00 2px pontilhado;
borda esquerda: # c00 2px pontilhado;
border-bottom: # c00 4px pontilhado;
}
class = “ql-syntax”> 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 = .2);
}
class = “ql-syntax”>
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.
