Estilo de texto con propiedades de texto de CSS

Introducción

En este laboratorio, los estudiantes explorarán las técnicas esenciales de formato de texto en CSS para mejorar la tipografía y la legibilidad de las páginas web. El laboratorio aborda cinco propiedades clave del texto: altura de línea, sangría, alineación del texto, espaciado entre letras y decoración del texto. Los participantes aprenderán a controlar el espaciado vertical entre líneas, crear sangrías de texto, alinear el texto, ajustar el espaciado entre caracteres y aplicar estilos de texto decorativos.

A través de ejemplos prácticos y demostraciones prácticas de HTML/CSS, los aprendices adquirirán habilidades prácticas para manipular la apariencia del texto y mejorar la presentación visual del contenido web. Cada paso proporciona instrucciones claras y ejemplos de código que ilustran la propiedad específica de formato de texto, lo que permite a los estudiantes entender e implementar efectivamente estas técnicas fundamentales de formato de texto en CSS.

Establecer la altura de línea con la propiedad line-height

En este paso, aprenderás a controlar la altura de línea del texto utilizando la propiedad CSS line-height. La altura de línea es el espacio vertical entre las líneas de texto, lo que puede mejorar significativamente la legibilidad y la apariencia del texto.

Primero, creemos un archivo HTML para demostrar el estilo de altura de línea. Abra el WebIDE y cree un nuevo archivo llamado text-style.html en el directorio ~/project.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Ejemplo de altura de línea</title>
    <style>
      .default-text {
        /* Altura de línea predeterminada */
        line-height: normal;
      }

      .increased-line-height {
        /* Altura de línea aumentada */
        line-height: 1.5;
      }

      .pixel-line-height {
        /* Altura de línea fija en píxeles */
        line-height: 30px;
      }
    </style>
  </head>
  <body>
    <h1>Demostración de altura de línea</h1>

    <h2>Altura de línea predeterminada</h2>
    <p class="default-text">
      Este es un párrafo con la altura de línea predeterminada. Observe cómo las
      líneas están espaciadas normalmente.
    </p>

    <h2>Altura de línea aumentada</h2>
    <p class="increased-line-height">
      Este párrafo utiliza una altura de línea de 1.5, lo que proporciona más
      espacio entre las líneas, lo que hace que el texto sea más fácil de leer.
    </p>

    <h2>Altura de línea fija en píxeles</h2>
    <p class="pixel-line-height">
      Este párrafo tiene una altura de línea fija de 30 píxeles. El espaciado
      entre las líneas es consistente y está controlado con precisión.
    </p>
  </body>
</html>

Analicemos la propiedad line-height:

normal: Altura de línea predeterminada del navegador
Valores numéricos (como 1.5): Multiplica el tamaño de la fuente
Valores en píxeles (como 30px): Altura de línea fija en píxeles

Controlar la sangría del texto con text-indent

En este paso, aprenderás a controlar la sangría del texto utilizando la propiedad CSS text-indent. La sangría del texto te permite crear un espaciado visual al principio de los párrafos, lo que puede mejorar la legibilidad y la estética del diseño.

Continuemos con el archivo HTML anterior. Abra el archivo text-style.html en el WebIDE y modifique el contenido existente para demostrar la sangría del texto:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Ejemplo de sangría del texto</title>
    <style>
      .default-indent {
        /* Texto predeterminado sin sangría */
        text-indent: 0;
      }

      .pixel-indent {
        /* Sangría fija en píxeles */
        text-indent: 20px;
      }

      .percentage-indent {
        /* Sangría basada en porcentaje */
        text-indent: 5%;
      }
    </style>
  </head>
  <body>
    <h1>Demostración de sangría del texto</h1>

    <h2>Texto predeterminado (sin sangría)</h2>
    <p class="default-indent">
      Este párrafo comienza en el margen izquierdo sin ninguna sangría. Observe
      cómo comienza justo en el borde de su contenedor.
    </p>

    <h2>Sangría basada en píxeles</h2>
    <p class="pixel-indent">
      Este párrafo tiene una sangría fija de 20 píxeles. La primera línea se
      empuja 20 píxeles desde el margen izquierdo.
    </p>

    <h2>Sangría basada en porcentaje</h2>
    <p class="percentage-indent">
      Este párrafo utiliza una sangría del 5%, lo que significa que la primera
      línea está sangrada en relación con el ancho de su contenedor.
    </p>
  </body>
</html>

La propiedad text-indent permite tres tipos principales de sangría:

0: Sin sangría (predeterminado)
Valores en píxeles (como 20px): Sangría fija
Valores en porcentaje (como 5%): Relativa al ancho del contenedor

Alinear el texto utilizando la propiedad text-align

En este paso, aprenderás a controlar la alineación del texto utilizando la propiedad CSS text-align. La alineación del texto es crucial para crear diseños visualmente atractivos y legibles.

Continuemos modificando el archivo text-style.html en el WebIDE para demostrar diferentes opciones de alineación del texto:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Ejemplo de alineación del texto</title>
    <style>
      .left-align {
        /* Texto alineado a la izquierda (predeterminado) */
        text-align: left;
      }

      .center-align {
        /* Texto centrado */
        text-align: center;
      }

      .right-align {
        /* Texto alineado a la derecha */
        text-align: right;
      }

      .justify-align {
        /* Texto justificado */
        text-align: justify;
        width: 300px;
      }
    </style>
  </head>
  <body>
    <h1>Demostración de alineación del texto</h1>

    <h2>Texto alineado a la izquierda</h2>
    <p class="left-align">
      Este párrafo está alineado al margen izquierdo. Esta es la alineación
      predeterminada para la mayoría del texto.
    </p>

    <h2>Texto centrado horizontalmente</h2>
    <p class="center-align">
      Este párrafo está centrado horizontalmente dentro de su contenedor.
    </p>

    <h2>Texto alineado a la derecha</h2>
    <p class="right-align">
      Este párrafo está alineado al margen derecho. Observe cómo comienza desde
      el lado derecho.
    </p>

    <h2>Texto justificado</h2>
    <p class="justify-align">
      El texto justificado se estira para llenar todo el ancho de su contenedor,
      creando márgenes uniformes en ambos lados, tanto en el lado izquierdo como
      en el derecho.
    </p>
  </body>
