CSS/Altre proprietà

< CSS
Indice del libro

In questo modulo analizzeremo alcune proprietà CSS che non sono state presentate nel corso del libro ma sono comunque rilevanti.

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

modifica

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

modifica

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

modifica

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.