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

Capitolo 484. Controllo del carattere

Il carattere tipografico può essere controllato con una serie di proprietà CSS; in particolare possono essere utili quelle che appaiono nella tabella successiva.

Tabella 484.1. Proprietà riferite ai caratteri.

Proprietà	Valori	Descrizione
font-family	`nome`	Carattere tipografico indicato per nome.
	serif	Carattere con grazie.
	sans-serif	Carattere senza grazie.
	monospace	Dattilografico.
font-style	normal	Forma normale.
	italic	Corsivo.
	oblique	Obliquo.
font-variant	normal	Serie normale.
	small-caps	Maiuscoletto.
font-weight	normal	Tono normale.
	bold	Nero.
	bolder	Nerissimo.
	lighter	Chiaro.
font-size	`n`pt	Dimensione in punti.
	`n`cm	Dimensione in centimetri.
	`n`mm	Dimensione in millimetri.
	`n`em	Dimensione relativa in quadratoni.
	`n`ex	Dimensione relativa in Ex.
	`n`%	Dimensione relativa percentuale.
	small	Carattere piccolo.
	medium	Carattere normale.
	large	Carattere grande.

Alla proprietà font-family può essere attribuito il nome di una famiglia di caratteri, oppure il nome di una «famiglia generica», che in pratica identifica uno stile del carattere senza indicare esattamente quale tipo di carattere (nella tabella appaiono solo nomi di famiglie generiche). Una famiglia di caratteri potrebbe essere times, mentre una famiglia generica potrebbe essere serif, ovvero un carattere munito di grazie. Alla proprietà font-family possono essere abbinati più tipi di caratteri, separati da una virgola, per indicare una sequenza alternativa da utilizzare in mancanza di quello preferito:

BODY { font-family: gill, helvetica, sans-serif }

L'esempio mostra proprio questo: prima si tenta di utilizzare il carattere gill; quindi si prova con helvetica; infine ci si accontenta di un carattere senza grazie, sans-serif.

Figura 484.3. Confronto visivo tra le famiglie generiche.

esempio di tabella

484.1 File «caratteri-css-01.html»

Si realizzi il file caratteri-css-01.html partendo dal file linguaggio-css-01.html, già realizzato in precedenza, modificando la dichiarazione dello stile come si vede nel testo 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="Carattere tipografico,
      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             H1 {
     17                 font-family:    serif;
     18                 font-style:     normal;
     19                 font-variant:   normal;
     20                 font-weight:    bolder;
     21                 font-size:      2cm;
     22             }
     23             P {
     24                 font-family:    sans-serif;
     25                 font-style:     italic;
     26                 font-variant:   normal;
     27                 font-weight:    lighter;
     28                 font-size:      1cm;
     29             }
     30             P.autore {
     31                 font-size:        5mm;
     32                 text-align:       right;
     33                 font-style:       italic;
     34             }
     35             P.inizio:first-letter {
     36                 font-size:        200%;
     37                 color:            Blue;
     38             }
     39         -->
     40     </STYLE>
     41 </HEAD>
     42 <BODY>
     43 
     44 <H1>H&auml;nsel e Gretel</H1>
     45 
     46 <P CLASS="autore">di Jacob e Wilhelm Grimm</P>
     47 
     48 <P CLASS="inizio">Davanti a un gran bosco abitava un povero taglialegna
     49 con sua moglie e i suoi due bambini; il maschietto si chiamava
     50 H&auml;nsel e la bambina Gretel. Egli aveva poco da metter sotto i
     51 denti, e quando ci fu nel paese una grande carestia, non poteva neanche
     52 pi&ugrave; procurarsi il pane tutti i giorni. [...]</P>
     53 
     54 <P>Per la fame, neppure i due bimbi potevan dormire, e avevano udito
     55 quel che la matrigna diceva al padre. Gretel piangeva amaramente, e
     56 disse a H&auml;nsel: - Adesso per noi &egrave; finita. - [...]</P>
     57 
     58 <P>[...]</P>
     59 
     60 </BODY>
     61 </HTML>

Figura 484.5. Aspetto del file caratteri-css-01.html.

caratteri-css-01.html

484.2 File «caratteri-css-02.html»

Si realizzi il file caratteri-css-02.html, con qualsiasi contenuto, sperimentando anche altre proprietà descritte nel capitolo a proposito del carattere tipografico.

484.3 Verifica sull'uso delle proprietà riferite ai caratteri

In base a quanto appreso fino a questo punto, si realizzi il file verifica-caratteri-css-01.html che produca un risultato abbastanza simile a quello mostrato di seguito, quando viene visto attraverso un navigatore. In questa verifica va usato in modo appropriato l'elemento SPAN:

verifica-caratteri-css-01.html

Le sillabe della prima riga e le lettere della seconda, rappresentano le sette note musicali, scritte secondo la notazione italiana e la notazione inglese. Ogni nota (sillaba o lettera) è scritta con un rapporto di circa il 150 % rispetto alla precedente, inoltre sono stati usati gli evidenziamenti seguenti:

Nota (sillaba o lettera)	Carattere
do	Carattere con grazie, normale.
re	Carattere con grazie, corsivo.
mi	Carattere senza grazie, normale.
fa	Carattere senza grazie, corsivo.
sol	Carattere dattilografico, normale.
la	Carattere dattilografico, corsivo
si	Carattere con grazie, maiuscoletto.
c	Carattere con grazie, normale, nero.
d	Carattere con grazie, corsivo, nero.
e	Carattere senza grazie, normale, nero.
f	Carattere senza grazie, corsivo, nero.
g	Carattere dattilografico, normale, nero.
a	Carattere dattilografico, corsivo, nero.
b	Carattere con grazie, maiuscoletto, nero.

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:

la stampa del risultato ottenuto attraverso il navigatore;
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.

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

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