Texto TextoEn esta lección aprenderás las propiedades que se pueden aplicar al texto de una página web:
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 h2Esto 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).
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 h2Esto es un encabezado h3Esto 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 |
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
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). |
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 h2Esto es un encabezado h3Esto es un encabezado h4Esto es un párrafo p normal y corriente. |
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 h2Esto es un encabezado h3Esto es un encabezado h4 |
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 h2Esto es un encabezado h3Esto es un encabezado h4 |
Ver bug 125.390 (letter-spacing se aplica a última letra) en la página de bugs de Mozilla.
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. |