Guida utente Annulla

Nozioni sui fogli di stile CSS

  1. Guida utente di Dreamweaver
  2. Introduzione
    1. Nozioni di base sul design responsive
    2. Novità di Dreamweaver
    3. Sviluppo Web con Dreamweaver - Panoramica
    4. Dreamweaver / Domande frequenti
    5. Scelte rapide da tastiera
    6. Requisiti di sistema di Dreamweaver
    7. Riepilogo delle funzioni
  3. Dreamweaver e Creative Cloud
    1. Sincronizzare le impostazioni di Dreamweaver con Creative Cloud
    2. Creative Cloud Libraries in Dreamweaver
    3. Utilizzare i file Photoshop in Dreamweaver
    4. Operazioni con Adobe Animate e Dreamweaver
    5. Estrarre file SVG ottimizzati per il Web da Libraries
  4. Aree di lavoro e viste di Dreamweaver
    1. Area di lavoro di Dreamweaver
    2. Ottimizzare l'area di lavoro di Dreamweaver per lo sviluppo visivo
    3. Eseguire ricerche nei file in base al nome file o al contenuto | Mac OS
  5. Configurare i siti
    1. Siti di Dreamweaver
    2. Configurare una versione locale del sito
    3. Collegamento a un server di pubblicazione
    4. Configurare un server di prova
    5. Importare ed esportare le impostazioni di un sito Dreamweaver
    6. Passaggio di siti Web esistenti da un server remoto alla cartella principale del sito locale
    7. Funzioni di accessibilità in Dreamweaver
    8. Impostazioni avanzate
    9. Impostazione delle preferenze del sito per il trasferimento dei file
    10. Specificare le Impostazioni del server proxy in Dreamweaver
    11. Sincronizzare le impostazioni di Dreamweaver con Creative Cloud
    12. Utilizzo di Git in Dreamweaver
  6. Gestire i file
    1. Creare e aprire file
    2. Gestire file e cartelle
    3. Scaricamento e caricamento dei file da e verso il server
    4. Depositare e ritirare i file
    5. Sincronizzare i file
    6. Confrontare file per verificare le differenze
    7. Applicare la maschera file a file e cartelle del sito Dreamweaver
    8. Attivare le Design Notes per i siti di Dreamweaver
    9. Impedire un potenziale attacco exploit del Gatekeeper
  7. Layout e progettazione
    1. Usare i riferimenti visivi per il layout
    2. Informazioni sull'utilizzo di CSS per creare il layout della pagina
    3. Progettazione di siti Web reattivi con Bootstrap
    4. Creazione e utilizzo di media query in Dreamweaver
    5. Presentare il contenuto mediante le tabelle
    6. Colori
    7. Responsive design con i layout a griglia fluida
    8. Extract in Dreamweaver
  8. CSS
    1. Nozioni sui fogli di stile CSS
    2. Creazione del layout delle pagine con CSS Designer
    3. Utilizzare i preprocessori CSS in Dreamweaver
    4. Impostare le preferenze di stile CSS in Dreamweaver
    5. Spostare le regole CSS in Dreamweaver
    6. Convertire CSS in linea in una regola CSS in Dreamweaver
    7. Utilizzare i tag div
    8. Applicare sfumature allo sfondo
    9. Creare e modificare effetti di transizione CSS3 in Dreamweaver
    10. Formattazione del codice
  9. Contenuto e risorse delle pagine
    1. Impostare le proprietà di pagina
    2. Impostare le proprietà dei collegamenti CSS e le proprietà dei collegamenti CSS
    3. Lavorare con il testo
    4. Ricercare e sostituire testo, tag e attributi
    5. Pannello DOM
    6. Modifica nella vista Dal vivo
    7. Codifica dei documenti in Dreamweaver
    8. Selezionare e visualizzare gli elementi nella finestra del documento
    9. Definire le proprietà del testo nella finestra di ispezione Proprietà
    10. Eseguire il controllo ortografico di una pagina Web
    11. Utilizzo dei filetti orizzontali in Dreamweaver
    12. Aggiungere e modificare le combinazioni di caratteri in Dreamweaver
    13. Operazioni con le risorse
    14. Inserire e aggiornare le date in Dreamweaver
    15. Creare e gestire le risorse preferite in Dreamweaver
    16. Inserire e modificare le immagini in Dreamweaver
    17. Aggiungere oggetti multimediali
    18. Aggiunta di video in Dreamweaver
    19. Inserire video HTML5
    20. Inserire file SWF
    21. Aggiungere effetti audio
    22. Inserire l'audio HTML5 in Dreamweaver
    23. Operazioni con le voci di libreria
    24. Utilizzare testo in arabo e in ebraico in Dreamweaver
  10. Collegamenti e navigazione
    1. Informazioni sui collegamenti e sulla navigazione
    2. Collegamenti
    3. Mappe immagine
    4. Risoluzione dei problemi di collegamenti
  11. Widget ed effetti jQuery
    1. Utilizzare i widget jQuery UI e Mobile in Dreamweaver
    2. Usare effetti jQuery in Dreamweaver
  12. Programmazione dei siti Web
    1. Programmazione in Dreamweaver
    2. Ambiente di codifica in Dreamweaver
    3. Impostare le preferenze di codifica
    4. Personalizzare la colorazione del codice
    5. Scrivere e modificare codice
    6. Suggerimenti sul codice e completamento del codice
    7. Comprimere ed espandere codice
    8. Riutilizzo del codice con gli snippet
    9. Comando Lint
    10. Ottimizzare il codice
    11. Modificare il codice nella vista Progettazione.
    12. Utilizzo del contenuto dell'intestazione delle pagine
    13. Inserimento di server-side include in Dreamweaver
    14. Uso delle librerie di tag in Dreamweaver
    15. Importazione di tag personalizzati in Dreamweaver
    16. Utilizzare i comportamenti JavaScript (istruzioni generali)
    17. Applicare comportamenti JavaScript incorporati
    18. Informazioni su XML e XSLT
    19. Eseguire trasformazioni XSL server-side in Dreamweaver
    20. Esecuzione di trasformazioni XSL client-side in Dreamweaver
    21. Aggiungere entità di carattere per XSLT in Dreamweaver
    22. Formattazione del codice
  13. Flussi di lavoro di interazione con altri prodotti
    1. Installazione e uso delle estensioni in Dreamweaver
    2. Aggiornamenti in app in Dreamweaver
    3. Inserire documenti Microsoft Office in Dreamweaver (solo Windows)
    4. Operazioni con Fireworks e Dreamweaver
    5. Modificare il contenuto nei siti Dreamweaver mediante Contribute
    6. Integrazione tra Dreamweaver e Business Catalyst
    7. Creare campagne e-mail personalizzate
  14. Modelli
    1. Informazioni sui modelli di Dreamweaver
    2. Riconoscere i modelli e i documenti basati sui modelli
    3. Creare un modello di Dreamweaver
    4. Creare aree modificabili nei modelli
    5. Creare aree e tabelle ripetute nei modelli in Dreamweaver
    6. Usare le aree opzionali nei modelli
    7. Definire attributi di tag modificabili in Dreamweaver
    8. Creare modelli nidificati in Dreamweaver
    9. Modificare, aggiornare ed eliminare modelli
    10. Esportare e importare contenuti xml in Dreamweaver
    11. Applicare o rimuovere un modello da un documento esistente
    12. Modificare il contenuto nei modelli di Dreamweaver
    13. Regole di sintassi per i tag di modello in Dreamweaver
    14. Impostare le preferenze di evidenziazione per le aree dei modelli
    15. Vantaggi dell'uso dei modelli in Dreamweaver
  15. Dispositivi mobili e multischermo
    1. Creare media query
    2. Cambiamento dell'orientamento della pagina per i dispositivi mobili
    3. Creare web app per dispositivi mobili utilizzando Dreamweaver
  16. Siti, pagine e moduli Web dinamici
    1. Applicazioni Web
    2. Configurare il computer per lo sviluppo di applicazioni
    3. Risoluzione dei problemi relativi alle connessioni di database
    4. Rimozione di script di connessione in Dreamweaver
    5. Progettare pagine dinamiche
    6. Panoramica sulle origini di contenuto dinamico
    7. Definire le origini di contenuto dinamico
    8. Aggiungere contenuto dinamico alle pagine
    9. Modifica del contenuto dinamico in Dreamweaver
    10. Visualizzare i record di database
    11. Fornire dati dal vivo e risoluzione dei problemi in Dreamweaver
    12. Aggiungere comportamenti server personalizzati in Dreamweaver
    13. Creazione di moduli con Dreamweaver
    14. Usare moduli per raccogliere informazioni dagli utenti
    15. Creare e attivare i moduli ColdFusion in Dreamweaver
    16. Creare moduli Web
    17. Supporto HTML5 avanzato per gli elementi modulo
    18. Sviluppare un modulo con Dreamweaver
  17. Sviluppo visivo delle applicazioni
    1. Creare pagine principali e di dettaglio in Dreamweaver
    2. Creare pagine di ricerca e di risultati
    3. Creare una pagina di inserimento record
    4. Costruire una pagine di aggiornamento record in Dreamweaver
    5. Costruzione di pagine di eliminazione record in Dreamweaver
    6. Utilizzare comandi ASP per modificare un database in Dreamweaver
    7. Creare una pagina di registrazione
    8. Creare una pagina di login
    9. Creare una pagina accessibile solo agli utenti autorizzati
    10. Protezione delle cartelle in ColdFusion utilizzando Dreamweaver
    11. Utilizzo di componenti ColdFusion in Dreamweaver
  18. Verifica, anteprima e pubblicazione dei siti Web
    1. Anteprima delle pagine
    2. Visualizzare in anteprima pagine web di Dreamweaver su più dispositivi
    3. Verificare il sito Dreamweaver

 

