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

Visitas el mes pasado: 63

logo

Donativos

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




5. Barra de navegación (I)

5.2. Estilo

Paso 15

logo miweb

Contenido

En la página anterior hemos puesto el contenido de la barra de navegación. Al ver el resultado observamos que no se parece en nada a una barra de navegación, aunque el contenido está allí. Esto cambia totalmente al aplicarle el estilo CSS mediante el cual maquetamos y damos estilo a los elementos de la barra de navegación.

Para saber que elementos de la página se corresponden con la barra de navegación, veamos primero el contenido en el archivo index.html que se corresponde con la barra de navegación, y cuales son los elementos a los que deberemos aplicarles el estilo en CSS.

La barra de navegación tiene el siguiente código en HTML:

  <div id="navegacion">
    <div class="menu"><a href="index.html">Inicio</a></div>
    <div class="menu"><a href="listas.html">Listas</a></div>
    <div class="menu"><a href="tablas.html">Tablas</a></div>
    <div class="menu"><a href="Formularios.html">Formularios</a></div> 
    <div class="vacio"></div>
 </div>

Por lo que en CSS utilizaremos los selectores #navegación para referirnos a la barra en su totalidad; .menu para referirnos a cada uno de sus apartados, y .menu a para referirnos concretamente a los enlaces.


Maquetación

Para que la barra de navegación sea realmente una barra, deberemos poner todo su contenido en una sóla línea, y además darle un color y un estilo que la diferencie del resto de los elementos.

Para ello abrimos el archivo inicio.css con el editor de textos y añadimos al final del mismo la siguiente línea:

#navegacion { background-color: purple; padding: 5px 0px; }

Con esto cambiamos el color de fondo de la barra de navegación, que será un morado-purpura. Este color destaca sobre el resto de los elementos que le rodean, de manera que la barra de navegación queda fácilmente localizable.

También hemos puesto un pequeño margen interno (padding 5px 0px) que amplia la barra por arriba y por abajo, para que ésta quede un poco más grande que el texto.

Después pondremos todos los elementos o "divs" que contienen los enlaces en una misma línea, para ello delimitamos su anchura y los posicionamos en flotante. Incluiremos también en el archivo CSS, al final del mismo, la siguiente la siguiente línea:

.menu { width: 25%; float: left; }

Después de incluir estas líneas cerramos y guardamos el archivo inicio.css. Comprobamos después el resultado. Para ello abrimos el archivo index.html con el navegador, el cual debe quedar como el del siguiente enlace:


Al incluir al final de los divs de clase menu un div de clase vacio, éstos quedan dentro del elemento contenedor aunque estén posicionados de manera flotante, tal como ocurre con los elementos de la clase "mienlace" que hemos visto en páginas anteriores.


Estilo de enlaces

Ya nos queda sólo modificar el estilo de los enlaces para que éstos no sean igual que los que tenemos en la sección id="enlaces" y que resulten más visibles. lo primero que haremos será modificar el estilo general de los enlaces de la barra de navegación. Para ello, después de abrir el archivo inicio.css con el editor de textos, incluimos al final del mismo la siguiente línea.

.menu a { margin: 0px 50px; color: white; }

Con la propiedad margin: 0px 50px dejamos un margen a izquierda y derecha de los enlaces, que hacen que el primer enlace no queda pegado al borde izquierdo de la página, y los demás enlaces se vean más centrados.

La propiedad color:white hace que los enlaces se vean de un color blanco, que destaca sobre el fondo púrpura de la barra de navegación.

Ahora pondremos también el estilo para cambiar el aspecto del enlace cuando el usuario pase el ratón por encima (pseudoclase hover). Para ello añadimos también la siguiente línea:

.menu a:hover { color: yellow; font-style: normal; }

Con la propiedad color: yellow hacemos que al pasar el ratón por encima de los enlaces, éstos cambien al color amarillo.

La propiedad font-style: normal la ponemos para que no se vea el estilo de letra "italica" que hemos puesto para el resto de enlaces de la página, al pasar el ratón por encima. De esta manera recuperamos el estilo por defecto.

Una vez que hemos incluido estas dos líneas en el archivo CSS, lo cerramos y lo guardamos. Para comprobar el resultado abrimos el archivo index.html con el navegador. El resultado debe ser como en la siguiente página:


Si el resultado obtenido no es el mismo, repasa los códigos CSS y HTML de los archivos que componen esta página. y comprueba que estén bien escritos.


código del archivo CSS

Con esto completamos la barra de navegación. Para una mayor claridad vemos aquí el código del archivo inicio.css que tenemos que haber escrito hasta ahora:

/*archivo de estilo para página de inicio*/
* { margin: 0 auto; padding: 0; }
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; }
#cabecera img { float: left; width: 100px; margin-left: 50px; }
.mienlace { width: 30%; margin: 20px 1%; float: left; background-color: aqua }
.mienlace p { margin: 10px 60px; }
#cabecera { background-color: silver; padding: 20px 10px; }
#enlaces { background-color: yellow; width: 90%; border: 5px double red; }
.vacio { clear: both; }
#navegacion { background-color: purple; padding: 5px 0px; }
.menu { width: 25%; float: left; }
.menu a { margin: 0px 50px; color: white; }
.menu a:hover { color: yellow; font-style: normal; }

En color azul destacamos el código que hemos escrito en esta página. El resto del código es el que teníamos de páginas anteriores.

En el siguiente tema completaremos la primera página añadiendo al final de la misma una nueva sección o apartado, en el que se suele poner información sobre la propia página, su autor, propiedad del sitio, etc.: El pie de página.




En el siguiente tema completamos esta primera página mediante un pie de página

Pie de página.




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