Códigos css

Códigos CSS

CSS possibilita definir uma variedade infinita de layouts e efeitos para um menu de navegação. O limite é a sua imaginação!

Um link visitado, não visitado, ativo ou no estado hover (quando você passa o mouse sobre ele) pode assumir aspectos (cores, fundos, etc...) diferentes através de CSS:

Abordarei neste tutorial a construção de dois menus verticais e uma barra de navegação.

Numa visão inicial mostro o menu em ação e a seguir apresento a folha de estilo e a marcação do código que faz o menu funcionar.

Caso você resolva copiar e colar os códigos, use os mostrados no tutorial, pois o do código fonte está adaptado para não conflitar com as estilizações do site e não funcionarão como mostrado.

Bons estudos.

Os seletores de links

São quatro os seletores dos links:
1.a:link define o estilo do link no estado inicial;
2.a:visited define o estilo do link visitado;
3.a:hover define o estilo do link quando passa-se o mouse sobre ele;
4.a:active define o estilo do link ativo (o que foi "clicado").

Menu #1

O menu em ação:
Home
CSS Tutorial
CSS Layout
CSS Links
CSS Menu
CSS Print
CSS @import
Contato

Screenshots do menu: Folha de estilos do menu
<style type="text/css">
#menuver { width: 11em; padding: 0; margin: 0; font: 12px Verdana, sans-serif; background: #000; border-top: 3px solid red; border-bottom: 3px solid red;
}
#menuver li { list-style: none; margin: 0.5em 0 0.5em 0.5em;
}
#menuver li a { margin:0; padding:0; text-decoration:none; color: #fff;
}
#menuver li a:visited { color: #fff;
}
#menuver li a:hover { background: #fff; color: #000;
}
#menuver li a:active { background: #ccc; color: #000;
}
</style>
Código HTML do menu <ul id="menuver">
<li>
<a href="#" title="Entrada no site">Home</a>
</li>
<li>
<a href="#" title="Área de tutorial CSS"
>CSS Tutorial</a>
</li>
<li>
<a