# Texto

En esta lección aprenderás las propiedades que se pueden aplicar al texto de una página web:

## Color del texto y color de fondo

La propiedad color permite establecer el color del texto. La propiedad background-color permite establecer el color de fondo del texto.

body { background-color: aqua; } h2 { color: magenta ; background-color: gold; } p { color: blue; background-color: lightblue; } | ## Esto es un encabezado h2 Esto es un párrafo p normal y corriente. Esto es otro párrafo p.

El color de fondo de la página se establece en la etiqueta body,

El color de fondo de una etiqueta no se aplica solamente al texto, sino a la caja que contiene el texto (por eso el color de fondo se extiende hasta la derecha de la línea).

Volver al índice

## Alineación horizontal

La propiedad text-align permite establecer la alineación horizontal de un bloque de texto. Los posibles valores de vertical-align son left (izquierda), right (derecha), center (centro) y justify (justificado a derecha e izquierda).

body { text-align: justify; } h2 { text-align: center; } h3 { text-align: right } | ## Esto es un encabezado h2 ### Esto es un encabezado h3 Esto es un párrafo p normal y corriente que se muestra justificado a derecha e izquierda porque se ha establecido la propiedad en body y, por tanto, afecta a todos los elementos menos a los que tienen la propiedad explícitamente establecida con otro valor

Volver al índice

## Alineación vertical

La propiedad vertical-align permite establecer la alineación vertical en el interior de un bloque de texto. Los posibles valores de text-align son baseline, sup, super, top, text-top, middle, bottom y text-bottom.

Por completar

Volver al índice

## Sangría

La propiedad text-indent permite establecer la sangría de un bloque de texto. Su valor se puede establecer como cualquier otra longitud.

p { text-indent: 25px; } | Esto es un párrafo p normal y corriente cuya primera línea tiene sangría, es decir, empieza más a la derecha que el resto de líneas del párrafo. La sangría es habitual en España (y no sólo para beberla).
p { text-indent: -25px; } | Esto es un párrafo p normal y corriente cuya primera línea tiene sangría negativa (sangría francesa), es decir, empieza más a la izquierda que el resto de líneas del párrafo, así que se ve bastante mal. Poniendo margen al párrafo se corrige este problema (lo veremos más adelante).

Volver al índice

## Decoración

La propiedad text-decoration permite añadir a un bloque de texto distintos tipos de rayado. Los posibles valores de text-decoration son none (ninguno), underline (subrayado), overline (sobrerayado), line-through (tachado) y blink (parpadeo). Internet Explorer no reconoce el valor blink.

h2 { text-decoration: underline; } h3 { text-decoration: overline; } h4 { text-decoration: blink; } p { text-decoration: line-through; } | ## Esto es un encabezado h2 ### Esto es un encabezado h3 #### Esto es un encabezado h4 Esto es un párrafo p normal y corriente.

Volver al índice

## Mayúsculas / minúsculas

La propiedad text-transform permite cambiar el texto a minúsculas o mayúsculas. Los posibles valores de text-transform son none (ninguno), capitalize (la primera letra de cada palabra en mayúsculas), uppercase (todas las letras en mayúsculas) y lowercase (todas las letras en minúsculas).

h2 { text-transform: capitalize; } h3 { text-transform: uppercase; } h4 { text-transform: lowercase; } | ## Esto es un encabezado h2 ### Esto es un encabezado h3 #### Esto es un encabezado h4

Volver al índice

## Espaciado de letras y palabras

La propiedad letter-spacing permite establecer un espaciado entre cada una de las letras de un bloque de texto. La propiedad word-spacing permite establecer un espaciado entre cada una de las palabras de un bloque de texto. Estos valores, positivos o negativos, se establecen como cualquier otra longitud y se añaden al espaciado normal.

h2 { letter-spacing: 5px; } h3 { word-spacing: 10px;} h4 { letter-spacing: -2px; } | ## Esto es un encabezado h2 ### Esto es un encabezado h3 #### Esto es un encabezado h4

Ver bug 125.390 (letter-spacing se aplica a última letra) en la página de bugs de Mozilla.

Volver al índice

## Interlineado

La propiedad line-height permite establecer el interlineado de un bloque de texto. El valor se puede expresar en cualquier unidad de longitud, aunque lo más lógico es utilizar porcentajes o em. Si se expresa en porcentajes, el valor 100% corresponde al interlineado normal.

p { line-height: 100%; } | Este párrafo tiene un interlineado del 100%, es decir un interlineado sencillo. Este es el mismo interlineado que se aplica si no se utiliza esta propiedad.
p { line-height: 200%; } | Este párrafo tiene un interlineado del 200%, es decir un interlineado doble. Las líneas de texto están separadas el doble de lo normal.
p { line-height: 150%; } | Este párrafo tiene un interlineado del 150%, es decir un interlineado de 1,5 líneas. Las líneas de texto están separadas un 50% más de lo normal.
p { line-height: 75%; } | Este párrafo tiene un interlineado del 150%, es decir un interlineado de 3/4 líneas. Las líneas de texto están más juntas de lo nromal, lo que puede dificultar su lectura.
p { line-height: 1.5em; } | Este párrafo tiene un interlineado del 1.5em, es decir un interlineado de 1,5 líneas. Las líneas de texto están separadas un 50% más de lo normal.

Volver al índice