Modifica del tipo di carattere e del colore visualizzati su una pagina Web

Nota: questa pagina è relativa alla modifica del tipo, della dimensione e del colore del carattere su una pagina Web. Per Microsoft Word, vedere la nostra pagina su come modificare il colore, la dimensione o il tipo di carattere in Word.

Questo documento contiene istruzioni su come cambiare un font e il suo colore su una pagina web. La sintassi corretta in avanti consiste nell'utilizzare i fogli di stile CSS insieme ai selettori di classe o ID piuttosto che un attributo di stile in linea o un tag di carattere, che sono deprecati. Tuttavia, vale la pena notare che questi due metodi funzionano ancora con la maggior parte dei browser Internet.

Per procedere, seleziona il metodo da cui vuoi imparare o leggi ogni sezione.

Se si prevede di modificare il carattere e il colore del proprio carattere solo una volta su una pagina Web, è necessario modificarne gli attributi nel tag dell'elemento. Usando l'attributo style, puoi specificare la faccia e il colore del font con font-family, colore e la dimensione del font con dimensione font, come mostrato nell'esempio seguente.

Codice di esempio

Questo testo ha il carattere Courier, è Blue e 20px.

Risultato

Questo testo ha il carattere Courier, è blu e 20px in dimensione.

Usando i CSS per una o più pagine

Carattere personalizzato per una pagina

Nella parte superiore della pagina Web, è possibile inserire il codice tra le schede per modificare l'aspetto del testo in vari elementi. La prossima casella blu contiene un codice di esempio che, una volta chiamato, cambierebbe il carattere in Courier e lo colorerebbe in rosso. Come puoi vedere, abbiamo definito il nome della classe come "personalizzato".

 .custom {font-family: Courier; colore rosso; font-size: 20px; } 

Una volta definito, questo stile può essere applicato alla maggior parte degli elementi della pagina allegando la classe "personalizzata" a loro. La seguente casella mostra due righe di codice e i rispettivi risultati.

Esempio

Tutta questa frase è rossa e Courier

Solo la parola TEST è rossa e Courier.

Risultato

Tutta questa frase è rossa e Courier.

Solo la parola TEST è rossa e Courier.

Carattere personalizzato per molte pagine

L'importazione di un file CSS esterno può essere molto utile in quanto consente agli utenti di modificare le regole per più pagine contemporaneamente. La seguente sezione mostra un esempio per la creazione di un file CSS di base che cambia il carattere e il suo colore per la maggior parte degli elementi. Questo file può essere caricato in più di una pagina web, anche un intero sito.

Utilizzando qualsiasi editor di testo di base, il seguente testo salvato come file .css lo preparerà per l'importazione.

 @charset "utf-8";

.courier {font-family: Courier; colore: # 005CB9; }

Una volta che il testo precedente è stato inserito in un file .css (abbiamo chiamato il nostro basic.css ), puoi collegarlo ad esso da qualsiasi altra pagina usando una linea simile al seguente esempio.

Suggerimento: gli utenti possono modificare gli attributi degli elementi in una pagina modificando il codice nel file .css importato.

Soluzione di tag di caratteri

Sebbene deprecato, il tag HTML può ancora essere utilizzato e potrebbe essere necessario per l'uso con alcuni servizi online. Quando si utilizza il tag FONT, è necessario includere l'attributo face, che descrive il carattere da utilizzare. Nell'esempio seguente, utilizziamo il carattere Courier e il codice colore esadecimale # 005CB9, che è un blu scuro.

Codice di esempio

 Un esempio di carattere speciale. 

Risultato