Nozioni 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:

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:

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.

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

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:

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:

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:

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.

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

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.