24-Texto en CSS

---

Estilos de Texto en CSS

• Introducción al texto en CSS
• Alineación del texto
• Decoración del texto
• Transformación del texto
• Espaciado del texto
• Sombras en el texto

---

Introducción al texto en CSS

El texto en CSS se refiere a cómo podemos estilizar el contenido textual en una página web. Con CSS, podemos cambiar el color, tamaño, fuente, interlineado, alineación, entre otros aspectos. Es esencial comprender cómo aplicar estos estilos para hacer que el texto sea más legible y visualmente atractivo.

El control sobre el texto no solo mejora la estética de la página, sino que también contribuye a la accesibilidad y la experiencia de usuario. A través de propiedades como font-family, font-size, line-height, y color, puedes personalizar el texto para que se ajuste a las necesidades de tu diseño.

---

Ejemplos Visuales

Texto con estilo CSS aplicado:

Este es un ejemplo de texto con la fuente Courier New, un tamaño de fuente de 1.4rem, y un color verde oscuro. La propiedad line-height se ha utilizado para aumentar el espacio entre las líneas.

Este es un ejemplo con la fuente Times New Roman, un tamaño de fuente de 1.6rem, y un color azul oscuro. Además, el texto está alineado en el centro.

---

...

Alineación del texto

La alineación del texto es fundamental para controlar cómo se distribuye el texto dentro de un contenedor. Las propiedades más comunes son text-align y vertical-align.

La propiedad text-align permite alinear el texto de izquierda a derecha, de derecha a izquierda, al centro o justificarlo. Por ejemplo:

• text-align: left - Alinea el texto a la izquierda (valor por defecto).
• text-align: center - Alinea el texto al centro.
• text-align: right - Alinea el texto a la derecha.
• text-align: justify - Justifica el texto, es decir, lo distribuye para que ocupe todo el ancho del contenedor.

La propiedad vertical-align se utiliza para alinear el texto o los elementos en línea verticalmente dentro de un contenedor. Puede tomar valores como top, middle o bottom.

---

Ejemplos Visuales

Texto con alineación CSS aplicada:

Este texto está alineado a la izquierda usando la propiedad text-align: left.

Este texto está alineado al centro usando la propiedad text-align: center.

Este texto está alineado a la derecha usando la propiedad text-align: right.

Este texto está justificado usando la propiedad text-align: justify. El texto se ajusta para ocupar todo el ancho del contenedor.

Este texto está alineado verticalmente en el medio usando vertical-align: middle.

---

Decoración del texto

La decoración del texto en CSS se refiere a cómo agregar efectos visuales como subrayado, tachado, y otros estilos relacionados con el texto. La propiedad más común utilizada para esto es text-decoration.

La propiedad text-decoration puede tomar varios valores como:

• underline - Añade un subrayado al texto.
• line-through - Tacha el texto.
• overline - Añade una línea sobre el texto.
• none - Elimina cualquier decoración del texto (valor por defecto).

Además, se puede combinar con otras propiedades como text-decoration-color para cambiar el color de la línea decorativa y text-decoration-style para modificar el estilo (por ejemplo, solid, dotted, dashed).

---

Ejemplos Visuales

Texto con decoración CSS aplicada:

Este texto tiene un subrayado aplicado usando la propiedad text-decoration: underline.

Este texto tiene un tachado aplicado usando la propiedad text-decoration: line-through.

Este texto tiene una línea sobre el texto usando la propiedad text-decoration: overline.

Este texto no tiene ninguna decoración, gracias a la propiedad text-decoration: none.

Este texto tiene un subrayado rojo y en punteado usando text-decoration: underline dotted red.

---

Transformación del texto

La transformación del texto en CSS permite modificar la forma en que se presenta el texto. La propiedad más común para esto es text-transform, que permite cambiar el texto a mayúsculas, minúsculas, o capitalización (primera letra en mayúscula).

Los valores de la propiedad text-transform son:

• uppercase - Convierte todo el texto a mayúsculas.
• lowercase - Convierte todo el texto a minúsculas.
• capitalize - Convierte la primera letra de cada palabra a mayúscula.
• none - No aplica ninguna transformación (valor por defecto).

Este tipo de transformación es útil cuando no se quiere modificar directamente el contenido del texto, pero se necesita un cambio en la visualización, sin alterar el texto real.

---

Ejemplos Visuales

Texto con transformación CSS aplicada:

Este texto está en MAYÚSCULAS usando la propiedad text-transform: uppercase.

Este texto está en minúsculas usando la propiedad text-transform: lowercase.

Este texto tiene cada palabra con la primera letra en mayúscula usando la propiedad text-transform: capitalize.

Este texto no tiene ninguna transformación aplicada, ya que se usa la propiedad text-transform: none.

---

Espaciado del texto

El espaciado del texto en CSS permite ajustar el espacio entre caracteres, palabras y líneas. Para esto se usan las siguientes propiedades:

• letter-spacing: Define el espacio entre los caracteres de un texto.
• word-spacing: Controla el espacio entre las palabras de un texto.
• line-height: Ajusta la altura de las líneas de texto, lo que afecta el espaciado vertical entre líneas.

Estas propiedades son útiles cuando se quiere mejorar la legibilidad del texto o modificar su apariencia visual ajustando los espacios entre los elementos del texto.

---

Ejemplos Visuales

Ejemplos de espaciado de texto:

Este texto tiene un espaciado entre caracteres aumentado usando la propiedad letter-spacing a 3px.

Este texto tiene un espaciado entre palabras ampliado usando la propiedad word-spacing a 10px.

Este texto tiene un espaciado entre líneas aumentado usando la propiedad line-height a 2.

---

Sombras en el texto

La propiedad text-shadow permite agregar sombras al texto, lo que puede mejorar su visibilidad o agregar un estilo visual atractivo. Esta propiedad acepta varios parámetros, como el desplazamiento de la sombra, su difuminado y el color.

La sintaxis básica de text-shadow es la siguiente:

• h-shadow: Desplazamiento horizontal de la sombra (puede ser positivo o negativo).
• v-shadow: Desplazamiento vertical de la sombra (puede ser positivo o negativo).
• blur-radius: Radio de difuminado de la sombra (opcional).
• color: Color de la sombra.

El uso de sombras es útil para crear efectos visuales como resaltar texto, dar un efecto de profundidad o incluso simular luces y sombras. Se pueden aplicar múltiples sombras separadas por comas.

---

Ejemplos Visuales

Ejemplos de sombras en texto:

Este texto tiene una sombra desplazada 2px tanto en horizontal como en vertical, con un desenfoque de 4px y color negro.

Este texto tiene múltiples sombras, una oscura en la parte superior izquierda y otra clara en la parte inferior derecha.

---

Ir al índice

---

---