Con questa lezione inizia la sezione della guida dedicata alle proprietà connesse al cosiddetto modello di formattazione visuale. Sono le proprietà con cui si gestiscono il comportamento, la visibilità e il posizionamento dei box con il CSS.
La proprietà display
Questa proprietà serve per controllare con i CSS il modo in cui un elemento viene reso dal browser.
Abbiamo imparato nella lezione 2 che ogni elemento HTML ha un suo comportamento predefinito rispetto alla presentazione: si parla di elementi blocco, elementi in linea, elementi di lista e elementi di tabella.
Ebbene, con la proprietà display possiamo modificare, quando e se necessario, questo comportamento di default. La proprietà display è ereditata.
Sintassi ed esempi
La definizione sintattica di questa proprietà è molto semplice:
selettore {display: valore;}Il valore può essere rappresentato unicamente da una parola chiave. Nella pratica comune, i valori in assoluto più utili e usati sono:
| Valore | Descrizione |
|---|---|
block |
l'elemento viene reso come un elemento blocco |
inline |
l'elemento a cui viene applicata assume le caratteristiche degli elementi inline |
inline-block |
l'elemento può assumere, come gli elementi blocco, dimensioni esplicite (larghezza e altezza), margini e padding, ma come tutti gli elementi inline, si disporrà orizzontalmente e non verticalmente, potendo essere circondato dal testo ed essendo sensibile all'allineamento verticale |
none |
l'elemento non viene mostrato; o meglio: è come se non fosse nemmeno presente nel documento, in quanto non genera alcun box; l'uso del valore none è uno dei mezzi con cui, nei CSS, si può nascondere un elemento |
Un valore specifico consente di impostare per un elemento una presentazione equivalente a quella degli item di una lista:
list-item
Una serie di valori, poi, fa riferimento alla possibilità di impostare il display degli elementi come elementi di una tabella. Ecco la lista:
table | inline-table | table-cell | table-row |
table-row-group | table-column | table-column-group |
table-header-group | table-footer-group | table-captionAltri valori possibili, ma praticamente mai usati sono:
run-in: l'elemento viene incorporato e inserito all'inizio del blocco seguente;compact: l'elemento viene piazzato al fianco di un altro;marker: questo valore fa sì che il contenuto generato con gli pseudo-elementi:beforee:aftersia trattato come un marcatore di liste.
Approfondimenti
La proprietà display, specie quando è usata con i primi quattro valori visti poc'anzi, è alla base di innumerevoli e importantissime tecniche CSS. Ci limitiamo a qualche segnalazione sparsa dall'archivio dei nostri articoli: