Condividi tramite


Procedura: utilizzare la finestra Proprietà CSS

Aggiornamento: novembre 2007

La finestra Proprietà CSS consente di visualizzare e modificare le proprietà dello stile CSS di un elemento. È possibile utilizzare la finestra Proprietà CSS con una pagina Web aperta, un file CSS esterno o con la finestra Gestisci stili per verificare e modificare le proprietà degli stili esistenti.

In una pagina Web la finestra Proprietà CSS consente di visualizzare tutti gli stili utilizzati dall'elemento attualmente selezionato. È inoltre possibile visualizzare l'ordine di priorità degli stili e tutte le proprietà e i valori degli stili. È possibile utilizzare la finestra Proprietà CSS in visualizzazione Origine e visualizzazione Progettazione.

Nota:

Nella finestra Proprietà CSS è possibile fare clic con il pulsante destro del mouse su un selettore in Regole applicate per visualizzare un menu di scelta rapida contenente ulteriori opzioni aggiuntive per l'utilizzo degli stili con il selettore.

Cenni preliminari sulla finestra Proprietà CSS

Nella finestra Proprietà CSS sono presenti quattro sezioni principali, come illustrato nella figura seguente:

Le sezioni sono:

  • Pulsanti di ordinamento   Utilizzare i pulsanti situati nella parte superiore della finestra per ordinare l'elenco delle proprietà. È possibile ordinare l'elenco alfabeticamente, in base alla categoria e in base alle proprietà impostate.

  • Pulsante Riepilogo   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   Elenca tutti gli stili che influiscono sull'elemento nella pagina. Gli stili presenti nella parte inferiore dell'elenco hanno la precedenza sugli stili presenti nella parte superiore dell'elenco. Se si seleziona uno stile da questo elenco, le relative proprietà vengono elencate nella sezione Proprietà CSS.

  • 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.

Creazione di un nuovo stile utilizzando la finestra Proprietà CSS

È possibile utilizzare la finestra Proprietà CSS per creare un nuovo stile per un elemento selezionato in visualizzazione Progettazione, visualizzazione Origine o visualizzazione Suddivisa. È possibile creare uno stile in linea o visualizzare la finestra di dialogo Nuovi stili per creare uno stile nella pagina o in un foglio di stile CSS.

Nella sezione Regole applicate sono indicate le regole di stile applicate all'elemento. Viene inoltre indicato se queste regole sono in linea, in un foglio di stile o nella pagina corrente. La procedura descritta di seguito illustra come creare un nuovo stile per un elemento. Se non è stato ancora applicato uno stile, nella sezione Stili applicati viene visualizzato nessuna regola applicata.

Per creare un nuovo stile utilizzando la finestra Proprietà CSS

  1. Nella finestra di progettazione selezionare l'elemento al quale si desidera aggiungere una regola di stile.

    In visualizzazione Origine selezionare l'elemento e includere i tag di apertura e di chiusura. In visualizzazione Progettazione selezionare l'elemento in modo da visualizzare il nome dell'elemento nel tag popup.

  2. Per creare uno stile in linea, nella finestra Proprietà CSS fare clic con il pulsante destro del mouse in un punto qualsiasi della sezione Regole applicate, quindi fare clic su Nuovo stile in linea.

  3. Per aggiungere un nuovo stile in linea alla pagina, nella finestra Proprietà CSS fare clic con il pulsante destro del mouse in un punto qualsiasi della sezione Regole applicate, quindi fare clic su Nuovo stile.

  4. Nell'elenco Regole applicate selezionare un elemento, un ID dell'elemento o una classe CSS dell'elemento.

  5. Nella sezione Proprietà CSS impostare le proprietà dello stile.

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.

Vedere anche

Concetti

Procedura: utilizzare le finestre Applica stili e Gestisci stili

Procedura: utilizzare la barra degli strumenti Applicazione diretta stile