Clase 11 - Ajustes de texto y alineación

La presentación del texto es fundamental para comunicar mensajes claros y efectivos.

CSS3 ofrece una gama amplia de propiedades para ajustar el texto y su alineación, permitiendo a los diseñadores web controlar cómo se muestra el contenido textual en sus sitios.

A continuación, exploramos estas herramientas esenciales y cómo aplicarlas.

Ajuste de Texto en CSS3

text-align

Esta propiedad controla la alineación horizontal del texto.

Los valores comunes incluyen left, right, center, y justify.

p {
  text-align: center;
}

text-indent

Transforma el texto a uppercase, lowercase, o capitalize, permitiendo estilos dinámicos sin alterar el contenido HTML.

h1 {
  text-transform: uppercase;
}

h2 {
  text-transform: lowercase;
}

h3 {
  text-transform: capitalize;
}

h4 {
  text-transform: uppercase;
}

text-decoration

Ofrece opciones para subrayar, tachar, o eliminar el subrayado del texto.

En CSS3, text-decoration ha sido expandido para incluir estilos como line-through y none.

a {
  text-decoration: underline;
}

line-height

Controla el espacio vertical entre líneas de texto, esencial para la legibilidad.

p {
  line-height: 1.5;
}

letter-spacing y word-spacing

Ajustan el espaciado entre caracteres y palabras, respectivamente.

h1 {
  letter-spacing: 2px;
}

Alineación Vertical y Posicionamiento

Mientras que text-align controla la alineación horizontal, la alineación vertical y el posicionamiento pueden requerir combinaciones de propiedades como vertical-align, margin, padding, y el uso de flexbox o grid para alinear elementos contenedores.

Ejemplo Combinado: Estilo de Artículo

article {
  width: 600px;
  margin: 0 auto;
  text-align: justify;
}

article h2 {
  text-align: left;
  text-transform: capitalize;
}

article p {
  text-indent: 20px;
  line-height: 1.6;
}

Este ejemplo muestra cómo combinar varias propiedades para estilizar un artículo, logrando una presentación de texto equilibrada y legible.

Clase 11 – Ajustes de texto y alineación