Utilizzate questo argomento per apprendere i concetti di base dei CSS, ad esempio regole CSS, selettori, ereditarietà e altro ancora. Scoprite, inoltre, come associare il codice CSS alle pagine Web in Dreamweaver.

Informazioni sui fogli di stile CSS

I fogli di stile CSS (Cascading Style Sheets) sono una raccolta di regole di formattazione che controllano l'aspetto del contenuto di una pagina Web. Quando si utilizzano i CSS per formattare una pagina, il contenuto viene separato dalla presentazione. Il contenuto della pagina, ovvero il codice HTML, si trova nel file HTML, mentre le regole CSS che definiscono la presentazione del codice si trovano in un altro file (un foglio di stile esterno) o in un'altra parte del documento HTML (in genere la sezione head). Separando il contenuto dalla presentazione, è molto più facile gestire l'aspetto del sito da un unico punto di controllo, poiché non è necessario aggiornare ogni proprietà di ogni pagina quando si vuole effettuare una modifica. Inoltre, si ottiene un codice HTML più semplice e “pulito”, che abbrevia i tempi di caricamento nel browser e semplifica la navigazione per le persone con problemi di accessibilità (ad esempio, gli utenti che adoperano uno screen reader).

I CSS offrono più flessibilità e più controllo sui dettagli dell'aspetto delle pagine. Con i CSS potete controllare molte proprietà del testo: caratteri e dimensioni di carattere particolari; elementi di formattazione come grassetto, corsivo, sottolineatura e ombreggiatura del testo; colore del testo e colore di sfondo; colore e sottolineatura dei collegamenti; ecc. Utilizzando i CSS per controllare i caratteri, si possono inoltre gestire layout e aspetto della pagina in modo più omogeneo indipendentemente dal browser utilizzato.

