CSS - Testo

Questo capitolo ti insegna come manipolare il testo usando le proprietà CSS. È possibile impostare le seguenti proprietà di testo di un elemento:

  • Il color viene utilizzata per impostare il colore di un testo.

  • Il direction viene utilizzata per impostare la direzione del testo.

  • Il letter-spacing viene utilizzata per aggiungere o sottrarre spazio tra le lettere che compongono una parola.

  • Il word-spacing viene utilizzata per aggiungere o sottrarre spazio tra le parole di una frase.

  • Il text-indent è usata per far rientrare il testo di un paragrafo.

  • Il text-align viene utilizzata per allineare il testo di un documento.

  • Il text-decoration viene utilizzata per sottolineare, sovrastare e barrare il testo.

  • Il text-transform viene utilizzata per rendere il testo in maiuscolo o convertire il testo in lettere maiuscole o minuscole.

  • Il white-space viene utilizzata per controllare il flusso e la formattazione del testo.

  • Il text-shadow viene utilizzata per impostare l'ombreggiatura del testo attorno a un testo.

Imposta il colore del testo

L'esempio seguente mostra come impostare il colore del testo. Il valore possibile potrebbe essere qualsiasi nome di colore in qualsiasi formato valido.

<html>
   <head>
   </head>

   <body>
      <p style = "color:red;">
         This text will be written in red.
      </p>
   </body>
</html>

Produrrà il seguente risultato:

Imposta la direzione del testo

L'esempio seguente mostra come impostare la direzione di un testo. I valori possibili sono ltr o rtl .

<html>
   <head>
   </head>

   <body>
      <p style = "direction:rtl;">
         This text will be rendered from right to left
      </p>
   </body>
</html>

Produrrà il seguente risultato:

Imposta lo spazio tra i caratteri

L'esempio seguente mostra come impostare lo spazio tra i caratteri. I valori possibili sono normali o un numero che specifica lo spazio. .

<html>
   <head>
   </head>

   <body>
      <p style = "letter-spacing:5px;">
         This text is having space between letters.
      </p>
   </body>
</html>

Produrrà il seguente risultato:

Imposta lo spazio tra le parole

L'esempio seguente mostra come impostare lo spazio tra le parole. I valori possibili sono normali o un numero che specifica lo spazio .

<html>
   <head>
   </head>

   <body>
      <p style = "word-spacing:5px;">
         This text is having space between words.
      </p>
   </body>
</html>

Questo produrrà il seguente risultato:

Imposta il rientro del testo

L'esempio seguente mostra come far rientrare la prima riga di un paragrafo. I valori possibili sono % o un numero che specifica lo spazio di rientro .

<html>
   <head>
   </head>

   <body>
      <p style = "text-indent:1cm;">
         This text will have first line indented by 1cm and this line will remain at 
         its actual position this is done by CSS text-indent property.
      </p>
   </body>
</html>

Produrrà il seguente risultato:

Imposta l'allineamento del testo

L'esempio seguente mostra come allineare un testo. I valori possibili sono left, right, center, justify .

<html>
   <head>
   </head>

   <body>
      <p style = "text-align:right;">
         This will be right aligned.
      </p>
      
      <p style = "text-align:center;">
         This will be center aligned.
      </p>
      
      <p style = "text-align:left;">
         This will be left aligned.
      </p>
   </body>
</html>

Questo produrrà il seguente risultato:

Decorare il testo

L'esempio seguente mostra come decorare un testo. I valori possibili sono none, underline, overline, line-through, blink .

<html>
   <head>
   </head>

   <body>
      <p style = "text-decoration:underline;">
         This will be underlined
      </p>
      
      <p style = "text-decoration:line-through;">
         This will be striked through.
      </p>
      
      <p style = "text-decoration:overline;">
         This will have a over line.
      </p>
      
      <p style = "text-decoration:blink;">
         This text will have blinking effect
      </p>
   </body>
</html>

Questo produrrà il seguente risultato:

Imposta i casi di testo

L'esempio seguente mostra come impostare i casi per un testo. I valori possibili sono nessuno, maiuscolo, maiuscolo, minuscolo .

<html>
   <head>
   </head>

   <body>
      <p style = "text-transform:capitalize;">
         This will be capitalized
      </p>
      
      <p style = "text-transform:uppercase;">
         This will be in uppercase
      </p>
      
      <p style = "text-transform:lowercase;">
         This will be in lowercase
      </p>
   </body>
</html>

Questo produrrà il seguente risultato:

Imposta lo spazio bianco tra il testo

L'esempio seguente mostra come viene gestito lo spazio bianco all'interno di un elemento. I valori possibili sono normal, pre, nowrap .

<html>
   <head>
   </head>

   <body>
      <p style = "white-space:pre;">
         This text has a line break and the white-space pre setting 
         tells the browser to honor it just like the HTML pre tag.
      </p>
   </body>
</html>

Questo produrrà il seguente risultato:

Imposta l'ombra del testo

L'esempio seguente mostra come impostare l'ombra attorno a un testo. Questo potrebbe non essere supportato da tutti i browser.

<html>
   <head>
   </head>

   <body>
      <p style = "text-shadow:4px 4px 8px blue;">
         If your browser supports the CSS text-shadow property, 
         this text will have a  blue shadow.
      </p>
   </body>
</html>

Produrrà il seguente risultato: