Ora verranno spiegati, elencandoli, tutti gli elementi che permettono di inserire la grafica all'interno della pagina HTML.
Questo stile definisce l'immagine di sfondo dell'intera pagina o di una sezione della pagina:
background-image:url (immagine.gif);
p { background-image: url(immagine.gif); }
div { background-image: url(logo.gif); }
Questo stile permette d'inserire una piccola immagine in sostituzione dei simboli di default creati dalle liste (ul, ol, li, ecc.):
< style type="text/css">
ul { list-style-image:url (nomeimmagine.gif); }
< /style>
Questo stile permette di specificare in che modo disporre l'immagine:
background-repeat: repeat | repeat-x | repeat-y | no-repeat;
repeat - l'immagine viene replicata in orizzontale/verticale;
repeat-x - replicata soltanto in orizzontale;
repeat-y - replicata soltanto in verticale;
no-repeat - non replicata.
{ background-image: url(logo.gif); background-repeat: repeat-x ; }
{ background-image: url(logo.gif); background-repeat: repeat-y; }
{ background-image: url(logo.gif); background-repeat: repeat; }
{ background-image: url(logo.gif); background-repeat: no-repeat; }
Questo stile permette di specificare in che punto posizionare l'immagine:
background-position: Center - Left - Right;
Questo stile permette di specificare se l'immagine deve scorrere o restare fissa sullo sfondo:
background-attachment: scroll | fixed;
{ background-image: url(logo.gif); background-attachment: scroll; }
{ background-image: url(logo.gif); background-attachment: fixed; }
Questo è lo stile scorciatoia per definire più elementi in un'unica riga:
{ background: #000 url(logo.gif) repeat-x fixed; }
Nel prossimo articolo scopriremo in che modo formattare i LINK per creare MENU e altri sistemi di navigazione.
Il menu della guida:
- Cascading Style Sheets
- Sintassi
- Stile in linea
- Stile incorporato
- Stile file esterno
- Class
- Selettori id
- Grafica
- Link
- Testo
- Caratteri
- Colore
- Posizionamento
- Parametri
