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: 8

Visitas el mes pasado: 25

logo

Donativos

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




Menú de enlces (III)

11.3. Estilo de enlaces

Estilo general de enlaces.

En el paso anterior estábamos aplicando estilo a la lista del menú, y nos faltaba aplicar el estilo a los enlaces. Aplicaremos en primer lugar aquellas propiedades que son comunes a los distintos estados (o pseudoclases) de los enlaces.

Abrimos el archivo general.css con el HTML-Kit y después de la última línea escribimos lo siguiente (texto en verde):


#menu h4 { margin: 0px; padding : 0.5em 1em; font-size : 1.1em ; 
          font-family : verdana ; font-weight: bold; text-align: left; }
#menu ul {width: 100%; list-style: none;  margin: 0px; padding: 0px;}
#menu a { padding : 0.3em 1em; display: block; 
       text-align: left; font-weight: bold; }


Vamos a ver cuales son las propiedades que hemos aplicado:

Después de escribir la línea anterior, guardamos el archivo CSS, y abrimos el archivo plantilla.html con el navegador, para ver los cambios:

La página quedará así: Ver mi página


Estilo de pseudoclases

Faltan todavía algunos cambios en el estilo, que los aplicaremos en los enlaces mediante las pseudoclases. Para ello abrimos el archivo general.css con el HTML-Kit y después de la última línea escribimos las siguientes (texto en verde):


#menu h4 { margin: 0px; padding : 0.5em 1em; font-size : 1.1em ; 
           font-family : verdana ; font-weight: bold; text-align: left; }
#menu ul {width: 100%; list-style: none;  margin: 0px; padding: 0px;}
#menu a { padding : 0.3em 1em; display: block; text-align: left; font-weight: bold; }
#menu a:link { text-decoration: none;  color:#330099; }
#menu a:visited { text-decoration: none;  color:#330099; }
#menu a:hover { text-decoration: underline; color: #000099; background-color:#dcdcdc; }
#menu a:active { text-decoration: underline; color: #000099; background-color:#dcdcdc; }


Como puedes ver las propiedades para las pseudoclases "link" (normal) y "visited" (visitado) son las mismas y las propiedades de las pseudoclases "hover" (con el ratón) y "active" (activo) también son iguales.

Veamos qué propiedades hemos aplicado:

Una vez escritas estas líneas cerramos el archivo CSS, y abrimos el archivo plantilla.html con el navegador para ver el resultado.

La página quedará así: Ver mi página


Ahora ya hemos acabado el menú de enlaces. El próximo paso es dar forma al div de contenidos, pero eso ya lo haremos en la próxima lección.


Ir a la siguiente lección: El contenido







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