Translate

Cómo editar texto CSS

Al editar texto en las hojas de estilo CSS. 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.

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 text-align.

Propiedad text-align
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

Los valores definidos por CSS permiten alinear el texto según los valores tradicionales: a la izquierda (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.

Ejemplo de propiedad text-align
Figura 6.5 Ejemplo de propiedad text-align

La propiedad 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:

Propiedad line-height
Valores normal | numero | unidad de medida | porcentaje | inherit
Se aplica a Todos los elementos
Valor inicial normal
Descripción Permite establecer la altura de línea de los elementos

Además de todas las unidades de medida y el uso de porcentajes, la propiedad 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 }

Siempre que se utilice de forma moderada, el interlineado mejora notablemente la legibilidad de un texto, como se puede observar en la siguiente imagen:

Ejemplo de propiedad line-height
Figura 6.6 Ejemplo de propiedad line-height

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 text-decoration.

Propiedad text-decoration
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.)

El valor 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.

Propiedad text-transform
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.)

La propiedad 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:

Ejemplo de propiedad text-transform
Figura 6.7 Ejemplo de propiedad text-transform

Las reglas CSS del ejemplo anterior se muestran a continuación:

<div style="text-transform: none"><h1>Original</h1>Lorem ipsum dolor 
sit amet...</div>
 
<div style="text-transform: capitalize"><h1>text-transform: capitalize</h1>
Lorem ipsum dolor sit amet...</div>
 
<div style="text-transform: lowercase"><h1>text-transform: lowercase</h1>
Lorem ipsum dolor sit amet...</div>
 
<div style="text-transform: uppercase"><h1>text-transform: uppercase</h1>
Lorem ipsum dolor sit amet...</div>

Uno de los principales problemas del diseño de documentos y páginas mediante CSS consiste en la alineación vertical en una misma línea de varios elementos diferentes como imágenes y texto. Para controlar esta alineación, CSS define la propiedad vertical-align.

Propiedad vertical-align
Valores baseline | sub | super | top | text-top | middle | bottom | text-bottom | porcentaje | unidad de medida | inherit
Se aplica a Elementos en línea y celdas de tabla
Valor inicial baseline
Descripción Determina la alineación vertical de los contenidos de un elemento

A continuación se muestra una imagen con el aspecto que muestran los navegadores para cada uno de los posibles valores de la propiedad vertical-align:

Ejemplo de propiedad vertical-align
Figura 6.8 Ejemplo de propiedad vertical-align

El valor por defecto es baseline y el valor más utilizado cuando se establece la propiedad vertical-align es middle.

Continue reading...

1 2

 

0 comentarios:

Publicar un comentario