9. Liste

Una lista, consente di generare del contenuto, sotto forma di un elenco, che é formato da una serie di voci scandite da un determinato marcatore (per esempio il simbolo di un punto, un numero e cose via).
Inoltre, dal punto di vista di Css, una lista genera dei riquadri di tipo block-level per le sue voci e dei riquadri per i marcatori definiti marker box.

list-style-type

Questa proprietà permette di stabilire, analogamente all'attributo type delle liste HTML, il simbolo usato come punto elenco, sia di una lista ordinata sia di una non ordinata. Può assumere i seguenti valori:

liste ordinate:
decimal: numeri decimali, partendo da 1
decimal-leading-zero: numeri decimali con zeri aggiuntivi (01...99)
lower-roman e upper-roman: numeri romani minuscoli (i, ii, iii, iv, v, ...) e maiuscoli (I, II, III, IV, V, ...)
lower-latin/lower-alpha e upper-latin/upper-alpha: lettere dell'alfabeto latino minuscole (a, b, c, ... z) e maiuscole (A, B, C, ... Z)
lower-greek: lettere dell'alfabeto greco minuscole (a, ß, ?, ...)
georgian: numerazione Georgiana (an, ban, gan, ...)
armenian: numerazione Armena

liste non ordinate:
sono disponibili i normali valori disc, square e circle, che funzionano come l'attributo type delle liste HTML

list-style-image

CSS permette di definire come punto elenco un'immagine; nel caso sia stato impostato un valore sia per list-style-type sia per questa proprietà, viene mostrata solo l'immagine (se è valida).

Sintassi: list-style-image: url(<percorso/immagine.gif>);

list-style-position

Questa proprietà permette di impostare la posizione del punto elenco di ogni elemento <li>.
Può assumere i seguenti valori:

outside: il punto elenco risulterà esterno al blocco del testo dell'elemento
inside: il punto elenco risulterà interno al blocco del testo dell'elemento

list-style

Esiste inoltre la proprietà riassuntiva list-style che riassume la formattazione delle liste.
La sintassi è:

list-style: <list-style-type> <list-style-position> <list-style-image>;

10. Disegnare la struttura della pagina

Gestione dell'overflow e delle dimensioni

La proprietà overflow
La proprietà overflow, permette di indicare come dovrà essere trattato il contenuto di un elemento
che eventualmente ne superi i limiti di contenimento.

Sintassi:
overflow : [ visible | hidden | scroll | auto | no-display | no-content ]{1,2}

visible: con essa il contenuto eccedente non deve essere tagliato e dunque viene visualizzato all’esterno del box di contenimento.
hidden: con essa il contenuto eccedente deve essere tagliato e non deve essere per nessuna ragione visualizzato (per esempio attraverso un meccanismo di scorrimento).
scroll: con essa il contenuto eccedente deve essere tagliato ma il browser deve fornire un meccanismo di scorrimento con cui visualizzare la parte tagliata. Inoltre se non c’è contenuto tagliato il browser dovrebbe in ogni caso visualizzare il meccanismo di scorrimento anche se non necssario.
auto: con essa è lasciata al browser la decisione di come comportarsi in caso di overflow di contenuto.
no-display: con essa se c’è del contenuto in overflow il box di contenimento non viene visualizzato.
no-content: con essa se c’è del contenuto in overflow tale contenuto è nascosto.

{1,2} Inoltre, è possibile fornire da un minimo di un valore a un massimo di due valori,
dove il primo valore indica come comportarsi in caso di overflow sui lati sinistro e destro dell’area di contenimento
mentre il secondo valore indica come comportarsi in caso di overflow sui lati superiore e inferiore dell’area di contenimento.
Se è fornito un solo valore allora il secondo assumerà il valore del primo.

È possibile usare le proprietà overflow-x (orizzontale) o overflow-y (verticale) per fornire dei singoli valori di overflow.

Dimensioni

Le proprietà width e height permettono di impostare rispettivamente la larghezza e l'altezza del contenuto del riquadro 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

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


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; e 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.