Tipo di carattere, finestra di dialogo Generatore di stile

Articolo
09/12/2008

Aggiornamento: novembre 2007

La pagina Tipo di carattere della finestra di dialogo Generatore di stile consente di definire gli attributi dei tipi di carattere dei fogli di stile CSS. Questi attributi possono essere applicati direttamente a elementi HTML oppure aggiunti a regole di stile CSS.

Per applicare gli attributi dei tipi di carattere direttamente al testo presente negli elementi HTML della pagina

Aprire il documento HTML nella visualizzazione Progettazione della finestra di progettazione HTML e selezionare il testo da formattare.
Scegliere Stile dal menu Formato per aprire la finestra di dialogo Generatore di stile.
Selezionare Tipo di carattere nel riquadro sinistro della finestra di dialogo Generatore di stile.

Nel riquadro destro verrà visualizzata la finestra di dialogo Generatore di stile, Tipo di carattere.

Quando si applicano gli stili dei tipi di carattere al testo selezionato nella visualizzazione Progettazione, gli attributi di stile vengono inseriti inline nel markup HTML relativo alla pagina. Passare alla visualizzazione HTML per verificare i nuovi attributi di stile inseriti.

Per aggiungere gli attributi dei tipi di carattere a una regola di stile CSS definita in un foglio di stile esterno

Aprire un foglio di stile esterno e posizionare il punto di inserimento all'interno delle parentesi graffe ({ }) che seguono il selettore dello stile desiderato.
Scegliere Compila stile dal menu Stili per aprire la finestra di dialogo Generatore di stile.
Scegliere Tipo di carattere nel riquadro sinistro della finestra di dialogo Generatore di stile.

Nel riquadro destro verrà visualizzata la finestra di dialogo Generatore di stile, Tipo di carattere.

Nota:
Il menu Stili viene visualizzato quando si apre un foglio di stile CSS esterno per la modifica. L'opzione Compila stile del menu Stili diviene disponibile quando si posiziona il punto di inserimento tra le parentesi graffe che seguono il selettore di una regola di stile.

Una classe di stile CSS definita in un foglio di stile esterno può essere applicata a un elemento all'interno dell'elemento <BODY> di una pagina Web (oppure, in questo caso, allo stesso elemento <BODY>) assegnando il selettore di stile CSS come proprietà CLASS per l'elemento.

Le opzioni disponibili nella pagina Tipo di carattere della finestra di dialogo Generatore di stile comprendono:

Attività

Elementi di interfaccia

Tipo carattere

Famiglia
Viene fornito un elenco di scelte relative al tipo di carattere da utilizzare per il testo visualizzato in questo stile. Se si progettano documenti per Internet, scegliere dei tipi di caratteri disponibili alla maggior parte degli utenti. È possibile che un vasto pubblico di utenti Internet non disponga di un'ampia scelta di tipi di carattere. Se si seleziona Famiglia, è possibile scegliere il pulsante con i puntini di sospensione (...) adiacente per aprire la finestra di dialogo Selezione tipo di carattere e selezionare i tipi di carattere. Per ulteriori informazioni, vedere Finestra di dialogo Selezione tipo di carattere. Di norma, per fornire una vasta gamma di opzioni si elencano diversi tipi di carattere. È, ad esempio, possibile selezionare Verdana (un tipo di carattere del sistema Windows progettato per la visualizzazione sul Web) da Selezione tipo di carattere e quindi aggiungere manualmente Arial, Helvetica (per i browser Macintosh) e Sans-Serif (il tipo di carattere generico per utenti che non dispongono degli altri tipi elencati). Il markup dello stile CSS per FONT-FAMILY sarà quindi:

FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
Tipo di carattere del sistema
Selezionare questa opzione per applicare un tipo di carattere di sistema che l'utente ha definito sul computer su cui è visualizzata la pagina. Se, ad esempio, si seleziona Titolo finestra, il browser Web consentirà di visualizzare sulla pagina il testo formattato con questo stile utilizzando il tipo di carattere assegnato a Titolo finestra sul computer su cui viene eseguita la visualizzazione. Il tipo di carattere di Titolo finestra può essere Times su un computer e Verdana su un altro. Il markup dello stile CSS che si applica al tipo di carattere Titolo finestra è ad esempio:

FONT: caption

Attributi dei caratteri

Colore
Consente di impostare il colore del testo visualizzato nello stile. Esistono numerosi modi per specificare un colore:

