Tratamiento de textos y párrafos
Jerarquía de cuerpo y color
etiquetas h y p: Titulares y párrafos
Las etiquetas h1, h2, h3, h4, h5, h6 y p son las que se usan habitualmente para los textos. Así se muestran con el estilo predefinido por HTML, sin CSS:
Colores de texto y de fondo. Tamaño
Con la propiedad 'color' se aplica el color al cuerpo del texto. Para aplicarlo al fondo se usa la propiedad 'background-color'. Mediante la propiedad 'font-size' definimos el cuerpo, ya sea en pixeles, rem, em, pt, etc.
Alineación y justificación
text-align
Esto es un párrafo normal y corriente que se muestra alineado a la izquierda porque se ha establecido la propiedad text-aling: left.
Esto es un párrafo normal y corriente que se muestra alineado a la derecha porque se ha establecido la propiedad text-aling: right.
Esto es un párrafo normal y corriente que se muestra alineado al centro porque se ha establecido la propiedad text-align: center.
Esto es un párrafo normal y corriente que se muestra justificado al centro y con la última línea alineada a la izquierda porque se ha establecido la propiedad text-align: justify.
vertical-align
baseline: 
sub:
super:
top:
text-top:
middle:
bottom:
text-bottom:
Espaciados
Entre palabras: word-spacing
Esto es un párrafo normal y corriente que se muestra con un espaciado entre palabras mayor, de 50px usando 'word-spacing:50px'.
Esto es un párrafo normal y corriente que se muestra con un espaciado entre palabras negativo, de -5px usando 'word-spacing:-5px'.
Entre letras: letter-spacing
Esto es un párrafo normal y corriente que se muestra con un espaciado entre letras mayor, de 10px usando 'letter-spacing:10px'.
Esto es un párrafo normal y corriente que se muestra con un espaciado entre letras menor, de -2px usando 'letter-spacing:-2px'.
Decoración y transformación
text-decoration
Esto es un párrafo normal y corriente sin nada.
Esto es un párrafo normal y corriente subrayado con 'underline'.
Esto es un párrafo normal y corriente subrayado con 'overline'.
Esto es un párrafo normal y corriente tachado con 'line-through'.
text-transform: MAYUSCULAS & minúsculas
Esto es un párrafo normal y corriente sin nada.
Esto es un párrafo normal y corriente con iniciales mayúsculas con 'capitalize'.
Esto es un párrafo normal y corriente en mayúsculas con 'uppercase'.
Esto es un párrafo normal y corriente en minúsculas con 'lowercase'.
ESTO ES UN PÁRRAFO NORMAL Y CORRIENTE ESCRITO ES MAYÚSCULAS, POR TANTO AUNQUE LE PONGAMOS text-transform: capitalize; SEGUIRÁ EN MAYÚSCULAS.
Sombreado
La propiedad text-shadow permite añadir una o varias sombras al texto. Para definir cada sombra hay que indicar el color de la sombra (si se omite, se utiliza el color del texto), la distancia horizontal (positiva o negativa), la distancia vertical (positiva o negativa) y el diámetro de desenfoque.
text-shadow
Esto es es un párrafo con sombra a la derecha
Esto es un párrafo con sombra hacia abajo
Esto es un párrafo sombreado con desplazamiento tanto horizontal como vertical.
Esto es un párrafo con sombra sin desplazar difuminado.
Esto es un párrafo con sombra desplazada y difuminado.
Esto es un párrafo con doble sombra.
Tratamiento de espacios en párrafo
white-space
La propiedad white-space permite establecer el comportamiento del navegador con respecto a los espacios en blanco repetidos o con los saltos de línea del código fuente. Los posibles valores de white-space son normal, pre, nowrap, pre-wrap y pre-line.
Tabla resumen:
| Valor | Respeta espacios en blanco | Respeta saltos de línea | Ajusta las líneas |
|---|---|---|---|
normal |
no | no | si |
pre |
si | si | no |
nowrap |
no | no | no |
pre-wrap |
si | si | si |
pre-line |
no | si | si |