Hosting & Domini

Inserimento e formattazione del testo > Fogli di stile CSS

Fogli di stile CSS

Uno stile è un gruppo di attributi di formattazione che definiscono l'aspetto di una parte di testo all'interno di un singolo documento. Un foglio di stile CSS (Cascading Style Sheets) può essere usato per controllare molti documenti contemporaneamente e comprende tutti gli stili di un documento. L'uso combinato di un foglio di stile CSS e uno stile HTML ha il vantaggio di collegare più documenti e di aggiornare in modo automatico la formattazione di tutti documenti che usano uno stile CSS, quando quest'ultimo viene aggiornato o modificato.

Immaginiamo di gestire un enorme sito web Web, ad esempio Yahoo o Macromedia.com. Grazie agli stili CSS è possibile applicare modifiche ai caratteri e alla formattazione dell'intero sito web in modo veloce e accurato. Inoltre, gli stili CSS permettono di intervenire su molte proprietà che HTML non è in grado di gestire. Ad esempio, è possibile personalizzare i punti degli elenchi o impostare diverse dimensioni di carattere e unità (come pixel, punti ecc.). Utilizzando i fogli di stile CSS e impostando la dimensione dei caratteri in pixel, si possono avere risultati di layout e aspetto della pagina più omogenei indipendentemente dal browser usato.

Nonostante gli stili CSS esistano ormai da un po' di tempo, svariati creatori e designer di siti Web si dimostrano riluttanti ad usarli perché non tutti i browser li supportano. Tuttavia, se l'utenza del proprio sito web è formata in prevalenza di utenti provvisti di browser che supportano gli stili CSS (versione 4.0 o superiore), sarebbe un peccato non approfittare delle funzioni efficaci e potenti che mettono a disposizione tali stili.

Gli stili CSS vengono identificati in base al nome o al tag HTML e offrono la possibilità di cambiare un attributo di uno stile e vedere istantaneamente la modifica applicata a tutto il testo per cui lo stile è stato selezionato. Gli stili CSS applicati a documenti HTML sono in grado di controllare la più parte degli attributi di formattazione del testo tradizionali quali i caratteri, la dimensione e l'allineamento. Inoltre, gli stili CSS consentono di configurare attributi HTML unici quali il posizionamento, gli effetti speciali e i rollover.

I fogli di stile CSS sono specificati nella sezione head del documento e definiscono gli attributi di formattazione dei tag HTML, di sezioni di testo identificate da un attributo class o del testo conforme ai criteri delle specifiche CSS. Gli stili definiti nei documenti esistenti vengono riconosciuti in modo automatico, a condizione che siano conformi alle direttive di stile CSS.

I fogli di stile CSS funzionano nelle versioni 4.0 e successive dei browser. Internet Explorer 3.0 riconosce alcuni fogli di stile CSS, mentre la maggior parte dei browser precedenti non li supporta.

In Dreamweaver sono presenti tre tipi di fogli di stile CSS:

Gli stili personalizzati sono simili a quelli usati in un programma di elaborazione testi, eccetto per il fatto che non vi è distinzione tra stili di carattere e di paragrafo, e possono essere applicati a qualsiasi sezione o blocco di testo. Se lo stile CSS viene applicato ad un blocco di testo (ad esempio, un intero paragrafo o un elenco non ordinato), al tag del blocco viene aggiunto un attributo class (ad esempio, p class="mioStile" o ul class="mioStile"). Se invece viene applicato ad una sezione di testo, intorno al testo selezionato vengono inseriti dei tag span contenenti l'attributo class. Vedere Applicazione di uno stile CSS (class) personalizzato.

Gli stili di tag HTML ridefiniscono la formattazione di un particolare tag, come h1. Quando si crea o modifica uno stile CSS per il tag h1, tutto il testo formattato con il tag h1 viene immediatamente aggiornato.

Nota: prestare particolare attenzione alla ridefinizione dei tag di un CSS collegato, perché la modifica del layout potrebbe interessare molte pagine. Ad esempio, se si ridefinisce il tag table, il layout di tutte le pagine che contengono delle tabelle risulterà alterato.

Gli stili CSS ridefiniscono il formato di una particolare combinazione di tag (ad esempio, td h2 viene applicato ogni volta che un'intestazione h2 appare all'interno di una cella di tabella) o di tutti i tag che contengono un attributo id specifico (ad esempio, #mioStile viene applicato a tutti i tag che contengono la coppia attributo-valore ID="mioStile").

La formattazione HTML manuale ha la precedenza rispetto alla formattazione applicata da uno stile HTML o CSS. Per fare in modo che gli stili CSS controllino la formattazione di un paragrafo, è necessario eliminare tutta la formattazione HTML manuale o gli stili HTML.

Benché in Dreamweaver sia possibile impostare un numero illimitato di attributi di stile definiti dalla specifica CSS1, non tutti possono essere visualizzati nella finestra del documento. Gli attributi che non compaiono vengono contrassegnati con un asterisco (*) nella finestra di dialogo Definizione dello stile. Alcuni attributi di stile CSS impostabili in Dreamweaver vengono visualizzati in maniera diversa in Microsoft Internet Explorer 4.0 e Mozilla Firefox 4.0, mentre altri non sono ora supportati da alcun browser.

Nota: per aprire il manuale di riferimento per CSS O'Reilly offerto il dotazione con Dreamweaver, cliccare sul pulsante Riferimenti della barra degli strumenti e scegliere O'Reilly CSS Reference dal menu a comparsa.

 
Proprietà degli stili CSS

La specifica Cascading Style Sheets (CSS1), sotto la responsabilità del consorzio W3C, definisce le proprietà degli stili CSS (carattere, colore, spaziatura interna, margine, spaziatura tra parole, ecc.) che controllano l'aspetto degli elementi di testo. Con Dreamweaver è possibile impostare qualunque proprietà CSS1.

In Internet Explorer 4.0 o superiore, è possibile usare un linguaggio di script come JavaScript o VBScript per cambiare il posizionamento e le proprietà dello stile CSS degli elementi dopo che una pagina è stata caricata. In Mozilla Firefox 4.0 o superiore, non è possibile cambiare le proprietà di stile CSS dopo il caricamento di una pagina, mentre le proprietà di posizionamento possono essere modificate.