Proprietà Testo-Transform in CSS

Il testo è una delle parte più significativa di qualsiasi pagina web. Ogni sito Web ha un testo in entrambi i moduli I.e. Può essere un paragrafo, titoli, ecc. Pertanto, CSS fornisce una vasta gamma di proprietà di testo per lo styling e la formattazione del testo come allineamento del testo, color text, trasformazione del testo, ecc.

Tutte queste proprietà eseguono funzionalità diverse, ad esempio, il text-align determina l'allineamento del testo i.e. Centro, a destra, a sinistra, ecc. La proprietà text-color imposta il colore del testo i.e. rosso, verde, ecc., e così via. Tuttavia, questo articolo si concentrerà sulla proprietà di Testo-Transform.

Questo articolo presenta una panoramica dettagliata della proprietà Testo-Transform insieme ad alcuni esempi.

Proprietà Testo-Transform

Una proprietà CSS più comunemente usata che determina l'aspetto del testo in termini di testo di testo i.e. se il testo sarà in minuscolo o maiuscolo. Inoltre, può anche essere usato per capitalizzare il carattere iniziale di ogni parola.

Il funzionamento dei seguenti valori sarà discusso in questo articolo con l'aiuto di esempi:

• maiuscolo: Converte tutti i caratteri del testo in maiuscolo.
• minuscolo: Converte tutti i caratteri del testo in minuscolo.
• capitalizzare: Converte il carattere iniziale di ogni parola in una lettera maiuscola.
• nessuno: Mostra il comportamento predefinito della proprietà di trasformazione di testo i.e. Il testo verrà visualizzato allo stesso modo in cui è scritto.

Come utilizzare il valore maiuscolo per la proprietà Testo-Transform

Il valore maiuscolo trasforma tutti i caratteri in maiuscolo

Esempio
In questo esempio, il testo è una miscela di lettere maiuscole e minuscole. Tuttavia, l'assegnazione del valore maiuscola alla proprietà Testo-Transform trasformerà ogni singola lettera in maiuscolo:

Html

Proprietà trasformata del testo

Questo è il primo paragrafo

Questo è il secondo paragrafo

Questo è il terzo paragrafo

CSS

Otterremo il seguente output:

Ogni lettera viene trasformata nella lettera maiuscola.

Come utilizzare il valore minuscolo per la proprietà trasformata di testo

Convertirà ogni singolo carattere del testo in minuscolo.

Esempio

Nel codice di seguito, la prima lettera di ogni parola è una lettera maiuscola, tuttavia l'assegnazione del valore minuscolo alla proprietà trasformata di testo trasformerà tutto il testo in minuscolo:

Html

Proprietà trasformata del testo

Questo è il primo paragrafo

Questo è il secondo paragrafo

Questo è il terzo paragrafo

CSS

Il codice sopra genera il seguente output:

Ogni lettera viene trasformata nella lettera minuscola.

Come utilizzare il valore in capitalizzazione per la proprietà trasformata di testo

Come suggerisce il nome stesso, ha capitalizzato la prima lettera di ogni parola. L'esempio seguente mostrerà il funzionamento di capitalizzare il valore.

Esempio

Nella sceneggiatura seguente, ogni lettera del documento è in minuscolo e il valore capitaize viene utilizzato per l'elemento H2, quindi convertirà la prima lettera di ogni parola in capitale:

Html

Proprietà trasformata del testo

Questo è il primo paragrafo

Questo è il secondo paragrafo

Questo è il terzo paragrafo

CSS

Il codice sopra genera il seguente output:

La prima lettera di ogni parola viene trasformata in lettera maiuscola.

Come utilizzare nessuno valore per la proprietà trasformata di testo

IL nessuno Il valore impedisce a tutto il testo dalla trasformazione del testo i.e. rende tutti i personaggi così com'è. L'esempio seguente ti permetterà di capire come usare "nessuno"Valore per la proprietà Testo-Transform.

Esempio

Il seguente pezzo di codice implementa la proprietà Testo-trasformata su un elemento P, H2:

Html

Proprietà trasformata del testo

Questo è il primo paragrafo

Questo è il secondo paragrafo

Questo è il terzo paragrafo

CSS

Il codice sopra non cambierebbe l'aspetto del testo:

Tutto il testo rimane invariato.

Conclusione

CSS fornisce proprietà trasformata di testo per controllare la trasformazione del testo i.e. minuscolo e maiuscolo convertono tutte le lettere rispettivamente in minuscolo e maiuscolo e il valore nessuno rende il testo nel caso predefinito. La proprietà capitalizza rende il primo carattere di ogni parola in maiuscolo.

Questo articolo spiega come utilizzare la proprietà Testo-Transform. Quali sono i valori che possono essere utilizzati per la proprietà trasformata di testo e in che modo questi valori influiscono sull'aspetto del testo?