Oltre alla formattazione del testo, potete utilizzare i CSS per controllare il formato e la posizione di elementi a livello di blocco in una pagina Web. Un elemento a livello di blocco è una parte di contenuto autonoma, solitamente separata da un carattere di nuova riga nel codice HTML e formattato visivamente come un blocco. Ad esempio, i tag h1, p e div producono tutti elementi a livello di blocco su una pagina Web. Potete impostare margini e bordi per gli elementi a livello di blocco, collocarli in una posizione specifica, aggiungervi un colore di sfondo, fare scorrere il testo attorno ad essi e così via. La manipolazione degli elementi a livello di blocco è essenzialmente il metodo con cui si organizza il layout delle pagine quando si usano i CSS.

Informazioni sulle regole CSS

Una regola di formattazione CSS si suddivide in due parti: il selettore e la dichiarazione (o, nella maggior parte dei casi, un blocco di dichiarazioni). Il selettore è un termine (come p, h1,un nome di classe o un id) che identifica l'elemento formattato, mentre il blocco di dichiarazioni definisce le proprietà di stile. Nell'esempio seguente, h1 è il selettore e tutto quanto è racchiuso tra le parentesi graffe ({}) è il blocco di dichiarazioni:

h1 { 
font-size: 16 pixels; 
font-family: Helvetica; 
font-weight:bold; 
}

