October 30
Cascading Style Sheets sono utilizzati nella codifica delle pagine Web, senza fare affidamento sui tavoli per rendere coerente in tutti i browser. I vantaggi di utilizzare un CSS esterno, includono pagine più veloci di carico, la possibilità di effettuare una singola modifica a un foglio di stile per la replica a livello di sito, e la riduzione di disordine, rendendo il codice semplificato più elegante ed accessibile. Ci sono due elementi principali da considerare quando la confezione di un'immagine utilizzando i CSS, la definizione di "immagine galleggiare" nel foglio di stile, e l'attributo "galleggiare" all'interno lo stile immagine sulla pagina Web di destinazione.
Nel documento CSS esterno, creare una definizione chiamato 'floatLeft'. Il tuo codice sarà simile a questa:
img.floatLeft {
float: left;
}
Aggiungere imbottitura intorno all'immagine galleggiava per creare uno spazio tra i bordi dell'immagine, e il testo che si avvolge attorno ad esso.
img.floatLeft {
float: left;
padding: 10px 25px 10px 25px;
}
Qui, l'imbottitura è impostato a 10 pixel in alto, e il fondo dell'immagine; e 25 pixel a sinistra ea destra.
Aggiungere una definizione chiamato "CaptionText" al foglio di stile esterno per controllare l'aspetto del testo della didascalia:
.captionText {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: # 666666;
}
Si noti l'utilizzo di un periodo prima del primo carattere del nome della definizione. Questo definisce la famiglia di font, dimensione e colore per il testo della didascalia.
Nella pagina Web, creare il seguente codice in cui si desidera visualizzare l'immagine:
<Img class = "floatLeft">
Questo codice dice al browser che l'immagine selezionata - 'yourImageName.jpg' - è conforme alla classe 'floatLeft' come definito nel foglio di stile esterno.
Infine, aggiungere le proprietà di stile al paragrafo che conterrà la didascalia specificando una classe:
<Img class = "floatLeft">
<P class = "CaptionText"> La voce va qui ... </ p>