LaWebera.es
Estás en Home > Manuales web > Hojas de Estilo (CSS)

DHTML JavaScript Menu Courtesy of Milonic.com

 

Nota: Este documento es parte de una traducción al castellano de la Recomendación del W3C "Cascading Style Sheets, level 1" (más información). Puede consultar la versión original del mismo. Para cualquier comentario o corrección acerca de la traducción póngase en contacto con el traductor en jrpozo@conclase.net. Gracias por su colaboración.
Véase el Aviso de copyright de la traducción.

5.4 Propiedades de texto

5.4.1 'word-spacing'

Valor: normal | <longitud>
Inicial: normal
Se aplica a: todos los elementos
Se hereda:
Valores porcentuales: N/A

La unidad de longitud indica que se añade el espacio especificado al espacio por defecto entre palabras. Los valores pueden ser negativos, pero puede haber límites específicos de cada implementación. El AU es libre de elegir el algoritmo exacto de espaciado. El espaciado de palabras también puede verse influido por el tipo de justificación (que es un valor de la propiedad 'text-align').

H1 { word-spacing: 1em }

Aquí, el espaciado de palabras entre cada palabra contenida en elementos 'H1' se incrementa en '1em'.

CSS1 básico: Los AAUU pueden interpretar cualquier valor de 'word-spacing' como 'normal'. (Véase la sección 7.)

5.4.2 'letter-spacing'

Valor: normal | <longitud>
Inicial: normal
Se aplica a: todos los elementos
Se hereda:
Valores porcentuales: N/A

Una unidad de longitud indica que se añade el espacio especificado al espacio por defecto entre caracteres. Los valores pueden ser negativos, pero puede haber límites específicos de cada implementación. El AU es libre de elegir el algoritmo exacto de espaciado. El espaciado de letras también puede verse influido por el tipo de justificación (que es un valor de la propiedad 'text-align').

BLOCKQUOTE { letter-spacing: 0.1em }

Aquí, el espaciado de letras entre cada carácter de los elementos 'BLOCKQUOTE' se vería incrementado en '0.1em'.

Con un valor de 'normal', el AU puede modificar el espacio entre letras para justificar el texto. Esto no sucederá si 'letter-spacing' está establecido explícitamente a un valor de tipo <longitud>:

BLOCKQUOTE { letter-spacing: 0 }
BLOCKQUOTE { letter-spacing: 0cm }

Cuando el espacio resultante entre dos letras no sea el mismo que el espacio por defecto, los AAUU no deberían usar ligaduras.

CSS1 básico: Los AAUU pueden interpretar cualquier valor de 'letter-spacing' como 'normal' (véase la sección 7.)

5.4.3 'text-decoration'

Valor: none | [ underline || overline || line-through || blink ]
Inicial: none
Se aplica a: todos los elementos
Se hereda: no, pero véase la clarificación más abajo
Valores porcentuales: N/A

Esta propiedad describe las decoraciones que se añaden al texto de un elemento. Si el elemento no tiene texto (p.ej. el elemento 'IMG' en HTML) o es un elemento vacío (p.ej. '<EM></EM>'), esta propiedad no tiene efecto. Un valor de 'blink' hace que el texto parpadee.

El color o colores requeridos por la decoración del texto deberían derivar del valor de la propiedad 'color'.

Esta propiedad no es heredada, pero los elementos deberían concordar con sus padres. P.ej., si un elemento está subrayado, la línea debería abarcar todos los elementos hijos. El color del subrayado será el mismo incluso si los elementos descendientes tienen valores distintos de 'color'.

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

En este ejemplo se subrayarían los textos de todos los vínculos (es decir, de todos los elementos 'A' con un atributo 'HREF').

Los AAUU deben reconocer la palabra clave 'blink', pero no es necesario que soporten el efecto de parpadeo.

5.4.4 'vertical-align'

Valor: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <porcentaje>
Inicial: baseline
Se aplica a: elementos en línea
Se hereda: no
Valores porcentuales: se refieren al 'line-height' del propio elemento

Esta propiedad afecta al posicionamiento vertical del elemento. Se utiliza un conjunto de palabras clave que son relativas al elemento padre:

'baseline' (línea de base)
alinea la línea de base del elemento (o la parte inferior si el elemento no tiene línea de base) con la línea de base del padre
'middle' (medio)
alinea el punto medio vertical del elemento (normalmente una imagen) con la línea de base más la mitad de la altura x del padre
'sub'
representa el elemento como un subíndice
'super'
representa el elemento como un superíndice
'text-top' (texto superior)
alinea la parte superior del elemento con la parte superior de la fuente del elemento padre
'text-bottom' (texto inferior)
alinea la parte inferior del elemento con la parte inferior de la fuente del elemento padre

