Saltar la navegación

3.2.- Propiedades de texto.

Ilustración en la que aparece un bolígrafo sobre un folio escrito con palabras en inglés.
photosteve101 (CC BY)

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/> ).

Autoevaluación

Pregunta

Queremos realizar un documento web donde la fuente base de toda la página sea: de color negro, de tipo Arial, con un tamaño 0.9 veces la letra por defecto del navegador y un espaciado entre líneas de 1,4. ¿Cuál sería la regla CSS que consigue esto?

Respuestas

body { font: 0.9em/1.4 Arial, Helvetica, sans-serif; color: #000; }

body { font: 0.9em/1.4 Arial, sans-serif; color: #000; }

body { color: #000; font: .9em/1.4 Arial; }

body { font: .9em/1.4 Arial; color: #000; }

Retroalimentación