Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de CSS

CSS: lenguaje de estilo para las páginas web.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

.

Básicos					Avanzados					Practicas
Inicio	HTML	CSS	Complementos	Gestores de Contenido	Javascript	PHP básico	Nuevas Tendencias	Programación	Librerías	Mi primera web	Prácticas Web

RSS. Suscribir canal.

 

9. Otras propiedades CSS (I)

9.1 Cursor y perfil.

La propiedad cursor.

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; }

Perfil

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 no ocupan espacio, mientras que los bordes normales sí.
• Los perfiles pueden tener formas no rectangulares.

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:

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.

Texto con CSS.

Página creada por ANYELGUTI.

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