ajuste del Texto
Además de las propiedades relativas a la tipografía del texto, CSS define numerosas propiedades que determinan la apariencia del texto en su conjunto. Estas propiedades adicionales permiten controlar al alineación del texto, el interlineado, la separación entre palabras, etc.
La propiedad que define la alineación del texto se denomina
Los valores definidos por CSS permiten alinear el texto según los valores tradicionales: a la izquierda (
La siguiente imagen muestra el efecto de establecer el valor
La propiedad
Además de todas las unidades de medida y el uso de porcentajes, la propiedad
Siempre que se utilice de forma moderada, el interlineado mejora notablemente la legibilidad de un texto, como se puede observar en la siguiente imagen:
Además de la decoración que se puede aplicar a la tipografía que utilizan los textos, CSS define otros estilos y decoraciones para el texto en su conjunto. La propiedad que decora el texto se denomina
El valor
Una de las propiedades de CSS más desconocidas y que puede ser de gran utilidad en algunas circunstancias es la propiedad
La propiedad
La siguiente imagen muestra cada uno de los posibles valores:
La propiedad que define la alineación del texto se denomina
text-align
.text-align | Alineación del texto |
---|---|
Valores | left | right | center | justify | inherit |
Se aplica a | Elementos de bloque y celdas de tabla |
Valor inicial | left |
Descripción | Establece la alineación del contenido del elemento |
left
), a la derecha (right
), centrado (center
) y justificado (justify
).La siguiente imagen muestra el efecto de establecer el valor
left
, right
, center
y justify
respectivamente a cada uno de los párrafos de la página.Figura 6.5. Ejemplo de propiedad text-align
text-align
no sólo alinea el texto que contiene un elemento, sino que también alinea todos sus contenidos, como por ejemplo las imágenes. El interlineado de un texto se controla mediante la propiedad line-height
, que permite controlar la altura ocupada por cada línea de texto:line-height | Interlineado |
---|---|
Valores | normal | <numero> | <medida> | <porcentaje> | inherit |
Se aplica a | Todos los elementos |
Valor inicial | normal |
Descripción | Permite establecer la altura de línea de los elementos |
line-height
permite indicar un número sin unidades que se interpreta como el múltiplo del tamaño de letra del elemento. Por tanto, estas tres reglas CSS son equivalentes:p { line-height: 1.2; font-size: 1em } p { line-height: 1.2em; font-size: 1em } p { line-height: 120%; font-size: 1em }
Figura 6.6. Ejemplo de propiedad line-height
text-decoration
.text-decoration | Decoración del texto |
---|---|
Valores | none | ( underline || overline || line-through || blink ) | inherit |
Se aplica a | Todos los elementos |
Valor inicial | none |
Descripción | Establece la decoración del texto (subrayado, tachado, parpadeante, etc.) |
underline
subraya el texto, por lo que puede confundir a los usuarios haciéndoles creer que se trata de un enlace. El valor overline
añade una línea en la parte superior del texto, un aspecto que raramente es deseable. El valor line-through
muestra el texto tachado con una línea continua, por lo que su uso tampoco es muy habitual. Por último, el valor blink
muestra el texto parpadeante y se recomienda evitar su uso por las molestias que genera a la mayoría de usuarios.Una de las propiedades de CSS más desconocidas y que puede ser de gran utilidad en algunas circunstancias es la propiedad
text-transform
, que puede variar de forma sustancial el aspecto del texto.text-transform | Transformación del texto |
---|---|
Valores | capitalize | uppercase | lowercase | none | inherit |
Se aplica a | Todos los elementos |
Valor inicial | none |
Descripción | Transforma el texto original (lo transforma a mayúsculas, a minúsculas, etc.) |
text-transform
permite mostrar el texto original transformado en un texto completamente en mayúsculas (uppercase
), en minúsculas (lowercase
) o con la primera letra de cada palabra en mayúscula (capitalize
).La siguiente imagen muestra cada uno de los posibles valores:
Figura 6.7. Ejemplo de propiedad text-transform