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

Capitolo 485.   Colore e sfondo

Il colore del carattere, il colore dello sfondo ed eventualmente l'immagine dello sfondo possono essere definiti attraverso le proprietà CSS della tabella successiva.

Tabella 485.1. Proprietà riferite ai colori e allo sfondo.

Proprietà Valori Descrizione 
color

colore
Colore del carattere o di primo piano. 
background-color

colore
Colore dello sfondo. 
background-image

url(uri)
Immagine da usare per lo sfondo.

I colori si possono indicare attraverso il nome che questi hanno in inglese, oppure attraverso la funzione rgb(), con la quale si specifica il valore RGB:

rgb(livello_rosso, livello_verde, livello_blu)

I numeri che esprimono i livelli dei colori fondamentali RGB vanno da 0 a 255.

Quando si esprimono i colori attraverso il nome (in inglese), conviene rimanere nell'ambito di un gruppo ristretto: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white e yellow.

485.1   File «colori-css-01.html»

Si realizzi il file colori-css-01.html con il contenuto seguente, partendo da una copia del file caratteri-css-01.html:

      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="Colori del testo e dello sfondo,
      6         esempio 01">
      7     <META NAME="Keywords" CONTENT="HTML, CSS, carattere, esempio">
      8     <META NAME="Author" CONTENT="Tizio Tizi, tizio@brot.dg, classe 4Z">
      9     <META NAME="Date" CONTENT="2007.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>Linguaggio CSS</TITLE>
     14     <STYLE TYPE="text/css">
     15         <!--
     16             BODY {
     17                 background-color: yellow;
     18             }
     19             H1 {
     20                 font-weight:      bolder;
     21                 font-size:        2cm;
     22                 background-color: red;
     23                 color:            white;
     24             }
     25             P {
     26                 font-family:      sans-serif;
     27                 font-style:       italic;
     28                 font-variant:     normal;
     29                 font-weight:      lighter;
     30                 font-size:        1cm;
     31                 background-color: green;
     32             }
     33             P.autore {
     34                 font-size:        5mm;
     35                 text-align:       right;
     36                 font-style:       italic;
     37                 color:            white;
     38             }
     39             P.inizio:first-letter {
     40                 font-size:        200%;
     41                 color:            Blue;
     42             }
     43         -->
     44     </STYLE>
     45 </HEAD>
     46 <BODY>
     47 
     48 <H1>H&auml;nsel e Gretel</H1>
     49 
     50 <P CLASS="autore">di Jacob e Wilhelm Grimm</P>
     51 
     52 <P CLASS="inizio">Davanti a un gran bosco abitava un povero taglialegna
     53 con sua moglie e i suoi due bambini; il maschietto si chiamava
     54 H&auml;nsel e la bambina Gretel. Egli aveva poco da metter sotto i
     55 denti, e quando ci fu nel paese una grande carestia, non poteva neanche
     56 pi&ugrave; procurarsi il pane tutti i giorni. [...]</P>
     57 
     58 <P>Per la fame, neppure i due bimbi potevan dormire, e avevano udito
     59 quel che la matrigna diceva al padre. Gretel piangeva amaramente, e
     60 disse a H&auml;nsel: - Adesso per noi &egrave; finita. - [...]</P>
     61 
     62 <P>[...]</P>
     63 
     64 </BODY>
     65 </HTML>

Figura 485.3. Aspetto del file colori-css-01.html.

colori-css-01.html

485.2   File «colori-css-02.html»

Si realizzi il file colori-css-02.html con un contenuto qualsiasi, sperimentando l'uso di altri colori comuni: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white e yellow.

485.3   File «sfondo-css-01.html»

Si realizzi il file sfondo-css-01.html con il contenuto seguente:

      1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      2     "http://www.w3.org/TR/html4/strict.dtd">
      3 <HTML LANG="it">
      4 <HEAD>
      5     <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
      6     <META NAME="Description" CONTENT="Sfondo">
      7     <META NAME="Keywords" CONTENT="HTML, sfondo, esempio 1">
      8     <META NAME="Author" CONTENT="Tizio Tizi, tizio@brot.dg, classe 4Z">
      9     <META NAME="Date" CONTENT="2007.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>Sfondo</TITLE>
     14     <STYLE TYPE="text/css">
     15         <!--
     16             BODY {
     17                 background-color: yellow;
     18                 background-image: 
     19                 url(http://www.gnu.org/graphics/philosophical-gnu-sm.jpg);
     20             }
     21             H1 {
     22                 font-weight:    bolder;
     23                 font-size:      2cm;
     24             }
     25             P {
     26                 font-family:    sans-serif;
     27                 font-size:      1cm;
     28             }
     29         -->
     30     </STYLE>
     31 </HEAD>
     32 <BODY>
     33 
     34 <H1>Le cose che mi piacciono</H1>
     35 
     36 <P>Ci sono due cose che mi piacciono: il software libero e gli standard
     37 liberi. Per saperne di pi&ugrave; sul software libero si pu&ograve;
     38 leggere qualcosa di utile a partire dal sito <A
     39 HREF="http://www.gnu.org">http://www.gnu.org</A>.</P>
     40 
     41 </BODY>
     42 </HTML>

Si deve ottenere sullo sfondo del documento l'immagine del «GNU filosofico», ripetuta più volte (se non si dispone di un collegamento alla rete esterna, si può usare un'immagine qualunque, modificando il riferimento in modo appropriato, per esempio così: url(philosophical-gnu-sm.jpg)).

485.4   File «sfondo-css-02.html»

Si realizzi il file sfondo-css-02.html a partire dal file sfondo-css-01.html, facendo in modo che l'immagine compaia solo sotto la superficie dei paragrafi (gli elementi P).

485.5   Verifica sull'uso delle proprietà riferite ai colori

In base a quanto appreso fino a questo punto, si realizzi il file verifica-colori-css-01.html che produca un risultato abbastanza simile a quello mostrato di seguito, quando viene visto attraverso un navigatore. Per realizzare questa verifica si può partire dal file verifica-caratteri-css-01.html già realizzato in precedenza:

verifica-caratteri-css-01.html

Lo sfondo del documento è grigio; ogni nota musicale è rappresentata con un colore diverso, con questa sequenza: nero, marrone, rosso, arancio, giallo, verde, blu.

Si completi l'intestazione, coerentemente, secondo il proprio criterio, seguendo le modalità già stabilite. Inoltre, lo stile CSS deve essere incorporato nel file HTML. Si deve consegnare per la valutazione:

  1. la stampa del risultato ottenuto attraverso il navigatore;

  2. la stampa del sorgente.

Si richiede espressamente che tutti gli elementi, a esclusione di quelli che devono essere vuoti, siano terminati correttamente con il marcatore di chiusura.

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 colore_e_sfondo.htm

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

Valid ISO-HTML!

CSS validator!