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 de un bloque de texto. Los posibles valores de text-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 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 adentro que el resto de líneas del párrafo. La sangría es habitual en España (y no sólo para beberla). |
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).
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 |
Autor: Bartolomé Sintes Marco
Última modificación: 23 de enero de 2003