Articles
Introduzione al CSS
Proprietà CSS relative al testo

Proprietà CSS relative al testo

Questo articolo spiega le proprietà CSS relative al testo.

Puoi imparare l'uso e come scrivere le proprietà text-align, text-decoration e text-transform.

YouTube Video

Creazione di HTML per l'anteprima

css-text.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>Text-Related CSS Properties</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-text.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>Text-Related CSS Properties</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Typography (Text-Related)</h2>
20        </header>
21        <article>
22            <h3>text-align</h3>
23            <section>
24                <header><h4>text-align: left</h4></header>
25                <section class="sample-view">
26                    <p class="text-align-left">This is left-aligned text.</p>
27                </section>
28                <header><h4>text-align: center</h4></header>
29                <section class="sample-view">
30                    <p class="text-align-center">This is center-aligned text.</p>
31                </section>
32                <header><h4>text-align: right</h4></header>
33                <section class="sample-view">
34                    <p class="text-align-right">This is right-aligned text.</p>
35                </section>
36                <header><h4>text-align: justify</h4></header>
37                <section class="sample-view">
38                    <p class="text-align-justify">This is justified text, meaning it will be spaced so that the left and right edges are aligned evenly.</p>
39                </section>
40            </section>
41        </article>
42        <article>
43            <h3>text-decoration</h3>
44            <section>
45                <header><h4>text-decoration: underline</h4></header>
46                <section class="sample-view">
47                    <p class="text-decoration-underline">This text has an underline.</p>
48                </section>
49                <header><h4>text-decoration: overline</h4></header>
50                <section class="sample-view">
51                    <p class="text-decoration-overline">This text has an overline.</p>
52                </section>
53                <header><h4>text-decoration: line-through</h4></header>
54                <section class="sample-view">
55                    <p class="text-decoration-line-through">This text has a line-through.</p>
56                </section>
57                <header><h4>text-decoration: underline; text-decoration-color: red; text-decoration-style: wavy; text-decoration-thickness: 2px;</h4></header>
58                <section class="sample-view">
59                    <p class="text-decoration-custom-underline">This text has a custom underline (color and style).</p>
60                </section>
61            </section>
62        </article>
63        <article>
64            <h3>text-transform</h3>
65            <section>
66                <header><h4>text-transform: none</h4></header>
67                <section class="sample-view">
68                    <p class="text-transform-none">This is no transformation applied.</p>
69                </section>
70                <header><h4>text-transform: capitalize</h4></header>
71                <section class="sample-view">
72                    <p class="text-transform-capitalize">this is a sentence in lowercase but will be capitalized.</p>
73                </section>
74                <header><h4>text-transform: uppercase</h4></header>
75                <section class="sample-view">
76                    <p class="text-transform-uppercase">This text will be transformed to uppercase.</p>
77                </section>
78                <header><h4>text-transform: lowercase</h4></header>
79                <section class="sample-view">
80                    <p class="text-transform-lowercase">THIS TEXT WILL BE TRANSFORMED TO LOWERCASE.</p>
81                </section>
82            </section>
83        </article>
84    </main>
85</body>
86</html>

Tipografia (Relativa al testo)

Proprietà text-align 

 1/* Text align examples */
 2.text-align-left {
 3    text-align: left; /* Align text to the left */
 4}
 5
 6.text-align-center {
 7    text-align: center; /* Center align text */
 8}
 9
10.text-align-right {
11    text-align: right; /* Align text to the right */
12}
13
14.text-align-justify {
15    text-align: justify; /* Justify text (aligns text to both left and right edges) */
16}

text-align è una proprietà in CSS utilizzata per specificare l'allineamento orizzontale del testo e degli elementi inline. Viene tipicamente utilizzata per allineare paragrafi o titoli a sinistra, a destra o al centro. Svolge un ruolo importante nel layout delle pagine web e nella formattazione del testo.

Valori principali per text-align

left (allineato a sinistra) 
1p {
2    text-align: left;
3}
  • left allinea il testo a sinistra (questo è il metodo di allineamento predefinito per molte lingue).
right (allineato a destra) 
1p {
2    text-align: right;
3}
  • right allinea il testo a destra. È particolarmente efficace per le lingue scritte da destra a sinistra, come l’arabo e l’ebraico.