Digitare il nome di un colore.
Digitare il valore di un colore RGB valido (ad esempio, #FF0000 corrisponde a rosso).
Selezionare un'opzione dall'elenco a discesa.
Scegliere il pulsante con i puntini di sospensione (...) per aprire la finestra di dialogo Selezione colori e selezionare ulteriori colori.

Se, ad esempio, si seleziona rosso, verrà inserita la seguente coppia attributo/valore CSS:

COLOR: red

Nota:
Se si seleziona un colore da Selezione colori anziché dall'elenco a discesa, in luogo del nome verrà inserito il valore del colore RGB esadecimale. Se, ad esempio, si seleziona rosso da Selezione colori, verrà inserita la seguente coppia attributo/valore CSS: COLOR: #ff0000.

Corsivo
Consente di impostare l'attributo FONT-STYLE per il testo visualizzato in questo stile. Selezionare <Non impostato> (nessuna opzione scelta), Normale (non corsivo) o Corsivo. Se, ad esempio, si seleziona Corsivo, verrà inserita la seguente coppia attributo/valore CSS:

FONT-STYLE: italic

Nota:

Quando l'attributo è <Non impostato>, non viene aggiunto codice allo stile. L'attributo Italics non può essere applicato ai tipi di carattere di sistema.
Maiuscoletto
Consente di impostare l'attributo FONT-VARIANTper il testo visualizzato in questo stile. Selezionare <Non impostato> (nessuna opzione scelta), Normale (non maiuscoletto) o Maiuscoletto. Se, ad esempio, si seleziona Maiuscoletto, verrà inserito il seguente markup CSS:

FONT-VARIANT: small-caps

Nota:

L'attributo Small Caps non può essere applicato ai tipi di carattere di sistema. Quando l'attributo è <Non impostato>, non viene aggiunto codice allo stile.

Nota:
Quando l'attributo è <Non impostato>, non viene aggiunto codice allo stile. L'attributo Italics non può essere applicato ai tipi di carattere di sistema.

Nota:
L'attributo Small Caps non può essere applicato ai tipi di carattere di sistema. Quando l'attributo è <Non impostato>, non viene aggiunto codice allo stile.

Dimensione

Questa opzione consente di impostare la dimensione del tipo di carattere dello stile utilizzando uno dei tre attributi Specific, Absolute o Relative.

Nota:
Quando l'attributo è <Non impostato>, non viene aggiunto codice allo stile. L'attributo Size non può essere applicato ai tipi di carattere di sistema.

Specifica
Consente di impostare una dimensione specifica per il tipo di carattere. Nell'elenco a discesa adiacente sono visualizzate le opzioni di unità, ovvero px, pt (impostazione predefinita), pc, mm, cm, in, em, ex e %. Se, ad esempio, si digita 20 e si accetta il valore di unità predefinito, verrà inserito il seguente markup CSS:

FONT-SIZE: 20pt

Nota:
Quando l'attributo è <Non impostato>, non viene aggiunto codice allo stile. Evitare di utilizzare misurazioni in pixel (px), poiché il testo formattato in pixel viene stampato con una dimensione molto più piccola rispetto a quella visualizzata.

Assoluto
Consente di impostare una dimensione assoluta per il tipo di carattere, che viene scelto da un elenco di opzioni. Selezionare <Non impostato> (nessun valore specificato), Piccolissimo, Molto piccolo, Piccolo, Medio, Grande, Molto grande o Grandissimo. Se, ad esempio, si sceglie Molto piccolo, verrà inserito il seguente markup CSS:

FONT-SIZE: x-small

Nota:

Quando l'attributo è <Non impostato>, non viene aggiunto codice allo stile.
Relativo
Consente di impostare una dimensione relativa per il tipo di carattere, che è possibile scegliere da un elenco di opzioni. La dimensione è relativa all'elemento padre nello stile CSS. Se il testo dell'elemento <BODY> corrisponde a 8 pt., ad esempio, e al testo contenuto in un elemento <SPAN> presente nell'elemento <BODY> viene applicato lo stile Più piccolo, il testo di <SPAN> presenterà dimensioni inferiori a 8 pt. Selezionare <Non impostato> (nessun valore specificato), Più piccolo o Più grande. Se, ad esempio, si sceglie Più grande, verrà inserito il seguente markup CSS:

FONT-SIZE: larger

Nota:

Quando l'attributo è <Non impostato>, non viene aggiunto codice allo stile.

Effetti

Questa opzione consente di impostare gli effetti predefiniti per lo stile. Sono disponibili le seguenti caselle di controllo: Nessuno (nessun effetto), Sottolineato, Barrato e Linea sopra.

Se si seleziona Nessuno, non sarà disponibile alcun effetto. Se non è selezionata l'opzione Nessuno, è possibile scegliere qualsiasi combinazione degli effetti restanti. Se, ad esempio, si scelgono Sottolineato e Barrato, verrà inserito il seguente markup CSS:

TEXT-DECORATION: underline line-through

Grassetto

Questa opzione consente di impostare l'attributo FONT-WEIGHT in base ai valori assoluto o relativo.

Assoluto
Consente di impostare l'attributo assoluto all'attributo grassetto associato al tipo di carattere. Selezionare <Non impostato> (nessuna opzione scelta), Normale (non grassetto) o Grassetto. Se, ad esempio, si sceglie Grassetto, verrà inserito il seguente markup CSS:

FONT-WEIGHT: bold

Nota:

Gli attributi Absolute Bold e Relative Bold non possono essere applicati ai tipi di carattere di sistema.
Relativo
Consente di impostare l'attributo relativo per lo stile a un attributo grassetto che è più o meno grassetto rispetto al valore predefinito per il tipo di carattere. Selezionare <Non impostato> (nessuna opzione scelta), Sottile (meno grassetto rispetto al valore predefinito) o Spesso (più grassetto rispetto al valore predefinito). Poiché gli attributi Lighter e Bolder sono relativi a singoli tipi di carattere, l'intensità del grassetto varia in base al tipo di carattere a cui viene applicato. Se, ad esempio, si sceglie Spesso, verrà inserito il seguente markup CSS:

FONT-WEIGHT: bolder

Nota:
Gli attributi Absolute Bold e Relative Bold non possono essere applicati ai tipi di carattere di sistema.

Maiuscole/Minuscole

Consente di impostare l'attributo TEXT-TRANSFORM per lo stile. Selezionare <Non impostato> (nessuna opzione scelta), Nessuno (le maiuscole/minuscole sono come quelle digitate), Iniziale maiuscola, minuscole o MAIUSCOLE. Se, ad esempio, si sceglie MAIUSCOLE, verrà aggiunto il seguente codice:

TEXT-TRANSFORM: uppercase