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

Capitolo 322.   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 322.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

npt

Dimensione in punti.

ncm

Dimensione in centimetri.

nmm

Dimensione in millimetri.

nem

Dimensione relativa in quadratoni.

nex

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 322.1. Confronto visivo tra le famiglie generiche.

esempio di tabella

322.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="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>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 322.2. Aspetto del file caratteri-css-01.html.

caratteri-css-01.html

322.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.

322.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:

  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 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 controllo_del_carattere.html

[successivo] [precedente] [inizio] [fine] [indice generale] [violazione licenza] [translators] [docinfo] [indice analitico]

Valid ISO-HTML!