Il pannello Stili CSS

Il pannello Stili CSS consente di gestire le regole e le proprietà CSS che incidono su un elemento di pagina selezionato (modalità Corrente), oppure tutte le regole e le proprietà disponibili nel documento (modalità Tutte). Un pulsante di attivazione nella parte superiore del pannello consente di scegliere la modalità desiderata. Il pannello Stili CSS consente inoltre di modificare le proprietà CSS in entrambe le modalità.

In modalità Corrente il pannello Stili CSS è suddiviso in tre riquadri: il riquadro Riepilogo per selezione, che visualizza le proprietà CSS della selezione corrente, il riquadro Regole, che mostra la posizione delle proprietà selezionate (o di una serie di regole a cascata per il tag selezionato, a seconda della selezione effettuata), e il riquadro Proprietà che permette di modificare le proprietà CSS della regola applicata alla selezione.

I riquadri possono essere ridimensionati trascinandone i bordi che li separano, mentre per modificare le dimensioni delle colonne potete trascinarne i divisori.

Il riquadro Riepilogo per selezione visualizza un riepilogo delle proprietà CSS e dei rispettivi valori per l'elemento attualmente selezionato nel documento attivo. Vengono mostrate le proprietà di tutte le regole applicate direttamente alla selezione. Nel riepilogo sono elencate solo le proprietà impostate.

Ad esempio, le seguenti regole creano uno stile di classe e uno stile di tag (in questo caso un tag di paragrafo):

Quando selezionate il testo di un paragrafo con lo stile di classe .foo nella finestra del documento, il riquadro Riepilogo per selezione visualizza le proprietà corrispondenti per le due regole, perché sono entrambe applicate alla selezione. In questo caso, nel riquadro Riepilogo per selezione saranno elencate le proprietà seguenti:

Nel riquadro Riepilogo per selezione, le proprietà sono organizzate in ordine ascendente di specificità. Nell'esempio precedente, lo stile di tag definisce la dimensione del carattere e lo stile di classe definisce il tipo di carattere e il colore. Il gruppo di caratteri definito dallo stile di classe ha la precedenza su quello definito dallo stile di tag, perché i selettori di classe hanno una specificità maggiore dei selettori di tag. Per ulteriori informazioni sulla specificità CSS, consultate www.w3.org/TR/CSS2/cascade.html.

Il riquadro Regole visualizza due viste diverse, Informazioni su o Regole, in base alla selezione. Nella vista (predefinita) Informazioni su, il riquadro mostra il nome della regola che definisce la proprietà CSS selezionata e il nome del file che include la regola. Nella vista Regole, il riquadro mostra la “cascata”, ovvero la gerarchia, di tutte le regole applicate, direttamente o indirettamente, alla selezione corrente. Il tag cui la regola si applica direttamente viene visualizzato nella colonna di destra. Potete passare da una vista all'altra facendo clic sui pulsanti Mostra informazioni sulla proprietà selezionata e Mostra serie di regole per tag selezionato, nell'angolo superiore destro del riquadro Regole.

Quando selezionate una proprietà nel riquadro Riepilogo per selezione, tutte le proprietà della regola di definizione vengono visualizzate nel riquadro Proprietà. La regola in fase di definizione viene anch'essa selezionata nel riquadro Regole, se è selezionata la vista Regole. Ad esempio, supponete di avere una regola denominata .maintext che definisce tipo, dimensioni e colore di un carattere. Se selezionate una qualunque di queste proprietà nel riquadro Riepilogo per selezione, nel riquadro Proprietà vengono visualizzate tutte le proprietà definite dalla regola .maintext, la quale viene anche visualizzata nel riquadro Regole. (Inoltre, se selezionate una qualunque regola nel riquadro Regole, le proprietà corrispondenti vengono visualizzate nel riquadro Proprietà.) Potete quindi utilizzare il riquadro Proprietà per modificare rapidamente il CSS (incorporato nel documento corrente o collegato mediante un foglio di stile associato). Per impostazione predefinita, il riquadro Proprietà mostra solo le proprietà che sono già state impostate, elencate in ordine alfabetico.

Potete scegliere di visualizzare il riquadro Proprietà in altre due viste. La vista Categoria visualizza le proprietà raggruppate in categorie (ad esempio Carattere, Sfondo, Blocco, Bordo e così via), con le proprietà impostate all'inizio di ciascuna categoria e visualizzate in blu. La vista Elenco visualizza un elenco alfabetico di tutte le proprietà disponibili, anche in questo caso con le proprietà impostate in cima all'elenco e visualizzate in blu. Per passare da una vista all'altra, fate clic sui pulsanti Mostra vista Categoria, Mostra vista Elenco o Mostra solo proprietà impostate, nell'angolo inferiore sinistro del riquadro Proprietà.

