Corso HTML e CSS (20^ lezione): CSS: Box model (3^parte)

Impariamo a costruire un sito Web

Lezione 20: CSS: Box model (3^parte).

 

Vediamo dunque tutte le proprietà che possiamo usare per stilizzare un box. A questo proposito possiamo fare riferimento alla tabella delle proprietà riportata alla lez. 18.

Suddividiamo le proprietà per tipo per nostra comodità di esposizione.

a) Formattazione dei bordi di un box


border Permette di impostare tutte le proprietà dei bordi in un’unica dichiarazione. Nell’ordine si possono impostare:

border-width, border-style, border-color

border-width: Per i valori che può assumere questa proprietà Vedi sotto border-width

border-style: Per i valori che può assumere questa proprietà Vedi sotto border-style

border-color: Per i valori che può assumere questa proprietà Vedi sotto border-color

Es d’uso:

border:5px solid #069;

In questo modo abbiamo detto che il bordo sarà di 5 pixels, continuo (non tratteggiato per esempio) e di colore #069 (tonalità di azzurro che può essere scritto come #006699

border-color  Imposta il colore del bordo di un box. Prima di assegnare un colore ad un bordo bisogna dichiarare un border-style, perché non si può assegnare un colore se il bordo non è definito.

Si possono indicare da 1 a 4 colori:

– Se si indicano 4 colori si riferiscono nell’ordine a top, right, bottom, left (antiorario partendo da top)

– Se si indicano 3 colori, il colore di mezzo va attribuito sia al bordo sinistro, sia al destro

-Se si indicano 2 colori, il primo si riferisce ai bordi top e bottom ed il secondo ai bordi left e right

– Se si indica 1 solo colore ovviamente va applicato all’intero bordo.

Oltre al colore si possono attribuire a questa proprietà anche i valori:

✦ transparent – Specifica che il bordo è trasparente (default)

✦ inherit – Specifica che il colore del bordo è ereditato dal padre.

Es d’uso:

border-color:#ff0000 #0000ff;

Con questa istruzione si otterrà il seguente risultato:

Questo è un bordo a 2 colori

border-style Imposta lo stile del bordo di un box.

I valori che la proprietà border-style può assumere sono:

none Signiifica nessun bordo
hidden Come “none”,; ha un’unica differenza se attribuito ai bordi delle celle di una tabella. In questo caso usare hidden per evitare che venga evidenziato un bordo tra due celle adiacenti.
dotted Tratteggiato a puntini.

Es.

border-style: dotted;

Questo è un bordo dotted

dashed Tratteggiato con lineette

Es.

border-style: dashed;

Questo è un bordo dashed

solid Specifica un bordo a linea continua

Es.

border-style: solid;

Questo è un bordo solid

double Specifica un bordo con linea doppia

Es.

border-style:double;

Questo è un bordo double

groove Specifica un bordo 3D incavato.

Es.

border-style: groove;

Questo è un bordo groove

ridge Specifica un bordo 3D rialzato.

Es.

border-style: ridge;

Questo è un bordo ridge

inset Il bordo farà risultare tutto il box incavato.

Es.

border-style: inset;

Questo è un bordo inset

outset Il bordo farà risultare tutto il box rialzato.

Es.

border-style: outset;

Questo è un bordo outset

inherit Specifica che lo stile del bordo può essere ereditato dall’elemento padre IE lo supporta solo dalla versione 9.
border-width Imposta la larghezza del bordo di un box.

I valori che la proprietà border-width può assumere sono:

thin Specifica un bordo sottile
medium Specifica un bordo medio (default)
thick Specifica un bordo spesso
Lunghezza in px Può essere specificato lo spessore espresso in pixels
inherit Specifica che lo spessore del bordo può essere ereditato dall’elemento padre IE lo supporta solo dalla versione 9.

Es d’uso:

border-width:thin;

border-bottom Imposta lo stile del bordo inferiore di un box impostando tutte le proprietà in un’unica dichiarazione. Nell’ordine si possono impostare:

border-bottom-width, border-bottom-style, border-bottom-color

border-bottom-width: Per i valori che può assumere questa proprietà Vedi sotto border-bottom-width

border-bottom-style: Per i valori che può assumere questa proprietà Vedi sotto border-bottom-style

border-bottom-color: Per i valori che può assumere questa proprietà Vedi sotto border-bottom-color

Es d’uso:

border-bottom:thin dotted #069;

