
Las propiedades de texto permiten aplicar estilos a los textos espaciando sus palabras o sus letras, decorándolo, alineándolo, transformándolo, etcétera. Algunas de estas propiedades son:
text-decoration
Permite decorar el texto con subrayados y otros efectos. Los valores que puede tener son: none
(ninguno), underline
(subrayado), overline
(con una línea por encima), line-through
(tachado), blink
(parpadeante) e inherit
(heredado) .
text-transform
Controla la apariencia de las letras en un elemento. Los valores que puede tener son: none
(texto normal, con mayúsculas y minúsculas), capitalize
(cada palabra comienza con mayúsculas), uppercase
(todo el texto aparece en mayúsculas) y lowercase
(todo el texto aparece en minúsculas).
line-height
Establece el espacio que hay entre dos líneas consecutivas.
Ejemplos:
-
p { line-height: 1.4; } /* Se establece un factor de multiplicación respecto al tamaño font-size */ p { line-height: 14pt; } /* Establece una distancia fija entre las líneas de 14 puntos */ p { line-height: 140%; } /* Establece una distancia proporcional (%) respecto a font-size */
text-indent
Sangra la primera línea de texto de un párrafo.
Ejemplos:
-
p { text-indent: 20px; } /* Define un sangrado positivo. El valor por defecto es 0. */ p { text-indent: -12px; } /* Éste es negativo (hacia la izquierda). */ p { text-indent: 10%; } /* Aquí está como un porcentaje respecto al ancho del elemento padre. */
letter-spacing
Configura sobre el espacio que hay entre los caracteres. Este valor puede aumentar o disminuir ya que, al igual que text-indent
y otras propiedades, admite valores positivos y negativos.
Ejemplos:
-
p { letter-spacing: 12px; } /* Expande los caracteres. Los separa */ p { letter-spacing: -0.5px; } /* Contrae los caracteres. Los junta */
white-space
Permite establecer cómo se gestionan los espacios en blanco en un elemento. Los valores que puede tener son: normal
(los espacios en blanco adicionales son ignorados por el navegador), pre
(los espacios en blanco adicionales son utilizados como cuando se emplea la etiqueta pre en HTML), nowrap
(no se produce el ajuste de línea automático por lo que el texto permanecerá en la misma línea hasta que encuentre una etiqueta <br/>
).