Interface de
usuarioInterface de
usuarioEn esta página se tratan los siguientes temas:
La propiedad cursor permite especificar el icono que se muestra al situar el cursor sobre un elemento. Los posibles valores son auto, crosshair, default, help, move, pointer, progress, n-resize, ne-resize, e-resize, se-resize, s-resize, sw-resize, w-resize, nw-resize, text y wait.
Los valores predefinidos son los siguientes:
  |
p {
cursor: auto;
}
|
Al situar el cursor del ratón
sobre este párrafo, la forma del cursor debe cambiar a uno parecido a
éste: |
| |
p {
cursor: crosshair;
}
|
Al situar el cursor del
ratón sobre este párrafo, la forma del cursor debe cambiar a uno
parecido a éste: |
| |
p {
cursor: default;
}
|
Al situar el cursor del ratón
sobre este párrafo, la forma del cursor debe cambiar a uno parecido a
éste: |
| |
p {
cursor: help;
}
|
Al situar el cursor del ratón
sobre este párrafo, la forma del cursor debe cambiar a uno parecido a
éste: |
| |
p {
cursor: move;
}
|
Al situar el cursor del ratón
sobre este párrafo, la forma del cursor debe cambiar a uno parecido a
éste: |
| |
p {
cursor: pointer;
}
|
Al situar el cursor del ratón
sobre este párrafo, la forma del cursor debe cambiar a uno parecido a
éste: |
| |
p {
cursor: progress;
}
|
Al situar el cursor del
ratón sobre este párrafo, la forma del cursor debe cambiar a uno
parecido a éste: |
| |
p {
cursor: n-resize;
}
|
Al situar el cursor del
ratón sobre este párrafo, la forma del cursor debe cambiar a uno
parecido a éste: |
| |
p {
cursor: ne-resize;
}
|
Al situar el cursor del
ratón sobre este párrafo, la forma del cursor debe cambiar a uno
parecido a éste: |
| |
p {
cursor: e-resize;
}
|
Al situar el cursor del
ratón sobre este párrafo, la forma del cursor debe cambiar a uno
parecido a éste: |
| |
p {
cursor: se-resize;
}
|
Al situar el cursor del
ratón sobre este párrafo, la forma del cursor debe cambiar a uno
parecido a éste: |
| |
p {
cursor: s-resize;
}
|
Al situar el cursor del
ratón sobre este párrafo, la forma del cursor debe cambiar a uno
parecido a éste: |
| |
p {
cursor: sw-resize;
}
|
Al situar el cursor del
ratón sobre este párrafo, la forma del cursor debe cambiar a uno
parecido a éste: |
| |
p {
cursor: w-resize;
}
|
Al situar el cursor del
ratón sobre este párrafo, la forma del cursor debe cambiar a uno
parecido a éste: |
| |
p {
cursor: nw-resize;
}
|
Al situar el cursor del
ratón sobre este párrafo, la forma del cursor debe cambiar a uno
parecido a éste: |
| |
p {
cursor: text;
}
|
Al situar el cursor del ratón
sobre este párrafo, la forma del cursor debe cambiar a uno parecido a
éste: |
| |
p {
cursor: wait;
}
|
Al situar el cursor del ratón
sobre este párrafo, la forma del cursor debe cambiar a uno parecido a
éste: |
También pueden utilizarse cursores personalizados, indicando la dirección de la imagen que se quiera emplear, aunque Internet Explorer solamente admite cursores en formato ICO o CUR, (ICO es el formato de los iconos de Windows y CUR es el formato de los cursores no animados de Windows, prácticamente idéntico al formato ICO). Se puede escribir una lista de cursores separados por comas para que el navegador utilice el primero disponible
 |