center (allineato al centro) 
1p {
2    text-align: center;
3}
  • center allinea il testo al centro. È spesso utilizzato per titoli e intestazioni.
justify (giustificato) 
1p {
2    text-align: justify;
3}
  • justify allinea i margini sinistro e destro delle righe in modo uniforme, dando un'impressione di ordine. Viene utilizzato nei layout come quelli dei giornali e delle riviste.
start (allineato all'inizio) 
1p {
2    text-align: start;
3}
  • start allinea il testo in base alla posizione iniziale. Per le lingue scritte da sinistra a destra, si comporta come l'allineamento a sinistra.
end (allineato alla fine) 
1p {
2    text-align: end;
3}
  • end allinea il testo in base alla posizione finale. Per le lingue scritte da sinistra a destra, si comporta come l'allineamento a destra.

Utilizzo di text-align ed esempi

Titolo utilizzando l'allineamento al centro
  • L'allineamento al centro è spesso utilizzato per i titoli di pagine web e documenti. Ha un aspetto gradevole e produce un design visivamente bilanciato.
Allineamento a sinistra o a destra per i paragrafi
  • I paragrafi di testo sono solitamente allineati a sinistra per impostazione predefinita, ma l'allineamento a destra o al centro può essere utilizzato per design specifici.
Giustificare il testo uniformemente
  • Con l'uso di justify, ogni riga di testo viene allineata uniformemente sia al margine sinistro che a quello destro. È utile per layout in stile giornale o rivista.

Riepilogo

  • text-align è una proprietà CSS utilizzata per allineare orizzontalmente il testo o gli elementi in linea.
  • Può gestire vari layout come l'allineamento a sinistra, a destra, al centro e la giustificazione.
  • Scegliere l'allineamento appropriato in base al layout e agli obiettivi di design è fondamentale per ottenere un design leggibile e gradevole.

Utilizziamo efficacemente l'allineamento del testo come parte del tuo design con text-align.

La proprietà text-decoration 

 1/* Text decoration examples */
 2.text-decoration-underline {
 3    text-decoration: underline;
 4}
 5
 6.text-decoration-overline {
 7    text-decoration: overline;
 8}
 9
10.text-decoration-line-through {
11    text-decoration: line-through;
12}
13
14.text-decoration-custom-underline {
15    text-decoration: underline;
16    text-decoration-color: red;
17    text-decoration-style: wavy;
18    text-decoration-thickness: 2px;
19}

text-decoration è una proprietà CSS usata per applicare sottolineature, linee sopra al testo, barrature o linee personalizzate stilizzate al testo. Usando questa proprietà, puoi rendere lo stile del testo più decorativo o visivamente enfatizzato.

Spiegazione:

  • La classe text-decoration-underline visualizza una sottolineatura sul testo.
  • La classe text-decoration-overline traccia una linea sopra il testo.
  • La classe text-decoration-line-through applica una barratura al testo.
  • La classe text-decoration-custom-underline è un esempio di personalizzazione del colore, dello stile e dello spessore della sottolineatura.

Valori chiave di text-decoration

none 
1p {
2    text-decoration: none;
3}
  • Specificare none rimuoverà tutte le decorazioni dal testo. Usata quando vuoi rimuovere la sottolineatura dai link, ad esempio.
underline 
1p {
2    text-decoration: underline;
3}
  • Specificare underline traccerà una sottolineatura sotto il testo. Può essere usato per i link o per le parti che desideri enfatizzare.
overline 
1p {
2    text-decoration: overline;
3}
  • Specificare overline traccerà una linea sopra il testo. Usata per modificare l'aspetto o per decorazioni speciali.
line-through 
1p {
2    text-decoration: line-through;
3}
  • Specificare line-through disegnerà una barratura attraverso il testo. Viene utilizzato per indicare correzioni.
blink（点滅）
  • blink è un valore che fa lampeggiare il testo, ma non viene più utilizzato poiché non è più supportato dalla maggior parte dei browser.

Impostazioni avanzate di text-decoration

text-decoration consente impostazioni dettagliate come segue:

text-decoration-color 
1p {
2    text-decoration: underline;
3    text-decoration-color: red;
4}
  • La proprietà text-decoration-color ti permette di specificare il colore delle sottolineature o delle barrature. Di default, corrisponde al colore del testo, ma puoi aggiungere un accento visivo scegliendo un colore diverso.
text-decoration-style 
 1p.dshed {
 2    text-decoration: underline;
 3    text-decoration-style: solid;
 4}
 5p.double {
 6    text-decoration: underline;
 7    text-decoration-style: double;
 8}
 9p.dotted {
10    text-decoration: underline;
11    text-decoration-style: dotted;
12}
13p.dashed {
14    text-decoration: underline;
15    text-decoration-style: dashed;
16}
17p.wavy {
18    text-decoration: underline;
19    text-decoration-style: wavy;
20}
  • La proprietà text-decoration-style ti permette di specificare lo stile delle linee decorative. I valori includono i seguenti:.
    • solid (Predefinito, linea continua)
    • double (linea doppia)
    • dotted (linea tratteggiata)
    • dashed (linea a tratteggio)
    • wavy (linea ondulata)
**text-decoration-thickness 
1p {
2    text-decoration: underline;
3    text-decoration-thickness: 2px;
4}
  • La proprietà text-decoration-thickness ti permette di specificare lo spessore delle linee decorative. Puoi regolarlo utilizzando unità come 2px o 0.1em, ad esempio.

Riepilogo:

  • text-decoration è una proprietà per aggiungere linee decorative al testo, come sottolineature o barrature.
  • Con text-decoration-color, text-decoration-style e text-decoration-thickness, è possibile una personalizzazione più dettagliata.
  • Viene frequentemente utilizzata per enfatizzare link o testo importante, o come elemento di design.

Usando text-decoration, puoi aggiungere accenti sottili o enfasi al testo.

Proprietà text-transform 

 1/* Text transform examples */
 2.text-transform-none {
 3    text-transform: none;
 4}
 5
 6.text-transform-capitalize {
 7    text-transform: capitalize;
 8}
 9
10.text-transform-uppercase {
11    text-transform: uppercase;
12}
13
14.text-transform-lowercase {
15    text-transform: lowercase;
16}

text-transform è una proprietà CSS per trasformare il maiuscolo o minuscolo del testo. Questa proprietà consente di controllare il formato di visualizzazione del testo specificato in HTML, convertendo automaticamente il caso del testo inserito dall'utente o già esistente.

Spiegazione:

  • La classe text-transform-none visualizza il testo senza modificarlo rispetto all'originale.
  • La classe text-transform-capitalize converte la prima lettera di ogni parola in maiuscolo.
  • La classe text-transform-uppercase converte l'intero testo in maiuscolo.
  • La classe text-transform-lowercase converte l'intero testo in minuscolo.

Valori principali di text-transform

none 
1p {
2    text-transform: none;
3}
  • Specificando none il testo rimane invariato.
capitalize 
1/* "this is a sentence" -> "This Is A Sentence" */
2p {
3    text-transform: capitalize;
4}
  • Specificando capitalize viene convertita in maiuscolo la prima lettera di ogni parola. I confini delle parole sono riconosciuti attraverso spazi o punteggiatura.
uppercase 
1/* "hello world" -> "HELLO WORLD" */
2p {
3    text-transform: uppercase;
4}
  • Specificando uppercase viene convertito in maiuscolo l'intero testo.
lowercase 
1/* "HELLO WORLD" -> "hello world" */
2p {
3    text-transform: lowercase;
4}
  • Specificando lowercase viene convertito in minuscolo l'intero testo.
full-width
  • Specificando full-width il testo viene convertito in caratteri a larghezza intera. Questo è tipicamente usato come uno stile speciale per Kanji o Kana, ma pochi browser lo supportano.

Riepilogo:

  • text-transform è una proprietà CSS utile per modificare il caso del testo.
  • Viene spesso utilizzato per creare una coerenza visiva nei titoli, nei menu di navigazione e nei testi dei form.
  • È utile quando si desidera visualizzare il testo in uno stile specifico indipendentemente dall'input dell'utente.

Utilizzando questa proprietà, è possibile manipolare facilmente il testo mantenendo una coerenza visiva.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video

Proprietà CSS relative ai fontProprietà CSS relative alla spaziatura del testo