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.

Mi primera web

Aprender a hacer una sencilla web paso a paso partiendo de cero.

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

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

RSS. Suscribir canal.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

4. Lista con enlaces (IV)

4.4 Estilo de enlaces

pseudoclases CSS para enlaces.

Un enlace puede tener distintos estados, es decir: puede estar en su estado inicial, puede que ya haya sido visitado, o puede tener el ratón encima de él, o estar en el momento de su activación. Dependiendo de estos estados tenemos las pseudoclases, que en el código CSS permiten dar diferentes propiedades a un mismo enlace, dependiendo de en que estado se encuentre.

Podemos , por tanto definir las propiedades para un enlace de una forma general, o definir las propiedades para cada una de las pseudoclases.

En el código CSS se definen cuatro pseudoclases para los enlaces, estas dependen del estado del enlace. Esto lo comprenderemos mejor viendo sus códigos:

El selector del enlace queda de la siguiente manera:

• a:link { ... } : Enlace en su estado inicial, no ha sido visitado.
• a:visited { ... } : Enlace una vez que ha sido visitado.
• a:hover { ... } : Enlace mientras se le pasa el ratón por encima.
• a:active { ... } : Enlace en el momento en que se está abriendo.

podemos, por tanto, aplicar diferente estilo CSS a un mismo enlace dependiendo del estado en que se encuentre, podemos por ejemplo, hacer que cambie el color o el tipo de letra cuando pasemos el ratón por encima, o una vez ya visitado.

Fíjate que las palabras :link :visited :hover :active, van siempre precedidas del signo de los dos puntos ( : ). Cuando damos estilo a un enlace mediante las pseudoclases, éstas deben escribirse siempre en el orden que hemos visto, y para evitar errores del navegador, no debemos omitir ninguna. aunque a alguna de ellas no le demos ninguna orden (en ese caso dejaremos vacío el texto entre las llaves)

Aplicar estilo

Ahora que ya hemos visto cómo dar estilo a los enlaces, vamos a aplicarlo a los de nuestra página.

Vamos a dejar el mismo estilo que en el texto de la lista, pero cambiando el color. aunque en primer lugar lo que haremos será quitarle la raya del subrayado.

Para ello abre el archivo estilo.css con el bloc de notas, y al después de la ultima línea escribes:

a {text-decoration: none}

La propiedad text-decoration se emplea para mostrar el texto de diferentes maneras, los valores más habituales son: underline, para el subrayado;line-through, tachado del texto; blink, que deja el texto parpadeante; y none, deja el texto sin adornos, y se emplea principalmente para quitar el subrayado a los enlaces.

Una vez escrita la línea en el bloc de notas, guardamos y cerramos éste. y abrimos el archivo index.html para comprobar los cambios.

Tu página Web quedará así Ver mi Web.

Verás que los enlaces ya no están subrayados. Ahora en el siguiente paso les cambiaremos el color, poniendo diferentes colores, según sea su estado.

Despúes de buscar varios colores, tal como hicimos en el paso 3.4 (cambiar el fondo) nos hemos decidido por los siguientes colores:

• Estado=link : rojo=69, verde=69, azul=159.
• Estado=visited : rojo=149, verde=116, azul=207.
• Estado=hover, active : rojo=175, verde=54, azul=93.

Ahora abre el archivo estilo.css con el bloc de notas y después de la ultima línea escribimos lo siguiente:

a:link { color: rgb(69,69,159); }

a:visited { color: rgb(149,116),207; }

a:hover { color: rgb(175,54,93); }

a:active { color: rgb(175,54,93); }

El archivo estilo.css quedará así:(en verde las últimas líneas, que se refieren a los enlaces)

h1 { text-align: center; font-size: 2.5em; font-family: verdana; color: purple }
h2 { text-align: center; font-size: 1.9em; font-family: "times new roman"; color: olive; }
p { text-align: justify ; font-size: 1.1em ; font-family: arial; color: navy;
    padding-left: 3em; padding-right: 3em; padding-top: 0.5em; text-indent: 2.5em; }
.dibujo { float: right; margin-left: 2em; margin-right: 3em; margin-bottom: 1em; }
body { background-color: rgb(239,226,254);  background-image: url("objetos/fondo.gif"); }
li { text-align: justify; font-size: 1.1em; font-family: arial; color: navy; 
     margin-left: 3em; padding-right: 3em; padding-top: 0.5em; }
ul  { list-style-type: square; }

a {text-decoration: none}
a:link { color: rgb(69,69,159); }
a:visited { color: rgb(149,116,207); }
a:hover { color: rgb(175,54,93); }
a:active { color: rgb(175,54,93); }

Una vez que hemos escrito el código CSS en nuestra página, guardamos y cerramos el bloc de notas, y abrimos el archivo index.html para comprobar el cambio.

Tu página Web quedará así Ver mi Web.

Comprueba que los enlaces cambian de color al pasar el ratón por encima, y después de ser visitados, aunque hay algunos navegadores (Mozilla, por ejemplo) en que no se ve el estado visited.

En el siguiente tema insertaremos un menú para enlaces internos en el lateral derecho de nuestra Web.

Ir al siguiente paso: Menú lateral.

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