Saltar al contenido principal

Propiedades de texto

En este apartado se centra en las propiedades relacionadas con el texto.

Texto y fuente tipográfica

No confundir la fuente tipográfica con el texto: un mismo texto puede mostrarse utilizando diferentes fuentes tipográficas, pero el texto sigue siendo el mismo en cualquier de los casos.

text-decoration​

Establece si el texto está subrayado, sobrerayado o tachado.

Los valores que puede tomar son:

  • none
  • underline
  • overline
  • line-through

text-align​

Indica la alineación del texto. Aunque las hojas de estilo permiten el justificado de texto, no funciona en todos los sistemas.

Los valores que puede tomar son:

  • left
  • right
  • center
  • justify

text-indent​

Determina la tabulación del texto.

Los valores que puede tomar son:

  • Una longitud (en unidades CSS).
  • Un porcentaje.

text-transform​

Nos permite transformar el texto, haciendo que tenga la primera letra en mayúsculas de todas las palabras, todo en mayúsculas o minúsculas.

Los valores que puede tomar son:

  • capitalize
  • uppercase
  • lowercase
  • none

word-spacing​

Determina el espaciado entre las palabras.

Los valores que puede tomar es un tamaño.

letter-spacing​

Determina el espaciado entre letras. Los valores que puede tomar es un tamaño.

vertical-align​

Establece la alineación vertical del texto. Sus valores posibles son:

  • baseline
  • sub
  • super
  • top
  • text-top
  • middle
  • bottom
  • text-bottom
  • Un porcentaje

line-height​

Altura de la línea.

Puede establecerse mediante un tamaño o un porcentaje

Un ejemplo de un documento XHTML en el que se utiliza este método para incluir formatos es:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Ejemplo de atributos CSS de texto</title>
    <style type="text/css">
      h3 {
        text-decoration: underline;
        text-align: center;
        text-transform: capitalize;
      }
      p {
        text-indent: 50%;
      }
    </style>
  </head>
  <body>
    <h3>Ejemplo del uso de atributos de texto</h3>
    <p>
      El texto de del encabezado de tercer nivel está subrayado, 
      centrado y la primera letra de cada palabra es mayúscula.
    </p>
    <p>El párrafo está tabulado</p>
  </body>
</html>

El aspecto en el navegador es el siguiente:

Probar en el navegador

Documento HTML