Asbafo
a- a+

Margini, bordi e riempimenti

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>

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>

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>

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>

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>

Ovviamente si possono combinare tra di loro i diversi elementi di stile ed ottenere un risultato più complesso.

Nell'esempio che segue lo spessore dei bordi superiore ed inferiore è stato impostati a 20 pixels

(border-top-width:20px; border-bottom-width:20px)

quello dei bordi sinistro e destro a 30 pixels

(border-left-width:30px; border-right-width:30px)

Per quanto riguarda i colori, il bordo sinistro è stato impostato sul magenta (border-left-color:#FF00FF),
quello destro sul rosso

(border-right-color:#FF0000)

quello superiore sul ciano

(border-top-color:#00FFFF)

quello inferiore sul verde

(border-bottom-color:#00FF00)

Per quanto riguarda lo stile per tutti i bordi è stato scelto quello in rilievo (border-style:ridge)

<html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">
     BODY { background:#FFFFD1; color:#000000 }
     h1 { border-top-width:20px; border-bottom-width:20px;
     border-left-width:30px; border-right-width:30px;
     border-left-color:#FF00FF; border-right-color:#FF0000;
     border-top-color:#00FFFF; border-bottom-color:#00FF00;
     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 puoi scegliere di applicarli a qualunque altro tipo di tag.

<html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">
     BODY { background:#FFFFD1; color:#000000 }
     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>

Nota: come avrai potuto osservare all'interno del normale tag del paragrafo <p> è stato inserito un altro tag <q> che identifica in HTML la citazione breve ed è a questo tag che è stato assegnato lo stile.
Se lo stile fosse stato assegnato direttamente al tag <p>, tutti i paragrafi presenti nella pagina sarebbero stati dotati di bordi ed il bordo non sarebbe stato aderente al testo, come nell'esempio, ma disposto per tutta la larghezza della pagina.
Analogo risultato si sarebbe ottenuto anche ricorrendo ad una classe o ad un selettore di identità, già oggetto nella quarta lezione. Ricorrendo ad una classe, la sintassi sarebbe stata la seguente:

<html> <head> <title>Titolo del documento</title> <style type="text/css"> BODY { background:#FFFFD1; color:#000000 } .cornice {border-width: thin;border-color:#00FF00;border-style:ridge} </style> </head> <body> <p class:"cornice">Questo è un paragrafo a cui è stato applicato un bordo</p> <p>Questo è invece un paragrafo normale</p> </body> </html>

6.3 Il riempimento

Il riempimento o padding è lo spazio interno che separa il contenuto dal bordo. Il padding si può suddividere in quattro zone:

  • padding-top (superiore)
  • padding-right (destro)
  • padding-bottom (inferiore)
  • padding-left (sinistro)

I valori ammessi sono

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

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>
     <title>Titolo del documento</title>
     <style type="text/css">
     BODY { background:#FFFFD1; color:#000000 }
     h4 {margin-top: 50px; margin-left: 100px; margin-bottom: 50px;
     margin-right: 100px; border-width:5px; border-;
     border-style : solid; padding:30px 100px 30px 100px;
     text-align:justify }
     </style>
     </head>
     <body>
<h4>Questo titolo è stato scritto esattamente nell'angolo superiore sinistro della pagina senza mai andare a capo. Come puoi vedere, si è disposto in un'area delimitata alla quale è stato assegnato un margine superiore e inferiore di 50 pixels e laterale di 100 pixels, un bordo solido di colore rosso dello spessore di 10 pixels ed un riempimento di 100 pixels laterale, e di 30 pixels superiore ed inferiore.</h4>
<p>Questo è invece un paragrafo normale a cui non è stato applicato
nessun elemento di stile</p>
     </body>
</html>

Nota: come avrai potuto osservare l'elemento di stile è stato applicato ad un titolo <h4>, anziché ad un paragrafo, in modo da evitare che si diffondesse a tutti gli altri paragrafi presenti nella pagina. Si sarebbe potuta anche usare una classe o un selettore di identità, già oggetto nella quarta lezione.



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Redazione
Ti interessano altri articoli su questo argomento?
Chiedi alla nostra Redazione!