CSS - Texto

Este capítulo le enseña cómo manipular texto usando propiedades CSS. Puede establecer las siguientes propiedades de texto de un elemento:

  • los color La propiedad se utiliza para establecer el color de un texto.

  • los direction La propiedad se utiliza para establecer la dirección del texto.

  • los letter-spacing La propiedad se utiliza para sumar o restar espacio entre las letras que componen una palabra.

  • los word-spacing La propiedad se usa para sumar o restar espacio entre las palabras de una oración.

  • los text-indent La propiedad se utiliza para sangrar el texto de un párrafo.

  • los text-align La propiedad se utiliza para alinear el texto de un documento.

  • los text-decoration La propiedad se utiliza para subrayar, sobremarcar y tachar texto.

  • los text-transform La propiedad se utiliza para poner texto en mayúsculas o convertir texto en letras mayúsculas o minúsculas.

  • los white-space La propiedad se utiliza para controlar el flujo y el formato del texto.

  • los text-shadow La propiedad se utiliza para establecer la sombra del texto alrededor de un texto.

Establecer el color del texto

El siguiente ejemplo demuestra cómo establecer el color del texto. El valor posible podría ser cualquier nombre de color en cualquier formato válido.

<html>
   <head>
   </head>

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

Producirá el siguiente resultado:

Establecer la dirección del texto

El siguiente ejemplo demuestra cómo establecer la dirección de un texto. Los valores posibles son ltr o rtl .

<html>
   <head>
   </head>

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

Producirá el siguiente resultado:

Establecer el espacio entre caracteres

El siguiente ejemplo demuestra cómo establecer el espacio entre caracteres. Los valores posibles son normal o un número que especifica un espacio. .

<html>
   <head>
   </head>

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

Producirá el siguiente resultado:

Establecer el espacio entre palabras

El siguiente ejemplo demuestra cómo establecer el espacio entre palabras. Los valores posibles son normal o un número que especifica un espacio .

<html>
   <head>
   </head>

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

Esto producirá el siguiente resultado:

Establecer la sangría del texto

El siguiente ejemplo muestra cómo sangrar la primera línea de un párrafo. Los valores posibles son % o un número que especifica el espacio de sangría .

<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>

Producirá el siguiente resultado:

Establecer la alineación del texto

El siguiente ejemplo demuestra cómo alinear un texto. Los valores posibles son 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>

Esto producirá el siguiente resultado:

Decorando el texto

El siguiente ejemplo demuestra cómo decorar un texto. Los valores posibles son 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>

Esto producirá el siguiente resultado:

Establecer los casos de texto

El siguiente ejemplo demuestra cómo configurar los casos para un texto. Los valores posibles son ninguno, mayúsculas, mayúsculas y minúsculas .

<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>

Esto producirá el siguiente resultado:

Establecer el espacio en blanco entre el texto

El siguiente ejemplo demuestra cómo se manejan los espacios en blanco dentro de un elemento. Los valores posibles son 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>

Esto producirá el siguiente resultado:

Establecer la sombra del texto

El siguiente ejemplo demuestra cómo establecer la sombra alrededor de un texto. Es posible que esto no sea compatible con todos los navegadores.

<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>

Producirá el siguiente resultado: