Fogli di stile CSS vengono utilizzati nelle pagine Web, di codifica senza fare affidamento sui tavoli per rendere coerente tra i vari browser. I vantaggi dell'utilizzo di un file CSS esterno, includono più veloce caricamento delle pagine, la possibilità di effettuare una singola modifica a un foglio di stile per la replica a livello di sito e la riduzione dell'ingombro, rendendo il vostro codice semplificato più elegante e accessibile. Ci sono due elementi principali da considerare quando immagine utilizzando i CSS, la definizione di "float immagine" nel foglio di stile e il "attributo float" all'interno lo stile di immagine sulla pagina Web di destinazione.
Istruzioni
Avvolgendo la didascalia di un'immagine utilizzando i CSS
1
Creare una definizione per l'immagine fluttuante nel foglio di stile.
Nel documento CSS esterno, creare una definizione denominata 'floatLeft'. Il codice sarà simile a questo:
img.floatLeft () {
float: left;
}
2
Aggiungere gli attributi alla definizione di stile di classe.
Aggiunge spaziatura intorno all'immagine galleggiare per creare uno spazio tra i bordi dell'immagine e il testo che si avvolge intorno ad esso.
img.floatLeft () {
float: left;
padding: 10px 25px 10px 25px;
}
Qui, l'imbottitura è impostata a 10 pixel nella parte superiore e parte inferiore dell'immagine; e 25 pixel a sinistra e a destra.
3
Nel foglio di stile, creare una definizione di classe per il testo della didascalia.
Aggiungere una definizione denominata "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 precedente al primo carattere del nome della definizione. Questo definisce la famiglia di font, dimensione e colore per il testo della didascalia.
4
Posizionare l'immagine nella tua pagina Web.
Nella pagina Web, creare il seguente codice dove si desidera visualizzare l'immagine:
< img class = "floatLeft" >
Questo codice indica al browser che l'immagine selezionata - 'yourImageName.jpg' - è conforme alla classe 'floatLeft' come definito nel foglio di stile esterno.
5
Creare una didascalia e lo stile con la definizione di didascalia.
Infine, aggiungere le proprietà di stile del paragrafo che contiene la didascalia specifica una classe:
< img class = "floatLeft" >
< classe p = "captionText" > la didascalia va qui... </p >
Consigli & Avvertenze
- Non dimenticate di caricare il foglio di stile CSS al server Web ogni volta che si apporta una modifica.
- In caso di dubbio, utilizzare un servizio di validazione CSS per garantire la funzionalità del codice.
- Non presupporre che tutte le definizioni CSS funzionano uniformemente in tutti i browser. Test per problemi di cross-piattaforma/multi-browser.