Homepage -> Guida CSS (Fogli di Stile)
I fogli di stile permettono di formattare il testo senza dover ricorrere a tabelle, creando degli elementi visualizzati all'interno di un'area. Ogni area possiede elementi che si possono suddividere in tre categorie:
La larghezza di tutti gli elementi che compongono margini, bordi e riempimento può essere espressa in valore assoluto o in percentuale. I valori assoluti ammessi sono:
Non ha nessuna importanza l'uso dell'uno o dell'altro valore, adopera quello con il quale ti trovi meglio.
Il valore percentuale è espresso con un numero seguito dal segno %.
La figura di sopra mostra come vari il codice di stile a seconda se ci si riferisca al bordo, al riempimento ( padding ) o ai margini.
Il margine è lo spazio fisico che separa la parte dedicata alle scritte ed alle immagini dal bordo del foglio, sia da destra che da sinistra, sia dall'alto che dal basso.
I nomi ammessi degli elementi sono:
Nell'esempio che segue abbiamo supposto che si desideri che lo scritto nella pagina sia distante 100 pixels dall'alto, 150 da sinistra e 50 da destra. Ovviamente abbiamo in realtà scritto il testo esattamente nell'angolo superiore sinistro del foglio.
Ecco l'esempio:
| <head> <style type = "text/css"> p { margin-top:100px; margin-left:150px; margin-right: 50px } </style> </head> <body> <P>Questo testo è stato scritto nell'angolo superiore sinistro della pagina senza mai andare a capo, ma, grazie al foglio di stile, appare distante 100 pixels dal bordo superiore, 150 pixels dal lato sinistro e 50 pixels dal lato destro della pagina. </P> </body> |
I bordi possono essere posti attorno a ciascun contenuto di un tag HTML per evidenziarlo. Possono essere personalizzati in spessore, stile e colori.
Per determinarne lo spessore si usano i seguenti elementi:
I valori ammessi sono:
oppure un valore assoluto espresso in
Lo stile dei bordi ne determina l'aspetto esteriore e può, a seconda del valore assegnato a ciascun elemento, darne un'apparenza totalmente differente.
Per determinarne lo stile si usano i seguenti elementi:
I valori ammessi sono:
Il colore assegnato ai vari bordi è elemento molto importante per dare un'apparenza tridimensionale.
Per determinarne il colore si usano i seguenti elementi di stile:
I colori devono essere espressi in formato esadecimale preceduti dal simbolo # oppure con il loro nome in inglese.
Ecco un primo esempio in cui assegnamo ad un titolo un bordo spesso ( thick ) di colore #3399CC e con stile doppio ( double ):
| <head> <style type = "text/css"> BODY { background:#dee3e7 } h1 { border-width: thick; border-color:#3399CC; border-style:double } </style> </head> <body> <h1> Intestazione </h1> </body> |
Ed ecco un secondo esempio in cui i bordi saranno medi ( medium ), di colore bianco e a puntini ( dotted ):
| <head> <style type = "text/css"> BODY { background:#dee3e7 } h1 { border-width: medium; border-color:white; border-style:dotted } </style> </head> <body> <h1> Intestazione </h1> </body> |
Un terzo esempio in cui i bordi saranno spessi ( thick ), di colore ciano ( cyan ) ed in rilievo ( ridge ):
| <head> <style type = "text/css"> BODY { background:#dee3e7 } h1 { border-width: thick; border-color:cyan; border-style: ridge } </style> </head> <body> <h1> Intestazione </h1> </body> |
Un quarto esempio in cui i bordi saranno spessi ( thick ), di colore #9999CC e rivolti verso l'esterno ( outset ):
| <head> <style type = "text/css"> BODY { background:#dee3e7 } h1 { border-width: thick; border-color:#9999CC; border-style: outset } </style> </head> <body> <h1> Intestazione </h1> </body> |
Ovviamente si possono combinare tra di loro i diversi elementi di stile ed ottenere un risultato più complesso; eccone un esempio:
| <html> <head> <style type = "text/css"> BODY { background:#dee3e7 } h1 { border-top-width:10px; border-bottom-width:10px; border-left-width:5px; border-right-width:5px; border-left-color:#999999; border-right-color:#999999; border-top-color:#999999; border-bottom-color:#999999; border-style:ridge} </style> </head> <body> <h1> Intestazione </h1> </body> </html> |
Per comodità i vari elementi di stile sono stati sempre assegnati ad un tag <h1> cioè ad un titolo, ma si può scegliere di applicarli a qualunque altro tipo di tag. Eccone un esempio, in cui viene usato anche il Tag <q>...</q> per le citazioni brevi:
| <html> <head> <style type = "text/css"> BODY { background:#dee3e7 } q {border-width: thin; border-color:#00FF00; border-style: ridge } </style> </head> <body> <p><q>Questo è un paragrafo a cui è stato applicato un bordo</q></p> <p>Questo è invece un paragrafo normale</p> </body> </html> |
Il riempimento o padding è lo spazio interno che separa il contenuto dal bordo. Il padding si può suddividere in quattro zone:
I valori ammessi sono:
oppure valori in percentuale.
I quattro elementi di stile visti in precedenza possono essere definiti con un solo elemento padding. Quando viene impostato questo valore, il browser assume come ordine il primo valore di riempimento in alto ( padding-top ), il destro ( padding-right ), l'inferiore ( padding-bottom ) ed il sinistro ( padding-left ).
È possibile anche settare solo due o tre valori: quelli mancanti verranno determinati in funzione del lato opposto.
Vediamo ora un esempio che contenga contemporaneamente margini, bordi e riempimento:
| <html> <head> <style type = "text/css"> BODY { background:#dee3e7 } h4 { margin-top: 50px; margin-left: 100px; margin-bottom: 50px; margin-right: 100px; border-width:5px; border-color: #CCCCCC; border-style : solid; padding:30px 100px 30px 100px; text-align:justify } </style> </head> <body> <h4> TITOLO </h4> <p> PARAGRAFO NORMALE </p> </body> </html> |