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.

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

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: 29-01-2016.

Visitas este mes: 24

Visitas el mes pasado: 37

logo

Donativos

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




3. Estilo con CSS (II)

3.3. Estilo de enlaces

Paso 10

logo miweb

Estilo general para enlaces

Por defecto los enlaces aparecen subrayados y en un color azul o morado. Pero esto no es normalmente lo que queremos para los enlaces de nuestra página. Así que en principio podemos cambiarlo desde el archivo CSS con la siguiente línea:

a {text-decoration: none; color: red; }

Aquí usamos el selector a para seleccionar todos los enlaces de la página. La propiedad text-decoration: none; quita el subrayado que tienen los enlaces por defecto mientras que con la propiedad color: red; cambiamos el color de los enlaces. Sin embargo para los enlaces de nuestra página pondremos la siguiente regla CSS:

a { text-decoration: none; font-weight: bold; font-size: 18px; font-family: tahoma, arial; }

Seguimos usando el selector a para seleccionar todos los enlaces de nuestra página, pero aquí les cambiamos el estilo con las siguientes propiedades:

Por último con otra regla CSS reduciremos el tamaño de las imágenes que actúan como enlaces, para ello pondremos la siguiente regla CSS:

a img { height: 150px; }

Como novedad vemos aquí un selector compuesto. Con a img indicamos que seleccionamos las etiquetas de imagen (img) que estén dentro de las etiquetas de enlace (a). La propiedad height: 150px; indica que el tamaño en altura de las imágenes será de 150 píxeles.

Escribimos por tanto , si no lo has hecho aún, estas dos propiedades en el archivo inicio.css. Para ello abrimos el archivo con el editor de textos (HTML-Kit) y las escribimos al final, a continuación de las que ya tenemos. El archivo inicio.css quedará así:

/*archivo de estilo para página de inicio*/
h1 {text-align: center; color: blue; font-size: 40px; font-family: arial; }
h2 {text-align: center; color: maroon; font-size: 30px; font-family: tahoma, verdana, arial; }
h3 {text-align: left; color: olive; font-size: 25px; font-family: stencil, impact, "times new roman";
    margin: 20px 100px; }
p { text-align: justify; margin: 1em 10em; font-family: verdana, nimrod, tahoma; 
    font-size: 14px; color: navy; }
a { text-decoration: none; font-weight: bold; font-size: 18px; font-family: tahoma, arial; }
a img { height: 150px; }

En color azul destacamos aquí las nuevas líneas que hemos añadido al archivo CSS. Una vez añadidas guardamos y cerramos el archivo, y comprobamos el resultado abriendo el archivo index.html con el navegador. El resultado debe quedar como la página del siguiente enlace:

El estilo del texto de los enlaces ha cambiado, ahora es un texto más grande y más grueso. También han cambiado las imágenes que hacen de enlace. Éstas son ahora más pequeñas.

Estilo especial de enlaces: pseudoclases

Sin embargo habrás observado en muchas páginas, que los enlaces pueden cambiar de aspecto cuando se les pasa el ratón por encima, o una vez que han sido visitados. Esto se debe a que un enlace puede tener diferentes estados, y a cada estado se le puede aplicar un estilo o pseudoclase distinto. Los estados que puede tener un enlace son los siguientes:

Podemos aplicar diferentes estilos a cada uno de los estados de un enlace, consiguiendo que éste cambie de estilo al cambiar de estado. Para ello añadimos en el selector de CSS una pseudoclase, que consiste en escribir el nombre del estado precedido de dos puntos, por ejemplo:

a:hover {color: red; }

Con esta regla el color de los enlaces cambia a rojo sólo cuando se les pasa el ratón por encima, (estado "hover"). Al dejar de estar el ratón encima vuelve a su color original.

Lo normal es poner un estilo general para los enlaces, donde se incluyen las propiedades que no cambian, y después poner el estilo con las pseudoclases, para las propiedades que queremos que cambien.

Nosotros así lo hacemos también para nuestra página de portada. Ya hemos puesto el estilo general, ahora pondremos el estilo para las pseudoclases. Éste será el siguiente:

a:link { color: navy; }

a:visited { color: blue; }

a:hover { color: green; font-style: italic; }

a:active {color: red; }

Definimos distintos colores para texto de los enlace según sea su estado. En el estado hover (pasar el ratón por encima) hemos definido también una nueva propiedad, font-style: italic. Esta propiedad pone el texto en cursiva (letra inclinada).

Para destacar las imágenes que sirven de enlace haremos éstas un poco más pequeñas cuando se les pase el ratón por encima. Para ello pondremos también la siguiente regla CSS:

a img:hover { height: 145px; }

Con esto reducimos la imagen 5 píxeles, al pasarle el ratón por encima, respecto al tamaño que le hemos puesto originalmente.

Ponemos las reglas CSS vistas aquí en el archivo CSS. Para ello abrimos el archivo CSS inicio.css con el editor de textos (HTML-Kit) y las escribimos después de lo que ya teníamos. El archivo CSS nos quedará así:

/*archivo de estilo para página de inicio*/
h1 {text-align: center; color: blue; font-size: 40px; font-family: arial; }
h2 {text-align: center; color: maroon; font-size: 30px; font-family: tahoma, verdana, arial; }
h3 {text-align: left; color: olive; font-size: 25px; font-family: stencil, impact, "times new roman";
    margin: 20px 100px; }
p { text-align: justify; margin: 1em 10em; font-family: verdana, nimrod, tahoma; 
    font-size: 14px; color: navy; }
a { text-decoration: none; font-weight: bold; font-size: 18px; font-family: tahoma, arial; }
a img { height: 150px; }
a:link { color: navy; }
a:visited { color: blue; }
a:hover { color: green; font-style: italic; }
a:active {color: red; }
a img:hover { height: 145px; }

En color azul destacamos las líneas que hemos añadido al archivo CSS y que son las vistas anteriormente.

Después de poner estas líneas en el archivo CSS lo guardamos, y comprobamos el resultado. Para ello abrimos la página index.html en el navegador, y ésta debe quedarnos como en la del siguiente enlace:

Como siempre, si no obtienes el mismo resultado que aquí te indicamos, repasa las reglas CSS; comprueba que éstas estén bien escritas.


En el siguiente paso empezamos un nuevo tema: la maquetación, es decir, distribuir los elementos en la página de manera que éstos estén en el sitio que nosotros queremos y no uno debajo de otro como hasta ahora.

Maquetación




Mi primera web

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