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


Capitolo 483.   Linguaggio CSS

In queste lezioni viene introdotto un utilizzo molto semplice dei fogli di stile CSS (è anche disponibile il capitolo 465 nell'ambito di questo documento). Esistono due livelli del linguaggio CSS, denominati CSS1 e CSS2, compatibili tra di loro. Eventualmente si può approfondire lo studio di questi due livelli da <http://www.w3.org/TR/REC-CSS1> e da <http://www.w3.org/TR/REC-CSS2/>.

Le istruzioni del linguaggio CSS vengono definite regole e si esprimono sinteticamente secondo la forma seguente, dove le parentesi graffe fanno parte della regola:

selettore { dichiarazione }

Il selettore rappresenta qualcosa all'interno del documento e la dichiarazione è ciò che si vuole ottenere su tale oggetto. Eventualmente, all'interno di una regola si possono raggruppare più selettori (separati con una virgola), applicando così le stesse dichiarazioni:

selettore, selettore... { dichiarazione }

Si possono indicare anche più dichiarazioni, separandole con un punto e virgola:

selettore... { dichiarazione; dichiarazione... }

Le regole possono essere scritte utilizzando più righe di testo normale, per cui, la stessa sintassi appena mostrata potrebbe essere scritta anche come nel modo seguente, aggiungendo un punto e virgola finale anche dopo l'ultima dichiarazione:

selettore... {
    dichiarazione;
    dichiarazione;
    ...
}

Le dichiarazioni si scompongono a loro volta in proprietà e valori loro assegnati:

selettore... {
    proprietà: valore;
    ...
}

L'esempio seguente attribuisce il colore blu al testo degli elementi H1 di un documento HTML, come già apparso nel capitolo precedente:

H1 { color: blue }

Una proprietà può avere valori alternativi, da usare in mancanza di altro:

selettore... {
    proprietà: valore valore_alternativo...;
    ...
}

L'esempio successivo indica l'utilizzo di uno sfondo composto da un'immagine esterna per il corpo del documento, specificando che in mancanza dell'immagine, o in mancanza della possibilità di rappresentarla si può utilizzare uno sfondo bianco:

BODY { background-image: url(fondale.jpg) white }

I commenti in un foglio di stile CSS si rappresentano in modo simile al linguaggio C, nella forma:

/* testo_ignorato */

Il selettore di una regola CSS è qualcosa che rappresenta una parte del testo a cui si vogliono applicare le dichiarazioni relative. Nella situazione più semplice, il selettore viene indicato con il nome dell'elemento a cui si attribuisce, come già apparso negli esempi mostrati in precedenza. Tutti gli elementi HTML che si possono utilizzare nel corpo, ovvero all'interno dell'elemento BODY, possono utilizzare l'attributo CLASS. Ciò permette di attribuire loro una classe, ovvero un gruppo, di solito nell'ambito di quel tipo di elemento. Per indicare un selettore che faccia riferimento a una classe specifica di un certo elemento, si usa la notazione seguente:

[elemento].classe

Come si vede, l'indicazione dell'elemento è facoltativa, in modo tale che, se non lo si indica, si faccia riferimento a tutti gli elementi che appartengono a quella stessa classe. L'esempio seguente mostra il caso degli elementi P che appartengono alla classe nota, a cui viene abbinato il colore rosso per il testo:

P.nota { color: red }

L'esempio seguente mostra invece l'utilizzo di un selettore che fa riferimento a una classe di qualunque elemento:

.calmante { color: green }

Un selettore può essere composto in modo da definire la dipendenza da un contesto. In altri termini, si può definire un selettore che dipende da un altro:

selettore sottoselettore...

Il primo selettore indica un ambito, all'interno del quale va cercata la corrispondenza per il secondo selettore, continuando eventualmente ad aumentare il dettaglio con altri selettori più specifici. Si osservi l'esempio seguente; serve a fare riferimento agli elementi EM che si trovano all'interno di un elemento H1:

H1 EM { color: green }

È importante distinguere il raggruppamento di selettori dalla definizione di un contesto più dettagliato come in questo caso. Infatti, per raggruppare i selettori si utilizza la virgola. L'esempio seguente applica il colore verde a tutti gli elementi EM contenuti all'interno di elementi H1 o H2:

H1 EM, H2 EM { color: green }

Un selettore può anche individuare una pseudo-classe, ovvero una zona di testo che viene individuata dal programma che si occupa di interpretare il documento HTML, che non corrisponde a elementi e classi indicati espressamente:

elemento:pseudo_classe
elemento.classe:pseudo_classe
.classe:pseudo_classe
:pseudo_classe

Il caso tipico di una pseudo-classe è quella che delimita la prima lettera di un elemento: first-letter. L'esempio seguente serve a ottenere una lettera iniziale più grande in tutti gli elementi P di classe primo:

P.primo:first-letter {
    font-size: 200%;
    float: left;
}

483.1   File «linguaggio-css-01.html»

Si realizzi il file linguaggio-css-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="Linguaggio CSS, esempio 01">
      6     <META NAME="Keywords" CONTENT="HTML, CSS, stile, esempio">
      7     <META NAME="Author" CONTENT="Tizio Tizi, tizio@brot.dg, classe 4Z">
      8     <META NAME="Date" CONTENT="2007.01.01">
      9     <META NAME="Resource-type" LANG="en" CONTENT="Document">
     10     <META NAME="Revisit-after" LANG="en" CONTENT="15 days">
     11     <META NAME="Robots" CONTENT="ALL">
     12     <TITLE>Linguaggio CSS</TITLE>
     13     <STYLE TYPE="text/css">
     14         <!--
     15             H1 {
     16                 color: blue;
     17                 font-size:        48pt;
     18             }
     19             P {
     20                 font-size:        24pt;
     21                 color:            green;
     22             }
     23             P.autore {
     24                 font-size:        18pt;
     25                 text-align:       right;
     26                 font-style:       italic;
     27                 color:            black;
     28             }
     29             P.inizio:first-letter {
     30                 font-size:        200%;
     31                 color:            black;
     32             }
     33         -->
     34     </STYLE>
     35 </HEAD>
     36 <BODY>
     37 
     38 <H1>H&auml;nsel e Gretel</H1>
     39 
     40 <P CLASS="autore">di Jacob e Wilhelm Grimm</P>
     41 
     42 <P CLASS="inizio">Davanti a un gran bosco abitava un povero taglialegna
     43 con sua moglie e i suoi due bambini; il maschietto si chiamava
     44 H&auml;nsel e la bambina Gretel. Egli aveva poco da metter sotto i
     45 denti, e quando ci fu nel paese una grande carestia, non poteva neanche
     46 pi&ugrave; procurarsi il pane tutti i giorni. [...]</P>
     47 
     48 <P>Per la fame, neppure i due bimbi potevan dormire, e avevano udito
     49 quel che la matrigna diceva al padre. Gretel piangeva amaramente, e
     50 disse a H&auml;nsel: - Adesso per noi &egrave; finita. - [...]</P>
     51 
     52 <P>[...]</P>
     53 
     54 </BODY>
     55 </HTML>

Figura 483.9. Aspetto del file linguaggio-css-01.html.

linguaggio-css-01.html

483.2   Elementi «DIV» e «SPAN»

Nei capitoli che descrivono l'uso del linguaggio HTML è stata omessa la descrizione degli elementi DIV e SPAN, che diventano importanti quando si usano gli stili CSS. L'elemento DIV è un blocco che racchiude blocchi; l'elemento SPAN si inserisce nel testo lineare e contiene testo lineare.

Questi elementi non comportano una modifica estetica del loro contenuto, perché servono solo a delimitare in qualche modo blocchi o testo, per assegnargli degli attributi. Per esempio, si può modificare il linguaggio:

<DIV LANG="en">

    <P>This is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation; either version 2 of the License, or
    (at your option) any later version.</P>

</DIV>

Nell'ambito dello studio dei fogli di stile, questi elementi sono utili per l'attribuzione di una classe:

Il sig. <SPAN CLASS="nome">Tizio Tizi</SPAN> è andato...

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


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

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

Valid ISO-HTML!

CSS validator!