Hay otro conjunto de palabras clave que son relativas a la línea formateada a la que pertenece el elemento:

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

Cuando se usa la alineación superior ('top') e inferior ('bottom') pueden darse situaciones irresolubles si las dependencias entre elementos crean un bucle.

Los valores porcentuales se refieren al valor de la propiedad 'line-height' del propio elemento. Elevan la línea de base del elemento (o la línea inferior, si no tiene línea de base), en la cantidad especificada, por encima de la línea de base del elemento. Son posibles valores negativos. P.ej., un valor de "-100%" bajará el elemento de modo que la línea de base del elemento acabe donde debería haber estado la línea de base de la línea siguiente. Esto permite un control preciso sobre la posición vertical de los elementos que no tienen una línea de base (como p.ej. las imágenes que se usan en lugar de letras).

Se espera que en una versión futura de CSS se permita un valor de tipo <longitud> para esta propiedad.

5.4.5 'text-transform'

Valor: capitalize | uppercase | lowercase | none
Inicial: none
Se aplica a: todos los elementos
Se hereda:
Valores porcentuales: N/A

'capitalize'
convierte en mayúscula el primer carácter de cada palabra
'uppercase'
convierte en mayúsculas todas las letras del elemento
'lowercase'
convierte en minúsculas todas las letras del elemento
'none'
neutraliza el valor heredado

La transformación que se lleva finalmente a cabo depende del idioma en que esté el texto. Véanse en [4] diferentes formas de encontrar el idioma de un elemento.

H1 { text-transform: uppercase }

Este ejemplo convertiría los elementos 'H1' en texto en mayúsculas.

CSS1 básico: Los AAUU pueden no tener en cuenta 'text-transform' (es decir, tratarlo como si siempre valiera 'none') para los caracteres que no pertenezcan al repertorio Latin-1 y para elementos en idiomas para los que la transformación es diferente de la especificada en las tablas de conversión de caja de Unicode [8].

5.4.6 'text-align'

Valor: left | right | center | justify
Inicial: depede del AU
Se aplica a: elementos en bloque
Se hereda:
Valores porcentuales: N/A

Esta propiedad describe cómo se alinea el texto dentro del elemento. El algoritmo de justificación utilizado finalmente depende del AU y del idioma en que esté el texto.

Ejemplo:

DIV.center { text-align: center }

Como 'text-align' se hereda, todos los elementos en bloque dentro del elemento 'DIV' con 'CLASS=center' estarán centrados. Obsérvese que las alineaciones son relativas a la anchura del elemento, no del lienzo. Si 'justify' no está soportado, al AU lo sustituirá por otro estilo. Normalmente será 'left' para los lenguajes occidentales.

CSS1 básico: Los AAUU pueden tratar 'justify' como 'left' o 'right', según que la dirección de escritura por defecto del elemento sea de izquierda a derecha o de derecha a izquierda respectivamente.

5.4.7 'text-indent'

Valor: <longitud> | <porcentaje>
Inicial: 0
Se aplica a: elementos en bloque
Se hereda:
Valores porcentuales: se refiere a la anchura del elemento padre

Esta propiedad especifica la sangría de la primera línea formateada. El valor de 'text-indent' puede ser negativo, pero puede haber limitaciones específicas de cada implementación. No se inserta sangría en medio de un elemento que haya sido roto por otro (como el 'BR' en HTML).

Ejemplo:

P { text-indent: 3em }

5.4.8 'line-height'

Valor: normal | <número> | <longitud> | <porcentaje>
Inicial: normal
Se aplica a: todos los elementos
Se hereda:
Valores porcentuales: relativos al tamaño de la fuente del propio elemento

Esta propiedad establece la distancia entre las líneas de base de dos líneas adyacentes.

Cuando se especifica un valor numérico, la altura de línea está dada por el tamaño de fuente del elemento considerado multiplicado por el valor numérico. La diferencia entre eso y un valor porcentual está en el modo en que se hereda el valor: cuando se especifica un valor numérico, los elementos hijos heredarán el factor en sí, no el valor resultante (como es el caso de los porcentajes y otras unidades).

No se permiten valores negativos.

Las tres reglas del ejemplo siguiente dan el mismo resultado de altura de línea:

DIV { line-height: 1.2; font-size: 10pt }     /* número */
DIV { line-height: 1.2em; font-size: 10pt }   /* longitud */
DIV { line-height: 120%; font-size: 10pt }    /* porcentaje */

Un valor 'normal' establece la altura de línea a un valor razonable para la fuente del elemento. Se sugiere que los AAUU asignen al valor 'normal' un número entre 1,0 y 1,2. Véase en la sección 4.4 la descripción de cómo influye 'line-height' en el formato de los elementos en bloque.