In tutte le viste, le proprietà impostate sono visualizzate in blu, mentre le proprietà irrilevanti per la selezione vengono visualizzate barrate da una riga rossa. Quando passate con il mouse su una regola irrilevante viene visualizzato un messaggio che spiega perché la proprietà è irrilevante. Solitamente una proprietà è irrilevante perché non ha la precedenza oppure perché non è una proprietà ereditata.

Qualsiasi modifica effettuata nel riquadro Proprietà viene applicata immediatamente, consentendo di visualizzare un'anteprima in tempo reale mentre si lavora.

Il pannello Stili CSS in modalità Tutte

In modalità Tutte il pannello Stili CSS è suddiviso in due riquadri: Tutte le regole (in alto) e Proprietà (in basso). Il riquadro Tutte le regole visualizza un elenco delle regole definite nel documento corrente e di quelle definite nei fogli di stile associati; il riquadro Proprietà consente di modificare le proprietà CSS di qualunque regola selezionata nel riquadro Tutte le regole.

Per ridimensionare i riquadri, trascinate i bordi che li separano; per ridimensionare le colonne Proprietà potete trascinarne il divisore.

Quando selezionate una regola nel riquadro Tutte le regole, tutte le proprietà definite nella regola vengono visualizzate nel riquadro Proprietà. Potete quindi utilizzare il riquadro Proprietà per modificare rapidamente il CSS (incorporato nel documento corrente o collegato in un foglio di stile associato). Per impostazione predefinita, il riquadro Proprietà mostra solo le proprietà che sono state impostate in precedenza, elencate in ordine alfabetico.

Potete scegliere di visualizzare le proprietà in altre due viste. La vista Categoria visualizza le proprietà raggruppate in categorie (ad esempio Carattere, Sfondo, Blocco, Bordo e così via), con le proprietà impostate all'inizio di ciascuna categoria. La vista Elenco visualizza un elenco alfabetico di tutte le proprietà disponibili, anche in questo caso con le proprietà impostate in cima all'elenco. Per passare da una vista all'altra, fate clic sui pulsanti Mostra vista Categoria, Mostra vista Elenco o Mostra solo proprietà impostate, nell'angolo inferiore sinistro del riquadro Proprietà. In tutte le viste, le proprietà impostate sono visualizzate in blu.

Qualsiasi modifica effettuata nel riquadro Proprietà viene applicata immediatamente, consentendo di visualizzare un'anteprima in tempo reale mentre si lavora.

Pulsanti e viste del pannello Stili CSS

In entrambe le modalità (Corrente e Tutte), il pannello Stili CSS contiene tre pulsanti che consentono di cambiare la vista corrente nel riquadro Proprietà (il riquadro inferiore):

Divide le proprietà CSS supportate da Dreamweaver in otto categorie: carattere, sfondo, blocco, bordo, casella, elenco, posizionamento ed estensioni. Ciascuna proprietà di categoria è contenuta in un elenco che potete espandere o comprimere facendo clic sul pulsante più (+) accanto al nome. Le proprietà impostate sono visualizzate (in blu) nella parte superiore dell'elenco.

Visualizza tutte le proprietà CSS supportate da Dreamweaver in ordine alfabetico. Le proprietà impostate sono visualizzate (in blu) nella parte superiore dell'elenco.

Visualizza solo le proprietà che sono state impostate. È la vista predefinita.

Sia in modalità Tutte che Corrente, il pannello Stili CSS contiene anche i seguenti pulsanti:

Apre la finestra di dialogo Collega foglio di stile esterno. Selezionate un foglio di stile esterno da collegare a o importare nel documento corrente.

Consente di accedere a una finestra di dialogo per la selezione del tipo di stile che si sta creando, ad esempio per creare uno stile di classe, per ridefinire un tag HTML o definire un selettore CSS.

Consente di accedere a una finestra di dialogo nella quale potete modificare gli stili nel documento corrente o in un foglio di stile esterno.

Elimina la regola selezionata dal pannello Stili CSS e rimuove la formattazione da tutti gli elementi a cui era applicata. Non vengono invece eliminate le proprietà ID o di classe alle quali lo stile fa riferimento. Il pulsante Elimina regola CSS consente anche di scollegare (“dissociare”) un foglio di stile CSS collegato.

Aprire il pannello Stili CSS

Il pannello Stili CSS consente di visualizzare, creare, modificare ed eliminare gli stili CSS, nonché di associare fogli di stile esterni ai documenti.