Acerca del Web Design Group

Propiedades de texto



Word Spacing (Espaciamiento de palabras)

Sintaxis: word-spacing: <valor>
Valores posibles: normal | <longitud>
Valor inicial: normal
Se aplica a: Todos los elementos
Heredado: Si

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)

Sintaxis: letter-spacing: <valor>
Valores posibles: normal | <longitud>
Valor inicial: normal
Se aplica a: Todos los elementos
Heredado: Si

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)

Sintaxis: text-decoration: <valor>
Valores posibles: none | [ underline || overline || line-through || blink ]
Valor inicial: none
Se aplica a: Todos los elementos
Heredado: No

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)

Sintaxis: vertical-align: <valor>
Valores posibles: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <porcentaje>
Valor inicial: baseline
Se aplica a: Elementos en línea
Heredado: No

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:

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

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)

Sintaxis: text-transform: <valor>
Valores posibles: none | capitalize | uppercase | lowercase
Valor inicial: none
Se aplica a: Todos los elementos
Heredado: Si

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

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)

Sintaxis: text-align: <valor>
Valores posibles: left | right | center | justify
Valor inicial: Determinado por el navegador
Se aplica a: Elementos de nivel bloque
Heredado: Si

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)

Sintaxis: text-indent: <valor>
Valores posibles: <longitud> | <porcentaje>
Valor inicial: 0
Se aplica a: Elementos de nivel bloque
Heredado: Si

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)

Sintaxis: line-height: <valor>
Valores posibles: normal | <number> | <longitud> | <porcentaje>
Valor inicial: normal
Se aplica a: Todos los elementos
Heredado: Si

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


Web Design Group ~ ÍndiceCSS ~ Estructura CSS ~ Propiedades CSS

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