Web designer utilizzano un insieme di regole di progettazione di siti web conosciuti come i fogli di stile (CSS) per lo stile loro pagine web. Queste regole migliorare l'aspetto del sito e fornisce al progettista un metodo per controllare il rendering dei contenuti del sito. Il designer utilizza CSS per lo stile immagini professionista che osserva e didascalie e creare un effetto eye-si prega per i visitatori del sito.

istruzione

1 Scrivi una nuova regola CSS per creare un genitore o un involucro div. Questo div ospiterà sia la vostra immagine e la didascalia. Dare il div le proprietà di allineamento necessario posizionare nella posizione desiderata sulla pagina web e comprendere le regole di progettazione, se necessario. Per esempio, il seguente esempio di una regola CSS creerà un div involucro con l'id di imageParent. Il div imageParent conterrà un'immagine e una didascalia. Si galleggia l'immagine sul lato destro della pagina web e si concluderà l'immagine e la didascalia in un sottile, nero, bordo solido per impostare lo distingue da altri contenuti.

imageParent {float: right; border: sottile nero solido;}

2 Creare un'altra regola CSS per definire le proprietà della vostra immagine. In questo esempio, questa regola sarà posto un margine di tre pixel tra l'immagine e il confine. Il margine di tre pixel sarà applicato sulla parte superiore, destra e sinistra dell'immagine. La regola pone un margine di un pixel sul fondo dell'immagine in cui viene posizionato il sottotitolo. Ciò avrà l'effetto visivo di sposare la didascalia con l'immagine all'interno del bordo nero.

imageParent img {margin-top: 3px; margin-bottom: 1px; margin-right: 3px; margin-left; 3px;}

3 Definire le proprietà della voce, con una regola CSS. È possibile definire le proprietà della voce da styling un tag di testo come un'intestazione o tag di paragrafo. In questo esempio, un tag di paragrafo è designato che verrà utilizzato per contenere la didascalia. Le regole afferma che la didascalia verrà visualizzato in corsivo, mentre allineando al centro del div.

imageParent p {text-align: center; stile carattere; italic}

4 Scrivere il codice Questo esempio mostra il codice HTML che viene designato con le regole CSS da esempi precedenti.

<Div id = "imageParent"> <img /> <p> Il tuo titolo </ p> </ div>