Panoramica sui fogli di stile CSS

Utilizzando il CSS per specificare i font è possibile garantire una maggiore uniformità nell'aspetto e nel layout delle pagine visualizzate in browser diversi. Fra le numerose proprietà di testo che è possibile controllare mediante CSS vi sono tipo e dimensione dei font, colore del testo e dello sfondo, formattazione del testo e colore dei link.

Utilizzando il CSS è anche possibile posizionare, aggiungere colore, muovere il testo e impostare margini e bordi degli elementi a livello di blocco. Un elemento a livello di blocco è una parte di contenuto indipendente formattata graficamente come blocco. Ad esempio, i blocchi di contenuto (equivalenti ai tag p) e i riquadri (equivalenti ai tag div) sono entrambi elementi a livello di blocco.

Site.com supporta CSS3, la specifica più recente per CSS.

Informazioni sulle differenze tra gli stili in linea e i fogli di stile

In Site.com Studio è possibile:

• Applicare gli stili direttamente a una pagina o a un elemento di pagina selezionato utilizzando l'opzione In linea nel riquadro Stile (). Gli stili in linea si applicano esclusivamente all'elemento selezionato.
• Aggiungere elementi di stile, quali classi o ID CSS, a un foglio di stile e applicare gli elementi di stile alla pagina o all'elemento di pagina selezionato. Il contenuto (pagine Web) viene in questo modo separato dalla presentazione (foglio di stile).

Se non si ha dimestichezza con CSS, è probabile che l'opzione in linea risulti più facile utilizzare e comprendere. Gli stili in linea, tuttavia, perdono molti dei vantaggi dei fogli di stile poiché mescolano i contenuti alla presentazione (lo stile in linea viene applicato soltanto all'elemento specifico). Per aggiornare lo stile del sito è necessario aggiornare le proprietà di stile di ogni pagina o elemento di pagina interessato.

I fogli di stile, al contrario, benché più complessi da comprendere inizialmente, consentono di apportare modifiche all'intero sito da un'unica posizione. Quando si aggiorna un elemento del foglio di stile, viene immediatamente aggiornato lo stile di ogni pagina o elemento di pagina in cui l'elemento viene utilizzato.

L'uso di CSS offre numerosi vantaggi:

• Risparmio di tempo e fatica quando si crea e si progetta il sito
• Creazione di una struttura del sito più chiara e coerente
• Navigazione più semplice per gli utenti con problemi di accessibilità, ad esempio coloro che utilizzano screen reader

Per ulteriori informazioni sull'utilizzo dei CSS e la creazione di fogli di stile, visitare il sito del World Wide Web Consortium (W3C) all'indirizzo www.w3.org/Style/CSS. Su Internet sono inoltre disponibili numerose esercitazioni che offrono una formazione approfondita sull'uso dei CSS.

Informazioni sulle classi e gli ID CSS

Quando si utilizzano i fogli di stile per definire lo stile del sito, è possibile ridefinire la formattazione dei tag HTML come body o h1. È inoltre possibile creare classi e ID CSS per definire lo stile di elementi specifici, quali le intestazioni o i contenuti ripetuti. Una classe CSS consente di definire e applicare proprietà di stile a più elementi di una pagina, mentre un ID CSS è adatto per lavorare su un singolo elemento di una pagina. Ad esempio, nella struttura di una pagina, gli ID si utilizzano spesso per definire le aree di intestazione e piè di pagina poiché ciascuna pagina include una sola intestazione e un solo piè di pagina, mentre le classi si usano per definire elementi di pagina ripetuti, ad esempio il post di un blog.

Procedure consigliate

• Inserire un CSS reset nel foglio di stile per reimpostare tutti gli elementi di stile secondo un valore di base. CSS consente di eliminare le differenze tra i diversi browser causate dalle impostazioni di stile predefinite incorporate.
• Se possibile, utilizzare sempre le classi e gli ID CSS anziché gli stili in linea. Le classi e gli ID CSS consentono di promuovere la separazione tra presentazione e contenuto e di semplificare l'aggiornamento degli stili del sito.
• Utilizzare gli ID se è presente una sola occorrenza per pagina. Una volta utilizzato, l'ID non potrà più essere utilizzato in quella pagina. Utilizzare le classi in presenza di una o più occorrenze per pagina.
• Utilizzare i gruppi per organizzare i CSS logicamente e semplificare la gestione del foglio di stile.
• Se si utilizza CSS3, avere cura di visualizzare il sito in anteprima e di provarlo con tutti i browser che si desidera supportare, perché alcuni browser non hanno ancora implementato completamente le funzioni di CSS3.