# CSS/Altre proprietà

CSS
Copertina Tutti i moduli · Sviluppo
    Copertina
* Regole e sintassiCSS/Regole_e_sintassi
** SelettoriCSS/Selettori
** CascadeCSS/Cascade
** Unità di misura, ereditarietà e box modelCSS/Unità_di_misura,_ereditarietà_e_box_model
* Supporti di visualizzazione
** Media
** Media con pagine
** Fogli di stile parlati
* Proprietà di baseCSS/Proprietà_di_base
** SfondoCSS/Proprietà_di_base/Sfondo
** Testo baseCSS/Proprietà_di_base/Testo_base
** Testo avanzatoCSS/Proprietà_di_base/Testo_avanzato
** ListeCSS/Liste
** Tabelle
** Animazioni, trasformazioni, transizioni
* Disegnare la struttura della paginaCSS/Disegnare_la_struttura_della_pagina
** PosizionamentoCSS/Posizionamento
* Contenuto generatoCSS/Contenuto generato
* Altre proprietàCSS/Altre_proprietà
* CompatibilitàCSS/Compatibilità
* ReferenceCSS/Reference
Modifica il sommario
In questo modulo analizzeremo alcune proprietà CSS che non sono state presentate nel corso del libro ma sono comunque rilevanti.

## cursor

Questa proprietà serve a modificare l'aspetto del cursore quando si posiziona sull'elemento in questione. Può assumere come valore una combinazione dei seguenti valori (posizionarsi sopra il testo per vederne l'effetto):
* auto: il cursore automatico per il tipo di elemento
* default: il cursore predefinito di sistema (normalmente una freccetta)
* pointer: il puntatore usato ad esempio per i link (normalmente la manina con l'indice puntato)
* text: il cursore usato per il testo selezionabile (solitamente il caret I)
* wait: indica di aspettare (solitamente è una clessidra)
* progress: l'applicazione sta lavorando, ma può comunque reagire ai comandi (solitamente una freccia con accanto una clessidra)
* crosshair: la croce usata per puntare con precisione (a forma di "+")
* help: usato per indicare la possibilità di visualizzare un aiuto relativo all'elemento in questione (spesso un punto interrogativo)
* move: il cursore visualizzato su elementi spostabili (normalmente la manina chiusa)
* e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize: le frecce usate per i ridimensionamenti. Le lettere che precedono -resize indicano il verso — N = nord (north), S = sud (south), E = est (east), W = ovest (west).
* un percorso indicante un file di cursore
Il browser scorrerà la lista di valori fino a quando non incontrerà un cursore valido o rappresentabile. Altrimenti userà il cursore automatico.

## display

La proprietà display serve a definire la visualizzazione e il rendering dell'elemento da parte del browser. Può assumere, tra gli altri, i valori:
* inline: l'elemento viene visualizzato come in linea
* block: l'elemento è visualizzato come blocco
* list-item: l'elemento viene visualizzato come un oggetto di una lista (formattabile tramite le proprietà list-style)
* none: l'elemento non viene visualizzato e non influisce sulla visualizzazione della pagina
Questa proprietà può servire:
* nell'ambito di pagine XML, i quali elementi non hanno associato un rendering
* ad esempio per poter posizionare e gestire come un blocco (quindi impostare dimensioni, posizioni, ecc...) elementi in-line come i link
È invece molto interessante l'uso della dichiarazione display: none; che, soprattutto se utilizzata insieme a linguaggi dinamici come JavaScript, permette di nascondere o visualizzare elementi della pagina con un semplice clic dell'utente.

## visible

La proprietà visible determina se un elemento è visibile o meno all'interno della pagina. Può assumere come valori:
* visible: l'elemento risulta visibile
* hidden: l'elemento risulta nascosto ma occupa comunque spazio nella pagina

## Differenze tra display e visible

Abbiamo visto che esistono due modi per rendere invisibile un elemento HTML: il primo è quello di usare la proprietà display: none; e il secondo prevede l'uso di visible: hidden;. La differenza tra i due metodi è che, mentre con la prima dichiarazione l'elemento viene considerato come se non esistesse del tutto, con il secondo l'elemento influisce ancora sulla visualizzazione della pagina e nel flusso degli elementi che lo circondano.