A SBAFO! Manuali o tutorials gratis

Copyright© Seatiger Team 2002
Sono vietate la riproduzione, la pubblicazione e la distribuzione anche parziale del presente manuale
senza il consenso scritto degli autori.

LEZIONE 6

Margini, bordi e riempimento

I fogli di stile permettono di formattare il testo senza dove ricorrere a tabelle, creando degli elementi visualizzati all'interno di un'area. Ogni area possiede elementi che si possono suddividere in tre categorie:

i margini che costituiscono il bordo esterno all'area;
il riempimento che costituisce lo spazio interno all'area che separa il contenuto dal bordo;
i bordi che costituiscono l'aspetto grafico attorno all'area.

Per una migliore comprensione guarda questo schema.

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:

px (pixels)
cm (centimetri)
mm (millimetri)
pt (punti)
pc (pica equivalenti a 12 punti)
em (unità)

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 %.

Per spiegare meglio il concetto, i fogli di stile sono impostati come se si trattasse di finestre indipendenti all'interno di una pagina. Hanno quindi una loro grandezza e loro attributi. I bordi, i margini ed il riempimento costituiscono elementi che ne influenzano l'aspetto esteriore.

6.1 Margini dai bordi della pagina

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:

margin-top (margine dall'alto)
margin-right (margine da destra)
margin-left (margine da sinistra)
margin-bottom (margine dal basso)

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:

<html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">
     BODY { background:#FFFFD1; color:#000000 }
     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. Nota come anche il pulsante si sia posizionato di conseguenza.</p>
     </body>
</html>

anteprima

6.2 I bordi

I bordi possono essere posti attorno a ciascun contenuto di un tag HTML per evidenziarlo.

Possono essere personalizzati in spessore, stile e colori.

6.2.1 Spessore dei bordi

Per determinarne lo spessore si usano i seguenti elementi:

border-top-width (larghezza della parte superiore)
border-right-width (larghezza della parte destra)
border-left-width (larghezza della parte sinistra)
border-bottom-width (larghezza della parte inferiore)
border-width (larghezza uguale per tutti e quattro i bordi)

I valori ammessi sono:

thin (leggero)
medium (medio)
thick (spesso)

oppure un valore assoluto espresso in

px (pixels)
cm (centimetri)
mm (millimetri)
pt (punti)
pc (pica equivalenti a 12 punti)

6.2.2 Stile dei bordi

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:

border-top-style (stile della parte superiore)
border-right-style (stile della parte destra)
border-left-style (stile della parte sinistra)
border-bottom-style (stile della parte inferiore)
border-style (stile uguale per tutti e quattro i bordi)

I valori ammessi sono:

dotted (a puntini)
dashed (a linette)
solid (solido)
double (doppio)
groove (solcato)
ridge (in rilievo)
inset (rivolto verso l'interno)
outset (rivolto verso l'esterno)

6.2.3 Colore del bordo

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:

border-top-color (colore della parte superiore)
border-right-color (colore della parte destra)
border-left-color (colore della parte sinistra)
border-bottom-color (colore della parte inferiore)
border-color (colore uguale per tutti e quattro i bordi)

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 rosso (#FF0000) e con stile doppio (double):

<html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">
BODY { background:#FFFFD1; color:#000000 }
h1 { border-width: thick; border-color:#FF0000; border-style:double }
</style>
     </head>
     <body>
     <h1>Intestazione</h1>
     </body>
</html>

anteprima

Ed ecco un secondo esempio in cui i bordi saranno medi (medium), di colore blu (#0000FF) e a puntini (dotted):

<html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">
BODY { background:#FFFFD1; color:#000000 }
h1 { border-width: medium; border-color:#0000FF; border-style:dotted }
</style>
     </head>
     <body>
     <h1>Intestazione</h1>
     </body>
</html>

anteprima

Un terzo esempio in cui i bordi saranno spessi (thick), di colore ciano (cyan) ed in rilievo (ridge):

<html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">
BODY { background:#FFFFD1; color:#000000 }
h1 { border-width: thick; border-color:cyan; border-style: ridge }
</style>
     </head>
     <body>
     <h1>Intestazione</h1>
     </body>
</html>

anteprima

Un quarto esempio in cui i bordi saranno spessi (thick), di colore rosso (#FF0000) e rivolti verso l'esterno (outset):

<html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">
BODY { background:#FFFFD1; color:#000000 }
h1 { border-width: thick; border-color:#FF0000; border-style: outset }
</style>
     </head>
     <body>
     <h1>Intestazione</h1>
     </body>
</html>

anteprima