Contenidos
| Valor: | [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | inherit |
| Inicial: | auto |
| Se aplica a: | todos los elementos |
| Se hereda: | si |
| Porcentajes: | N/A |
| Medios: | visuales, interactivos |
Esta propiedad especifica el tipo de cursor que será utilizado para el dispositivo señalador. Los valores tienen los siguientes significados:
P { cursor : url("micursor.cur"), url("segundo.csr"), text; }
Además de poder asignar valores de colorpredeterminados a los textos, fondos, etc., CSS2 permite a los autores especificar colores de manera que se integren con el entorno gráfico del usuario. Las reglas de estilo que tienen en cuenta de este modo las preferencias del usuario ofrecen las siguientes ventajas:
El conjunto de valores definidos para los colores del sistema intenta ser exhaustivo. Para los sistemas que no tienen los valores correspondientes, el valor especificado debe ser obtenido del atributo más cercano del sistema, o del color predeterminado.
El siguiente es un listado de los valores adicionales para los atributos de CSS relacionados con el color y sus significados generales. Cualquier propiedad de color (por ej., 'color' o 'background-color') puede tomar uno de los siguientes nombres. Aunque estos no distinguen entre mayúsculas y minúsculas, se recomienda que la mezcla de mayúsculas y minúsculas mostrada abajo sea utilizada para hacer más legibles los nombres.
Por ejemplo, para poner como colores de primer plano y de fondo de un párrafo los mismos colores de primer plano y de fondo que la ventana del usuario, escriba lo siguiente:
P { color: WindowText; background-color: Window }
De igual modo que para los colores, los autores pueden especificar las fuentes de manera de utilizar los recursos del sistema del usuario. Por favor, consulte la propiedad 'font' para más detalles.
A veces, los autores de hojas de estilo pueden desear crear contornos alrededor de los objetos visuales como botones, campos activos de los formularios, mapas de imágenes, etc., para enfatizarlos. Los contornos de CSS difieren de los borders en los siguientes sentidos:
Las propiedades de los contorno controlan el estilo de estos contornos dinámicos.
| Valor: | [ <'outline-color'> || <'outline-style'> || <'outline-width'> ] | inherit |
| Inicial: | ver las propiedades individuales |
| Se aplica a: | todos los elementos |
| Se hereda: | no |
| Porcentajes: | N/A |
| Medios: | visuales, interactivos |
| Valor: | <border-width> | inherit |
| Inicial: | medium |
| Se aplica a: | todos los elementos |
| Se hereda: | no |
| Porcentajes: | N/A |
| Medios: | visuales, interactivos |
| Valor: | <border-style> | inherit |
| Inicial: | none |
| Se aplica a: | todos los elementos |
| Se hereda: | no |
| Porcentajes: | N/A |
| Medios: | visuales, interactivos |
| Valor: | <color> | invert | inherit |
| Inicial: | invert |
| Se aplica a: | todos los elementos |
| Se hereda: | no |
| Porcentajes: | N/A |
| Medios: | visuales, interactivos |
El contorno creado con las propiedades de contorno es dibujado "sobre" una caja, es decir, el contorno está siempre encima, y no influye en la posición o tamaño de la caja, o de ninguna otra caja. Por lo tanto, mostrar u ocultar los contornos no provoca el redibujado.
El contorno es dibujado comenzando junto fuera del límite del borde.
Los contornos pueden ser no rectangulares. Por ejemplo, si el elemento es dividido entre varias líneas, el contorno es el contorno mínimo que encierra a todas las cajas del elemento. En contraste con los bordes, el contorno no es abierto en la línea de finalización o comienzo de la caja, pero está siempre totalmente conectado.
La propiedad 'outline-width' acepta los mismos valores que 'border-width'.
La propiedad 'outline-style' acepta los mismos valores que 'border-style', excepto que 'hidden' no es un estilo de contorno lícito.
La propiedad 'outline-color' acepta todos los colores, como así también la palabra clave 'invert'. Se espera que 'invert' produzca una inversión de color en los pixeles de la pantalla. Este es un truco común para asegurarse que el borde del foco sea visible, sin que importe el color de fondo.
La propiedad 'outline' es una propiedad resumida, y determina las tres de 'outline-style', 'outline-width' y 'outline-color'.
Observe que el contorno es el mismo en todos los lados. Contrariamente a los bordes, no hay propiedades 'outline-top' o 'outline-left'.
Esta especificación no define cómo se dibujan los múltiples contornos solapados, o cómo los contornos son dibujados para las cajas que están parcialmente ocultas detrás de otros elementos.
Nota. Como el contorno del foco no afecta al formato (es decir, no se deja ningún espacio para él en el modelo de caja), bien puede tapar otros elementos de la página.
Aquí hay un ejemplo del dibujo de un contorno grueso alrededor del elemento BUTTON:
BUTTON { outline-width : thick }
Los scripts pueden usarse para cambiar dinámicamente el ancho del contorno, sin provocar el redibujado.
Las interfaces gráficas del usuario pueden usar contornos alrededor de los elementos para indicarle al usuario qué elemento de la página tiene el foco. Estos contornos son sumados a cualquier borde, y pasar entre contornos activados y desactivados no debe provocar el redibujado del documento. El foco es el sujeto de la interacción del usuario con un documento (por ej., introduciendo texto, seleccionando un botón, etc.). Las aplicaciones del usuario que dan soporte a los grupos de medios interactivos deben mantener identificada la ubicación del foco y también debe representar el foco. Esto puede realizarse utilizando contornos dinámicos junto con la pseudo-clase :focus.
Por ejemplo, para dibujar una línea negra gruesa alrededor de un elemento cuando éste tiene el foco, y una línea roja gruesa cuando está activado, pueden usarse las siguientes reglas:
:focus { outline: thick solid black }
:active { outline: thick solid red }
El grupo de trabajo de CSS considera que la amplificación de un documento o de partes de un documento de debe especificarse a través de las hojas de estilo. Las aplicaciones del usuario pueden dar soporte a tales amplificaciones de distintos modos (ej., imágenes más grandes, sonidos más fuertes, etc.).
Cuando amplía una página, las AU deben mantener las relaciones entre los elementos posicionados. Por ejemplo, una tira cómica puede estar compuesta de imágenes con elementos de texto superpuestos. Cuando amplía esta página, una aplicación del usuario debe mantener el texto dentro de los globos de la tira cómica.
|
Copyright © 1998 W3C (MIT, INRIA, Keio ), All Rights Reserved.
Traducción: Carlos Benavidez |