Entendido.

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

Logo

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++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net




Sobre ésta página

Ültima modificación: 22-08-2017.

Visitas este mes: 51

Visitas el mes pasado: 43

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de CSS
Desarrollo Web, por Miguel Angel Álvarez
Cómo crear tu Web: curso de estilos CSS
ComoCrearTuWeb, Por Georgens
Libros Web: introducción a CSS
Libros web, por Javier Eguíluz Pérez
Curso de css: Programación Web
www.programacionweb.net
WebEstilo: manual de css
www.webestilo.com
W3 schools; CSS Tutorial
www.w3schools.com

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




9. Otras propiedades CSS (I)

9.1 Cursor y perfil.

css

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:

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 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.

Texto con CSS.



manual de CSS

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com