Quando incorpori un elemento nel tuo codice HTML, hai due possibilità di aggiungere stili CSS:
- Puoi modellare il
IFRAME si.
- Puoi dare uno stile alla pagina all'interno di
IFRAME (in determinate condizioni).
Usando i CSS per modellare l'elemento IFRAME
La prima cosa da considerare quando si disegnano gli iframe è il
IFRAME
margine: 0; padding: 0; confine: nessuno; larghezza: valore ; altezza: valore ; Con il larghezza
e altezza
impostare la dimensione che si adatta al mio documento. Ecco alcuni esempi di frame senza stili e uno con solo le basi in stile. Come puoi vedere, questi stili rimuovono principalmente il bordo attorno all'iframe, ma assicurano anche che tutti i browser visualizzino quell'iframe con gli stessi margini, spaziatura e dimensioni.HTML5 ti consiglia di utilizzare straripamento
proprietà per rimuovere le barre di scorrimento, ma non è affidabile. Quindi, se si desidera rimuovere o modificare le barre di scorrimento, è necessario utilizzare scrolling
attributo anche sul tuo iframe. Per usare il scrolling
attributo, aggiungilo come qualsiasi altro attributo e quindi scegli uno dei tre valori: sì
, no
, o auto
sì
dice al browser di includere sempre le barre di scorrimento anche se non sono necessarie. no
dice di rimuovere tutte le barre di scorrimento, se necessario o meno. auto
è il valore predefinito e include le barre di scorrimento quando sono necessarie e le rimuove quando non lo sono. Ecco come disattivare lo scorrimento con scrollingattributo: scrolling = "no"> Per disattivare lo scorrimento in HTML5 si suppone di utilizzare il straripamento
proprietà. Ma come puoi vedere in questi esempi non funziona ancora in modo affidabile in tutti i browser. Ecco come si dovrebbe attivare lo scorrimento di tutto il tempo con il straripamentoproprietà: style = "overflow: scroll;"> C'è non c'è modo per disattivare completamente lo scorrimento con straripamento
proprietà. Molti designer vogliono che i loro ifram si fondano con lo sfondo della pagina in cui si trovano, in modo che i lettori non sappiano che gli iframe sono persino presenti. Ma puoi anche aggiungere stili per farli risaltare. Regolare i bordi in modo che l'iframe si presenti più facilmente è facile. Basta usare il confine
proprietà di stile (o è correlata border-top
, border-right
, border-left
, e border-bottomproprietà) per disegnare i bordi: iframe {border-top: # c00 1px punteggiato;border-right: # c00 2px punteggiato;border-left: # c00 2px punteggiato;border-bottom: # c00 4px punteggiato;}
Ma non devi fermarti con lo scrolling e i bordi per i tuoi stili. Puoi applicare molti altri stili CSS al tuo iframe. Questo esempio usa gli stili CSS3 per dare all'iframe un'ombra, angoli arrotondati e ruotato di 20 gradi. iframe {margin-top: 20px;margin-bottom: 30px;-moz-border-radius: 12px;-webkit-border-radius: 12px;border-radius: 12px;-moz-box-shadow: 4px 4px 14px # 000;-webkit-box-shadow: 4px 4px 14px # 000;box-shadow: 4px 4px 14px # 000;-moz-transform: rotate (20deg);-webkit-transform: rotate (20deg);-o-transform: rotate (20deg);-ms-transform: ruotare (20deg);Filtro: progid: DXImageTransform.Microsoft.BasicImage (rotazione = 0,2);} Disegnare i contenuti di un iframe è come disegnare qualsiasi altra pagina web. Ma tu deve avere accesso per modificare la pagina . Se non puoi modificare la pagina (ad esempio, è su un altro sito). Se puoi modificare la pagina, puoi aggiungere un foglio di stile esterno o degli stili direttamente nel documento, proprio come faresti con qualsiasi altra pagina web sul tuo sito.
Questo è un iframe.
Questo è un iframe.
Disegnare i contenuti dell'Iframe
