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
Cascading Style Sheets (CSS) è una raccolta di regole di formattazione che controllano l'aspetto del contenuto in una pagina web.L'uso degli stili CSS per formattare una pagina separa il contenuto dalla presentazione.Il contenuto della pagina, ovvero il codice HTML, risiede nel file HTML, mentre le regole CSS che definiscono la presentazione del codice risiedono in un altro file (un foglio di stile esterno) o in un'altra parte del documento HTML (di solito nella sezione head).Separare il contenuto dalla presentazione rende molto più semplice gestire l'aspetto del sito da una posizione centrale, perché non è necessario aggiornare ogni proprietà su ogni pagina ogni volta che vuoi apportare una modifica.Separare il contenuto dalla presentazione produce anche un codice HTML più semplice e pulito, che garantisce tempi di caricamento del browser più brevi e semplifica la navigazione per le persone con problemi di accessibilità (ad esempio, coloro che usano screen reader).
CSS offre grande flessibilità e controllo sull'aspetto esatto della pagina.Con CSS puoi controllare molte proprietà del testo, inclusi font specifici e dimensioni del font; grassetto, corsivo, sottolineatura e ombre del testo; colore del testo e colore di sfondo; colore dei collegamenti e sottolineatura dei collegamenti; e molto altro.Utilizzando i CSS per controllare i font, puoi anche garantire una gestione più coerente del layout e dell'aspetto della pagina in più browser.
Oltre alla formattazione del testo, puoi usare CSS per controllare il formato e il posizionamento degli elementi a livello di blocco in una pagina web.Un elemento a livello di blocco è un elemento di contenuto autonomo, solitamente separato da una nuova riga nell'HTML e formattato visivamente come un blocco.Ad esempio, i tag h1, i tag p e i tag div producono tutti elementi a livello di blocco su una pagina web.Puoi impostare margini e bordi per gli elementi a livello di blocco, posizionarli in una posizione specifica, aggiungere colore di sfondo, far scorrere il testo attorno a essi e così via.La manipolazione degli elementi a livello di blocco è essenzialmente il modo in cui crei il layout delle pagine con CSS.
Informazioni sulle regole CSS
Una regola di formattazione CSS è composta da due parti: il selettore e la dichiarazione (o nella maggior parte dei casi, un blocco di dichiarazioni). Il selettore è un termine (come p, h1,il nome di una classe o un id) che identifica l'elemento formattato, e il blocco di dichiarazione definisce quali sono le proprietà di stile.Nell'esempio seguente, h1 è il selettore, e tutto ciò che si trova tra le parentesi graffe ({}) è il blocco di dichiarazione:
h1 {
font-size: 16 px;
font-family: Helvetica;
font-weight:bold;
}
Una singola dichiarazione è composta da due parti, la proprietà (come font-family) e il valore (come Helvetica).Nella regola CSS precedente, è stato creato uno stile particolare per i tag h1: il testo per tutti i tag h1 collegati a questo stile è di 16 pixel, font Helvetica e grassetto.
Lo stile (che deriva da una regola, o da una raccolta di regole) risiede in un luogo separato dal testo effettivo che sta formattando, di solito in un foglio di stile esterno, o nella parte head di un documento HTML. Quindi, una regola per i tag h1 può applicarsi a molti tag contemporaneamente (e nel caso dei fogli di stile esterni, la regola può applicarsi a molti tag contemporaneamente su molte pagine diverse).In questo modo, CSS semplifica notevolmente gli aggiornamenti.Quando aggiorni una regola CSS in un punto, la formattazione di tutti gli elementi che utilizzano lo stile definito viene automaticamente aggiornata al nuovo stile.
In Dreamweaver potete definire i seguenti tipi di stile:
Gli stili di classe consentono di applicare proprietà di stile a qualsiasi elemento o elementi della pagina.
Gli stili di tag HTML ridefiniscono la formattazione per un tag particolare, come h1. Quando crei o modifichi 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 altre forme di selettore come consentito dai CSS (ad esempio, il selettore td h2 si applica ogni volta che un'intestazione h2 appare all'interno di una cella di tabella.) Gli stili avanzati possono anche ridefinire la formattazione per i tag che contengono un attributo id specifico (ad esempio, gli stili definiti da #myStyle si applicano a tutti i tag che contengono 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 separato (non un file HTML). Questo file viene collegato a una o più pagine di un sito web utilizzando un collegamento o una regola @import nella sezione head di un documento.
Fogli di stile CSS interni (o incorporati)
Raccolte di regole CSS incluse in un tag style nella parte 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 gli stili definiti nei documenti esistenti purché siano conformi alle linee guida degli stili CSS. Dreamweaver esegue anche il rendering della maggior parte degli stili applicati direttamente nella vista Progettazione. (L'anteprima del documento in una finestra del browser, tuttavia, fornisce il rendering "dal vivo" più accurato della pagina.) Alcuni stili CSS vengono visualizzati diversamente in Microsoft Internet Explorer, Netscape, Opera, Apple Safari o altri browser, e alcuni attualmente non sono supportati da nessun browser.
Informazioni sugli stili CSS
Il termine cascading si riferisce al modo in cui un browser visualizza infine gli stili per elementi specifici di una pagina web. Tre diverse origini sono responsabili degli stili che vedi su una pagina web: il foglio di stile creato dall'autore della pagina, le selezioni di stile personalizzate dell'utente (se presenti) e gli stili predefiniti del browser stesso.Gli argomenti precedenti descrivono la creazione di stili per una pagina web come autore sia della pagina web che del foglio di stile collegato a quella pagina. Ma i browser hanno anche i propri fogli di stile predefiniti che determinano il rendering delle pagine web, e inoltre gli utenti possono personalizzare i propri browser effettuando selezioni che regolano la visualizzazione delle pagine web. L'aspetto finale di una pagina web è il risultato delle regole di tutte e tre queste origini che si uniscono (o "cascade") per visualizzare la pagina web in modo ottimale.
Un tag comune—il tag paragrafo, o tag <p>—illustra il concetto. Per impostazione predefinita, i browser vengono forniti con fogli di stile che definiscono il font e la dimensione del font per il testo dei paragrafi (cioè, il testo che si trova tra i tag <p> nel codice HTML). In Internet Explorer, ad esempio, tutto il testo del corpo, incluso il testo del paragrafo, viene visualizzato in Times New Roman, font Medium per impostazione predefinita.
Come autore di una pagina web, tuttavia, puoi creare un foglio di stile che sostituisce lo stile predefinito del browser per il font del paragrafo e la dimensione del font. Ad esempio, puoi creare la seguente regola nel tuo foglio di stile:
p {
font-family: Arial;
font-size: small;
}
Quando un utente carica la pagina, le impostazioni del carattere del paragrafo e della dimensione del carattere definite dall'autore sostituiscono le impostazioni predefinite del testo del paragrafo del browser.
Gli utenti possono effettuare selezioni per personalizzare la visualizzazione del browser in modo ottimale per il proprio utilizzo. In Internet Explorer, ad esempio, l'utente può selezionare Visualizza > Dimensioni testo > Molto grande per espandere il font della pagina a una dimensione più leggibile se ritiene che il font sia troppo piccolo. In definitiva (almeno in questo caso), la selezione dell'utente sostituisce sia gli stili predefiniti del browser per la dimensione del font del paragrafo sia gli stili del paragrafo creati dall'autore della pagina web.
L'ereditarietà è un altro aspetto importante per il concetto di “cascata”. Le proprietà per la maggior parte degli elementi di una pagina web vengono ereditate—ad esempio, i tag paragrafo ereditano certe proprietà dai tag corpo, i tag span ereditano certe proprietà dai tag paragrafo e così via. Pertanto, se crei la seguente regola 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 corpo del testo è Arial e corsivo tranne il testo del paragrafo (e quello ereditato), che viene visualizzato come Courier normale (non corsivo).Tecnicamente, il tag paragrafo eredita prima le proprietà che sono impostate per il tag corpo, ma poi ignora quelle proprietà perché ha delle proprietà proprie definite. In altre parole, mentre gli elementi della pagina generalmente ereditano le proprietà dall'alto, l'applicazione diretta di una proprietà a un tag causa sempre una sostituzione della formula standard per l'ereditarietà.
La combinazione di tutti i fattori discussi sopra, più altri fattori come la specificità CSS (un sistema che assegna diverso peso a particolari tipi di regole CSS), e l'ordine delle regole CSS, crea in definitiva una cascata complessa dove gli elementi con priorità più alta sostituiscono le proprietà che hanno priorità più basse. Per ulteriori informazioni sulle regole che governano la cascata, l'ereditarietà e la specificità, visita 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, vedi Impaginazione 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 CSS, vedi www.adobe.com/go/vid0153.
Informazioni sulle proprietà della scrittura stenografica CSS
La specifica CSS consente la creazione di stili utilizzando una sintassi abbreviata nota come shorthand CSS.Il CSS breve ti consente di specificare i valori di diverse proprietà utilizzando una singola dichiarazione. Ad esempio, la proprietà font ti consente di impostare le proprietà font-style, font-variant, font-weight, font-size, line-height e font-family su una singola riga.
Un aspetto importante da notare quando si utilizza la sintassi CSS abbreviata è che i valori omessi da una proprietà CSS abbreviata vengono assegnati al loro valore predefinito. Questo può causare una visualizzazione non corretta delle pagine quando due o più regole CSS vengono assegnate allo stesso tag.
Ad esempio, la regola h1 mostrata di seguito utilizza la sintassi CSS estesa. Notare che alle proprietà font-variant, font-stretch, font-size-adjust e font-style sono stati assegnati i loro 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 singola proprietà abbreviata, la stessa regola potrebbe apparire come segue:
h1 { font: bold 16pt/18pt Arial }
Quando viene scritta utilizzando la notazione abbreviata, i valori omessi vengono automaticamente assegnati ai loro valori predefiniti. Pertanto, l'esempio abbreviato precedente omette i tag font-variant, font-style, font-stretch e font-size-adjust.
Se hai stili definiti in più posizioni (ad esempio, sia incorporati in una pagina HTML che importati da un foglio di stile esterno) utilizzando sia la forma abbreviata che quella estesa della sintassi CSS, tieni presente che le proprietà omesse in una regola abbreviata potrebbero sostituire (o cascade) le proprietà che sono esplicitamente impostate in un'altra regola.
Per questo motivo, Dreamweaver utilizza la forma estesa della notazione CSS per impostazione predefinita. Questo previene possibili problemi causati da una regola abbreviata che sostituisce una regola estesa. Se apri una pagina web che è stata codificata con la notazione CSS abbreviata in Dreamweaver, tieni presente che Dreamweaver creerà qualsiasi nuova regola CSS utilizzando la forma estesa. Puoi specificare come Dreamweaver crea e modifica le regole CSS cambiando le preferenze di modifica CSS nella categoria Stili CSS della finestra di dialogo Preferenze (Modifica > Preferenze in Windows; Dreamweaver > Preferenze su Macintosh).
Dreamweaver e CSS
In Dreamweaver, puoi lavorare con i 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 funzionalità di codifica offerte da Dreamweaver, vedi 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, vedi Preprocessori CSS.
Crea splendidi siti web con Dreamweaver
Progetta, codifica e gestisci siti web dinamici con un potente strumento completo.
