Sommario
| Valore: | [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | inherit |
| Iniziale: | auto |
| Si applica a: | tutti gli elementi |
| Ereditata: | si |
| Percentuali: | N/A |
| Media: | visuale, interattivo |
Questa proprietà specifica il tipo di cursore che dovrà essere visualizzato per il dispositivo di puntamento. I valori hanno i seguenti significati:
P { cursor : url("mything.cur"), url("second.csr"), text; }
In aggiunta alla capacità di assegnare valori di colore predefiniti al testo, agli sfondi, ecc., i CSS2 permettono agli autori di specificare i colori in modo tale da integrarli nell'ambiente grafico dell'utente. Le regole di stile che tengono in considerazione le preferenze dell'utente offrono così i seguenti vantaggi:
L'insieme dei valori definiti per i colori di sistema è da intendersi come esaustivo. Per i sistemi che non hanno un valore corrispondente, il valore specificato dovrebbe essere correlato all'attributo di sistema più vicino, o ad un colore predefinito.
Di seguito riportiamo i valori addizionali per gli attributi CSS relativi al colore ed il loro significato generale. Ogni proprietà di colore (per esempio, 'color' o 'background-color') può assumere uno dei seguenti nomi. Sebbene questi nomi non siano sensibili alle maiuscole e alle minuscole, si raccomanda di osservare l'uso misto di maiuscole e minuscole come illustrato di seguito, allo scopo di rendere i nomi più leggibili.
Per esempio, per impostare i colori di primo piano e di sfondo di un paragrafo sugli stessi colori di primo piano e di sfondo della finestra dell'utente, si scriva la seguente regola:
P { color: WindowText; background-color: Window }
Come per i colori, gli autori possono specificare i font in un modo che fa uso delle risorse di sistema dell'utente. Si prega di consultare la proprietà 'font' per i dettagli.
A volte gli autori possono voler creare dei contorni intorno ad oggetti visuali come bottoni, campi attivi dei moduli, mappe a immagine, ecc., per farli risaltare. I contorni CSS2 differiscono dai bordi nei modi seguenti:
Le proprietà del contorno controllano lo stile di questi contorni dinamici.
| Valore: | [ <'outline-color'> || <'outline-style'> || <'outline-width'> ] | inherit |
| Iniziale: | si vedano le proprietà individuali |
| Si applica a: | tutti gli elementi |
| Ereditata: | no |
| Percentuali: | N/A |
| Media: | visuale, interattivo |
| Valore: | <border-width> | inherit |
| Iniziale: | medium |
| Si applica a: | tutti gli elementi |
| Ereditata: | no |
| Percentuali: | N/A |
| Media: | visuale, interattivo |
| Valore: | <border-style> | inherit |
| Iniziale: | none |
| Si applica a: | tutti gli elementi |
| Ereditata: | no |
| Percentuali: | N/A |
| Media: | visuale, interattivo |
| Valore: | <color> | invert | inherit |
| Iniziale: | invert |
| Si applica a: | tutti gli elementi |
| Ereditata: | no |
| Percentuali: | N/A |
| Media: | visuale, interattivo |
Il contorno creato con le proprietà del contorno viene tracciato "sopra" un riquadrato, ossia il contorno è sempre sulla parte superiore, e non influenza la posizione o le dimensioni del riquadrato o di qualsiasi altro riquadrato. Perciò, visualizzare o sopprimere i contorni non causa la risistemazione del contenuto.
Il contorno è tracciato partendo appena al di fuori dellimite del bordo.
I contorni possono essere non-rettangolari. Per esempio, se l'elemento è spezzato su diverse righe, il contorno è il contorno minimo che racchiude tutti i riquadrati dell'elemento. In contrapposizione ai bordi, il contorno non è aperto nella parte terminale e iniziale del riquadrato di riga, ma è sempre completamente collegato.
La proprietà 'outline-width' accetta gli stessi valori di 'border-width'.
La proprietà 'outline-style' accetta gli stessi valori di 'border-style', tranne per il fatto che 'hidden' non è uno stile del contorno valido.
La proprietà 'outline-color' accetta tutti i colori, compresa la parola chiave 'invert'. Ci si aspetta che 'invert' compia un'inversione di colori sui pixel dello schermo. Questo è uno stratagemma comune per assicurare che il bordo del fuoco [focus] sia visibile, a prescindere dal colore dello sfondo.
La proprietà 'outline' è una proprietà stenografica [shorthand, o abbreviata], e imposta le tre proprietà 'outline-style', 'outline-width', e 'outline-color'.
Si noti che il contorno è lo stesso su tutti i lati. Contrariamente ai bordi, non c'è una proprietà 'outline-top' o 'outline-left'.
Queste specifiche non definiscono come vengano tracciati contorni multipli che si sovrappongono, o come vengano tracciati i contorni per i riquadrati che sono parzialmente oscurati dietro altri elementi.
Nota. Poichè il contorno del fuoco non influenza la formattazione (ossia non gli viene lasciato spazio nel modello per riquadrati), può sovrapporsi ad altri elementi nella pagina.
Ecco un esempio di come viene tracciato un contorno spesso intorno ad un elemento BUTTON:
BUTTON { outline-width : thick }
Gli script possono essere usati per cambiare la larghezza del contorno, senza provocare la risistemazione del contenuto.
Le interfaccie utente grafiche possono usare i contorni attorno agli elementi per dire all'utente quale elemento nella pagina ha il fuoco [focus]. Questi contorni sono in aggiunta a tutti i bordi, e attivare o disattivare i contorni non provoca la risistemazione del documento. Il fuoco è il soggetto dell'interazione con l'utente in un documento (per esempio per inserire del testo, selezionare un bottone, ecc.). I programmi utente che supportano il gruppo di media interattivi devono essere al corrente di dove si trova il fuoco e devono anche rappresentarlo. Questo può essere fatto usando i contorni dinamici in unione con la pseudo-classe :focus.
Per esempio, per tracciare una spessa riga nera intorno ad un elemento quando ha il fuoco, e una spessa linea rossa quando è attivo, si possono usare le seguenti regole:
:focus { outline: thick solid black }
:active { outline: thick solid red }
Il gruppo di lavoro sui CSS ritiene che l'ingrandimento di un documento o di parti di un documento non dovrebbe essere specificato attraverso i fogli di stile. I programmi utente possono supportare tale ingrandimento in modi diversi (per esempio, immagini più grandi, suoni più forti, ecc.)
Qaundo ingrandiscono una pagina, i programmi utente dovrebbero preservare le relazioni fra elementi posizionati. Per esempio, un fumetto può essere composto di immagini con elementi testuali sovrapposti. Quando ingrandisce questa pagina, un programma utente dovrebbe mantenere il testo all'interno della nuvoletta dei fumetti.