| ||||
|
|
|
|
|
|
| |||
|
| |||
| ||||
Home - Diseño web - Estilos para el cursor
Estilos para el cursor
por Luciano Moreno, del departamento de diseño web de BJS
Software.
Las Hojas de Estilos en Cascada (CSS) nos ofrecen la posibilidad de cambiar las diferentes formas que por defecto presenta el cursor en nuestras páginas web. Generalmente, el cursor se presenta en forma de flecha inclinada, pasando a ser una mano cuando lo situamos sobre un enlace, una barra vertical sobre un texto, etc.
Aplicando CSS podemos fijar el aspecto que debe presentar el cursor cuando se sitúe sobre cada uno de los elementos de nuestra página. Si no especificamos el estilo para un elemento dado, el cursor aparecerá con el estilo del elemento padre, si se ha definido para él (recordemos el caracter jerárquico y la herencia de los atributos CSS).
Las diferentes propiedades CSS para el cursor y su correspondiente efecto las tenéis en la tabla siguiente, teniendo claro a la hora de aplicarlas que son soportadas por Internet Explorer y Netscape 6x, por lo que no surtirán efecto alguno en las versiones 4x de Netscape.
La forma de aplicación de un estilo para el cursor depende de cómo se asigne:
en línea:
<p style="cursor:hand">ejemplo de estilo en línea</p>
como clase en cabecera de página:
<html>
<head>
<title>Mi
página</title>
<style
type="text/css">
.parrafo1{cursor:move;}
</style>
</head>
<body>
<p
class="parrafo1">ejemplo de estilo en
cabecera</p>
</body>
</html>
como clase en fichero externo:
fichero externo estilos.css:
.parrafo2{cursor:wait;}
fichero principal home.html:
<html>
<head>
<title>Mi página</title>
<link rel="stylesheet" type="text/css" href="css/estilos.css">
</head>
<body>
<p
class=
"parafo2">ejemplo deestilo en fichero externo</p>
</body>
</html>
Ejemplo:
<p style="font-size:16px;font-family:Comics Sans MS;color:blue;cursor:w-resize;">Ejemplo de párrafo con estilo de cursor</p>
Que nos da:
Ejemplo de párrafo con estilo de cursor
Home - Diseño web - Estilos para el cursor