[successivo]
[precedente]
[inizio]
[fine]
[indice generale]
[violazione licenza]
[translators]
[docinfo]
[indice analitico]
[volume]
[parte]
Capitolo 320. Fogli di stile CSS
L'evoluzione del linguaggio HTML si è sviluppata attraverso la ricerca di introdurre elementi e attributi per il controllo della resa estetica. Tuttavia, questo approccio ha dimostrato di non essere efficace e lo standard ISO 15445 ha eliminato tutto il superfluo, per lasciare il controllo dell'estetica al di fuori del linguaggio, contando eventualmente sui fogli di stile CSS per questo scopo.
Un foglio di stile CSS (Cascading style sheet) può essere un file, di solito con estensione .css, che si associa alle pagine HTML, oppure può essere del codice che si incorpora nelle pagine stesse. Si associa un foglio di stile esterno nel modo che appare dall'esempio seguente, dove il file del foglio di stile si chiama precisamente stile.css:
<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
<HTML>
<HEAD>
<TITLE>Esempio</TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="stile.css">
...
</HEAD>
...
</HTML>
|
|
Per incorporare il contenuto di un foglio di stile direttamente nella pagina HTML, si può procedere come nell'esempio seguente:
<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
<HTML>
<HEAD>
<TITLE>Esempio</TITLE>
<STYLE TYPE="text/css">
<!--
H1 { color: blue }
P {
font-size: 12pt;
color: red;
}
-->
</STYLE>
</HEAD>
<BODY>
...
</BODY>
</HTML>
|
|
Come si può osservare, il codice dello stile CSS è inserito nell'elemento STYLE, ma appare racchiuso da un commento (tra <!-- e -->). Ciò si rende necessario per evitare che i navigatori che non sono in grado di interpretare lo stile vengano confusi, arrivando magari a mostrare il codice CSS nella pagina.
Se si dispone di un collegamento alla rete esterna, è possibile verificare la correttezza sintattica di un foglio di stile, attraverso il servizio offerto dal consorzio W3C, a partire dall'indirizzo <http://jigsaw.w3.org/css-validator/>. La verifica è possibile solo per file esterni, o inserendo il testo dello stile in una finestra di un modulo di inserimento.
320.1
File «stile-01.html»
Si realizzi il file stile-01.html con il contenuto seguente:
1 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
2 <HTML LANG="it">
3 <HEAD>
4 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
5 <META NAME="Description" CONTENT="Introduzione all'uso degli
6 stili CSS, esempio 01">
7 <META NAME="Keywords" CONTENT="HTML, CSS, stile, esempio">
8 <META NAME="Author" CONTENT="Tizio Tizi, tizio@brot.dg, classe 4Z">
9 <META NAME="Date" CONTENT="2004.01.01">
10 <META NAME="Resource-type" LANG="en" CONTENT="Document">
11 <META NAME="Revisit-after" LANG="en" CONTENT="15 days">
12 <META NAME="Robots" CONTENT="ALL">
13 <TITLE>Stile</TITLE>
14 <STYLE TYPE="text/css">
15 <!--
16 H1 {
17 color: blue;
18 font-size: 32pt;
19 }
20 P {
21 font-size: 24pt;
22 color: red;
23 }
24 -->
25 </STYLE>
26 </HEAD>
27 <BODY>
28
29 <H1>Fieri di essere standard</H1>
30
31 <P>Quando si è certi della validità del proprio documento
32 HTML ISO 15445, si può aggiungere un'icona racchiusa da un
33 riferimento ipertestuale che rimanda al servizio di verifica offerto dal
34 consorzio W3C. Per verificare che questo documento sia valido
35 effettivamente, basta fare un «clic» sulla stessa:</P>
36
37 <P><A HREF="http://validator.w3.org/check/referer"><IMG
38 SRC="http://validator.w3.org/images/v15445" ALT="Valid
39 ISO-HTML!"></A></P>
40
41 <P>Inoltre, se si ha la stessa sicurezza a proposito dello stile CSS, si
42 può aggiungere un'icona analoga che invia al servizio di
43 controllo del W3C sui fogli di stile. Tuttavia, a differenza
44 dell'esempio precedente, occorre interagire con il servizio per indicare
45 il file o il testo dello stile da verificare:</P>
46
47 <P><A HREF="http://jigsaw.w3.org/css-validator"><IMG
48 SRC="http://jigsaw.w3.org/css-validator/images/vcss" ALT="Valid
49 CSS!"></A></P>
50
51 </BODY>
52 </HTML>
|
|
Teoricamente, il titolo dovrebbe apparire di colore blu e il testo di colore rosso, come si vede nella figura successiva.
320.2
File «stile-02.html» e «stile-02.css»
Si realizzi il file stile-02.css estrapolando il codice del foglio di stile CSS dal file stile-01.html. In pratica, il file stile-02.css deve avere il contenuto seguente:
1 H1 {
2 color: blue;
3 font-size: 32pt;
4 }
5 P {
6 font-size: 24pt;
7 color: red;
8 }
|
|
Si realizzi il file stile-02.html, modificando il file stile-01.html già realizzato in precedenza. In pratica, si fa riferimento al foglio di stile contenuto nel file stile-02.css:
1 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
2 <HTML LANG="it">
3 <HEAD>
4 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
5 <META NAME="Description" CONTENT="Introduzione all'uso degli
6 stili CSS, esempio 02">
7 <META NAME="Keywords" CONTENT="HTML, CSS, stile, esempio">
8 <META NAME="Author" CONTENT="Tizio Tizi, tizio@brot.dg, classe 4Z">
9 <META NAME="Date" CONTENT="2004.01.01">
10 <META NAME="Resource-type" LANG="en" CONTENT="Document">
11 <META NAME="Revisit-after" LANG="en" CONTENT="15 days">
12 <META NAME="Robots" CONTENT="ALL">
13 <TITLE>Stile</TITLE>
14 <LINK REL="stylesheet" TYPE="text/css" HREF="stile-02.css">
15 </HEAD>
16 <BODY>
17
18 <H1>Fieri di essere standard</H1>
19
20 <P>Quando si è certi della validità del proprio documento
21 HTML ISO 15445, si può aggiungere un'icona racchiusa da un
22 riferimento ipertestuale che rimanda al servizio di verifica offerto dal
23 consorzio W3C. Per verificare che questo documento sia valido
24 effettivamente, basta fare un «clic» sulla stessa:</P>
25
26 <P><A HREF="http://validator.w3.org/check/referer"><IMG
27 SRC="http://validator.w3.org/images/v15445" ALT="Valid
28 ISO-HTML!"></A></P>
29
30 <P>Inoltre, se si ha la stessa sicurezza a proposito dello stile CSS, si
31 può aggiungere un'icona analoga che invia al servizio di
32 controllo del W3C sui fogli di stile. Tuttavia, a differenza
33 dell'esempio precedente, occorre interagire con il servizio per indicare
34 il file o il testo dello stile da verificare:</P>
35
36 <P><A HREF="http://jigsaw.w3.org/css-validator"><IMG
37 SRC="http://jigsaw.w3.org/css-validator/images/vcss" ALT="Valid
38 CSS!"></A></P>
39
40 </BODY>
41 </HTML>
|
|
Si deve ottenere lo stesso risultato già visto nella sezione precedente, a proposito del file stile-01.html.
Appunti di informatica libera 2004.10.10 --- Copyright © 2000-2004 Daniele Giacomini -- <daniele (ad) swlibero·org>, <daniele·giacomini (ad) poste·it>
Dovrebbe essere possibile fare riferimento a questa pagina anche con il nome fogli_di_stile_css.html
[successivo]
[precedente]
[inizio]
[fine]
[indice generale]
[violazione licenza]
[translators]
[docinfo]
[indice analitico]
