CSS/Disegnare la struttura della pagina

Copertina

In questo modulo verranno trattate le diverse proprietà legate al box model, già analizzato precedentemente nel corso del libro.

Gestione delle dimensioni e dell'overflow

Le proprietà width e height permettono di impostare rispettivamente la larghezza e l'altezza del contenuto del box in questione. Il valore di queste proprietà può essere una grandezza oppure un valore in percentuale riferito all'elemento genitore; è possibile inoltre usare un valore auto, che funziona in modo diverso per le due proprietà:

per quanto riguarda l'altezza, con un valore auto verrà determinata dal contenuto dell'elemento stesso
per quanto riguarda la larghezza, con un valore auto assume le dimensioni dell'elemento genitore

La gestione delle dimensioni del contenuto di un elemento era tuttavia già possibile in HTML attraverso gli attributi width e height, anche se non era applicabile a tutti i tag.

Possono risultare utili inoltre le proprietà min-height, max-height, min-width e max-width che servono per impostare le dimensioni minime o massime che può assumere l'elemento in questione.

La proprietà overflow permette di impostare il comportamento che deve avere un elemento nel caso il suo contenuto superi le dimensioni previste dalle proprietà width e height (questo fenomeno è appunto chiamato con il termine tecnico overflow). Può assumere uno tra i seguenti valori:

hidden: il contenuto in eccedenza viene ignorato e non viene quindi visualizzato
visible: le dimensioni del box vengono riadattate in modo tale da mostrare il contenuto per intero
scroll: vengono aggiunte al box delle barre di scorrimento orizzontali e/o verticali che permettono all'utente di vedere per intero il contenuto semplicemente scorrendolo
auto: il browser si comporta secondo le sue impostazioni

I margini

La gestione dei margini prevede l'uso di quattro proprietà margin-top, margin-bottom, margin-left, margin-right che specificano rispettivamente il margine superiore, inferiore, sinistro e destro dell'elemento. Possono assumere una grandezza, un valore in percentuale o auto (che normalmente imposta margini nulli). Si noti che i valori per i margini possono essere anche negativi; ad esempio:

margin-left: -10px;

mostra l'elemento spostato di 10px a sinistra rispetto alla posizione che dovrebbe assumere normalmente.

Esiste inoltre una proprietà riassuntiva margin che permette di impostare insieme le quattro proprietà relative ai marigni. In base a quanti valori vengano forniti, si comporta in maniere differenti:

se ne viene indicato solo uno, questo si riferirà a tutti e quattro i margini
se ne vengono indicati due, il primo si riferisce ai margini orizzontali e il secondo a quelli verticali
se ne vengono indicati tre, il primo e il terzo sono riferiti rispettivamente ai margini superiore e inferiore, il secondo a quelli verticali
se ne vengono indicati quattro, il primo si riferirà al margine superiore, il secondo a quello destro, il terzo a quello inferiore e il quarto a quello sinistro

Il padding

Il padding, ovvero lo spazio tra il bordo di un contenitore ed il suo contenuto, è gestito tramite quattro proprietà padding-top, padding-bottom, padding-left, padding-right che specificano rispettivamente il padding superiore, inferiore, sinistro e destro dell'elemento. Possono assumere una grandezza o un valore in percentuale.

Esiste inoltre una proprietà riassuntiva padding che permette di impostare insieme le quattro proprietà relative al padding; si comporta allo stesso modo di margin.

I bordi

I bordi in CSS sono gestibili tramite le proprietà:

 border-<lato>-style
 border-<lato>-width
 border-<lato>-color

che specificano rispettivamente lo stile, lo spessore e il colore del lato (top, bottom, left, right) indicato.

Per quanto riguarda lo stile dei bordi, è possibile specificare uno dei seguenti valori:

none: il bordo non viene visualizzato (es: )
dotted: una successione di punti (es: )
dashed: il bordo è visualizzato con dei trattini (es: )
solid: il bordo è una linea continua (es: )
double: il bordo è costituito da due linee separate da uno spazio bianco (es: )
groove e ridge: il bordo risulta incassato o in rilievo tramite un gioco di colori (es: e )
inset e outset: l'intero box risulta incassato o in rilievo tramite un gioco di colori (es: e )

Per quanto riguarda il colore, è possibile specificare un valore di colore valido oppure il valore transparent (bordo trasparente che influisce però sulla visualizzazione della struttura).

Per quanto riguarda lo spessore dei bordi, la proprietà border-<lato>-width può assumere i valori:

thin (un bordo sottile)
medium (un bordo normale)
thick (un bordo spesso)
un valore di grandezza, normalmente espressa in px, che deve essere positiva

Proprietà riassuntive dei bordi

Anche per la definizione dei bordi esistono delle proprietà riassuntive. Sono:

 border-style
 border-width
 border-color

Queste tre proprietà specificano lo stile, lo spessore e il colore dei quattro bordi assieme. Possono avere da uno a quattro valori e il loro funzionamento è simile a quello di margin.

Esistono inoltre le proprietà:

 border-<lato>: <border-<lato>-width> <border-<lato>-style> <border-<lato>-color>

che definiscono i diversi aspetti dei bordi per un singolo lato.

Infine possiamo utilizzare anche una proprietà la cui sintassi è:

 border: <border-width> <border-style> <border-color>

che specifica insieme i valori delle tre proprietà dei bordi per tutti e quattro i lati.