I Bordi | Guida CSS

I=20 Bordi

Riuscire a definire l'aspetto dei bordi =E8 un'altra = delle cose per=20 cui vale la pena imparare ad usare i CSS. L'impatto visivo, = se=20 guidati dal buon gusto, =E8 di sicuro effetto: la pagina = acquista=20 rigore e una suddivisione pi=F9 logica, estetica e = razionalit=E0=20 strutturale possono trovare un felice connubio.

Dal punto di vista del linguaggio la definizione dei = bordi pu=F2=20 risultare un p=F2 intricata per il numero di propriet=E0 = coinvolte, che=20 se consentono all'autore la massima flessibilit=E0, rendono = complicata=20 la gestione del codice.

In linea di massima possiamo suddividere le propriet=E0 = in due=20 categorie: singole e a sintassi abbreviata. Le prime = definiscono=20 singoli aspetti di ciascuno dei quattro bordi. Le seconde = consentono=20 di riunire in una sola regola le diverse impostazioni.

Sono propriet=E0 singole:

border-top-color, border-top-style,=20 border-top-width, border-bottom-color, border-bottom-style,=20 border-bottom-width, border-right-color, border-right-style, = border-right-width, border-left-color, border-left-style,=20 border-left-width

Sono propriet=E0 a sintassi abbreviata:

border, border-bottom, border-top, = border-right,=20 border-left, border-color, border-style, border-width

Definire lo stile di un singolo bordo

Sintassi (con propriet=E0 singole)

selettore {
border-<lato>-color:=20 <valore>;
border-<lato>-style:=20 <valore>;
border-<lato>-width:=20 <valore>;
}

Sintassi (abbreviata)

selettore { border-<lato>: = <valore=20 width> <valore style> <valore color>; }

In entrambi gli esempi di sintassi sostituite a=20 <lato> uno degli indicatori dei quattro lati: = top,=20 right, bottom o left.

Valori

Come si vede dall'elenco delle propriet=E0 di ciascun = lato si=20 possono definire per il bordo tre aspetti:

il colore (color)=20
lo stile (style)=20
lo spessore (width)

I valori possibili per il colore sono:

un qualsiasi colore=20
la parola chiave inherit

Il colore pu=F2 essere espresso in uno qualunque dei modi = visti=20 nella lezione 15. Se non si imposta un valore = specifico,=20 il colore sar=E0 quello di primo piano impostato con la = propriet=E0=20 color.

Lo stile di un bordo pu=F2 invece essere espresso con una = delle=20 seguenti parole chiave

none. L'elemento non presenta alcun bordo e lo = spessore=20 equivale a 0.=20
hidden. Equivalente a none=20
dotted=20
dashed=20
solid=20
double.=20
groove=20
ridge=20
inset=20
outset

Ciascuna definisce un particolare aspetto del bordo. Per=20 verificare il quale potete osservare gli esempi contenuti in = questa pagina.

Infine abbiamo lo spessore. Esso pu=F2 essere modificato = secondo i=20 seguenti valori:

un valore numerico con unit=E0 di misura=20
thin. Bordo sottile.=20
medium. Bordo di medio spessore.=20
thick. Bordo di largo spessore.

Nel caso delle parole chiave la dimensione esatta non =E8 = specificata dal linguaggio.

Esempi

div {
border-left-color:=20 black;
border-left-style: solid;
border-left-width:=20 1px;
}

Molto pi=F9 comodo scrivere cos=EC:

div {border-left: 1px solid black;}

Definire lo stile dei quattro bordi

Sintassi

selettore {
border-width:=20 <valori>;
border-style: = <valori>;
border-color:=20 <valori>;
}

Usando questa sintassi e queste propriet=E0 si imposta lo = stile per=20 tutti e quattro i bordi del box. I valori possibili sono = quelli=20 visti prima a proposito del colore, dello stile e dello=20 spessore.

Per ciascuna di queste propriet=E0 =E8 possibile definire = da uno a=20 quattro valori, uno per lato. Se ne usiamo quattro l'ordine = di=20 lettura =E8 questo: top, right, bottom, left. Se invece ne = impostiamo=20 uno, due o tre valgono le stesse regole viste per i margini.

Esempi

div {
border-width: 1px 2px 1px=20 2px;
border-style: solid;
border-color: black red = black=20 red;
}

Il risultato sar=E0 questo.

Usare la propriet=E0 border

L'ultima propriet=E0 a sintassi abbreviata =E8 = border. Con=20 essa possiamo definire con una sola regola le impostazioni = per i=20 quattro bordi. Il suo uso =E8 per=F2 limitato a un solo = caso, peraltro=20 molto comune: che i quattro bordi abbiano tutti lo stesso = colore, lo=20 stesso stile e lo stesso spessore.

Sintassi

selettore {border: <valore spessore> = <valore stile> <valore colore>;}

Esempi

div {border: 2px solid black;}

Otterremo un box con questo aspetto.

L=20 e z i o n e s u c c e s s i v=20 = a
[ S o m m a r i = o=20 ] =