Procedura: utilizzare la finestra Proprietà CSS

La finestra Proprietà CSS consente di visualizzare e modificare le proprietà del foglio di stile CSS. Per le pagine Web Form è possibile utilizzare la finestra Proprietà CSS in visualizzazione Progettazione. È possibile utilizzarla nella visualizzazione Origine per qualsiasi tipo di pagina. È inoltre possibile utilizzarla con un file CSS esterno o con la finestra Gestisci stili.

Per aprire la finestra Proprietà CSS

  • Scegliere Proprietà CSS dal menu Visualizza.

Nella finestra Proprietà CSS vengono visualizzati tutti gli stili utilizzati dall'elemento attualmente selezionato in una pagina Web. È inoltre possibile visualizzare l'ordine di priorità degli stili e tutte le proprietà e i valori degli stili.

Cenni preliminari sulla finestra Proprietà CSS

La finestra Proprietà CSS include i seguenti elementi.

Elemento dell'interfaccia utente

Descrizione

Pulsanti Visualizza

Nella parte superiore della finestra vengono visualizzati i pulsanti Visualizza l'elenco categorizzato, Visualizza l'elenco alfabeticoe Visualizza in primo piano le proprietà impostate. Questi pulsanti consentono di modificare l'ordine in cui vengono visualizzate le proprietà.

Per fare in modo che solo le proprietà a cui sono state assegnati valori vengano visualizzate all'inizio di ogni categoria, scegliere Visualizza in primo piano le proprietà impostate. Proprietà prive di valori vengono visualizzate nella parte inferiore di ogni categoria.

Riepilogo

È possibile fare clic sul pulsante Riepilogo per elencare le proprietà di tutti gli stili che influiscono sull'elemento selezionato. Questo elenco include proprietà che possono non essere visualizzate nella sezione Regole applicate.

Regole applicate

Indica quali regole di stile sono applicate a un elemento Se si seleziona una regola da questo elenco, le relative proprietà assegnate vengono evidenziate nella sezione Proprietà CSS sottostante. Se non è stato ancora applicato uno stile, nella sezione Regole applicate viene visualizzato nessuna regola applicata. Le regole presenti nella parte inferiore dell'elenco hanno la precedenza sulle regole presenti nella parte superiore dell'elenco. Fare clic con il pulsante destro del mouse su un selettore per visualizzare un menu di scelta rapida contenente ulteriori opzioni aggiuntive per l'utilizzo degli stili con il selettore.

Proprietà CSS

Utilizzare questa sezione per visualizzare o impostare le proprietà CSS per lo stile selezionato in Regole applicate. Le proprietà barrate con una riga rossa indicano che non vengono ereditate dalla selezione corrente o che sono sottoposte a override da un altro stile.

Suggerimento

Se si fa doppio clic su una regola è applicata o una proprietà CSS con un valore di attributo assegnato, viene aperto il foglio di stile in Visual Studio.Viene visualizzata la posizione della definizione di regola.In alternativa, è possibile fare clic con il pulsante destro del mouse su una regola o una proprietà e scegliere Vai al codice.

Modifica di uno stile utilizzando la finestra Proprietà CSS

È possibile utilizzare la finestra Proprietà CSS per modificare la formattazione o l'applicazione di uno stile a un singolo elemento o a tutti gli elementi che condividono una classe CSS.

Per modificare le proprietà di uno stile

  1. Nell'elenco Regole applicate della finestra Proprietà CSS selezionare un elemento, uno stile in linea, un ID dell'elemento o una classe CSS dell'elemento.

  2. Nella sezione Proprietà CSS modificare le proprietà.

Determinazione degli stili applicati a un elemento

La finestra Proprietà CSS consente di visualizzare tutti gli stili applicati a un elemento. È inoltre possibile visualizzare le proprietà dello stile sottoposte a override. Le proprietà dello stile sottoposte a override vengono barrate con una riga rossa a indicare che la proprietà non viene applicata all'elemento attualmente selezionato.

Ad esempio, è possibile che a un elemento siano state applicate sia una regola di stile in linea che una regola di stile da un foglio di stile. In tal caso, la regola di stile in linea esegue l'override della regola del foglio di stile.

Per visualizzare un riepilogo di tutte le proprietà applicate a una selezione

  1. Selezionare un elemento nella pagina, quindi fare clic su Riepilogo per passare alla modalità riepilogo.

    Nella sezione Proprietà CSS vengono visualizzate tutte le proprietà applicate all'elemento selezionato.

  2. Fare clic su una proprietà in Proprietà CSS per modificare la struttura della regola di stile associata in Regole applicate.

  3. Fare di nuovo clic sul pulsante Riepilogo per disattivare la modalità riepilogo.

    Nota

    Se si posiziona il puntatore del mouse su una proprietà barrata, nella descrizione comandi della proprietà sottoposta a override viene visualizzata la proprietà che ha eseguito l'override.