Nuove finestre Stile e Modifica stile, Tipo di carattere

Articolo
05/09/2015

La categoria Tipo di carattere della finestra di dialogo Nuovo stile consente di definire le regole di stile CSS per i tipi di carattere del testo. È possibile applicare direttamente queste regole di stile agli elementi HTML o aggiungerle alla pagina corrente o a un foglio di stile esterno.

Per definire una regola di stile CSS per i tipi di carattere degli elementi dell'interfaccia utente nella pagina corrente

Aprire la pagina in visualizzazione Progettazione o Origine.
Facoltativamente, selezionare il testo e/o gli elementi HTML a cui applicare lo stile.
Scegliere Nuovo stile dal menu Formato.

Verrà visualizzata la finestra di dialogo Nuovo stile.
Nel riquadro Categoria selezionare Tipo di carattere.

Le selezioni dello stile di tipo di carattere vengono visualizzate nel riquadro di destra.

Quando si applicano gli stili al testo selezionato nella visualizzazione Progettazione, gli attributi di stile verranno inseriti in linea nel markup HTML della pagina. Passare alla visualizzazione Origine per verificare i nuovi attributi di stile.

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 esistente.
Inserire il cursore all'interno delle parentesi graffe della regola di stile da modificare.
Effettuare una delle seguenti operazioni.
- Fare clic con il pulsante destro del mouse sul foglio di stile nell'editor quindi scegliere dal menu di scelta rapida, scegliere Stile di compilazione.
- Nella barra degli strumenti del foglio di stile scegliere Stile di compilazione.
Verrà visualizzata la finestra di dialogo Modifica stile.
Nel riquadro di sinistra fare clic su Tipo di carattere.

Le selezioni dello stile di tipo di carattere vengono visualizzate nel riquadro di destra.

È possibile applicare una classe di stile CSS a un elemento della pagina Web o all'elemento body stesso impostando la proprietà class dell'elemento sul nome del selettore della classe.

Nelle tabelle seguenti sono elencate le opzioni disponibili nella categoria Tipo di carattere delle finestre di dialogo Nuovo stile e Modifica stile.

Opzioni dei tipi di carattere

font-family
Nome del tipo di carattere per il testo. I nomi di tipo di carattere che contengono spazi devono essere racchiusi tra virgolette, ad esempio "Times New Roman". È possibile specificare più nomi di tipo di carattere separandoli con le virgole (,). È opportuno che l'ultimo tipo di carattere dell'elenco sia generico, ad esempio "serif", "sans-serif" o "monospace".
font-size
Dimensione del tipo di carattere. Se si immette un valore, è possibile selezionarne le unità nell'elenco. È opportuno utilizzare dimensioni relative, ad esempio "small", "x-large" o una percentuale, così che gli utenti possano regolare la dimensione del tipo di carattere nel browser.
font-weight
Lo spessore del tipo di carattere, ad esempio "normal", "bold" o "400". Un valore numerico rappresenta un peso relativo da 100 a 900.
font-style
Stile o inclinazione del tipo di carattere, ad esempio "normal" o "italic". Se si seleziona "oblique", la maggior parte dei browser eseguirà il rendering del tipo di carattere come corsivo.
font-variant
Variante di stile per l'esecuzione del rendering del tipo di carattere. I valori sono i seguenti:
- normal Il rendering del tipo di carattere verrà eseguito normalmente.
- small-caps Il rendering del tipo di carattere verrà eseguito in maiuscoletto.
- inherit La variante di stile verrà ereditata dall'elemento padre.
text-transform
Valore che definisce gli effetti dell'utilizzo delle maiuscole per il testo. I valori sono i seguenti:
- capitalize La prima lettera di ogni parola è maiuscola.
- lowercase Tutte le lettere sono minuscole.
- uppercase Tutte le lettere sono maiuscole.
- none L'utilizzo delle maiuscole non viene modificato.
- inherit Lo stile di trasformazione del testo verrà ereditato dall'elemento padre.
color
Colore del tipo di carattere del testo. Per scegliere tra più colori, utilizzare la freccia in giù, oppure fare clic sull'icona quadrata a destra. Per ulteriori informazioni, vedere Finestre Altri Colori e Colore.
text-decoration
Combinazione degli attributi di testo seguenti: underline, overline, line-through e blink. Se si seleziona none, tutte le altre caselle di controllo verranno deselezionate.

Altri elementi dell'interfaccia utente

Selettore
(Solo finestra di dialogo Nuovo stile) Consente di digitare un nome di classe o fare clic su un elemento HTML a cui applicare lo stile. I nomi di classe devono iniziare con un punto (.). È anche possibile selezionare (stile in linea), così da fare in modo che lo stile sia applicato in linea al testo o agli elementi HTML selezionati.
Definisci in
(Solo finestra di dialogo Nuovo stile) Consente di specificare dove scrivere la definizione della regola di stile. I valori sono i seguenti:
- Pagina corrente La regola di stile viene scritta in un elemento style della pagina corrente.
- Nuovo foglio di stile Al progetto viene aggiunto un nuovo foglio di stile CSS e vi viene scritta la regola.
- Foglio di stile esistente La regola di stile viene aggiunta al foglio di stile CSS specificato utilizzando l'elenco URL.
URL
(Solo finestra di dialogo Nuovo stile) Consente di selezionare un foglio di stile CSS esistente. Questa opzione è abilitata solo quando Definisci in è impostato su Foglio di stile esistente.
Applica nuovo stile alla parte selezionata del documento
(Solo finestra di dialogo Nuovo stile) Specifica che lo stile viene applicato al testo, alla classe o all'elemento HTML selezionato.
Anteprima
Visualizza un esempio di come la regola di stile apparirà una volta applicata.
Descrizione
Mostra la definizione CSS della regola di stile.