Come Stile un'immagine con i CSS. Utilizzare i CSS per presentare le immagini del tuo sito web nel miglior modo possibile. In questo articolo, imparerete dove posizionare l'immagine e se includere o meno decorazioni come confini.

istruzione

Galleggiante e centraggio

1 Inserire l'immagine sulla pagina con il solito metodo. Non dimenticare di includere adatto testo alternativo per l'immagine.

2 Per rendere il testo avvolgono l'immagine a destra, simile al modo in cui è nella foto l'introduzione di questo articolo, utilizzare una regola CSS in questo modo:

img {
float: left;
padding-right: 1em;
}

Il float: left regola fa muovere immagine al margine sinistro. La regola padding-right mantiene il testo da sbattere proprio contro il lato destro dell'immagine. Se un bordo è stato aggiunto a questa immagine, padding verrebbe tra l'immagine e il confine. Vedere Sezione 2 di lavorare con una immagine con un bordo.

3 Per adattare il testo a sinistra, galleggiare l'immagine sul margine destro. Utilizzare una regola come questa:

img {
float: right;
padding-left: 1em;
}

4 Per centrare l'immagine è necessario prima effettuare l'elemento immagine normalmente in linea in un elemento a livello di blocco.

img {
blocco di visualizzazione;
}

5 Successivamente, aggiungere margini a sinistra ea destra dell'immagine per centrarlo. Il valore corretto per i margini destro e sinistro per centrare tutto è automatico.

img {
blocco di visualizzazione;
margin-right: auto;
margin-left: auto;
}

Bordi e margini

6 I bordi possono essere utilizzati per creare un effetto ombra esterna o la comparsa di un frame.

Per creare un bordo spesso, a cornice utilizzando lo stile del bordo della scanalatura, una regola come questa può essere utilizzato:

img {
float: left;
border-width: 1em;
border-style: scanalatura;
border-color: # 000000;
}

Altri stili di bordo sono solidi, punteggiata, tratteggiata, doppio, cresta, inserto e fin dall'inizio. Larghezza può essere espressa in pixel, EMS, o percentuali.

7 I bordi possono essere applicati in modo selettivo verso l'alto, a destra, in basso ea sinistra dell'immagine. È possibile utilizzare questa conoscenza per creare un effetto come un'ombra.

8 Utilizzando un bordo continuo in 2 tonalità di grigio su la giusta e bordo inferiore, si ottiene un effetto ombra.

img {
float: left;
-Destra-stile del bordo: solido;
border-right-color: # CCCCCC;
-Bottom-stile del bordo: solido;
border-bottom-color: # 999999;
}

9 Il margine è al di fuori del confine. Aggiunta certo margine a destra e inferiore dell'immagine impedirà il testo da urti contro di essa.

img {
float: left;
-Destra-stile del bordo: solido;
border-right-width: 8px;
border-right-color: # CCCCCC;
-Bottom-stile del bordo: solido;
border-bottom-width: 8px;
border-bottom-color: # 999999;
margin-right: 1em;
margin-bottom: 1em;
}

Consigli e avvertenze

• Se si dispone di immagini in più di una divisione (div) di una pagina, utilizzare selettori discendenti per lo stile individualmente. Possibili selettori: #content img, #sidebar img, #feature IMG.