CSS Fogli di stile per il sito scolastico Bobby WorldWide Approved AAA

IL BOX MODEL

I BORDI

Anche qui possiamo dividere le proprietà in due categorie: singole e a sintassi abbreviata. Le prime definiscono singoli aspetti di ciascuno dei quattro bordi. Le seconde consentono di riunire in una sola regola le diverse impostazioni.

Sono proprietà singole:

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

Sono proprietà a sintassi abbreviata:

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

1) Definire lo stile di un singolo bordo

Sintassi (con proprietà singole)

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

Sintassi (abbreviata)

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

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

Valori

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

  1. il colore (color)
  2. lo stile (style)
  3. lo spessore (width)

Il colore può essere espresso in uno qualunque dei modi visti precedentemente. Se non si imposta un valore specifico, il colore sarà quello di primo piano impostato con la proprietà color.

Lo stile di un bordo può invece essere espresso con una delle seguenti parole chiave

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

Infine abbiamo lo spessore. Esso può essere modificato secondo i seguenti valori:

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

Esempi

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

Molto più comodo scrivere così:

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

2) Definire lo stile dei quattro bordi

Sintassi

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

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

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

Esempi

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

Usare la proprietà border

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

Sintassi

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

Esempi

div {border: 2px solid black;}

Fare riferimento alla seguente pagina di esempi.