CSS Text (Testo)

Le proprietà di testo CSS ti permettono di definire facilmente diversi stili di testo, come colore, allineamento, spaziatura, decorazione, trasformazioni, ecc.

Formattazione del testo CSS

CSS ha diverse proprietà per definire lo stile del testo. Queste proprietà ti permettono di controllare con precisioneCarattere，Spazio，Parola，Paragrafoe l'aspetto visivo.

Puoi impostare le seguenti proprietà di testo dell'elemento:

Colore del testo

Il colore del testo è definito dal CSS colorDefinizione dell'attributo.Scopri di più su color.

h1　{
　　　　color: #ff0000;
}
p　{
　　　　color: verde;
}

Allineamento del testo

Questotext-alignLa proprietà viene utilizzata per impostare il modo di allineamento orizzontale del testo.

I valori possibili di questa proprietà sono: sinistra, destra, centro, justify e inherit.

h1　{
　　　　text-align: centro;
}
p　{
　　　　text-align:　justify;
}

Modifica del testo

Questotext-decorationQuesta proprietà viene utilizzata per impostare o rimuovere la decorazione del testo.

I valori possibili di questa proprietà sono: none, underline, overline, line-through, blink e inherit. È consigliabile evitare di utilizzare sottolineature nei testi non collegati, altrimenti potrebbe confondere l'utente.

h1　{
　　　　text-decoration:　overline;
}
h2　{
　　　　text-decoration:　line-through;
}
h3　{
　　　　text-decoration:　underline;
}

Rimuovere la sottolineatura predefinita dei link

L'attributo text-decoration viene utilizzato generalmente per rimuovere la sottolineatura predefinita dei collegamenti ipertestuali. Rimuovere completamente la sottolineatura potrebbe confondere l'utente. A meno che non si forniscono altri suggerimenti visivi per farlo risaltare, e si progetta lo stile del link.

Ad esempio, è possibile utilizzare punti invece di linee continue per le sottolineature dei link.

a　{
　　　　text-decoration:　none;
　　　　border-bottom:　1px　dotted;
}

Conversione del testo

L'attributo text-transform viene utilizzato per impostare la forma delle lettere del testo.

Può essere utilizzato per impostare il contenuto del testo dell'elemento in maiuscolo o minuscolo, o per impostare la prima lettera di ogni parola in maiuscolo. I valori possibili dell'attributo text-transform sono: none, capitalize, uppercase, lowercase e inherit.

p.up　{
　　　　text-transform:　uppercase;
}
p.cap　{
　　　　text-transform:　capitalize;
}
p.low　{
　　　　text-transform:　lowercase;
}

Rientro del testo

L'attributo text-indent viene utilizzato per impostare il rientro della prima riga di testo dell'elemento. I valori possibili dell'attributo text-indent sono:Percentuale（%），Lunghezzaoppure inherit.

Esempio seguente che mostra come rientrare la prima riga del paragrafo.

p　{
　　　　text-indent:　100px;
}

Spaziatura tra le parole

La proprietà word-spacing viene utilizzata per impostare lo spazio tra le parole.

• La spaziatura tra le lettere può essere influenzata dal modo di allineamento del testo. Vederetext-alignProprietà.

• Quando si conservano gli spazi bianchi, tutti i caratteri di spazio sono influenzati dallo spazio tra le parole. Vedi CSS white-spaceProprietà.

I valori possibili dell'attributo word-spacing sono:length（specificare lo spazio tra le parole da inserire）normal e inherit.

p.one　{
　　　　word-spacing:　20px;
}
p.two　{
　　　　word-spacing:　20px;
　　　　text-align:　justify;
}
p.three　{
　　　　word-spacing:　20px;
　　　　white-space:　pre;
}

Spaziatura dei caratteri

Questoletter-spacingL'attributo viene utilizzato per impostare lo spazio aggiuntivo tra i caratteri di testo.

I valori possibili di questa proprietà sono:length（specificare lo spazio tra i caratteri di default normal e lo spazio aggiuntivo tra i caratteri da inserire）e inherit.

h1　{
　　　　letter-spacing:　-3px;
}
p　{
　　　　letter-spacing:　10px;
}

Spaziatura delle righe

Questoline-heightL'attributo definisce l'altezza di una riga di testo (noto anche comeLead）。

I valori possibili di questa proprietà sono:Percentuale（%），Lunghezza，Quantità，normal e inherit.

p　{
　　　　line-height:　1.2;
}

Quando il valore è numerico, calcola l'altezza della riga moltiplicando la dimensione del font dell'elemento per il numero. I valori percentuali sono relativi alla dimensione del font dell'elemento.

Se il valore dell'attributo line-height è maggiore difont-sizeSe il valore dell'elemento è diverso da quello dell'elemento, questa differenza (chiamata“Lider”）è tagliato a metà (chiamato“Pre-lider”），e distribuiti uniformemente nella parte superiore e inferiore del riquadro di riga in 'in'.

p　{
　　　　font-size:　14px;
　　　　line-height:　20px;
　　　　background-color:　#f0e68c;
}

Per ulteriori informazioni sul formato del testo, vedereCaratteriETesto relativoProprietà.