¡CSS en acción!
Seleccione otra hoja de estilo para navegar:
Actual: default.css

Default Dexter Didi Dibujo Grafo Metal Sistema  

Ver explicación

 

Introducción

Existen dos propiedades pertenecientes a la interfaz del usuario (los controles y mecanismos ofrecidos por el navegador para la interacción con el usuario) que están muy relacionados con el formato visual y los efectos visuales en la página: 'cursor' y 'outline'.

Otras propiedades referidas a la interfaz del usuario, como el uso de los colores del entorno gráfico y las fuentes del sistema del usuario son tratados en otras secciones de este manual.

 Volver 

Cursores: la propiedad 'cursor'

'cursor'
Valores:	[ [<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
Valor inicial:	auto
Se aplica a:	todos los elementos
Se hereda?:	si
Porcentajes:	no admitidos

Esta propiedad especifica el tipo de cursor que será utilizado para el dispositivo señalador. Los valores tienen los siguientes significados:

auto

El navegador determina el cursor a mostrar basado en el contexto actual.

crosshair

Una cruz simple.

default

El cursor predeterminado de la plataforma. A menudo es una flecha.

pointer

El cursor es un puntero que indica un enlace.

move

Indica que algo será movido.

e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize

Indica que algún borde será movido. Por ejemplo, el cursor 'se-resize' se usa cuando el movimiento comienza desde la esquina sudeste de la caja.

text

Indica texto que puede seleccionarse. A menudo es una barra-I.

wait

Indica que el programa está ocupado y el usuario debe esperar. A menudo es un reloj.

help

Hay ayuda disponible sobre el objeto señalado por el cursor. A menudo es un signo de interrogación.

<uri>

La aplicación del usuario recupera el cursor señalado por el URI. Si la aplicación del usuario no puede manejar el primero de una lista de cursores, debe intentar manejar el segundo, etc. Si la aplicación del usuario no puede manejar ningún cursor definido por el usuario, debe usar el cursor genérico al final de la lista.

 Ver 

P { cursor: url("micursor.cur"), text; }

 Volver 

Contornos dinámicos: la propiedad 'outline'

Con CSS podemos 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 bordes en los siguientes sentidos:

• Los contornos no ocupan espacio.
• Los contornos pueden ser no rectangulares.

Estas propiedades controlan el estilo de los contornos dinámicos:

 

'outline'
Valores:	[ <'outline-color'> || <'outline-style'> || <'outline-width'> ] | inherit
Valor inicial:	ver las propiedades individuales
Se aplica a:	todos los elementos
Se hereda?:	no
Porcentajes:	no admitidos

'outline-width'

'outline-width'
Valores:	<border-width> | inherit
Valor inicial:	medium
Se aplica a:	todos los elementos
Se hereda?:	no
Porcentajes:	no admitidos

'outline-style'

'outline-style'
Valores:	<border-style> | inherit
Valor inicial:	none
Se aplica a:	todos los elementos
Se hereda?:	no
Porcentajes:	no admitidos

'outline-color'

'outline-color'
Valores:	<color> | invert | inherit
Valor inicial:	invert
Se aplica a:	todos los elementos
Se hereda?:	no
Porcentajes:	no admitidos

Estas son características de los contornos:

• El 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.
• 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.
• La propiedad 'outline-width' acepta los mismos valores que 'border-width'.
• La propiedad 'outline-style' acepta los mismos valores que 'border-style', excepto 'hidden'.
• 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.
• El contorno es el mismo en todos los lados. Contrariamente a los bordes, no hay propiedades 'outline-top' o 'outline-left'.

 Ver 

BUTTON { outline-width: thick }

 Volver