Una dichiarazione singola si suddivide in due parti: la proprietà (ad esempio font-family) e il valore (ad esempio Helvetica). Nella regola CSS precedente, è stato creato uno stile particolare per i tag h1: il testo di tutti i tag h1 associati a questo stile avrà una dimensione di 16 pixel, carattere Helvetica e stile grassetto.

Lo stile (che deriva da una regola o da una raccolta di regole) si trova in una posizione distinta rispetto al testo effettivo al quale applica la formattazione, solitamente in un foglio di stile esterno o nella sezione head di un documento HTML. Pertanto, una singola regola per i tag h1 può essere applicata a molti tag contemporaneamente (e nel caso di fogli di stile esterni, anche a molti tag in molte pagine diverse). Questo consente di aggiornare gli stili CSS in modo estremamente semplice. Quando si aggiorna una regola CSS in un punto specifico, viene aggiornata anche la formattazione di tutti gli elementi che utilizzano tale regola.

In Dreamweaver potete definire i seguenti tipi di stile:

  • Gli stili di classe consentono di applicare proprietà di stile a uno o più elementi sulla pagina.

  • Gli stili di tag HTML ridefiniscono la formattazione di un particolare tag, ad esempio h1. Quando create o modificate uno stile CSS per il tag h1, tutto il testo formattato con il tag h1 viene immediatamente aggiornato.

  • Gli stili avanzati ridefiniscono la formattazione per una particolare combinazione di elementi, o per altri tipi di selettore consentiti dal CSS (ad esempio, il selettore td h2 si applica ogni volta che un'intestazione h2 si trova in una cella di tabella). Gli stili avanzati possono inoltre ridefinire la formattazione per i tag che includono un attributo id specifico (ad esempio, gli stili definiti mediante #myStyle si applicano a tutti i tag che includono la coppia attributo/valore id="myStyle").

Le regole CSS possono trovarsi nelle posizioni seguenti:

Fogli di stile CSS esterni

Raccolte di regole CSS memorizzate in un file CSS (.css) esterno e distinto, e non in un file HTML. Questo file è collegato a una o più pagine di un sito Web tramite un collegamento o una regola @import presente nella sezione head di un documento.

Fogli di stile CSS interni (o incorporati)

Raccolte di regole CSS incluse in un tag style nella sezione head di un documento HTML.

Stili in linea

Definiti all'interno di istanze specifiche di tag in un documento HTML. L'uso degli stili in linea è sconsigliato.

Dreamweaver riconosce automaticamente gli stili definiti nei documenti esistenti, a condizione che siano conformi alle direttive di stile CSS. Dreamweaver inoltre riproduce gli stili più applicati direttamente nella vista Progettazione. (L'anteprima del documento in una finestra del browser, tuttavia, offre una riproduzione “dal vivo” più accurata della pagina.) Alcuni stili CSS vengono riprodotti in maniera diversa in Microsoft Internet Explorer, Netscape, Opera, Apple Safari o in altri browser, mentre altri non sono attualmente supportati da alcun browser.

Informazioni sugli stili CSS

Il termine cascading (a cascata) si riferisce alla modalità con cui un browser visualizza gli stili per elementi specifici di una pagina Web. Tre diverse fonti sono responsabili per gli stili visibili su una pagina Web: il foglio di stile creato dall'autore della pagina, le selezioni di stile personalizzate dell'utente (se presenti) e lo stile predefinito del browser. Gli argomenti precedenti descrivono la creazione degli stili per una pagina Web nel caso in cui l'autore della pagina Web e del foglio di stile di quella pagina sia la stessa persona. Tuttavia, i browser hanno anche fogli di stile predefiniti che guidano la riproduzione delle pagine Web e, inoltre, gli utenti possono personalizzare i browser effettuando scelte che influiscono sulla visualizzazione delle pagine. L'aspetto finale di una pagina è il risultato dell'insieme (la “cascata”) di regole provenienti da queste tre fonti, che contribuiscono alla riproduzione ottimale della pagina.

Un tag piuttosto diffuso, il tag di paragrafo (<p>), illustra il concetto. Come impostazione predefinita, i browser hanno fogli di stile che definiscono tipo e dimensioni di carattere per il testo di paragrafo (cioè per il testo racchiuso fra i tag <p> nel codice HTML). In Internet Explorer, ad esempio, tutto il testo principale, compreso il testo di paragrafo, per impostazione predefinita viene visualizzato in Times New Roman, medio.

Come autore di una pagina Web, tuttavia, potete decidere di creare un foglio di stile che annulla lo stile predefinito del browser per tipo e dimensioni di carattere. Ad esempio, potete creare la regola seguente nel foglio di stile:

p { 
font-family: Arial; 
font-size: small; 
}

Quando un utente carica una pagina, le impostazioni specificate dall'autore per tipo e dimensioni dei caratteri annullano le impostazioni predefinite del browser per il testo di paragrafo.

Gli utenti possono operare scelte per la personalizzazione ottimale da parte del browser. Con Internet Explorer, ad esempio, gli utenti possono selezionare Visualizza > Carattere > Molto grande per ampliare le dimensioni del testo, portandolo a una misura che risulti leggibile se ritengono che sia troppo piccolo. In ultima istanza (almeno in questo caso), la scelta dell'utente annulla sia gli stili predefiniti del browser per le dimensioni del carattere del paragrafo, sia gli stili di paragrafo creati dall'autore della pagina Web.

L'ereditarietà è un altro aspetto importante per il concetto di “cascata”. Le proprietà di molti elementi di una pagina Web vengono ereditate; ad esempio, i tag di paragrafo ereditano certe proprietà dai tag body, i tag span ereditano certe proprietà dai tag di paragrafo e così via. Ad esempio, potete creare la regola seguente nel foglio di stile:

body { 
font-family: Arial; 
font-style: italic; 
}

Tutto il testo di paragrafo della pagina Web (e tutto il testo che eredita proprietà dal testo di paragrafo) sarà Arial corsivo, perché il tag di paragrafo eredita queste proprietà dal tag body. Potete comunque specificare regole più precise e creare stili che annullano la formula standard dell'ereditarietà. Ad esempio, l'autore può creare la regola seguente nel foglio di stile:

body { 
font-family: Arial; 
font-style: italic; 
} 
p { 
font-family: Courier; 
font-style: normal; 
}

Tutto il testo principale sarà Arial corsivo tranne il testo di paragrafo (e il testo che ne eredità le proprietà), che verrà visualizzato come Courier normale (non corsivo). Tecnicamente, il testo di paragrafo prima eredita le proprietà definite per il tag body ma poi le ignora, poiché sono state definite proprietà specifiche per il testo di paragrafo. In altre parole, mentre generalmente gli elementi della pagina ereditano le proprietà dall'alto, l'applicazione diretta di una proprietà a un tag provoca l'annullamento della formula standard per l'ereditarietà.

La combinazione di tutti i fattori descritti in precedenza, e di altri come la specificità CSS (un sistema che assegna un'importanza differente a certi tipi di regole CSS) e l'ordine delle regole CSS, crea in definitiva una cascata complessa in cui elementi con priorità più elevata annullano elementi con priorità inferiore. Per ulteriori informazioni sulle regole che regolano i CSS, l'ereditarietà e la specificità, visitate www.w3.org/TR/CSS2/cascade.html.

Informazioni sulla formattazione del testo e i CSS

Per impostazione predefinita, Dreamweaver utilizza i CSS per formattare il testo. Gli stili che vengono applicati al testo utilizzando la finestra di ispezione Proprietà oppure i comandi di menu creano delle regole CSS che vengono incorporate nella sezione head del documento corrente.

Potete utilizzare anche CSS Designer per creare e modificare le regole e le proprietà CSS. CSS Designer è uno strumento di modifica molto più articolato della finestra di ispezione Proprietà e visualizza tutte le regole CSS definite per il documento corrente, sia quelle incorporate nella sezione head del documento che quelle contenute in un foglio di stile esterno. Adobe consiglia di utilizzare CSS Designer (anziché la finestra di ispezione Proprietà) come strumento principale per la creazione e modifica dei CSS. Di conseguenza, il codice risulterà più ordinato e più facile da gestire.

Per ulteriori informazioni su CSS Designer, consultate Creazione del layout delle pagine con CSS Designer.

Oltre agli stili e ai fogli di stile creati, potete anche utilizzare i fogli di stile forniti direttamente con Dreamweaver per applicare gli stili ai documenti.

Per un'esercitazione sulla formattazione del testo con i CSS, vedete www.adobe.com/go/vid0153_it.

Informazioni sulle proprietà della scrittura stenografica CSS

La specifica CSS consente la creazione degli stili tramite una sintassi abbreviata nota come scrittura stenografica CSS. Questo tipo di sintassi permette di specificare i valori di diverse proprietà utilizzando una singola dichiarazione. Ad esempio, la proprietà font consente di impostare le proprietà font-style, font-variant, font-weight, font-size, line-height e font-family in una singola riga.

Tenete presente che quando utilizzate la scrittura stenografica CSS, gli attributi omessi delle proprietà CSS vengono impostati sui valori predefiniti. Ciò potrebbe causare una visualizzazione errata delle pagine quando allo stesso tag vengono assegnate due o più regole CSS.

Ad esempio, la regola h1 mostrata di seguito utilizza una sintassi CSS estesa. Tenete presente che alle proprietà font-variant, font-stretch, font-size-adjust e font-style sono stati assegnati i valori predefiniti.

h1 { 
font-weight: bold; 
font-size: 16pt; 
line-height: 18pt; 
font-family: Arial; 
font-variant: normal; 
font-style: normal; 
font-stretch: normal; 
font-size-adjust: none 
}

Riscritta come proprietà singola per la scrittura stenografica, la stessa regola potrebbe essere visualizzata nel modo seguente:

h1 { font: bold 16pt/18pt Arial }

Quando si utilizza una notazione per la scrittura stenografica, ai valori omessi vengono assegnati automaticamente i relativi valori predefiniti. Quindi, la regola di scrittura stenografica precedente omette i tag font-variant, font-style, font-stretch e font-size-adjust.

Se gli stili sono stati definiti in più di una posizione (ad esempio in una pagina HTML incorporata e mediante l'importazione da un foglio di stile esterno) utilizzando sia la sintassi CSS breve che quella estesa, tenete presente che le proprietà omesse in una regola di scrittura stenografica potrebbero sostituire (o sovrapporsi) le proprietà impostate esplicitamente in un'altra regola.

Per questo motivo Dreamweaver utilizza per impostazione predefinita il formato esteso della notazione CSS. Questo impedisce possibili problemi determinati dalla priorità di una regola di scrittura stenografica su una regola di scrittura estesa. Se aprite una pagina Web codificata tramite la notazione CSS per scrittura stenografica in Dreamweaver, dovete essere consapevoli del fatto che Dreamweaver creerà eventuali nuove regole CSS utilizzando il formato esteso. Potete specificare in che modo Dreamweaver deve creare e modificare le regole CSS cambiando le preferenze di modifica CSS nella categoria Stili CSS della finestra di dialogo Preferenze (Modifica > Preferenze in Windows oppure Dreamweaver > Preferenze in Macintosh).

Dreamweaver e CSS

In Dreamweaver potete lavorare con CSS in diversi modi:

  • Potete utilizzare CSS Designer per generare le pagine CSS con attività di codifica minime. Per ulteriori informazioni, consultate Creazione del layout delle pagine con CSS Designer
  • Potete inoltre creare le pagine CSS mediante codifica manuale. Per ulteriori informazioni sulle funzioni di codifica offerte da Dreamweaver, consultate Ambiente di codifica in Dreamweaver.
  • Se preferite utilizzare i file Sass, Scss o Less, potete codificarli utilizzando la vostra sintassi preferita e usarla in Dreamweaver. Per ulteriori informazioni, consultate Preprocessori CSS.
Logo Adobe

Accedi al tuo account