La proprietà Font CSS viene utilizzata per controllare l'aspetto dei testi. Utilizzando la proprietà del carattere CSS è possibile modificare la dimensione, il colore, lo stile del testo e altro. Hai già studiato come rendere il testo in grassetto o sottolineato. Qui saprai anche come ridimensionare il tuo carattere utilizzando la percentuale.
Questi sono alcuni attributi importanti dei caratteri:
1) Colore carattere CSS
Il colore dei caratteri CSS è un attributo autonomo nei CSS anche se sembra che faccia parte dei caratteri CSS. Viene utilizzato per modificare il colore del testo.
Esistono tre diversi formati per definire un colore:
- Con un nome di colore
- Per valore esadecimale
- Tramite RGB
Nell'esempio sopra, abbiamo definito tutti questi formati.
interruttore C#
body { font-size: 100%; } h1 { color: red; } h2 { color: #9000A1; } p { color:rgb(0, 220, 98); } } <h2>This heading is shown in serif.</h2> <p>This paragraph is written in monospace.</p> Provalo adesso Produzione:
<h2>This heading is shown in sans-serif.</h2> <h3>This heading is shown in serif.</h3> <p>This paragraph is written in monospace.</p>
3) Dimensione carattere CSS
La proprietà dimensione carattere CSS viene utilizzata per modificare la dimensione del carattere.
Questi sono i possibili valori che possono essere utilizzati per impostare la dimensione del carattere:
| Valore dimensione carattere | Descrizione |
|---|---|
| xx-piccolo | utilizzato per visualizzare dimensioni del testo estremamente ridotte. |
| x-piccolo | utilizzato per visualizzare la dimensione del testo extra piccola. |
| piccolo | utilizzato per visualizzare testo di piccole dimensioni. |
| medio | utilizzato per visualizzare dimensioni medie del testo. |
| grande | utilizzato per visualizzare testo di grandi dimensioni. |
| x-grande | utilizzato per visualizzare dimensioni di testo molto grandi. |
| xx-grande | utilizzato per visualizzare dimensioni del testo estremamente grandi. |
| più piccola | utilizzato per visualizzare dimensioni del testo relativamente più piccole. |
| più grandi | utilizzato per visualizzare dimensioni del testo comparativamente più grandi. |
| dimensione in pixel o % | utilizzato per impostare il valore in percentuale o in pixel. |
Practice CSS font-size property <p> This font size is extremely small.</p> <p> This font size is extra small</p> <p> This font size is small</p> <p> This font size is medium. </p> <p> This font size is large. </p> <p> This font size is extra large. </p> <p> This font size is extremely large. </p> <p> This font size is smaller. </p> <p> This font size is larger. </p> <p> This font size is set on 200%. </p> <p> This font size is 20 pixels. </p>Provalo adesso
Produzione:
Questa dimensione del carattere è estremamente piccola.
Questa dimensione del carattere è molto piccola
Questa dimensione del carattere è piccola
Questa dimensione del carattere è media.
Questa dimensione del carattere è grande.
Questa dimensione del carattere è molto grande.
stringhe a numeri interi
Questa dimensione del carattere è estremamente grande.
Questa dimensione del carattere è più piccola.
Questa dimensione del carattere è maggiore.
Questa dimensione del carattere è impostata sul 200%.
La dimensione del carattere è di 20 pixel.
4) Stile carattere CSS
La proprietà Stile carattere CSS definisce il tipo di carattere che desideri visualizzare. Può essere corsivo, obliquo o normale.
body { font-size: 100%; } h2 { font-style: italic; } h3 { font-style: oblique; } h4 { font-style: normal; } } <h2>This heading is shown in italic font.</h2> <h3>This heading is shown in oblique font.</h3> <h4>This heading is shown in normal font.</h4> Provalo adesso Produzione:
<h2>This heading is shown in italic font.</h2> <h3>This heading is shown in oblique font.</h3> <h4>This heading is shown in normal font.</h4>
5) Variante del carattere CSS
La proprietà della variante del carattere CSS specifica come impostare la variante del carattere di un elemento. Potrebbe essere normale e in maiuscoletto.
mappa reactjs
p { font-variant: small-caps; } h3 { font-variant: normal; } <h3>This heading is shown in normal font.</h3> <p>This paragraph is shown in small font.</p> Provalo adesso Produzione:
<h3>This heading is shown in normal font.</h3> <p>This paragraph is shown in small font.</p>
6) Peso dei caratteri CSS
La proprietà peso del carattere CSS definisce il peso del carattere e specifica quanto è grassetto un carattere. I possibili valori di spessore del carattere possono essere normale, grassetto, più chiaro, più chiaro o numerico (100, 200..... fino a 900).
Questo carattere è in grassetto.
Questo carattere è più audace.
Questo carattere è più leggero.
Questo carattere ha un peso di 100.
Questo carattere ha un peso di 200.
Questo carattere ha un peso di 300.
Questo carattere ha un peso di 400.
Questo carattere ha un peso di 500.
Questo carattere ha un peso di 600.
Questo carattere ha un peso di 700.
Questo carattere ha un peso di 800.
Questo carattere ha un peso di 900.
Provalo adessoProduzione:
Questo carattere è in grassetto.
conversione della stringa in int java
Questo carattere è più audace.
Questo carattere è più leggero.
Questo carattere ha un peso di 100.
Questo carattere ha un peso di 200.
Questo carattere ha un peso di 300.
Questo carattere ha un peso di 400.
Questo carattere ha un peso di 500.
Questo carattere ha un peso di 600.
Questo carattere ha un peso di 700.
Questo carattere ha un peso di 800.
connessione java mysql
Questo carattere ha un peso di 900.