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.

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:

• padding : 0.3em 1em : Establece una separación del texto, tanto de los lados (1em), como del texto superior e inferior (0.3em).
• display: block : Convierte los enlaces en elementos de bloque que ocupan toda la línea y no sólo el espacio que ocupa el texto. Esto se hace para que al cambiar el color de fondo se cambie el color en toda la línea.
• text-align: left : Alineación del texto a la derecha.
• font-weight: bold : Pone el texto en negrita.

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:

• text-decoration : Indica distintos estilos de mostrar el texto. el valor none indica que el texto aparece sin nada, por lo que se quita el subrayado. y el valor underline muestra el texto con una línea de subrayado.
• color : Indica el color del texto, que será diferente en las dos primeras pseudoclases de las dos ultimas.
• background-color : Nos dará un color de fondo distinto cuando pasemos el ratón por encima del enlace (hover) y cuando se esté abriendo (active).

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

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