Propiedades de texto

• Word Spacing (Espaciamiento de palabras)
• Letter Spacing (Espaciamiento de letras)
• Text Decoration (Decoración de texto)
• Vertical Alignment (Alineación vertical)
• Text Transformation (Transformación de texto)
• Text Alignment (Alineación de texto)
• Text Indentation (Sangría de texto)
• Line Height (Altura de línea)

Word Spacing (Espaciamiento de palabras)

La propiedad word-spacing define una cantidad adicional de espacio entre palabras. El valor debe estar en formato de longitud; no se permiten valores negativos.

Ejemplos:

P EM   { word-spacing: 0.4em }
P.nota { word-spacing: -0.2em }

Letter Spacing (Espaciamiento de letras)

La propiedad letter-spacing define una cantidad adicional de espacio entre caracteres. El valor debe estar en formato de longitud; no se permiten valores negativos. Un ajuste de 0 evitará justificación.

Ejemplos:

H1     { letter-spacing: 0.1em }
P.note { letter-spacing: -0.1em }

Text Decoration (Decoración de texto)

La propiedad text-decoration permite que el texto sea decorado mediante una de cinco propiedades: underline (subrayado), overline (línea superior), line-through (tachado), blink (parpadeo), o la por defecto none (ninguna).

Por ejemplo, uno puede sugerir que los enlaces no se subrayen con

A:link, A:visited, A:active { text-decoration: none }

Vertical Alignment (Alineación vertical)

La propiedad vertical-align puede usarse para alterar la ubicación vertical de un elemento en línea, en relación a su elemento padre o a la línea del elemento. (Un elemento en línea es uno que no tiene salto de línea ni antes ni después de él; por ejemplo, EM, A y IMG en HTML.)

El valor puede ser un porcentaje relativo a la altura de línea (line-height) del elemento, que debería elevar la línea de base del elemento en la cantidad especificada por encima de la línea base del padre. No se permiten los valores negativos.

El valor también puede ser una palabra clave. Las siguientes palabras clave afectan la ubicación en relación al elemento padre:

• baseline (alinea líneas bases del elemento y el padre )
• middle (alinea el punto medio vertical del elemento con la línea base más la mitad de x-height--la altura de la letra "x"--del padre)
• sub (subíndice)
• super (superíndice)
• text-top (alinea las partes superiores del elemento y la fuente del elemento padre)
• text-bottom (alinea las partes inferiores del elemento y la fuente del elemento padre)

Las palabras clave que afectan la ubicación relativa a la línea del elemento son

• top (alinea la parte superior del elemento con el elemento más alto en la línea)
• bottom (alinea la parte inferior del elemento con el elemento más bajo en la línea)

La propiedad vertical-align es particularmente útil para alinear imágenes. Algunos ejemplos:

IMG.middle { vertical-align: middle }
IMG        { vertical-align: 50% }
.exponente  { vertical-align: super }

Text Transformation (Transformación de texto)

La propiedad text-transform permite que el texto se transforme por alguna de cuatro propiedades:

• Capitalize (escribe en mayúsculas el primer carácter de cada palabra)
• UPPERCASE (escribe en mayúsculas todos los caracteres de cada palabra)
• lowercase (usa letras pequeñas para todos los caracteres de cada palabra)
• none (valor inicial)

Ejemplos:

H1 { text-transform: uppercase }
H2 { text-transform: capitalize }

La propiedad text-transform solo debería usarse para expresar un deseo estilístico. Sería inapropiado, por ejemplo, usar text-transform para aplicar mayúsculas a las primera letras de una lista de países o nombres.

Text Alignment (Alineación de texto)

La propiedad text-align puede aplicarse a elementos de nivel bloque (P, H1, etc.) para dar la alineación del texto del elemento. Esta propiedad es similar en función al atributo ALIGN de HTML en párrafos, encabezados y divisiones.

Algunos ejemplos:

H1          { text-align: center }
P.diario { text-align: justify }

Text Indentation (Sangría de texto)

La propiedad text-indent puede aplicarse a elementos de nivel bloque (P, H1, etc.) para definir la cantidad de sangría que debería aplicarse a la primera línea. El valor debe ser una longitud o un porcentaje; los porcentajes se refieren al ancho del elemento padre. Un uso común para text-indent sería dar sangría a un párrafo:

P { text-indent: 5em }

Line Height (Altura de línea)

La propiedad line-height aceptará un valor para controlar el espacio entre líneas base de texto. Si el valor es un número, la altura de línea se calcula multiplicando el tamaño de fuente del elemento por el número. Los valores en porcentaje son relativos al tamaño de fuente del elemento. No se permiten los valores negativos.

La altura de línea también puede darse en la propiedad font junto con un tamaño de fuente.

La propiedad line-height podría usarse para texto a doble espacio:

P { line-height: 200% }

Microsoft Internet Explorer 3.x trata incorrectamente a los valores numéricos y a los valores con unidades em o ex como valores de pixel. Este error puede hacer ilegibles las páginas, por lo que los autores deberían evitar provocarlo; con frecuencia, las unidades de porcentaje son una buena opción.

Mantenido por John Pozadzides y Liam Quinn

ÍndiceCSS ~ Estructura CSS ~ Propiedades CSS

Copyright © 1997 John Pozadzides y Liam Quinn. Todos los derechos reservados.