Procedura: utilizzare le finestre Applica stili e Gestisci stili

Aggiornamento: novembre 2007

Le finestre Applica stili e Gestisci stili consentono di applicare, modificare, rinominare ed eliminare gli stili. È inoltre possibile associare o scollegare i fogli di stile CSS esterni, selezionare tutte le istanze di uno stile e individuare il codice che contiene la regola di uno stile impostata.

Ogni finestra dispone di funzioni specifiche. Utilizzare la finestra Applica stili per applicare un singolo stile o più stili a un elemento di pagina. Nella finestra Applica stili ogni stile viene visualizzato in base alle regole dello stile. Pertanto è possibile identificare rapidamente lo stile da utilizzare semplicemente osservando l'aspetto dello stile nella finestra.

Utilizzare la finestra Gestisci stili per modificare la posizione o l'ordine degli stili. È possibile spostare gli stili da un CSS esterno a un CSS interno e viceversa oppure è possibile spostare la posizione di uno stile all'interno di un foglio di stile o di un blocco di stili.

Entrambi gli strumenti utilizzano icone per indicare come viene definito lo stile. Nella tabella riportata di seguito viene illustrata e descritta ciascuna icona.

Icona	Descrizione
	Un punto rosso indica uno stile basato su ID.
	Un punto verde indica uno stile basato su classi.
	Un punto blu indica uno stile basato su elementi.
	Un punto giallo indica uno stile in linea.
	Un cerchio intorno a un punto indica che lo stile è utilizzato nella pagina corrente.
	Il simbolo @ indica un foglio di stile CSS esterno importato.

Finestra Applica stili

Nella finestra Applica stili sono elencate tutte le regole di stile CSS definite per una pagina, ovvero le regole di stile definite nei fogli di stile esterni, come gli stili in linea e gli stili definiti nella pagina. Le regole di stile basate su classi e su ID vengono visualizzate sotto il nome del file css esterno contenente lo stile. Se la regola di stile è definita nella pagina, viene visualizzata in Pagina corrente. Le regole di stile basate su elementi sono organizzate nello stesso modo, ma vengono visualizzate sotto un'intestazione separata denominata Selettori contestuali.

È possibile impostare la finestra in modo da elencare tutte le regole di stile. In alternativa, è possibile restringere l'elenco visualizzando solo le regole di stile utilizzate nella pagina Web corrente o nella selezione corrente della pagina. Indipendentemente dall'opzione selezionata, le regole di stile basate su elementi e le regole di stile in linea vengono visualizzate nella finestra solo in due circostanze: quando si sposta il puntatore del mouse sugli elementi di pagina che utilizzano lo stile e quando si seleziona il contenuto che utilizza lo stile.

È inoltre possibile ordinare l'elenco di stili visualizzati nella finestra Applica stili.

Se un determinato stile non è ben visibile per lo sfondo della finestra, è possibile selezionare un colore da visualizzare nella finestra dietro gli stili che non contengono una proprietà background.

Nota:
Per visualizzare temporaneamente tutte le regole di uno stile in una finestra popup, spostare il puntatore del mouse sullo stile nella finestra Applica stili.

Cenni preliminari sulla finestra Applica stili

L'interfaccia utente della finestra Applica stili dispone delle seguenti funzionalità:

• Nuovo stile, che fornisce l'accesso alla finestra di dialogo Stili.

• Associa foglio di stile, che consente di selezionare un foglio di stile da associare alla pagina corrente.

• Cancella stili, che rimuove tutte le regole di stile basate su classi e in linea dalla selezione corrente.

• Pagina corrente, che elenca le regole di stile basate su classi e basate su ID della pagina corrente e i file CSS esterni importati.

• Un file CSS esterno, indicato dal simbolo @, che mostra tutte le regole di stile importate nella pagina Web corrente.

• Un file CSS esterno collegato alla pagina Web corrente e visualizzato come sezione separata.

• Un bordo rettangolare continuo intorno a uno stile per indicare che è utilizzato dalla selezione corrente.

• Selettori contestuali, che elenca le regole di stile basate su elementi utilizzate dalla selezione corrente.

• Stile in linea, che mostra le regole di stile applicate all'elemento in linea selezionato.

• Un menu di scelta rapida per ogni regola di stile che consente di eseguire molte attività correlate allo stile.

Utilizzo della finestra Applica stili

La finestra Applica stili consente di applicare rapidamente un singolo stile o più stili a un elemento di pagina.

Per applicare gli stili a un elemento di pagina utilizzando la finestra Applica stili

1. Per visualizzare la finestra Applica stili, scegliere Stili CSS dal menu Formato, quindi fare clic su Applica stili.

