Condividi tramite


Procedura: utilizzare la barra degli strumenti Applicazione diretta stile

Aggiornamento: novembre 2007

La barra degli strumenti Applicazione diretta stile consente di creare e modificare gli stili. È possibile utilizzare la barra degli strumenti Applicazione diretta stile insieme agli altri strumenti CSS di Visual Studio quali la finestra°Proprietà CSS, la finestra°Gestisci stili e la finestra Applica stili.

Se si applica uno stile a un elemento di pagina che non dispone di una regola di stile CSS, è possibile utilizzare la barra degli strumenti Applicazione diretta stile per generare e applicare un nuovo stile. Ad esempio, mediante la barra degli strumenti Applicazione diretta stile è possibile selezionare un paragrafo e applicare un colore al testo. In tal caso, in Visual Studio viene creata una nuova regola di stile CSS e applicata al testo. Se si formatta un'altra proprietà dello stesso paragrafo, ad esempio la famiglia°di caratteri del paragrafo, in Visual Studio viene aggiunta una nuova dichiarazione di proprietà alla regola di stile generata.

Utilizzo della barra degli strumenti Applicazione diretta stile

È possibile utilizzare la barra degli strumenti Applicazione diretta stile per generare e modificare gli stili in modalità automatica o manuale. Se non si ha alcuna esperienza nella creazione di CSS, utilizzare la modalità automatica in modo da generare automaticamente in Visual Studio le regole di stile. Se invece si è già acquisita una certa esperienza, è possibile utilizzare la modalità manuale per ottenere un maggior controllo sulla modalità di scrittura di una regola di stile.

Nella modalità manuale è possibile aggiungere una nuova dichiarazione di proprietà a uno stile diverso, ad esempio un nuovo stile, uno stile generato diverso o uno stile creato. Quando si utilizza la modalità manuale, in Visual Studio°verranno aggiunti elementi a una pagina Web se necessario per assegnare correttamente lo stile.

Cenni preliminari sulla barra degli strumenti Applicazione diretta stile

Nella tabella seguente sono elencati gli elementi della barra degli strumenti Applicazione diretta stile.

Nota:

   Quando si utilizza la modalità automatica, sono disattivati l'elenco a discesa Regola di destinazione e il pulsante Riutilizza stile esistente.

Elemento

Descrizione

L'elenco a discesa Applicazione stili consente di impostare la modalità in cui vengono generati e modificati gli stili. Se non si ha alcuna esperienza nella creazione di CSS, utilizzare la modalità automatica. Se invece si è già acquisita una certa esperienza, è possibile utilizzare la modalità manuale per semplificare il processo di progettazione.

L'elenco a discesa Regola di destinazione influisce sulle nuove proprietà CSS. È possibile utilizzarlo per visualizzare il nome dello stile da modificare o il tipo di stile creato per l'elemento corrente. Per impostazione predefinita, lo stile di destinazione è quello con la precedenza più alta. Se non è presente alcuno stile, Nuova classe automatica diventa l'impostazione predefinita.

Nell'elenco a discesa Regola di destinazione sono disponibili le opzioni riportate di seguito. L'effetto di ogni opzione dipende dalla selezione corrente.

  • Stile in linea   Consente di modificare una dichiarazione di proprietà esistente o di aggiungere una nuova dichiarazione di proprietà a uno stile in linea esistente.

  • Nuovo stile in linea   Consente di aggiungere la dichiarazione di proprietà a uno stile in linea appena generato e di applicare lo stile al tag di apertura corrente. Questa opzione è disponibile solo se non è già presente uno stile in linea per l'elemento di pagina corrente.

  • Nuovo ID automatico "#id"   Consente di creare un nuovo stile per un ID applicato che non dispone di una regola impostata. Questa opzione è utile se sono stati creati ID per elementi di pagina che non dispongono di stili ed è necessario applicare gli stili a tali elementi.

  • Nuova classe automatica   Consente di creare un nuovo stile per una classe che non dispone di una regola.

  • Nuova classe automatica ".rule"   Consente di aggiungere la dichiarazione di proprietà a uno stile basato su classi generato automaticamente e quindi di applicare lo stile al tag di apertura corrente. Questa opzione è utile se sono state create classi per gli elementi di pagina che non dispongono di stili ed è necessario applicare gli stili a tali elementi.

  • Applica nuovo stile   Crea un nuovo stile utilizzando la finestra di dialogo Nuovo stile e facoltativamente applica lo stile alla selezione corrente.

