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 estilizar o elemento IFRAME
A primeira coisa que você deve considerar ao estilizar seus iframes é o
IFRAME
margem: 0; preenchimento: 0; fronteira: nenhuma; largura: valor ; altura: valor ; Com o largura
e altura
definido para o tamanho que se encaixa no meu documento. Aqui estão alguns exemplos de um quadro sem estilos e um com apenas o estilo básico. Como você pode ver, esses estilos geralmente apenas 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, mas isso não é confiável. Então, se você 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, em seguida, escolha um dos três valores: sim
, não
ou auto
sim
informa ao navegador para incluir sempre barras de rolagem, mesmo que não sejam necessárias. não
diz para remover todas as barras de rolagem, se necessário ou não. auto
é o padrão e inclui as barras de rolagem quando elas são necessárias e as remove quando não estão. Aqui está como desativar a rolagem com a barra de rolagem. rolagematributo: rolagem = "não"> Para desativar a rolagem em HTML5, você deve usar o transbordar
propriedade. Mas, como você pode ver nesses exemplos, ainda não funciona de maneira confiável em todos os navegadores. Veja como você ligaria a rolagem o tempo todo com o transbordarpropriedade: style = "overflow: scroll;"> Há sim de jeito nenhum para desligar a rolagem completamente com o transbordar
propriedade. Muitos designers querem que seus iframes se misturem com o background 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 prontamente é fácil. Basta usar o fronteira
propriedade de estilo (ou é relacionado limite superior
, borda direita
, borda esquerda
e beira-fundopropriedades) para estilizar as bordas: iframe {border-top: # c00 1px pontilhado;borda direita: # c00 2px pontilhada;borda esquerda: # c00 2px pontilhada;border-bottom: # c00 4 px pontilhado;}
Mas você não deve parar com rolagem e bordas para 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 rotação de 20 graus. iframe {margem superior: 20px;margem inferior: 30px;-moz-border-radius: 12px;-webkit-border-radius: 12 px;raio de fronteira: 12 px;-moz-box-shadow: 4 px 4 px 14 px # 000;-webkit-box-shadow: 4 px 4 px 14 px # 000;box-shadow: 4 px 4 px 14 px # 000;-moz-transform: rotate (20deg);-webkit-transform: rotate (20deg);-o-transform: rotate (20deg);-ms-transform: rotate (20deg);filtro: progid: DXImageTransform.Microsoft.BasicImage (rotation = .2);} Definir o conteúdo de um iframe é como estilizar 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, é em outro site). Se você puder editar a página, poderá adicionar uma folha de estilo ou estilos externos diretamente no documento, da mesma forma que faria com qualquer outra página da Web em seu site.
Este é um iframe.
Este é um iframe.
Estilizando o conteúdo do Iframe