p {
cursor: url("../img/exclamacion.png"), wait;
}
|
Al situar el cursor del ratón sobre este párrafo, la forma del cursor debe cambiar a un signo de exclamación en color rojo (o a un reloj de arena si no se puede mostrar la exclamación). |
| |
p {
cursor: url("../img/exclamacion.cur"), wait;
}
|
Al situar el cursor del ratón sobre este párrafo, la forma del cursor debe cambiar a un signo de exclamación en color rojo (o a un reloj de arena si no se puede mostrar la exclamación). |
| |
p {
cursor: url("../img/exclamacion.ico"), wait;
}
|
Al situar el cursor del ratón sobre este párrafo, la forma del cursor debe cambiar a un signo de exclamación en color rojo (o a un reloj de arena si no se puede mostrar la exclamación). |
Volver al principio de la página
Un contorno es como un segundo borde, pero que no se tiene en cuenta al calcular el tamaño del elemento y que no tiene por qué ser rectangular.
La propiedad compuesta outline permite establecer un contorno a un elemento, indicando como en caso del borde, el color, el grosor y el estilo del contorno.
Nota: Internet Explorer 8 representa correctamente la propiedad outline. Las versiones anteriores lo hacían incorrectamente, como se comenta en la página de diferencias entre IE8 e IE7.
| |
p {
outline: red 3px solid;
}
|
Esto es un párrafo con contorno de estilo solid. |
Un elemento puede tener simultáneamente borde y contorno, como muestra el ejemplo siguiente:
| |
p {
outline: red 3px solid;
|
Esto es un párrafo con borde y contorno de estilo solid. |
El contorno se diferencia del borde en que el contorno no se tiene en cuenta al calcular el tamaño del elemento, mientras que el borde sí, como muestran los ejemplos siguientes:
| |
p.con-border {
border: black 10px solid;
}
|
Esto es un párrafo normal y corriente. Esto es un párrafo con borde de estilo solid. Esto es un párrafo normal y corriente. |
| |
p.con-outline {
outline: black 10px solid;
}
|
Esto es un párrafo normal y corriente. Esto es un párrafo con contorno de estilo solid. Esto es un párrafo normal y corriente. |
Esta diferencia es más evidente si el contorno se genera cuando el ratón pasa por encima del elemento. En el caso del borde, al añadirse el borde, los elementos siguientes se desplazan, pero en el caso del contorno, al generarse el contorno, los elementos siguientes no se desplazan.
| |
p.con-border:hover {
border: black 10px solid;
}
|
Esto es un párrafo normal y corriente. Cuando el ratón pasa por encima, se muestra un borde de estilo solid. Esto es un párrafo normal y corriente. |
| |
p.con-outline:hover {
outline: black 10px solid;
}
|
Esto es un párrafo normal y corriente. Cuando el ratón pasa por encima, se muestra un contorno de estilo solid. Esto es un párrafo normal y corriente. |
El contorno se diferencia también del borde en que el borde es siempre rectangular, mientras que el contorno no tiene por qué serlo.
| |
span.con-border {
border: black 3px solid;
}
|
Esto es un párrafo normal y corriente. Esta frase tiene un borde de estilo solid y para ver la diferencia entre borde y contorno, debería ocupar varias líneas. Esta frase ya no tiene ni borde ni contorno. |
| |
span.con-outline {
outline: black 3px solid;
}
|
Esto es un párrafo normal y corriente. Esta frase tiene un contorno de estilo solid y para ver la diferencia entre borde y contorno, debería ocupar varias líneas. Esta frase ya no tiene ni borde ni contorno. |
Nota: El contorno de un elemento en-línea no se muestra de la misma manera en Internet Explorer que en Firefox, como se comenta en la página de diferencias entre Firefox e Internet Explorer.
La propiedad outline admite como color el valor invert. Con este valor, el contorno toma el color opuesto al color de fondo del elemento.
Nota: Firefox no muestra el valor invert desde la versión FF3.0, como se comenta en la página de diferencias entre Firefox e Internet Explorer. En la página de bugs de Firefox se explica qué motivos dan los desarrolladores de Firefox para no hacerlo.
 |
body {
background-color: white;
}
|
Esto es un párrafo con contorno de estilo solid. |
| |
body {
background-color: black;
color:white;
}
|
Esto es un párrafo con contorno de estilo solid. |
| |
body {
background-color: red;
color:yellow;
}
|
Esto es un párrafo con contorno de estilo solid. |
Volver al principio de la página
Las propiedades outline-color, outline-width y outline-style permiten establecer, respectivamente, el color, el grosor y el estilo de los cuatro contornos de un elemento y se utilizan de la misma manera que las propiedades border-color, border-width y border-style.
Nota: Internet Explorer 8 representa correctamente las propiedades outline-color, outline-width y outline-style. Las versiones anteriores lo hacían incorrectamente, como se comenta en la página de diferencias entre IE8 e IE7.
| |
p {
outline-color: black;
outline-style: solid;
outline-width: 3px;
}
|
Esto es un párrafo con contorno de estilo solid. |
La propiedad outline-color admite el valor invert. Con este valor, el contorno toma el color opuesto al color de fondo del elemento.
Nota: Firefox no muestra el valor invert desde la versión FF3.0, como se comenta en la página de diferencias entre Firefox e Internet Explorer. En la página de bugs de Firefox se explica qué motivos dan los desarrolladores de Firefox para no hacerlo.
| |
body {
background-color: black;
color:white;
}
|
Esto es un párrafo con contorno de estilo solid. |
Volver al principio de la página
Autor: Bartolomé Sintes Marco
.
.
.
.
.
.
.
.
.
.
.
.