In questo modo abbiamo detto che il bordo inferiore sarà sottile, tratteggiatoa puntini e di colore #069

border-bottom-color Imposta il colore del bordo inferiore di un box. Prima di assegnare un colore ad un bordo o ad una sua parte, bisogna dichiarare un border-style, perché non si può assegnare un colore se il bordo non è definito.

Oltre al colore si possono attribuire a questa proprietà anche i valori:

✦ transparent – Specifica che il bordo inferiore è trasparente (default)

✦ inherit – Specifica che il colore del bordo inferiore è ereditato dal padre.

Es d’uso:

border-bottom-color:#ff0000;

border-bottom-style Imposta lo stile del bordo inferiore di un box.

I valori che la proprietà border-bottom-style può assumere sono:

none Signiifica nessun bordo
hidden Come “none”,; ha un’unica differenza se attribuito al bordo delle celle di una tabella. In questo caso usare hidden per evitare che venga evidenziato un bordo tra due celle adiacenti.
dotted Bordo inferiore tratteggiato a puntini.

Es. (bordo trasparente tranne border-bottom)

border-bottom-style: dotted;

Questo è un bordo dotted

dashed Bordo inferiore tratteggiato con lineette

Es. (bordo trasparente tranne border-bottom)

border-bottom-style: dashed;

Questo è un bordo dashed

solid Specifica un bordo inferiore a linea continua

Es. (bordo trasparente tranne border-bottom)

border-bottom-style: solid;

Questo è un bordo solid

double Specifica un bordo inferiore con linea doppia

Es. (bordo trasparente tranne border-bottom)

border-bottom-style: double;

Questo è un bordo double

groove Specifica un bordo inferiore 3D incavato.

Es. (bordo trasparente tranne border-bottom)

border-bottom-style: groove;

Questo è un bordo groove

ridge Specifica un bordo inferiore 3D rialzato.

Es. (bordo trasparente tranne border-bottom)

border-bottom-style: ridge;

Questo è un bordo ridge

inset Il bordo farà risultare il box incavato
(poco senso se usato solo su lato del box).Es.(bordo trasparente tranne border-bottom)border-bottom-style: inset;

Questo è un bordo inset

outset Il bordo farà risultare il box rialzato
(poco senso se usato solo su lato del box).Es.(bordo trasparente tranne border-bottom)border-bottom-style: outset;

Questo è un bordo outset

inherit Specifica che lo stile del bordo inferiore può essere ereditato dall’elemento padre IE lo supporta solo dalla versione 9.
border-bottom-width Imposta la larghezza del un bordo inferiore di un box

I valori che la proprietà border-bottom-width può assumere sono:

thin Specifica un bordo inferiore sottile
medium Specifica un bordo inferiore medio (default)
thick Specifica un bordo inferiore spesso
Lunghezza in px Può essere specificato lo spessore espresso in pixels
inherit Specifica che lo spessore del bordo inferiore può essere ereditato dall’elemento padre IE lo supporta solo dalla versione 9.

Es d’uso:

border-bottom-width:thick;

border-left Imposta lo stile del bordo sinistro di un box
impostando tutte le proprietà in un’unica dichiarazione. Nell’ordine si possono impostare:border-left-width, border-left-style, border-left-color border-left-width: Per i valori che può assumere questa proprietà Vedi sotto border-left-widthborder-left-style: Per i valori che può assumere questa proprietà Vedi sotto border-left-style

border-left-color: Per i valori che può assumere questa proprietà Vedi sotto border-left-color

Es d’uso:

border-left:5px solid #069;

In questo modo abbiamo detto che il bordo sinistro sarà di 5 pixels, continuo (non tratteggiato per esempio) e di colore #069

border-left-color Imposta il colore del bordo sinistro di un box. Prima di assegnare un colore ad un bordo o ad una sua parte, bisogna dichiarare un border-style, perché non si può assegnare un colore se il bordo non è definito.

Oltre al colore si possono attribuire a questa proprietà anche i valori:

✦ transparent – Specifica che il bordo sinistro è trasparente (default)

✦ inherit – Specifica che il colore del bordo sinistro è ereditato dal padre.

Es d’uso:

border-left-color:#ff0000;

border-left-style Imposta lo stile del bordo sinistro di un box.

I valori che la proprietà border-left-stylepuò assumere sono:

none Signiifica nessun bordo
hidden Come “none”,; ha un’unica differenza se attribuito al bordo delle celle di una tabella. In questo caso usare hidden per evitare che venga evidenziato un bordo tra due celle adiacenti.
dotted Bordo sinistro tratteggiato a puntini.

