Tecnologia Digitale

Come modificare il tipo, la dimensione e il colore del carattere in una pagina web

By Vezio Leotta

Come modificare il tipo, la dimensione e il colore del carattere in una pagina web

Come modificare il tipo, la dimensione e il colore del carattere in una pagina web

Questa pagina contiene istruzioni su come modificare un carattere e il suo colore in una pagina web. Con l’introduzione di HTML5, il modo corretto per configurare i caratteri delle pagine Web è utilizzare i fogli di stile a cascata. Il vecchio metodo, che prevedeva l’utilizzo di un attributo di stile in linea o di un tag di carattere, è deprecato e non dovrebbe più essere utilizzato.

Nota

Sebbene i metodi deprecati possano ancora essere visualizzati correttamente nei moderni browser Internet, non è più garantito che lo facciano. Per creare pagine web che vengano visualizzate correttamente per il numero massimo di utenti, utilizzare i metodi CSS descritti in questa pagina.

Consiglio

I metodi per modificare gli attributi dei caratteri in questa pagina funzionano per il testo contenuto nella maggior parte dei tag HTML, inclusi

,

e . Questi metodi funzionano anche per il testo in una tabella, utilizzando i tag

,

e

.

Utilizzo di CSS per una singola applicazione

Se hai intenzione di cambiare il tipo di carattere e il suo colore per una parola, frase o paragrafo su una pagina web, configura i suoi attributi nel tag dell’elemento. Usando l’attributo style, puoi specificare la faccia e il colore del carattere con la famiglia del carattere, il colore e la dimensione del carattere con la dimensione del carattere, come mostrato nell’esempio seguente.

Codice di esempio

<p style="font-family:Courier; color:Blue; font-size: 20px;">This text has the font Courier, is Blue, and 20px.</p>

Risultato

Questo testo ha il carattere Courier, è blu e ha una dimensione di 20 pixel.

Utilizzo dei CSS per una o più pagine

Carattere personalizzato per una pagina

Nella parte principale della tua pagina web, puoi inserire del codice tra le schede

per modificare l’aspetto del tuo testo in vari elementi. La successiva casella blu contiene un codice di esempio che, una volta chiamato, cambierà il tuo carattere in Courier e lo colorerà di rosso. Come puoi vedere, abbiamo definito il nome della classe come “personalizzato”.

<style type="text/css">
.custom {
 font-family: Courier;
 color: red;
 font-size:20px;
}
</style>

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

Esempio

<p class="custom">This whole sentence is red and Courier</p>
<p>Only the word <span class="custom">test</span> is red and Courier.</p>

Risultato

Tutta questa frase è rossa e Corriere.

Solo la parola test è rosso e Corriere.

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 sezione seguente mostra un esempio per la creazione di un file CSS di base che cambia il carattere e il colore per la maggior parte degli elementi. Questo file può essere caricato in più di una pagina web, anche in un intero sito.

Utilizzando qualsiasi editor di testo di base, il salvataggio del testo seguente come file .css lo preparerà per l’importazione.

@charset "utf-8";
.courier {
 font-family: Courier;
 color: #005CB9;
}

Una volta che il testo precedente è stato inserito in un file .css (abbiamo chiamato il nostro basic.css), puoi collegarti ad esso da qualsiasi altra pagina utilizzando una riga simile all’esempio seguente.

<link rel="stylesheet" Type="text/css" href="http://www.example.com/basic.css">
Consiglio

Gli utenti possono modificare gli attributi degli elementi su una pagina modificando il codice nel file .css importato.

Usando il tag del carattere

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

Codice di esempio

<font color="#005CB9" face="courier" size="5">A special font example.</font>

Risultato

Un esempio di carattere speciale.

Articoli correlati

Ultimi articoli

Forniamo notizie di oggi e conoscenze utili in vari campi.

Contattaci: khaobanmuang@gmail.com