CSS significa Cascade Styling Sheet, que em Português se designa como Folhas de Estilo em Cascata. CSS alarga os horizontes do programador e do designer, permitindo criar as páginas de uma forma mais concisa e trabalhada, podendo assim concluir que de certa forma, o resultado final é mais controlado pelos seus criadores. O que se faz com CSS e não se faz com HTML dá um grande empurrão a quem aprende e sabe trabalhar com CSS tem seguramente melhores resultados do que aquele que trabalha apenas com HTML. Está na hora de você aprender CSS, assim vamos dar um cheirinho sobre essa matéria, que irá ser aprofundada mais tarde. Começamos neste artigo por Criar um Menu Simples com CSS.

1. SELECTORES DOS LINKS

Existem 4 selectores dos links: link, visited, hover e active. Cada um deles define um estilo diferente:

  • a:link – estilo do link no seu estado inicial
  • a:visited – estilo do link depois de visitado
  • a:hover – estilo do link quando se passa o rato sobre ele
  • a:active – estilo do link que foi clicado, enquanto estiver activo

2. EXEMPLO MENU VERTICAL

<!--- Aqui começa o Código CSS --->

<style type="text/css">
#menuexemplo {
width: 180px;
padding: 0;
margin-left: 25px;
font: 12px Verdana, sans-serif;
background: #fff;
border-top: 3px solid orange;
border-bottom: 3px solid orange;
}
#menuexemplo li {
list-style: none;
margin: 0.5em 0 0.5em 0.5em;
}
#menuexemplo li a {
margin:0;
padding:0;
text-decoration:none;
color: #000;
}
#menuexemplo li a:visited {
color: #000;
}
#menuexemplo li a:hover {
font: 15px Verdana, sans-serif;
}
#menuexemplo li a:active {
background: #ccc;
color: #000;
}
</style>
<!--- aqui acaba o código CSS --->
<!--- aqui começa o código HTML --->

<ul id="menuexemplo">
<li>
<a href="#" title="Entrada no site">Inicio</a>
</li>
<li>
<a href="http://www.escolacriatividade.com/" title="Escola de Criatividade">Escola de Criatividade</a>
</li>
<li>
<a href="http://www.escolapsicologia.com/" title="Escola de Psicologia">Escola de Psicologia</a>
</li>
<li>
<a href="http://www.escoladinheiro.com/" title="Escola de Dinheiro">Escola de Dinheiro</a>
</li>
<li>
<a href="http://www.google.pt/" title="Google">Google.pt</a>
</li>
<li>
<a href="http://www.digg.com*" title="Digg">Digg.com</a>
</li>
</ul>
<!--- Aqui acaba o código HTMl --->

Aqui fica uma imagem do menu vertical

3. EXEMPLO MENU HORIZONTAL

<!--- Aqui começa o Código CSS --->

<style type="text/css">
#menuexemplo2 {
border:none;
margin: 0;
font: 12px Arial, sans-serif;
}
#menuexemplo2 li {
list-style: none;
margin: 0;
display: inline;
}
#menuexemplo2 li a {
height:1px;
padding: 3px 1px;
margin:0;
border-top: 2px solid orange;
border-bottom: 2px solid orange;
background: #444;
text-decoration: none;
}
#menuexemplo2 li a:link {
color: #fff;
}
#menuexemplo2 li a:visited {
color: #fff;
}
#menuexemplo2 li a:hover {
background: #fff;
color: #000;
border-color: red;
}
</style>
<!--- aqui acaba o código CSS --->
<!--- aqui começa o código HTML --->

<ul id="menuexemplo2">
<li>
<a href="#" title="Entrada no site">Inicio</a>
</li>
<li>
<a href="http://www.escolacriatividade.com/" title="Escola de Criatividade">Escola de Criatividade</a>
</li>
<li>
<a href="http://www.escolapsicologia.com/" title="Escola de Psicologia">Escola de Psicologia</a>
</li>
<li>
<a href="http://www.escoladinheiro.com/" title="Escola de Dinheiro">Escola de Dinheiro</a>
</li>
<li>
<a href="http://www.google.pt/" title="Google">Google.pt</a>
</li>
<li>
<a href="http://www.digg.com*" title="Digg">Digg.com</a>
</li>
</ul>
<!--- Aqui acaba o código HTMl --->

Aqui fica uma imagem do menu horizontal

Experimente aplicar esse código numa página sua, e edite as diferentes componentes do código para chegar no resultado que mais deseja. Gostou do artigo? Participe com seus comentários!

Até já!

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos


  1. EuJogador
    23 de dezembro de 2010

    Olá, eu queria fazer um vertical, para o meu blog:
    http://eujogador-pt.blogspot.com , mas queria que fosse como o da escola criatividade, ao passar o rato por cima, descem mais opções.
    É desta maneira?
    Aguardo resposta e obrigado pela atenção



  2. como montar um blog
    11 de março de 2012

    Gostei do post! Já adicionado o blog nos meus favoritos! abrs



  3. Felipe
    22 de abril de 2014

    Se é simples isto eu posso concordar, mas bonito? kkkk


RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz