CSS: lenguaje de estilo para las páginas web.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 39
Visitas el mes pasado: 84
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Si este sitio te parece interesante puedes contribuir con una pequeña aportación.
En CSS podemos modificar el aspecto del cursor (puntero del ratón) mediante la propiedad cursor
.
El cursor tomará la forma indicada en la propiedad al pasar por encima del elemento.
los valores de la propiedad indican las distintas formas que puede tomar el cursor.
Tambien podemos poner una pequeña imagen como cursor con un valor de "url".
La definición de esta propiedad es la siguiente:
cursor | Puntero del ratón. |
---|---|
Valores | ( (<url> ,)* ( auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ) ) | inherit |
Descripción | Permite personalizar el puntero del ratón |
Valor inicial | auto |
Se aplica a | Todos los elementos. |
La propiedad Cursor permite seleccionar el puntero entre los elementos disponibles en el sistema (flecha, mano, reloj de arena, etc.). Además permite indicar una imagen para mostrarla como puntero personalizado, aunque ésto sólo funciona con Internet Explorer.
La imagen se busca mediante el valor URL, el cual toma la siguiente forma:
{cursor: URL("ruta_imagen"); }
En este párrafo se ha aplicado la propiedad anterior, si pasas el puntero del ratón por encima verás que éste se convierte en una imagen (sólo funciona con Internet explorer).
Vamos a ver ahora el resto de valores de esta propiedad y qué navegadores lo soportan. Al pasar el ratón por encima de la definición, verás el aspecto que tiene el cursor:
default
: En todos los navegadores.crosshair
: En todos los navegadores.hand
: Sólo en Internet Explorer.pointer
: Todos menos Internet Explorer en versiones antiguas.move
: En todos los navegadores.text
: En todos los navegadores.wait
: En todos los navegadores.help
: En todos los navegadores.n-resize
: En todos los navegadores.ne-resize
: En todos los navegadores.e-resize
: En todos los navegadores.se-resize
: En todos los navegadores.s-resize
: En todos los navegadores.sw-resize
: En todos los navegadores.w-resize
: En todos los navegadores.nw-resize
: En todos los navegadores.progress
: En todos los navegadores.not-allowed
: En todos los navegadores excepto Opera.no-drop
: Sólo Internet Explorer, los demás muestran como en not-allowed
.
No cambia en Opera.vertical-text
: En todos los navegadores excepto Opera.all-scroll
: Sólo Internet Explorer, los demás excepto Opera muestran como en move
.col-resize
: En todos los navegadores excepto Opera..row-resize
: En todos los navegadores excepto Opera..Podemos poner varios valores (o imágenes) para un mismo elemento, de manera que el navegador intentará cargar el primero, si no lo consigue, probará con el siguiente, y así hasta que consiga cargar uno. Los valores se separan por comas, ejemplo:
p { cursor: url("ruta_imagen1"), url("ruta_imagen2"), move; }
Podemos establecer el perfil de un elemento mediante la propiedad outline
. Esta propiedad
funciona de forma parecida a la propiedad border
sin embargo tiene algunas diferencias
Veamos su definición:
outline | Estilo del perfil de un elemento |
---|---|
Valores | <medida> || <color> || <estilo> |
Descripción | Establece el estilo del perfil de un elemento |
Valor inicial | - |
se aplica a | todos los elementos |
Los valores indican el color, el grosor y el estilo del perfil de un elemento. Los estilos que se pueden utilizar son los mismos que para la propiedad border.
Aunque esta propiedad es muy parecida a la propiedad border
tiene
dos diferencias importantes:
Los perfiles u outline
siempre se dibujan "por encima del elemento",
por lo que no modifican la posición o el tamaño total de los elementos. Veamos estos
dos elementos:
Texto encerrado en un borde
Texto encerrado en un perfil
aparentemente son iguales, pero en el segundo elemento la línea que lo rodea no ocupa espacio en el diseño de cajas, ya que está superpuesta.
Los perfiles no tienen por qué ser cuadrados, observese el siguiente ejemplo:
Texto encerrado en un espacio reducido
Texto encerrado en un espacio reducido
En el primer ejemplo a un elemento en linea se le aplica un borde, al no caber en una sola línea, el borde sigue mostrandose en las líneas inferiores, pero el borde izquierdo y derecho sólo se muestra al principio y al final del elemento.
En el segundo se le ha aplicado un perfil. todas las líneas tienen cierre vertical por ambos lados.
El perfil es único para cada elemento, por lo que no se pueden establecer distintas propiedades para la parte superior, inferior, izquierda o derecha del elemento. En realidad es una línea que rodea al elemento, por lo que en toda su extensión tiene los mismos valores.
En la siguiente página veremos cómo insertar texto con el código CSS.
Sugerencias:
aprendeweb@aprende-web.net. Envia un
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com