Nwlapcug.com


Come stile di un'immagine con i CSS



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.