Es. (bordo trasparente tranne border-left)

border-left-style: dotted;

Questo è un bordo dotted

dashed Bordo sinistro tratteggiato con lineette

Es. (bordo trasparente tranne border-left)

border-left-style: dashed;

Questo è un bordo dashed

solid Specifica un bordo sinistro a linea continua

Es. (bordo trasparente tranne border-left)

border-left-style: solid;

Questo è un bordo solid

double Specifica un bordo sinistro con linea doppia

Es. (bordo trasparente tranne border-left)

border-left-style: double;

Questo è un bordo double

groove Specifica un bordo sinistro 3D incavato.

Es. (bordo trasparente tranne border-left)

border-left-style:

Questo è un bordo groove

ridge Specifica un bordo sinistro 3D rialzato.

Es. (bordo trasparente tranne border-left)

border-left-style: groove;

Questo è un bordo ridge

inset Il bordo farà risultare il box incavato
(poco senso se usato solo su lato del box).Es.(bordo trasparente tranne border-left)border-left-style: inset;

Questo è un bordo inset

outset Il bordo farà risultare il box rialzato
(poco senso se usato solo su lato del box).Es.(bordo trasparente tranne border-left)border-left-style: outset;

Questo è un bordo outset

inherit Specifica che lo stile del bordo sinistro può essere ereditato dall’elemento padre. IE lo supporta solo dalla versione 9.
border-left-width Imposta la larghezza del bordo sinistro di un box.

I valori che la proprietà border-left-width può assumere sono:

thin Specifica un bordo sinistro sottile
medium Specifica un bordo sinistro medio (default)
thick Specifica un bordo sinistro spesso
Lunghezza in px Può essere specificato lo spessore espresso in pixels
inherit Specifica che lo spessore del bordo sinistro può essere ereditato dall’elemento padre. IE lo supporta solo dalla versione 9.

Es d’uso:

border-left-width:thick;

border-right Imposta lo stile del bordo destro di un box impostando tutte le proprietà in un’unica dichiarazione. Nell’ordine si possono impostare:

border-right-width, border-right-style, border-right-color border-right-width: Per i valori che può assumere questa proprietà Vedi sotto border-right-width

border-right-style: Per i valori che può assumere questa proprietà Vedi sotto border-right-style

border-right-color: Per i valori che può assumere questa proprietà Vedi sotto border-right-color

Es d’uso:

border-right:5px solid #069;

In questo modo abbiamo detto che il bordo destro sarà di 5 pixels, continuo (non tratteggiato per esempio) e di colore #069

border-right-color Imposta il colore del bordo destro di un box. Prima di assegnare un colore ad un bordo o ad una sua parte, bisogna dichiarare un border-style, perché non si può assegnare un colore se il bordo non è definito.

Oltre al colore si possono attribuire a questa proprietà anche i valori:

✦ transparent – Specifica che il bordo destro è trasparente (default)

✦ inherit – Specifica che il colore del bordo destro è ereditato dal padre.

Es d’uso:

border-right-color:#ff0000;

border-right-style Imposta lo stile del bordo destro di un box.

I valori che la proprietà border-right-stylepuò assumere sono:

none Signiifica nessun bordo
hidden Come “none”,; ha un’unica differenza se attribuito al bordo delle celle di una tabella. In questo caso usare hidden per evitare che venga evidenziato un bordo tra due celle adiacenti.
dotted Bordo destro tratteggiato a puntini.

Es. (bordo trasparente tranne border-right)

border-right-style: dotted;

Questo è un bordo dotted

dashed Bordo destro tratteggiato con lineette

Es. (bordo trasparente tranne border-right)

border-right-style: dashed;

Questo è un bordo dashed

solid Specifica un bordo destro a linea continua

Es. (bordo trasparente tranne border-right)

border-right-style: solid;

Questo è un bordo solid

double Specifica un bordo destro con linea doppia

Es. (bordo trasparente tranne border-right)

border-right-style: double;

Questo è un bordo double

groove Specifica un bordo destro 3D incavato.

Es. (bordo trasparente tranne border-right)

border-right-style:

Questo è un bordo groove

ridge Specifica un bordo destro 3D rialzato.

Es. (bordo trasparente tranne border-right)

border-right-style: groove;

Questo è un bordo ridge