Il pulsanteRiutilizza stile esistenteinfluisce sulle modifiche apportate agli stili e alle proprietà esistenti. Se per lo stile selezionato non è presente una dichiarazione per la proprietà da formattare, che però è presente in un altro stile della selezione corrente, Riutilizza stile esistente determina lo stile da modificare. Se Riutilizza stile esistente è selezionato, viene modificata la proprietà che già contiene una dichiarazione. Se Riutilizza stile esistente non è selezionato, viene modificata la regola di destinazione.

Il pulsanteMostra sovrapposizione specifica se mostrare una sovrapposizione sugli elementi a cui viene applicata la regola selezionata. Se questa opzione è selezionata, nella finestra di progettazione viene visualizzato un riquadro tratteggiato intorno al contenuto che utilizza lo stile selezionato nell'elenco a discesa Regola di destinazione. La sovrapposizione consente di visualizzare gli elementi interessati dalle modifiche apportate mediante la barra degli strumenti Applicazione diretta stile. Questo è particolarmente utile quando si applicano più regole, poiché risulta più semplice accedere a una regola specifica da modificare.

Utilizzo della barra degli strumenti Applicazione diretta stile con controlli ASP.NET

È possibile utilizzare la barra degli strumenti Applicazione diretta stile per modificare gli stili nei controlli server ASP.NET che supportano tale funzionalità. È possibile utilizzare la barra degli strumenti per applicare gli stili ai controlli server che definiscono le proprietà per gli stili in linea e per l'attributo CssClass e che ereditano dalla classe WebControl. Nei controlli utente queste proprietà non sono definite, pertanto, non è possibile utilizzare la barra degli strumenti con i controlli utente.

Non utilizzare le regole di stile basate su ID con i controlli server. Il nome assegnato nel markup o nel codice server non è necessariamente l'ID dell'elemento HTML sottoposto a rendering. Pertanto, gli ID non rappresentano un modo affidabile per l'applicazione di uno stile ai controlli server.

Utilizzo della barra degli strumenti Applicazione diretta stile

È possibile impostare la modalità di applicazione nella barra degli strumenti Applicazione diretta stile per determinare il modo in cui vengono create le regole di stile.

Per impostare la modalità di applicazione nella barra degli strumenti Applicazione diretta stile

  • Nella barra degli strumenti Applicazione diretta stile fare clic sull'elenco a discesa Applicazione stili, quindi scegliere Automatica o Manuale.

La barra degli strumenti Applicazione diretta stile consente di creare nuovi stili o modificare le regole di stile esistenti molto rapidamente.

Per creare nuovi stili utilizzando la barra degli strumenti Applicazione diretta stile

  1. In visualizzazione Progettazione o visualizzazione Origine passare alla modalità di applicazione stili Manuale.

  2. Selezionare il contenuto da formattare.

  3. Nella barra degli strumenti Applicazione diretta stile fare clic sull'elenco a discesa Regola di destinazione, quindi effettuare una delle seguenti operazioni:

    • Per generare un nuovo stile basato sulla formattazione applicata e applicare lo stile al contenuto corrente, selezionare Nuovo stile in linea, Nuovo ID automatico o Nuova classe automatica, quindi formattare il contenuto.

    • Per creare un nuovo stile utilizzando la finestra di dialogo Nuovo stile e facoltativamente applicare lo stile alla selezione corrente, selezionare Applica nuovo stile.

È possibile modificare una regola di stile esistente applicata a una selezione o è possibile creare una nuova dichiarazione di proprietà per una regola di stile.

Per modificare gli stili esistenti mediante la barra degli strumenti Applicazione diretta stile

  1. In visualizzazione Progettazione o visualizzazione Origine passare alla modalità di applicazione stili Manuale.

  2. Selezionare il contenuto da formattare.

  3. Nella barra degli strumenti Applicazione diretta stile selezionare lo stile desiderato dall'elenco Regola di destinazione.

  4. Se per lo stile selezionato non è presente una dichiarazione per la proprietà da formattare, che però è presente in altro stile della selezione corrente, selezionare Riutilizza stile esistente per modificare lo stile esistente.

  5. Formattare il contenuto.

Vedere anche

Concetti

Procedura: utilizzare le finestre Applica stili e Gestisci stili

Procedura: utilizzare la finestra Proprietà CSS