Quando incorpori un elemento nel tuo HTML, hai due opportunità per aggiungere stili CSS:
- Puoi modellare il
IFRAME
si. - Puoi modellare la pagina all'interno del
IFRAME
(a determinate condizioni).
Utilizzo dei CSS per definire lo stile dell'elemento IFRAME
La prima cosa che dovresti considerare quando stili i tuoi iframe è il.
IFRAME
- si. Sebbene la maggior parte dei browser includa iframe senza molti stili extra, è comunque una buona idea aggiungere alcuni stili per mantenerli coerenti. Ecco alcuni stili CSS che includiamo sempre iframe:
margine: 0;
imbottitura: 0;
confine: nessuno;
larghezza: valore;
altezza: valore;
Con il.
larghezza
e.
altezza
impostato sulla dimensione che si adatta al mio documento. Ecco alcuni esempi di una cornice senza stili e una con solo lo stile di base. 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 interna e dimensioni.HTML5 consiglia di utilizzare il.
straripamento
proprietà per rimuovere le barre di scorrimento all'interno di a casella di scorrimento, ma non è affidabile. Quindi, se vuoi rimuovere o modificare le barre di scorrimento, dovresti usare il file.
scorrimento
attributo anche sul tuo iframe. Per usare il.
scorrimento
attributo, aggiungilo come qualsiasi altro attributo e poi 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
è l'impostazione predefinita e include le barre di scorrimento quando sono necessarie e le rimuove quando non lo sono. Ecco come disattivare lo scorrimento con il.
scorrimento
attributo: scrolling="no">
Questo è un iframe.
Per disattivare lo scorrimento in HTML5 dovresti usare il file.
straripamento
proprietà. Ma come puoi vedere in questi esempi, non funziona ancora in modo affidabile in tutti i browser. Ecco come attivare lo scorrimento tutto il tempo con il.
straripamento
proprietà: style="overflow: scroll;">
Questo è un iframe.
C'è non c'è modo per disattivare completamente lo scorrimento con il.
straripamento
proprietà. Molti designer vogliono che i loro iframe si fondano con lo sfondo della pagina in cui si trovano, in modo che i lettori non sappiano che gli iframe sono anche lì. Ma puoi anche aggiungere stili per farli risaltare. La regolazione dei bordi in modo che l'iframe venga visualizzato più facilmente è facile. Basta usare il.
confine
proprietà di stile (o è correlata.
bordo-top
,
confine-destra
,
bordo-sinistra
, e.
bordo-fondo
proprietà) per definire lo stile dei bordi: iframe {
bordo in alto: #c00 1px punteggiato;
bordo destro: #c00 2px punteggiato;
bordo sinistro: #c00 2px punteggiato;
bordo-basso: #c00 4px punteggiato;
}
Ma non dovresti fermarti allo scorrimento e ai bordi per i tuoi stili. Puoi applicare molti altri stili CSS al tuo iframe. Questo esempio utilizza gli stili CSS3 per dare all'iframe un'ombra, angoli arrotondati e ruotarlo di 20 gradi.
iframe {
margine superiore: 20 px;
margine inferiore: 30px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
raggio di confine: 12px;
-moz-box-shadow: 4px 4px 14px #000;
-webkit-box-shadow: 4px 4px 14px #000;
box-shadow: 4px 4px 14px #000;
-moz-trasformare: ruotare (20°);
-webkit-transform: ruotare (20°);
-o-trasformare: ruotare (20°);
-ms-trasforma: ruota (20°);
filtro: progid: DXImageTransform. Microsoft. BasicImage (rotazione=.2);
}
Disegnare il contenuto dell'iframe
Lo stile dei contenuti di un iframe è proprio come lo stile di 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 stili direttamente nel documento proprio come faresti con qualsiasi altra pagina web sul tuo sito.