Contenidos
Las propiedades definidas en las siguientes secciones afectan la presentación visual de los caracteres, espacios, palabras y párrafos.
| Valor: | <medida> | <porcentaje> | inherit |
| Inicial: | 0 |
| Se aplica a: | los elementos a nivel de bloque |
| Se hereda: | si |
| Porcentajes: | se refieren al ancho del bloque de contención |
| Medios: | visuales |
Esta propiedad especifica la sangría de la primer línea de texto en un bloque. Más precisamente, especifica la sangría de la primer caja que fluye dentro de la primer caja de línea dentro del bloque. La caja es sangrada con respecto al límite izquierdo (o derecho, para las composiciones de derecha a izquierda) de la caja de línea. Las aplicaciones del usuario deben procesar este sangrado como espacio en blanco.
Los valores tienen los siguientes significados:
El valor de 'text-indent' puede ser negativo, pero pueden haber limitaciones específicas de la implementación.
El siguiente ejemplo produce una sangría de '3em' en el texto.
P { text-indent: 3em }
| Valor: | left | right | center | justify | <cadena> | inherit |
| Inicial: | depende de la aplicación del usuario y el sentido de la escritura |
| Se aplica a: | los elementos a nivel de bloque |
| Se hereda: | si |
| Porcentajes: | N/A |
| Medios: | visuales |
Esta propiedad describe cómo el contenido a nivel del línea de un bloque es alineado. Los valores tienen los siguientes significados:
Un bloque de texto es una pila de cajas de líneas. En el caso de 'left', 'right' y 'center', esta propiedad especifica cómo las cajas a nivel de línea dentro de cada caja de línea se alínean con respecto a los lados izquierdo y derecho de la caja de línea; la alineación no es con respecto al acceso visual. En el caso de 'justify', la AU pueden estirar las cajas a nivel de línea además de ajustar su posición. (Ver también 'letter-spacing' y 'word-spacing'.)
En este ejemplo, observe que mientras 'text-align' es heredado, todos los elementos a nivel de bloque dentro del elemento DIV con 'class=center' tendrán su contenido centrado.
DIV.center { text-align: center }
Nota. El real algoritmo de justificación usado depende de la aplicación del usuario y del lenguaje de escritura.
Las aplicaciones del usuario con conformidad pueden interpretar el valor 'justify' como 'left' o 'right', dependiendo de si la dirección de escritura predeterminada del elemento es de izquierda a derecha o de derecha a izquierda, respectivamente.
| Valor: | none | [ underline || overline || line-through || blink ] | inherit |
| Inicial: | none |
| Se aplica a: | todos los elementos |
| Se hereda: | no (ver texto) |
| Porcentajes: | N/A |
| Medios: | visuales |
Esta propiedad describe las decoraciones que se agregan al texto de un elemento. Si la propiedad es especificada para un elemento a nivel de bloque, afecta a todos los descendientes a nivel de línea del elemento. Si es especificada para (o afecta) un elemento a nivel de línea, afecta a todas las cajas generadas por el elemento. Si el elemento no tiene ningún contenido o ningún contenido textual (ej., el elemento IMG en HTML), las aplicaciones del usuario deben ignorar esta propiedad.
Los valores tienen los siguientes significados:
El(los) color(es) requerido por la decoración del texto deberían derivar del valor de la propiedad 'color'.
Esta propiedad no es heredada, pero las cajas descendientes de una caja de bloque deberían tener en su formato la misma decoración (ej., deberían estar todas subrayadas). El color de las decoraciones debería permanecer igual aunque los elementos descendientes tuvieran diferente valores de 'color'.
En el siguiente ejemplo para HTML, el contenido textual de todos los elementos A que actúan como hipervínculos estarán subrayados:
A[href] { text-decoration: underline }
Esta propiedad acepta una lista separada por comas de efectos de sombra para ser aplicados al texto del elemento. Los efectos de sombra son aplicados en el orden especificado y por eso pueden cubrirse unos a otros, pero nunca cubrirán al propio texto. Los efectos de sombra no alteran el tamaño de una caja, pero pueden extenderse más allá de sus límites. El nivel en la pila de los efectos de sombra es el mismo que el del elemento mismo.
Cada efecto de sombra debe especificar un desplazamiento de la sombra y puede especificar opcionalmente un radio de desenfoque y un color para la sombra.
Un desplazamiento de la sombra es especificado con dos valores de <medida> que indican la distancia con el texto. El primer valor especifica la distancia horizontal a la derecha del texto. Un valor horizontal negativo coloca la sombra a la izquierda del texto. El segundo valor especifica la distancia vertical hacia abajo del texto. Un valor vertical negativo coloca la sombra por sobre el texto.
Un radio de desenfoque puede opcionalmente especificarse después del desplazamiento de la sombra. El radio de desenfoque es el valor de la medida que indica los límites del efecto de desenfoque. El algoritmo exacto para computar el efecto de desenfoque no es especificado.
Un valor de color puede especificarse opcionalmente antes o después de los valores de medida del efecto de sombra. El valor del color será usado como la base del efecto de sombra. Si no se especifica ningún color, el valor de la propiedad 'color' será usado en su lugar.
Las sombras del texto pueden ser usadas con los pseudo-elementos :first-letter y:first-line.
El ejemplo de abajo pondrá una sombra del texto a la derecha y abajo del texto del elemento. Como no se ha especificado ningún color, la sombra tendrá el mismo color del elemento, y como no se ha especificado ningún radio de desenfoque, la sombra del texto no será desenfocada:
H1 { text-shadow: 0.2em 0.2em }
El siguiente ejemplo coloca una sombra a la derecha y abajo del texto de un elemento. La sombra tendrá un radio de desenfoque de 5px y será roja.
H2 { text-shadow: 3px 3px 5px red }
El siguiente ejemplo especifica una lista de efectos de sombra. La primer sombra estará a la derecha y abajo del texto del elemento y será roja sin desenfoque. La segunda sombra cubrirá al primer efecto de sombra, y será amarillo, desenfocado, y colocado a la izquierda y abajo del texto. El tercer efecto de sombra será colocado a la derecha y abajo del texto. Como no se ha especificado ningún color de sombra para el tercer efecto, el valor de la propiedad 'color' del elemento será usado:
H2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px }
Considere este ejemplo:
SPAN.glow {
background: white;
color: white;
text-shadow: black 0px 0px 5px;
}
Aquí, las propiedades 'background' y 'color' tienen el mismo valor y la propiedad 'text-shadow' se usa para crear un efecto de "eclipse solar":
Nota. Esta propiedad no está definida en CSS1. Algunos efectos de sombra (como el del último ejemplo) pueden resultar en un texto invisible en las AU que solamente soporten CSS1.
| Valor: | normal | <medida> | inherit |
| Inicial: | normal |
| Se aplica a: | todos los elementos |
| Se hereda: | si |
| Porcentajes: | N/A |
| Medios: | visuales |
Esta propiedad especifica el comportamiento de los espacios entre los caracteres del texto. Los valores tienen los siguientes significados:
Los algoritmos para el espaciado de caracteres dependen de la aplicación del usuario. El espaciado entre caracteres también puede ser influenciado por la justificación (ver la propiedad 'text-align').
En este ejemplo, el espacio entre caracteres en los elementos BLOCKQUOTE es incrementado en '0.1em'.
BLOCKQUOTE { letter-spacing: 0.1em }
En el siguiente ejemplo, no se permite a la aplicación del usuario alterar el interletrado:
BLOCKQUOTE { letter-spacing: 0cm } /* Igual a '0' */
Cuando el espacio resultante entre dos caracteres no es el mismo que el espacio predeterminado, las aplicaciones del usuario no deberían usar ligaduras.
Las aplicaciones del usuario con conformidad pueden considerar al valor de la propiedad 'letter-spacing' como 'normal'.
| Valor: | normal | <medida> | inherit |
| Inicial: | normal |
| Se aplica a: | todos los elementos |
| Se hereda: | si |
| Porcentajes: | N/A |
| Medios: | visuales |
Esta propiedad especifica el comportamiento de los espacios entre palabras. Los valores tienen los siguientes significados:
Los algoritmos para el espaciado entre palabras dependen de la aplicación del usuario. Los espacios entre palabras también son influenciados por la justificación (ver la propiedad 'text-align').
En este ejemplo, el espacio entre cada palabra en los elementos H1 es incrementado en '1em'.
H1 { word-spacing: 1em }
Las aplicaciones del usuario con conformidad pueden considerar al valor de la propiedad 'word-spacing' como 'normal'.
| Valor: | capitalize | uppercase | lowercase | none | inherit |
| Inicial: | none |
| Se aplica a: | todos los elementos |
| Se hereda: | si |
| Porcentajes: | N/A |
| Medios: | visuales |
Esta propiedad controla el efecto de los cambios entre mayúsculas y minúsculas en el texto de un elemento. Los valores tienen los siguientes significados:
La transformación real en cada caso depende del lenguaje escrito. Ver RFC 2070 ([RFC2070]) por las modos de encontrar el lenguaje de un elemento.
Las aplicaciones del usuario con conformidad pueden considerar al valor de 'text-transform' como 'none' para los caracteres que no son parte del repertorio de Latin-1 y para los elementos en lenguajes para los cuales la transformación es distinta de la especificada por la tabla de conversión de maýusculas y minúsculas de ISO 10646 ([ISO10646]).
En este ejemplo, todo el texto de un elemento H1 es transformado en mayúsculas.
H1 { text-transform: uppercase }
| Valor: | normal | pre | nowrap | inherit |
| Inicial: | normal |
| Se aplica a: | elementos a nivel de bloque |
| Se hereda: | si |
| Porcentajes: | N/A |
| Medios: | visuales |
Esta propiedad declara cómo son tratados los espacios en blanco dentro del elemento. Los valores tienen los siguientes significados:
Los siguientes ejemplos muestran qué comportamiento de los espacios en blanco se espera en los elementos PRE y P, y el atributo "nowrap" en HTML.
PRE { white-space: pre }
P { white-space: normal }
TD[nowrap] { white-space: nowrap }
Las aplicaciones del usuario con conformidad pueden ignorar la propiedad 'white-space' en las hojas de estilo del autor o del usuario pero deben especificar un valor para la misma en la hoja de estilo predeterminada.
|
Copyright © 1998 W3C (MIT, INRIA, Keio ), All Rights Reserved.
Traducción: Carlos Benavidez |