inset Il bordo farà risultare il box incavato (poco senso se usato solo su lato del box).

Es. (bordo trasparente tranne border-right)

border-right-style: inset;

Questo è un bordo inset

outset Il bordo farà risultare il box rialzato
(poco senso se usato solo su lato del box).Es.(bordo trasparente tranne border-right)border-right-style:outset;

Questo è un bordo outset

inherit Specifica che lo stile del bordo destro può essere ereditato dall’elemento padre. IE lo supporta solo dalla versione 9.
border-right-width Imposta il colore del bordo destro di un box

I valori che la proprietà border-right-width può assumere sono:

thin Specifica un bordo destro sottile
medium Specifica un bordo destro medio (default)
thick Specifica un bordo destro spesso
Lunghezza in px Può essere specificato lo spessore espresso in pixels
inherit Specifica che lo spessore del bordo destro può essere ereditato dall’elemento padre. IE lo supporta solo dalla versione 9.

Es d’uso:

border-right-width:4px;

border-top Imposta lo stile del bordo superiore di un box impostando tutte le proprietà in un’unica dichiarazione. Nell’ordine si possono impostare:

border-top-width, border-top-style, border-top-color border-top-width: Per i valori che può assumere questa proprietà Vedi sotto border-top-width

border-top-style: Per i valori che può assumere questa proprietà Vedi sotto border-top-style

border-top-color: Per i valori che può assumere questa proprietà Vedi sotto border-top-color

Es d’uso:

border-top:5px solid #069;

In questo modo abbiamo detto che il bordo superiore sarà di 5 pixels, continuo (non tratteggiato per esempio) e di colore #069

border-top-color Imposta il colore del bordo superiore di un box. Prima di assegnare un colore ad un bordo o ad una sua parte, bisogna dichiarare un border-style, perché non si può assegnare un colore se il bordo non è definito.

Oltre al colore si possono attribuire a questa proprietà anche i valori:

✦ transparent – Specifica che il bordo superiore è trasparente (default)

✦ inherit – Specifica che il colore del bordo superiore è ereditato dal padre.

Es d’uso:

border-top-color:#ff0000;

border-top-style Imposta lo stile del bordo superiore di un box.

I valori che la proprietà border-top-style può assumere sono:

none Signiifica nessun bordo
hidden Come “none”,; ha un’unica differenza se attribuito al bordo delle celle di una tabella. In questo caso usare hidden per evitare che venga evidenziato un bordo tra due celle adiacenti.
dotted Bordo superiore tratteggiato a puntini.

Es. (bordo trasparente tranne border-top)

border-top-style: dotted;

Questo è un bordo dotted

dashed Bordo superiore tratteggiato con lineette

Es. (bordo trasparente tranne border-top)

border-top-style: dashed;

Questo è un bordo dashed

solid Specifica un bordo superiore a linea continua

Es. (bordo trasparente tranne border-top)

border-top-style: solid;

Questo è un bordo solid

double Specifica un bordo superiore con linea doppia

Es. (bordo trasparente tranne border-top)

border-top-style: double;

Questo è un bordo double

groove Specifica un bordo superiore 3D incavato.

Es. (bordo trasparente tranne border-top)

border-top-style:

Questo è un bordo groove

ridge Specifica un bordo superiore 3D rialzato.

Es. (bordo trasparente tranne border-top)

border-top-style: groove;

Questo è un bordo ridge

inset Il bordo farà risultare il box incavato (poco senso se usato solo su lato del box).

Es. (bordo trasparente tranne border-top)

border-top-style: inset;

Questo è un bordo inset

outset Il bordo farà risultare il box rialzato
(poco senso se usato solo su lato del box).Es.(bordo trasparente tranne border-top)border-top-style: outset;

Questo è un bordo outset

inherit Specifica che lo stile del bordo superiore può essere ereditato dall’elemento padre. IE lo supporta solo dalla versione 9.
border-top-width Imposta la larghezza del bordo superiore di un box.

I valori che la proprietà border-top-width può assumere sono:

thin Specifica un bordo superiore sottile
medium Specifica un bordo superiore medio (default)
thick Specifica un bordo superiore spesso
Lunghezza in px Può essere specificato lo spessore espresso in pixels
inherit Specifica che lo spessore del bordo superiore può essere ereditato dall’elemento padre. IE lo supporta solo dalla versione 9.

Es d’uso:

border-top-width:4px;

 

Continueremo con le altre proprietà nella prossima lezione.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.