Las propiedades de texto son las que nos permiten controlar el texto como bloque, es decir, afectan al interlineado, a la separación entre palabras, al tabulado, etc.
6. Propiedades de texto
En la tabla 6.1 se muestran las propiedades de texto más utilizadas.
| Propiedad | Descripción | Valores |
|---|---|---|
text-indent | Desplazamiento de la primera línea del texto | longitud | porcentaje |
text-align | Alineamiento del texto | left | right | center | justify |
text-decoration | Efectos de subrayado y tachado | none | underline | overline | line-through |
letter-spacing | Espacio entre caracteres | normal | longitud |
word-spacing | Espacio entre palabras | normal | longitud |
text-transform | Transformación a mayúsculas / minúsculas | capitalize | uppercase | lowercase | none |
line-height | Tamaño del espacio entre líneas (interlineado) | longitud | porcentaje |
vertical-align | Alineación vertical | top | middle | bottom baseline | sub | super | valor |
6.1. Text-indent
.a { text-indent: 50px; }
.b { text-indent: 3em; }
.c { text-indent: 30%; }
.d { text-indent: -50px; }
6.2. Text-align
.a { text-align: center; }
.b { text-align: right; }
.c { text-align: left; }
.d { text-align: justify; }
6.3. Text-decoration
.a { text-decoration: underline; }
.b { text-decoration: overline; }
.c { text-decoration: line-through; }
6.4. Letter-spacing
.a { letter-spacing: 3px; }
.b { letter-spacing: 10px; }
.c { letter-spacing: 15px; }
6.5. Word-spacing
.a { word-spacing: 5px; }
.b { word-spacing: 20px; }
.c { word-spacing: 50px; }
6.6. Text-transform
.a { text-transform: capitalize; }
.b { text-transform: uppercase; }
.c { text-transform: lowercase; }
6.7. Line-height
.a { line-height: 50px; }
.b { line-height: 3em; }
.c { line-height: 30%; }
6.8. Vertical-align
.a { vertical-align: top; }
.b { vertical-align: middle; }
.c { vertical-align: bottom; }
.a { vertical-align: baseline; }
.b { vertical-align: sub; }
.c { vertical-align: super; }
.d { vertical-align: -10px; }
Comprueba tu apendizaje