[successivo] [precedente] [inizio] [fine] [indice generale] [indice ridotto] [translators] [docinfo] [indice analitico] [volume] [parte]

Capitolo 374.   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 per file HTML che incorporano il foglio di stile, per figli di stile autonomi, o inserendo il testo dello stile in una finestra di un modulo di inserimento.

374.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="2006.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 &egrave; certi della validit&agrave; del proprio documento
     32 HTML ISO 15445, si pu&ograve; 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 &laquo;clic&raquo; 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&ograve; aggiungere un'icona analoga che invia al servizio di
     43 controllo del W3C sui fogli di stile:</P>
     44 
     45 <P><A HREF="http://jigsaw.w3.org/css-validator/check/validator"><IMG
     46 SRC="http://jigsaw.w3.org/css-validator/images/vcss" ALT="Valid
     47 CSS!"></A></P>
     48 
     49 </BODY>
     50 </HTML>

Teoricamente, il titolo dovrebbe apparire di colore blu e il testo di colore rosso, come si vede nella figura successiva.

Figura 374.4. Aspetto del file stile-01.html.

stile-01.html

374.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="2006.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 &egrave; certi della validit&agrave; del proprio documento
     21 HTML ISO 15445, si pu&ograve; 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 &laquo;clic&raquo; 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&ograve; aggiungere un'icona analoga che invia al servizio di
     32 controllo del W3C sui fogli di stile:</P>
     33 
     34 <P><A HREF="http://jigsaw.w3.org/css-validator/check/validator"><IMG
     35 SRC="http://jigsaw.w3.org/css-validator/images/vcss" ALT="Valid
     36 CSS!"></A></P>
     37 
     38 </BODY>
     39 </HTML>

Si deve ottenere lo stesso risultato già visto nella sezione precedente, a proposito del file stile-01.html.

Appunti di informatica libera 2006.07.01 --- Copyright © 2000-2006 Daniele Giacomini -- <daniele (ad) swlibero·org>

Dovrebbe essere possibile fare riferimento a questa pagina anche con il nome fogli_di_stile_css.htm

[successivo] [precedente] [inizio] [fine] [indice generale] [indice ridotto] [translators] [docinfo] [indice analitico]

Valid ISO-HTML!

CSS validator!