Propiedades de texto en CSS

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 | 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; }
0
6.2. Text-align
.a { text-align: center; } .b { text-align: right; } .c { text-align: left; } .d { text-align: justify; }
0
6.3. Text-decoration
.a { text-decoration: underline; } .b { text-decoration: overline; } .c { text-decoration: line-through; } .d { text-decoration: underline line-through; }
0
6.4. Letter-spacing
.a { letter-spacing: 3px; } .b { letter-spacing: 10px; } .c { letter-spacing: 15px; }
0
6.5. Word-spacing
.a { word-spacing: 5px; } .b { word-spacing: 20px; } .c { word-spacing: 50px; }
0
6.6. Text-transform
.a { text-transform: capitalize; } .b { text-transform: uppercase; } .c { text-transform: lowercase; }
0
6.7. Line-height
.a { line-height: 50px; } .b { line-height: 3em; } .c { line-height: 30%; }
0
6.8. Vertical-align
.a { vertical-align: top; } .b { vertical-align: middle; } .c { vertical-align: bottom; }
dark
.a { vertical-align: baseline; } .b { vertical-align: sub; } .c { vertical-align: super; } .d { vertical-align: -10px; }
En el valor puedes usar px, pt, cm y %.
dark
Test
¿Con qué propiedad podemos centrar un texto?
¡Bien!
¡Has fallado!
¿Con qué propiedad podemos subrayar un texto?
¡Bien!
¡Has fallado!
¿Con qué propiedad modificamos el espacio entre palabras?
¡Bien!
¡Has fallado!
¿Con qué propiedad y con qué valor ponemos todas las letras en mayúscula?
¡Bien!
¡Has fallado!
¿Se pueden usar valores negativos y positivos con la propiedad vertical-align?
¡Bien!
¡Has fallado!
Propiedades de los textos
¡Muy bien!