Asbafo
a- a+

Margini, bordi e riempimenti

I fogli di stile permettono di formattare il testo senza dovericorrere a tabelle, creando degli elementi visualizzatiall'interno di un'area. Ogni area possiede elementiche 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 valoreassoluto 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 odell'altro valore, adopera quello con il quale ti trovimeglio.

Il valore percentuale è espresso con un numero seguitodal segno %.

Per spiegare meglio il concetto, i fogli di stile sonoimpostati come se si trattasse di finestre indipendentiall'interno di una pagina. Hanno quindi una lorograndezza e loro attributi. I bordi, i margini ed ilriempimento costituiscono elementi che ne influenzanol'aspetto esteriore.

6.1 Margini daibordi della pagina

Il margine è lo spazio fisico che separa la partededicata alle scritte ed alle immagini dal bordo del foglio,sia da destra che da sinistra, sia dall'alto che dalbasso.

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 desideriche lo scritto nella pagina sia distante 100 pixelsdall'alto, 150 da sinistra e 50 da destra. Ovviamenteabbiamo in realtà scritto il testo esattamentenell'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 dellapagina 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 diun 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 epuò, a seconda del valore assegnato a ciascunelemento, 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 moltoimportante per dare un'apparenza tridimensionale.

Per determinarne il colore si usano i seguenti elementi distile:

  • 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 esadecimalepreceduti dal simbolo # oppure con il loro nome in inglese.

Ecco un primo esempio in cui assegnamo ad un titolo un bordospesso (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), dicolore 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), dicolore 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 diversielementi di stile ed ottenere un risultato piùcomplesso.

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

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

quello dei bordi sinistro e destro a 30pixels

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

Per quanto riguarda i colori, il bordosinistro è 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 ibordi è 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 statisempre assegnati ad un tag <h1> cioè ad untitolo, ma puoi scegliere di applicarli a qualunque altrotipo 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 normaletag del paragrafo <p> è stato inserito un altrotag <q> che identifica in HTML la citazione breve edè a questo tag che è stato assegnato lostile.
Se lo stile fosse stato assegnato direttamente al tag<p>, tutti i paragrafi presenti nella pagina sarebberostati dotati di bordi ed il bordo non sarebbe stato aderenteal testo, come nell'esempio, ma disposto per tutta lalarghezza della pagina.
Analogo risultato si sarebbe ottenuto anche ricorrendo aduna classe o ad un selettore di identità, giàoggetto nella quarta lezione. Ricorrendo ad una classe, lasintassi sarebbe stata la seguente:

<html> <head> <title>Titolo deldocumento</title> <styletype="text/css"> BODY { background:#FFFFD1;color:#000000 } .cornice {border-width:thin;border-color:#00FF00;border-style:ridge} </style></head> <body> <pclass:"cornice">Questo è un paragrafo acui è stato applicato un bordo</p><p>Questo è invece un paragrafonormale</p> </body> </html>

6.3 Il riempimento

Il riempimento o padding è lo spazio interno chesepara 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 possonoessere definiti con un solo elemento padding. Quando vieneimpostato questo valore, il browser assume come ordine ilprimo valore di riempimento in alto (padding-top), il destro(padding-right), l'inferiore (padding-bottom) ed ilsinistro (padding-left).

È possibile anche settare solo due o tre valori:quelli mancanti verranno determinati in funzione del latoopposto.

Vediamo ora un esempio che contenga contemporaneamentemargini, 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 applicatonessun 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 sidiffondesse a tutti gli altri paragrafi presenti nellapagina. Si sarebbe potuta anche usare una classe o unselettore di identità, già oggetto nella quartalezione.



Ti potrebbe interessare anche

commenta la notizia