Come stile di un'immagine con i CSS. Utilizzare CSS per presentare immagini del tuo sito Web nel miglior modo possibile. In questo articolo, imparerete dove posizionare un'immagine e decorazioni quali i bordi di includere o meno.
Istruzioni
Galleggianti e centraggio
1
Inserire la tua immagine nella pagina con il consueto metodo. Non dimenticare di includere adatto testo alternativo per l'immagine.
2
Per disporre il testo intorno l'immagine sulla destra, allo stesso modo è nella foto l'introduzione di questo articolo, utilizzare una regola CSS come questo:
IMG {
float: left;
imbottitura a destra: 1em;
}
La regola di galleggiante: sinistra rende l'immagine spostare il margine sinistro. La regola di riempimento a destra mantiene il testo da urtare proprio contro il lato destro dell'immagine. Se un bordo è stato aggiunto a questa immagine, imbottitura sarebbe venuto tra l'immagine e il confine. Vedere la sezione 2 per funzionare con un'immagine con un bordo.
3
Per rendere il testo avvolgere sulla sinistra, l'immagine sul margine destro del galleggiante. Utilizzare una regola come questa:
IMG {
float: right;
padding-left: 1em;
}
4
Centrare un'immagine devi innanzitutto fare il normalmente elemento inline di immagine in un elemento di livello blocco.
IMG {
display: block;
}
5
Successivamente, aggiungere i margini a sinistra e a destra dell'immagine per centrarlo. Il valore corretto per i margini destro e sinistro centrare nulla è automatico.
IMG {
display: block;
margine destro: auto;
margine sinistro: auto;
}
Bordi e margini
6
Frontiere, utilizzabile per creare un effetto di ombreggiatura o l'aspetto di un frame.
Per creare un bordo spesso e struttura-come utilizzando lo stile del bordo della scanalatura, una regola come questa può essere utilizzata:
IMG {
float: left;
larghezza del bordo: 1em;
stile del bordo: groove;
border-color: #000000;
}
Altri stili di bordo sono inizio, inserto e solido, punteggiato, tratteggiato, doppio, ridge. Larghezza può essere espressa in pixel, ems o percentuali.
7
Bordi possono essere applicati in modo selettivo per il superiore, destro, inferiore e sinistra dell'immagine. È possibile utilizzare questa conoscenza per creare un effetto come un'ombra.
8
Utilizzando un bordo a tinta unita in 2 tonalità di grigio sul giusto e il bordo inferiore, si ottiene un effetto di ombreggiatura.
IMG {
float: left;
border-right-style: solid;
border-right-color: #CCCCCC;
border-bottom-style: solid;
border-bottom-color: #999999;
}
9
Margine è all'esterno del bordo. L'aggiunta di qualche margine a destra e inferiore dell'immagine impedirà il testo di urtare contro di esso.
IMG {
float: left;
border-right-style: solid;
border-right-width: 8px;
border-right-color: #CCCCCC;
border-bottom-style: solid;
border-bottom-width: 8px;
border-bottom-color: #999999;
margine destro: 1em;
margin-bottom: 1em;
}
Consigli & Avvertenze
- Se si dispone di immagini in più di una divisione (div) di una pagina, è possibile utilizzare selettori discendenti per lo stile di loro individualmente. Selettori di possibili: #content img, #sidebar img, img #feature.