Iniziamo il nostro percorso dalle fondamentali nozioni di base, rimanendo ancora in parte nel territorio di (X)HTML. Se CSS è un solo linguaggio, vari sono i modi per inserire i fogli di stile CSS in un documento. Per capire il meccanismo è necessario chiarire la fondamentale distinzione tra fogli esterni e interni.
CSS esterni e interni
È esterno un foglio di stile definito in un file separato dal documento. Si tratta di semplici documenti di testo editabili anche con il Blocco Note o TextEdit ai quali si assegna l'estensione .css.
Un foglio di stile si dice invece interno quando il suo codice è compreso in quello del documento. A seconda che si lavori con un CSS esterno o interno variano sintassi e modalità di inserimento. Rispetto a queste diverse modalità si parla di fogli di stile collegati, incorporati o in linea.
Fogli collegati
Per caricare un foglio esterno in un documento esistono due possibilità. La prima e più compatibile è quella che fa uso dell'elemento <LINK>. La dichiarazione va sempre collocata all'interno della sezione <HEAD> del documento (X)HTML:
<html> <head> <title>Inserire i fogli di stile in un documento</title> <link rel="stylesheet" type="text/css" href="stile.css"> </head> <body>
L'elemento <link> presenta una serie di attributi di cui è importante spiegare significato e funzione:
| Attributo | Descrizione |
|---|---|
| rel | descrive il tipo di relazione tra il documento e il file collegato. È obbligatorio. Per i CSS due sono i valori possibili: stylesheet e alternate stylesheet. Approfondimenti nella lezione sui Fogli di stile alternativi |
| href | serve a definire l'URL assoluto o relativo del foglio di stile. È obbligatorio |
| type | identifica il tipo di dati da collegare. Per i CSS l'unico valore possibile è text/css. L'attributo è obbligatorio |
| media | con questo attributo si identifica il supporto (schermo, stampa, etc) cui applicare un particolare foglio di stile. Attributo opzionale. L'argomento sarà approfondito nella prossima lezione |
Usare @import
Un altro modo per caricare CSS esterni è usare la direttiva @import all'interno dell'elemento <style>:
<style> @import url(stile.css); </style>
Questo sistema è uno dei modi più sicuri per risolvere problemi di compatibilità tra vecchi e nuovi browser. Ci torneremo quindi più avanti. Per il momento basti notare che il CSS va collegato definendo un URL assoluto o relativo da racchiudere tra parentesi tonde (ma vedremo che altri modi sono accettati) e che la dichiarazione deve chiudersi con un punto e virgola.
Fogli incorporati
I fogli incorporati sono quelli inseriti direttamente nel documento (X)HTML tramite l'elemento <style>. Anche in questo caso la dichiarazione va posta all'interno della sezione <head>:
<html>
<head>
<title>Inserire i fogli di stile in un documento</title>
<style type="text/css">
body {
background: #FFFFCC;
}
</style>
</head>
<body>
...
Come si vede il codice inizia con l'apertura del tag <style>. Esso può avere due attributi:
- type (obbligatorio)
- media (opzionale)
per i quali valgono le osservazioni viste in precedenza. Seguono le regole del CSS e la chiusura di </style>.
Fogli in linea
L'ultimo modo per formattare un elemento con un foglio di stile consiste nell'uso dell'attributo 'style'. Esso fa parte della collezione di attributi (X)HTML definita Common: si tratta di quegli attributi applicabili a tutti gli elementi. La dichiarazione avviene a livello dei singoli tag contenuti nella pagina e per questo si parla di fogli di stile in linea. La sintassi generica è la seguente:
<elemento style="regole_di_stile">
Se, ad esempio, si vuole formattare un titolo H1 in modo che abbia il testo di colore rosso e lo sfondo nero, scriveremo:
<h1 style="color: red; background: black;">...</h1>
Le cose da osservare nel codice sono due. Come valore di style si possono dichiarare più regole di stile. Esse vanno separate dal punto e virgola. I due punti si usano invece per introdurre il valore della proprietà da impostare.
Consigli
A questo punto è giusto chiedersi: quando usare l'una o l'altra soluzione? Il punto di partenza nella risposta deve essere questo: i risultati nella formattazione del documento non cambiano. La giusta soluzione sarà quindi quella richiesta dalla nostra applicazione. Il consiglio sentito è semplice: pianificate, pensate in anticipo a quella che dovrà essere la struttura delle pagine del sito. Mettetevi davanti a un monitor o su un pezzo di carta e ragionate: qui metterò un tag <h1>, qui userò una tabella a due colonne, questo box deve avere lo sfondo rosso, etc.
A questo punto potrete costruire per prima cosa un foglio di stile generico ed esterno, da applicare a tutte le pagine del sito. Esso conterrà le regole per formattare gli elementi o le sezioni presenti in tutte queste pagine.
Passate poi ad analizzare sezioni ed elementi presenti solo in certe pagine o che vogliate modificare solo in determinati casi. Supponete, ad esempio, di voler cambiare in rosso il colore di un titolo iniziale solo in una pagina delle 150 del vostro sito. Che fare? Semplice: usare uno stile incorporato solo in quella pagina:
<style type="text/css">
h1 {color: red; }
</style>
Per la legge che regola il meccanismo del cascading questo stile prevarrà su quello del CSS esterno.
Se le pagine invece di una fossero 20 il discorso diventerebbe un po' complicato. Bisognerebbe armarsi di pazienza e modificarle una per volta. Anche qui però la soluzione è dietro l'angolo. Basta fare un nuovo CSS esterno e collegarlo al documento con @import insieme al foglio generico:
<link rel="stylesheet" type="text/css" href="stile.css"> <style type="text/css"> @import url(nuovo_stile.css); </style>
Anche questa volta, le regole dello stile colleagto con @import vanno a sovrascrivere quelle ereditate dall'elemento <link>. Sono solo alcune delle strategie possibili e mi si perdoni la forse eccessiva semplificazione. Basta rendere l'idea.
Un'ultima notazione. L'uso estensivo di fogli in linea rischia di compromettere uno dei principali vantaggi dei CSS, ovvero avere pagine più leggere e facili da gestire. Intervenire nei meandri di una pagina per andare a modificare uno stile e ripetere l'operazione per quante sono le pagine del nostro sito può diventare davvero frustrante. Del resto, il loro uso è ultimamente considerato deprecato anche dal W3C.
Ultimi articoli CSS
Il posizionamento del contenuto generato da CSSIntrodurre le forme, come i triangoli, e posizionarle per abbellire... |
CSS3 Border-radius e Box-shadow su Internet Explorer con CSS3PIEUtilizzare CSS3PIE per implementare importanti proprietà CSS3 anche... |
Forme con i CSS: disegnare triangoliCome generare forme sfruttando solamente i CSS per disegnare triangoli |
Web Fonts: ottimizzazione cross-browserInserire font con la direttiva @font-face su tutti i browser con un... |
Progress Bar con CSS3Realizzare una barra di avanzamento cross-browser sfruttando la... |
Guide CSS
Guida CSS3Scoprire e usare al meglio tutte le novità dell'ultima versione dei... |
Guida CSS Tecniche essenzialiTesto, immagini, layout, form, liste, tabelle: soluzioni pronte per... |
Guida Interfacce web con PhotoshopQuesta guida mostra con semplici esempi come lavorare ad un layout e... |
Newsletter @CSS
Ogni mercoledì, direttamente nella tua e-mail: guide, articoli, tutorial, FAQ e approfondimenti tecnici su CSS e Web Design.
Iscriviti alla newsletter
Corsi in aula
|
|
Corso Google AdWords Base27 Febbraio 2012 a Milano |
|
|
Corso Webmaster base12 Marzo 2012 a Milano |
|
|
Corso Webmaster base20 Febbraio 2012 a Roma |
|
|
Corso Google AdWords Base28 Marzo 2012 a Roma |