Interfaz de usuario

Tabla de contenidos

1. cursor
2. outline
3. outline-color
4. outline-style
5. outline-width

cursor

Descripción

Indica el aspecto del cursor al situarse sobre el elemento.

Valores posibles

• Un URL: Especifica una imagen con la que sustituir al puntero.
• auto: El agente de usuario establece su aspecto dependiendo del contexto.
• default: El cursor por defecto, por lo general una flecha.
• pointer: Suele ser una mano con un dedo presto a pulsar. Sí, es pointer, no hand.
• crosshair: Una cruz similar al signo +.
• move: Es el icono del sistema perativo que se emplea para indicar que algo se puede mover.
• e-resize: Es el icono del sistema perativo que se emplea para arrastrar algo de rerecha a izquierda.
• ne-resize: Es el icono del sistema perativo que se emplea para arrastrar la esquina superior derecha de algo.
• nw-resize: Es el icono del sistema perativo que se emplea para arrastrar la esquina superior izquierda de algo.
• n-resize: Es el icono del sistema perativo que se emplea para arrastrar algo de arriba a abajo.
• se-resize: Es el icono del sistema perativo que se emplea para arrastrar la esquina inferior derecha de algo.
• sw-resize: Es el icono del sistema perativo que se emplea para arrastrar la esquina inferior izquierda de algo.
• s-resize: Es el icono del sistema perativo que se emplea para arrastrar algo de arriba a abajo.
• w-resize: Es el icono del sistema perativo que se emplea para arrastrar algo de rerecha a izquierda.
• text: Es el icono del sistema perativo que se emplea para seleccionar un texto.
• wait: El icono del sistema perativo que indica una espera.
• help: Por lo general es el puntero por defecto acompañado de un signo de interrogación.
• progress: Por lo general es el puntero por defecto acompañado del icono del sistema perativo que indica una espera.
• inherit: El elemento hereda el valor del elemento padre para esta propiedad.

Valor por defecto

auto.

Aplicable a

Todos los elementos.

¿Heredada?

Sí.

Notas

En caso de que se asigne un URL como valor, hay que indicar tras una coma un valor alternativo para el caso de que la imagen no se encuentre disponible:

    abbr{
        cursor:url(imagenes/mi_cursor.png),auto;
    }                
                

Ver ejemplos de los valores de cursor.

outline [propiedad de conjunto]

Descripción

Propiedad de conjunto para indicar el aspecto de la línea del contorno de un elemento, engloba las propiedades outline-color, outline-style y outline-width.

Aplicable a

Todos los elementos.

¿Heredada?

No.

Notas

A diferencia de border, el espacio de outline no afecta a la posición de los elementos adyacentes.

outline-color

Descripción

Indica el color de la línea de contorno del elemento.

Valores posibles

• Un color.
• invert: El color es el inverso del de los píxeles que aparezcan en pantalla para el espacio que ocupa el contorno.
• inherit: El elemento hereda el valor del elemento padre para esta propiedad.

Valor por defecto

Depende del agente de usuario, aunque si la soportan suele ser invert.

Aplicable a

Todos los elementos.

¿Heredada?

No.

Notas

A diferencia de border-color, no se puede definir un valor para cada lado independientemente.

Ver ejemplos de los valores de outline-color.

outline-style

Descripción

Indica el estilo de la línea de contorno del elemento.

Valores posibles

• none: Especifica que no debe existir borde. Si se especifica, anula cualquier definición de ancho o color del borde.
• hidden: Igual que none.
• dotted: El borde aparece punteado.
• dashed: El borde se muestra como una línea discontinua.
• solid: El borde se muestra como una línea continua.
• double: El borde aparece como dos líneas sólidas. No se aprecia a menos que el grosor del mismo sea como mínimo de 3 píxeles.
• groove: El borde presenta el aspecto de un surco o una arista.
• ridge: Como groove, pero invirtiendo los colores.
• inset: El borde parece hundirse con respecto al plano.
• outset: El borde parece sobresalir con respecto al plano.

Valor por defecto

none.

Aplicable a

Todos los elementos.

¿Heredada?

No.

Notas

A diferencia de border-style, no se puede definir un valor para cada lado independientemente.

Ver ejemplos de los valores de outline-style.

outline-width

Descripción

Indica el grosor de la línea de contorno del elemento.

Valores posibles

• Una medida absoluta o relativa. No puede ser un valor negativo.
• thin: Establece un borde fino.
• medium: Establece un borde medio.
• thick: Establece un borde grueso.
• inherit: El elemento hereda el valor del elemento padre para esta propiedad.

Valor por defecto

medium.

Aplicable a

Todos los elementos.

¿Heredada?

No.

Notas

A diferencia de border-width, no se puede definir un valor para cada lado independientemente.

Ver ejemplos de los valores de outline-width.