2. In una pagina Web selezionare l'elemento al quale applicare uno stile in visualizzazione Progettazione o visualizzazione Origine, quindi effettuare una delle seguenti operazioni nella finestra Applica stili:

   • Per applicare una singola regola di stile esistente, fare clic sullo stile basato su classi o su ID da applicare.

   • Per applicare più regole di stile esistenti, fare clic su ciascuno stile da applicare tenendo premuto il tasto CTRL.

È possibile modificare l'ordine degli stili, scegliere gli stili da visualizzare e personalizzare la finestra in base alle proprie esigenze.

Per ordinare gli stili utilizzando la finestra Applica stili

• Nella finestra Applica stili fare clic su Opzioni, quindi effettuare una delle seguenti operazioni:

  • Per elencare le regole di stile nell'ordine in cui sono visualizzate nel CSS, fare clic su Categorizza in base all'ordine.

  • Per elencare gli stili in ordine alfabetico e in base al tipo di stile (basato su classi o basato su ID), fare clic su Categorizza in base al tipo.

È possibile mostrare o nascondere le regole di stile nella finestra Applica stili. Gli stili basati su elementi e le regole di stile in linea vengono visualizzate nella finestra Applica stili solo quando si sposta il puntatore del mouse sul contenuto che utilizza lo stile o quando si seleziona il contenuto che utilizza lo stile.

Per mostrare o nascondere gli stili utilizzando la finestra Applica stili

• Nella finestra Applica stili fare clic su Opzioni, quindi effettuare una delle seguenti operazioni:

  • Per elencare tutte le regole di stile contenute nel CSS esterno, interno e in linea della pagina Web corrente, fare clic su Visualizza tutti gli stili.

  • Per elencare solo le regole di stile utilizzate nella pagina Web corrente, fare clic su Visualizza gli stili utilizzati nella pagina corrente.

  • Per elencare solo le regole di stile utilizzate nella selezione corrente della pagina Web corrente, fare clic su Visualizza gli stili utilizzati nella selezione.

Se una regola di stile non ha un colore di sfondo, è possibile applicare un colore che renda più visibile il nome dello stile nella finestra Applica stili. Se lo stile ha una regola di stile per lo sfondo, lo sfondo viene visualizzato con lo stile.

Per visualizzare un colore di sfondo nella finestra Applica stili

1. Nella finestra Applica stili fare clic su Opzioni, quindi su Anteprima colore sfondo:

2. Nella finestra di dialogo Altri colori selezionare un colore, quindi fare clic su OK.

Finestra Gestisci stili

Nella finestra Gestisci stili sono elencate tutte le regole di stile definite nel foglio di stile CSS esterno della pagina. Sono inoltre elencate le regole di stile definite nella pagina, ma non come stili in linea. È possibile utilizzare la finestra Gestisci stili per spostare gli stili da un foglio di stile esterno all'elemento style della pagina e viceversa. È anche possibile utilizzare la finestra per spostare la posizione di uno stile all'interno dell'insieme di regole di stile CSS.

È possibile impostare la finestra in modo da elencare tutte le regole di stile o limitare la visualizzazione solo alle regole di stile utilizzate nella pagina Web corrente o nella selezione corrente della pagina. Tutte le regole di stile basate su classi, su elementi e su ID vengono visualizzate sotto il nome del file css esterno che contiene lo stile. Se la regola di stile è presente nella pagina corrente, viene visualizzata in Pagina corrente.

Nota:
Per visualizzare temporaneamente tutte le regole di uno stile in una finestra popup, spostare il puntatore del mouse sullo stile nella finestra Applica stili.

Cenni preliminari sulla finestra Gestisci stili

L'interfaccia utente della finestra Gestisci stili dispone delle seguenti funzionalità:

• Nuovo stile, che fornisce l'accesso alla finestra di dialogo Stili.

• Associa foglio di stile, che consente di selezionare un foglio di stile da associare alla pagina corrente.

• Pagina corrente, che elenca le regole di stile basate su classi e basate su ID della pagina corrente e dei file CSS esterni importati.

• Una scheda per i file css esterni collegati tramite la pagina Web corrente.

• Raggruppamento selettori predefinito, che mostra i selettori di qualsiasi stile che contiene più selettori in un gruppo. È possibile elencare separatamente i selettori facendo clic su Opzioni, quindi su Separa selettori raggruppati.

Per visualizzare un'anteprima di uno stile selezionato nella finestra Gestisci stili, fare clic su Opzioni, quindi fare clic su Anteprima stile selezionato.

