Finestra di dialogo Selezione colori

Articolo
09/12/2008

Aggiornamento: novembre 2007

Viene utilizzata per assegnare attributi di stile agli elementi HTML.

Per accedere a questa finestra di dialogo

Nella visualizzazione Progettazione di Microsoft Visual Web Developer selezionare un controllo o un elemento HTML per eseguire il rendering del markup, quale un controllo Table o un pulsante <input> HTML.
Aprire la finestra di dialogo Generatore di stile eseguendo una delle operazioni indicate di seguito.
- Nella visualizzazione Progettazione selezionare il controllo o l'elemento, scegliere Formato e quindi Stile.
- Nella visualizzazione Progettazione fare clic con il pulsante destro del mouse sul controllo o sull'elemento, quindi scegliere Stile.
- Selezionare il controllo o l'elemento, selezionare la proprietà Stile corrispondente nella finestra Proprietà, quindi scegliere il pulsante con i puntini di sospensione (...).
- Se si sta utilizzando la finestra Stili documento, selezionare un elemento, una classe o un ID elemento, quindi scegliere l'icona Compila stile.
- Se si sta modificando un foglio di stile CSS, posizionare il punto di inserimento all'interno delle parentesi graffe ( { } ) di uno stile CSS, quindi scegliere Compila stile dal menu Stile.
Verrà visualizzata la finestra di dialogo Generatore di stile.
Selezionare una delle schede della finestra di dialogo Generatore di stile contenente un elenco a discesa Colore, quindi scegliere il pulsante con i punti di sospensione (…) accanto alla casella.

Verrà aperta la finestra di dialogo Selezione colori.

Attività

Procedura dettagliata: creazione e modifica di un file CSS

Elementi di interfaccia

Tavolozza Web
Quando in questa scheda viene selezionato un campione di colore, nella casella Colore viene visualizzato il codice RGB esadecimale corrispondente. La coppia attribute:RGBcolor selezionata viene quindi inserita nella definizione dello stile CSS alla chiusura della finestra di dialogo Generatore di stile.

Durante la modifica di una pagina HTML nella visualizzazione Progettazione, ad esempio, selezionare l'elemento <BODY> nella finestra Struttura documento, quindi scegliere Compila stile dal menu Formato. Selezionare Sfondo, quindi scegliere il pulsante con i puntini di sospensione (...) accanto alla casella Colore per aprire la finestra di dialogo Selezione colori. Nella scheda Tavolozza Web selezionare un campione di colore blu chiaro e scegliere OK. Alla chiusura della finestra di dialogo Generatore di stile, tra le parentesi graffe ( { } ) dello stile BODY viene inserita una coppia attribute:RGBcolor come la seguente:
```
BODY { BACKGROUND-COLOR: #99ffff; } 
```
Per ulteriori informazioni, vedere Scheda Tavolozza Web, finestra di dialogo Selezione colori.
Colori con nome
Quando in questa scheda viene selezionato un campione di colore, nella casella Colore vengono visualizzati il nome del colore e il codice RGB esadecimale corrispondenti. Se viene quindi selezionato un colore con nome Di base o Aggiuntivo, nella definizione dello stile CSS verrà inserita una coppia attribute:colorname.

Durante la modifica di una pagina HTML nella visualizzazione Progettazione, ad esempio, selezionare l'elemento <BODY> nella finestra Struttura documento, quindi scegliere Compila stile dal menu Formato. Selezionare Sfondo, quindi scegliere il pulsante con i puntini di sospensione (...) accanto alla casella Colore per aprire la finestra di dialogo Selezione colori. Nella scheda Colori con nome selezionare il colore LightBlue (#add8e6) nella riga inferiore. Alla chiusura della finestra di dialogo Generatore di stile, tra le parentesi graffe ( { } ) dello stile BODY verrà inserita la seguente coppia attribute:colorname:
```
BODY { BACKGROUND-COLOR: lightblue; } 
```
Per ulteriori informazioni, vedere Scheda Colori con nome, finestra di dialogo Selezione colori.

Colori di sistema
Quando viene selezionato un colore, nella casella Colore viene visualizzata una categoria di colori di sistema. Una coppia attribute:category viene quindi inserita nella definizione dello stile CSS alla chiusura della finestra di dialogo Generatore di stile.

Durante la modifica di un foglio di stile CSS, ad esempio, posizionare il cursore all'interno delle parentesi graffe ( { } ) di uno stile CSS per l'elemento <BODY>, quindi scegliere Compila stile dal menu Formato. Selezionare Sfondo, quindi scegliere il pulsante con i puntini di sospensione (...) accanto alla casella Colore per aprire la finestra di dialogo Selezione colori. Nella scheda Colori di sistema selezionare la categoria di colori Sfondo, quindi scegliere OK. Alla chiusura della finestra di dialogo Generatore di stile, nello stile BODY verrà inserita la seguente coppia attribute:colorname:

BODY { BACKGROUND-COLOR: background; }

Nota:
Quando si utilizza un colore di sistema, non viene specificato il colore da visualizzare. Il colore di sfondo varia a seconda del sistema, in base al colore selezionato dall'utente per il desktop. In genere è opportuno utilizzare le categorie dei colori di sistema solo in progetti Web realizzati per gruppi di utenti che condividono impostazioni di visualizzazione comuni e prevedibili.

Per ulteriori informazioni, vedere Scheda Colori di sistema, finestra di dialogo Selezione colori.

Colori personalizzati
Per creare un colore personalizzato, trascinare i dispositivi di scorrimento corrispondenti ai colori primari rosso, verde e blu fino a visualizzare la tonalità desiderata nella casella Anteprima. Il relativo codice di colore RGB, visualizzato nella casella Colore, verrà inserito nella definizione di stile CSS alla chiusura della finestra di dialogo Generatore di stile. I valori decimali visualizzati a destra di ciascun dispositivo di scorrimento sono compresi tra 0 (assenza del colore) e 255 (quantità massima del colore). Il valore predefinito per ciascun colore primario è 255.

Nota:
La visualizzazione di un colore personalizzato è basata sulle impostazioni di visualizzazione correnti del monitor in uso. e può risultare diversa in un diverso monitor o browser Web. Si consiglia quindi di utilizzare colori personalizzati solo in progetti Web realizzati per gruppi di utenti che condividono impostazioni di visualizzazione comuni e prevedibili.

Durante la modifica di un foglio di stile CSS, ad esempio, posizionare il cursore all'interno delle parentesi graffe ( { } ) di uno stile CSS per una classe di stile INPUT.button, selezionare Sfondo nella finestra di dialogo Compila stile, quindi scegliere il pulsante con i puntini di sospensione (...) accanto alla casella Colore per aprire la finestra di dialogo Selezione colori. Nella scheda Personalizzati, lasciare i dispositivi di scorrimento Rosso e Verde impostati sui rispettivi valori predefiniti (255) e trascinare il cursore Blu verso sinistra fino a 102. Alla chiusura della finestra di dialogo Generatore di stile, l'attributo attribute:RGBcolor verrà inserito tra le parentesi graffe ( { } ) dello stile:

INPUT.button { background-color: #ffff66; }

Per ulteriori informazioni, vedere Scheda Personalizzati, finestra di dialogo Selezione colori.

Colore
Consente di visualizzare il codice RGB esadecimale corrispondente al colore selezionato.
OK
Consente di chiudere la finestra di dialogo Selezione colori e di aggiungere la coppia attribute:color selezionata al markup CSS che verrà inserito alla chiusura della finestra di dialogo Generatore di stile.