Da Inserire i fogli di stile in un documento
Iniziamo il nostro percorso dalle fondamentali nozioni di base,se il CSS è solo linguaggio, vari sono i modi per inserire i fogli di stile CSS in un documento. Per capire il meccanismo è necessario chiarire che esistono due tipi differenti di fogli:
1. fogli interni
2. fogli esterni
CSS esterni e interni
E' 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
Esistono più possibilità per collegare fogli esterni.
la prima riguarda l'uso dell'elemento <LINK>. La dichiarazione va sempre collocata all'interno della sezione <HEAD> della pagina HTML
1. rel: descrive il tipo di relazione tra il documento e il file collegato. E' obbligatorio. Per i CSS due sono i valori possibili: stylesheet e alternate stylesheet.
2. href: serve a definire l'URL del foglio di stile.
3. type: identifica il tipo di dati da collegare. Per i CSS l'unico valore possibile è text/css.
Un altro modo per caricare CSS esterni è usare la direttiva @import all'interno dell'elemento <STYLE>
Fogli incorporati
I fogli sn inserititramite l'elemento <STYLE>. Anche in questo casoil tutto và all'interno dei tag <head>...</head>
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:
Se, ad esempio, si vuole formattare un titolo H1 in modo che abbia il testo di colore rosso e lo sfondo nero, scriveremo:
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.
Iniziamo il nostro percorso dalle fondamentali nozioni di base,se il CSS è solo linguaggio, vari sono i modi per inserire i fogli di stile CSS in un documento. Per capire il meccanismo è necessario chiarire che esistono due tipi differenti di fogli:
1. fogli interni
2. fogli esterni
CSS esterni e interni
E' 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
Esistono più possibilità per collegare fogli esterni.
la prima riguarda l'uso dell'elemento <LINK>. La dichiarazione va sempre collocata all'interno della sezione <HEAD> della pagina HTML
- Codice:
<html>
<head>
<title>Inserire i fogli di stile in un documento</title>
<link rel="stylesheet" type="text/css" href="stile.css">
</head>
<body>
1. rel: descrive il tipo di relazione tra il documento e il file collegato. E' obbligatorio. Per i CSS due sono i valori possibili: stylesheet e alternate stylesheet.
2. href: serve a definire l'URL del foglio di stile.
3. type: identifica il tipo di dati da collegare. Per i CSS l'unico valore possibile è text/css.
Un altro modo per caricare CSS esterni è usare la direttiva @import all'interno dell'elemento <STYLE>
- Codice:
<style>
@import url(stile.css);
</style>
Fogli incorporati
I fogli sn inserititramite l'elemento <STYLE>. Anche in questo casoil tutto và all'interno dei tag <head>...</head>
- Codice:
<html>
<head>
<title>Inserire i fogli di stile in un documento</title>
<style type="text/css">
body {
background: #020202;
}
</style>
</head>
<body>
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:
- Codice:
<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:
- Codice:
<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.