Utilizzo della finestra Gestisci stili

È possibile modificare l'ordine degli stili e personalizzare la finestra in base alle proprie esigenze. Se si sposta uno stile verso l'alto o verso il basso nell'elenco, si sposta anche lo stile nel foglio di stile. Questa modifica può influire sull'ordine di priorità delle proprietà dello stile. Ad esempio, se un attributo della proprietà è impostato in due stili diversi, l'ultimo stile avrà la precedenza.

Nota:
Quando la finestra Gestisci stili è impostata su Categorizza in base all'elemento o Categorizza in base al tipo, non è possibile spostare uno stile in un determinato punto all'interno dell'elenco di stili. In ambo i casi, è possibile solo spostare uno stile da un CSS esterno a un altro CSS esterno o nella pagina o viceversa trascinando lo stile sul nome del file CSS esterno o in Pagina corrente.

Per spostare uno stile mediante la finestra Gestisci stili

1. Per visualizzare la finestra Gestisci stili, scegliere Stili CSS dal menu Formato, quindi fare clic su Gestisci stili.

2. Nella finestra Gestisci stili fare clic su Opzioni, fare clic su Categorizza in base all'ordine, quindi effettuare le seguenti operazioni.

   • Per spostare la posizione di uno stile nel CSS, trascinare lo stile verso l'alto o verso il basso nell'elenco. Ad esempio, è possibile spostare gli stili utilizzati più frequentemente in modo da essere visualizzati adiacenti l'uno all'altro.

   • Per spostare uno stile da una pagina a un CSS esterno associato alla pagina, trascinare lo stile da Pagina corrente sul nome del CSS esterno o in un determinato punto dell'elenco di stili nel CSS esterno.

   • Per spostare uno stile da un CSS esterno in una pagina, trascinare lo stile che si trova sotto il nome del CSS esterno in Pagina corrente o in un determinato punto dell'elenco di stili in Pagina corrente. Se Pagina corrente non viene visualizzato, aggiungere un elemento style all'interno dell'elemento head della pagina Web.

   • Per spostare uno stile da un CSS esterno a un altro CSS esterno, trascinare lo stile sul nome del CSS esterno desiderato o in un determinato punto dell'elenco di stili nel CSS esterno.

Sebbene la finestra Gestisci stili sia più adatta per la gestione degli stili, è anche possibile utilizzarla per applicare uno stile a un elemento di pagina.

Per applicare uno stile mediante la finestra Gestisci stili

1. In una pagina Web selezionare l'elemento a cui applicare uno stile in visualizzazione Progettazione o visualizzazione Origine.

2. Fare clic con il pulsante destro del mouse sullo stile basato su classi o su ID da applicare e scegliere Applica stile da menu di scelta rapida.

È anche possibile ordinare gli stili utilizzando le scelte disponibili mediante il pulsante Opzioni.

Per ordinare gli stili utilizzando la finestra Gestisci stili

• Nella finestra Gestisci stili fare clic su Opzioni, quindi effettuare una delle seguenti operazioni:

  • Fare clic su Categorizza in base all'ordine per elencare gli stili in base all'ordine in cui sono visualizzati nel CSS.

  • Fare clic su Categorizza in base all'elemento per elencare gli stili in base all'elemento HTML applicato a ciascuno stile.

  • Fare clic su Categorizza in base al tipo per elencare gli stili in ordine alfabetico e in base al tipo di stile.

È possibile separare gli stili raggruppati per semplificarne la gestione.

Per elencare separatamente ciascun selettore di stili contenente più selettori

• Nella finestra Gestisci stili fare clic su Opzioni, quindi su Separa selettori raggruppati.

È anche possibile specificare gli stili da visualizzare nella finestra Gestisci stili.

Per mostrare o nascondere gli stili nella finestra Gestisci stili

• Nella finestra Gestisci stili fare clic su Opzioni, fare clic su Categorizza in base all'ordine, quindi effettuare le seguenti operazioni.

  • Fare clic su Visualizza tutti gli stili per elencare tutti gli stili contenuti nei fogli di stile esterni, tutti gli stili presenti nella pagina e tutte le regole di stile in linea della pagina corrente.

  • Fare clic su Visualizza gli stili utilizzati nella pagina corrente per elencare solo gli stili utilizzati nella pagina corrente.

  • Fare clic su Visualizza gli stili utilizzati nella selezione per elencare solo gli stili utilizzati nella selezione corrente della pagina.

Vedere anche

Concetti

Procedura: utilizzare la finestra Proprietà CSS

Procedura: utilizzare la barra degli strumenti Applicazione diretta stile