Come applicare uno stile a un'immagine con CSS
Come modellare un'immagine con CSS. Usa i CSS per presentare le immagini del tuo sito web nel miglior modo possibile. In questo articolo imparerai dove posizionare un'immagine e se includere o meno decorazioni come i bordi.
Fluttuante e centrato
Passaggio 1
Inserisci la tua immagine nella pagina con il tuo solito metodo. Non dimenticare di includere un testo alternativo adatto per l'immagine.
Passaggio 2
Per far avvolgere il tuo testo attorno all'immagine a destra, in modo simile a come è nella foto che introduce questo articolo, usa una regola CSS come questa:
img { float:sinistra; riempimento-destra:1em; }
La regola float:left fa spostare l'immagine sul margine sinistro. La regola del riempimento a destra impedisce al testo di urtare contro il lato destro dell'immagine. Se a questa immagine è stato aggiunto un bordo, il riempimento si troverebbe tra l'immagine e il bordo. Vedere la Sezione 2 per lavorare con un'immagine con un bordo.
Passaggio 3
Per far scorrere il testo a sinistra, fai fluttuare l'immagine sul margine destro. Usa una regola come questa:
img { float:destra; riempimento a sinistra:1em; }
Passaggio 4
Per centrare un'immagine devi prima trasformare l'elemento dell'immagine normalmente in linea in un elemento a livello di blocco.
img { display:blocco; }
Passaggio 5
Quindi, aggiungi i margini a sinistra ea destra dell'immagine per centrarla. Il valore corretto per i margini sinistro e destro per centrare qualsiasi cosa è automatico.
img { display:blocco; margine-destra:auto; margine sinistro:automatico; }
Bordi e margini
Passaggio 1
I bordi possono essere utilizzati per creare un effetto di ombreggiatura o l'aspetto di una cornice.
Per creare un bordo spesso simile a una cornice usando lo stile del bordo della scanalatura, è possibile utilizzare una regola come questa:
img { float:sinistra; larghezza del confine:1em; stile bordo:scanalatura; colore bordo:#000000; }
Altri stili di bordo sono pieni, punteggiati, tratteggiati, doppi, a cresta, all'interno e all'inizio. La larghezza può essere espressa in pixel, ems o percentuali.
Passaggio 2
I bordi possono essere applicati selettivamente in alto, a destra, in basso e a sinistra dell'immagine. Puoi usare questa conoscenza per creare un effetto come un'ombra esterna.
Passaggio 3
Usando un bordo pieno in 2 tonalità di grigio sul bordo destro e inferiore, ottieni un effetto ombra discendente.
img { float:sinistra; stile bordo destro:solido; colore bordo-destra:#CCCCCC; bordo-stile:solido; colore bordo-fondo:#999999; }
Passaggio 4
Il margine è al di fuori del confine. L'aggiunta di un margine a destra e in basso dell'immagine eviterà che il testo urti contro di essa.
img { float:sinistra; stile bordo destro:solido; bordo-destra-larghezza:8px; colore bordo-destra:#CCCCCC; bordo-stile:solido; larghezza bordo-basso:8px; colore bordo-fondo:#999999; margine-destra:1em; margine inferiore:1em; }
Suggerimento
Se hai immagini in più di una divisione (div) di una pagina, usa i selettori discendenti per modellarle individualmente. Possibili selettori:#content img, #sidebar img, #feature img.