CSS/Altre proprietà

Wikibooks, manuali e libri di testo liberi.
< CSS
Vai alla navigazione Vai alla ricerca
Indice del libro

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

cursor[modifica]

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.