PROGRAMMIAMO
HTML - Stili per i bordi
Border-style

sintassi: border-style: hidden | dotted | dashed | solid | groove | ridge | inset | outset | double | none

Questo stile definisce se e come viene disegnato il contorno (bordo) di un elemento (es. un paragrafo). Per default il suo valore none, cio non viene visualizzato nessun bordo. Vediamo qui un esempio di paragrafo con bordo:

<p style="border-style:solid">Questo un esempio di paragrafo con
border-style solid. Osservate il riquadro nero intorno al bordo del
paragrafo.</p>

e questo il risultato della visualizzazione:

Questo un esempio di paragrafo con border-style solid. Osservate il riquadro nero intorno al bordo del paragrafo.

Con gli stili anche possibile definire separatamente l'aspetto del bordo superiore, inferiore, destro e sinistro, specificando border-top-style, border-bottom-style, border-left-style, border-right-style. Si osservi a questo proposito l'esempio seguente:

Questo un esempio di paragrafo con border-style definito in maniera diversa per ciascuno dei quattro lati del bordo.

che stato realizzato nel seguente modo:

<p style="border-top-style:solid;border-right-style:double;border-bottom-style:dashed;border-left-style:dotted;">Questo un esempio di paragrafo con border-style definito in maniera diversa
per ciascuno dei quattro lati del bordo.</p>

Un modo pi sintetico per ottenere lo stesso risultato il seguente:

<p style="border-style:solid double dashed dotted;">Questo un esempio di paragrafo con border-style definito in maniera diversa per ciascuno dei quattro lati del bordo.</p>

Si osservi che i valori del bordo dei quattro lati sono indicati in senso orario partendo dal lato superiore del contenitore.

ATTENZIONE:

Se non viene specificato lo stile del bordo, il suo valore di default none, cio non viene visualizzato nessun bordo e gli altri stili (border-width, border-color) non hanno nessun effetto.

Border-width

sintassi: border-width: thin | medium | thick | lenght

Con questo stile si pu definire lo spessore del bordo, mediante parole chiave (thin, medium o thick) oppure fornendo la lunghezza lenght (in varie unit di misura: px (pixel), mm (millimetri), percentuale etc.). Si consideri l'esempio seguente:

Questo un esempio di paragrafo con border-style solid e spessore del bordo 1 pixel

realizzato nel seguente modo:

<p style="border-style:solid;border-width:1px">Questo un esempio di paragrafo con border-style solid e spessore del bordo 1 pixel</p>

Anche in questo caso possibile specificare separatamente gli spessori dei diversi bordi (con border-top-width, border-right-width etc.) oppure usare la notazione sintetica, come mostrato nell'esempio seguente:

Questo un esempio di paragrafo con border-style solid e spessore dei bordi 1, 2, 3 e 4 pixel

realizzato nel seguente modo:

<p style="border-style:solid;border-width:1px 2px 3px 4px">Questo un esempio di
paragrafo con border-style solid e spessore dei bordi 1, 2, 3 e 4 pixel</p>

 

Border-color

sintassi: border-color: colore

Con questo stile possibile specificare il colore dei bordi (con le stesse regole viste in generale per gli stili colore):

Questo un esempio di paragrafo con i bordi colorati con colori diversi

realizzato nel seguente modo:

<p style="border-style:solid;border-top-color:red; border-bottom-color:green; border-right-color:fuchsia;border-left-color:orange"> Questo un esempio di paragrafo con i bordi colorati con colori diversi</p>

 

Gli stili per i bordi e le tabelle, border-collapse

Mediante gli stili possibile controllare con grande precisione la visualizzazione delle tabelle. Per quanto riguarda in particolare i bordi della tabelle e delle singole celle, si consideri l'esempio seguente:

<table style="border-style:solid;border-width:2px;border-color:red;background-color:aqua;">
<tr>
<td style="border-style:solid;border-width:1px;border-color:black;">UNO</td>
<td>DUE</td>
</tr>
<tr>
<td>QUATTRO</td>
<td style="border-style:dashed;border-width:2px;border-color:orange;">TRE</td>
</tr>
</table>

che viene visualizzato nel seguente modo:

UNO DUE
QUATTRO TRE

Si noti che lo stile del bordo applicato all'elemento table si riferisce al bordo di contorno della tabella (nel nostro esempio colorato in rosso). Le singole celle per default non hanno bordo, a meno che non venga specificato uno stile sull'elemento td.

In generale affinch la tabella venga visualizzata come una griglia con tutti gli elementi racchiusi da un bordo, occorre applicare il bordo agli elementi <table>, <tr> e <td> come nell'esempio qui sotto:

<table style="border: thin solid">
<tr>
<td style="border: thin solid">UNO</td>
<td style="border: thin solid">DUE</td>
</tr >
<tr style="border: thin solid">
<td style="border: thin solid">QUATTRO</td>
<td style="border: thin solid">TRE</td>
</tr>
</table>

Il risultato il seguente:

UNO DUE
QUATTRO TRE

Si noti per che in questo modo tutti i bordi risultano raddoppiati (infatti vengono visualizzati i bordi di ogni cella, di ogni riga e di tutta la tabella). Per evitare questo bisogna usare lo stile border-collapse: collapse in questo modo:

<table style="border: thin solid; border-collapse: collapse ">
<tr>
<td style="border: thin solid">UNO</td>
<td style="border: thin solid">DUE</td>
</tr >
<tr style="border: thin solid">
<td style="border: thin solid">QUATTRO</td>
<td style="border: thin solid">TRE</td>
</tr>
</table>

Il risultato il seguente:

UNO DUE
QUATTRO TRE

 

precedente -successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it