</html>

La propiedad text-align ofrece cuatro opciones principales de alineación:

left: Alinea el texto a la izquierda (predeterminado)
center: Centra el texto horizontalmente
right: Alinea el texto a la derecha
justify: Estira el texto para llenar el ancho del contenedor

Ajustar el espaciado entre caracteres con letter-spacing

En este paso, aprenderás a controlar el espaciado entre caracteres utilizando la propiedad CSS letter-spacing. El espaciado entre caracteres te permite ajustar la distancia entre los caracteres individuales de un texto, lo que puede crear efectos tipográficos únicos.

Continúa editando el archivo text-style.html en el WebIDE para demostrar diferentes opciones de espaciado entre caracteres:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Ejemplo de espaciado entre caracteres</title>
    <style>
      .default-spacing {
        /* Espaciado entre caracteres predeterminado */
        letter-spacing: normal;
      }

      .tight-spacing {
        /* Espaciado entre caracteres negativo */
        letter-spacing: -1px;
      }

      .wide-spacing {
        /* Espaciado entre caracteres positivo */
        letter-spacing: 3px;
      }

      .heading-spacing {
        /* Espaciado para títulos */
        letter-spacing: 0.1em;
      }
    </style>
  </head>
  <body>
    <h1>Demostración de espaciado entre caracteres</h1>

    <h2>Espaciado entre caracteres predeterminado</h2>
    <p class="default-spacing">
      Este párrafo tiene el espaciado entre caracteres normal. Cada carácter
      está posicionado a su distancia predeterminada.
    </p>

    <h2>Espaciado entre caracteres ajustado</h2>
    <p class="tight-spacing">
      Este párrafo utiliza un espaciado entre caracteres negativo, acercando los
      caracteres entre sí.
    </p>

    <h2>Espaciado amplio entre caracteres</h2>
    <p class="wide-spacing">
      Este párrafo tiene un espaciado entre caracteres aumentado, separando más
      los caracteres.
    </p>

    <h2>Título con espaciado sutil</h2>
    <h3 class="heading-spacing">
      Título elegante con espaciado sutil entre caracteres
    </h3>
  </body>
</html>

La propiedad letter-spacing ofrece tres opciones principales:

normal: Espaciado entre caracteres predeterminado
Valores negativos (como -1px): Reduce el espaciado entre caracteres
Valores positivos (como 3px): Aumenta el espaciado entre caracteres

Decorar el texto con text-decoration

En este paso, aprenderás a agregar decoraciones visuales al texto utilizando la propiedad CSS text-decoration. La decoración del texto te permite agregar subrayados, sobrerayados y otros efectos estilísticos a tu texto.

Continúa editando el archivo text-style.html en el WebIDE para demostrar diferentes opciones de decoración del texto:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Ejemplo de decoración del texto</title>
    <style>
      .underline-text {
        /* Texto subrayado */
        text-decoration: underline;
      }

      .overline-text {
        /* Texto sobrerayado */
        text-decoration: overline;
      }

      .line-through-text {
        /* Texto tachado */
        text-decoration: line-through;
      }

      .multiple-decorations {
        /* Varias decoraciones de texto */
        text-decoration: underline overline;
      }

      .colored-decoration {
        /* Decoración de texto con color */
        text-decoration: underline;
        text-decoration-color: red;
      }
    </style>
  </head>
  <body>
    <h1>Demostración de decoración del texto</h1>

    <h2>Texto subrayado</h2>
    <p class="underline-text">
      Este párrafo tiene una decoración de subrayado.
    </p>

    <h2>Texto sobrerayado</h2>
    <p class="overline-text">
      Este párrafo tiene una decoración de sobrerayado.
    </p>

    <h2>Texto tachado</h2>
    <p class="line-through-text">
      Este párrafo tiene una decoración de tachado.
    </p>

    <h2>Varias decoraciones</h2>
    <p class="multiple-decorations">
      Este párrafo tiene tanto una decoración de subrayado como de sobrerayado.
    </p>

    <h2>Decoración con color</h2>
    <p class="colored-decoration">
      Este párrafo tiene una decoración de subrayado rojo.
    </p>
  </body>
</html>

La propiedad text-decoration ofrece varias opciones:

underline: Agrega una línea debajo del texto
overline: Agrega una línea encima del texto
line-through: Agrega una línea a través del texto
Se pueden combinar varias decoraciones
El color de la decoración se puede personalizar

Resumen

En este laboratorio, los participantes aprendieron a mejorar el estilo del texto utilizando varias propiedades de texto de CSS. El primer paso se centró en controlar la altura de línea con la propiedad line-height, demostrando diferentes técnicas como el uso de valores normales, multiplicadores numéricos y valores en píxeles para mejorar la legibilidad y apariencia del texto.

El laboratorio exploró múltiples maneras de manipular la presentación del texto, incluyendo la configuración del espaciado entre líneas, el control de la sangría del texto, el alineamiento del texto, el ajuste del espaciado entre caracteres y la adición de decoraciones al texto. Al practicar estas propiedades de texto de CSS, los aprendices adquirieron habilidades prácticas para crear una tipografía web más atractiva y legible visualmente.