A função do CSS é definir regras de formatação e estilo de texto dentro de páginas web, então em nosso sistema de hoje vamos usar uma página em HTML e uma em CSS para criar um menu que mude de cor, o que gera um efeito muito interessante para sua página.
Primeiramente vamos criar nossa página em HTML com o nome menu.html para criar está página poremos usar varias ferramentas, como Notepad++ um ótimo editor de código e que pode ser encontrado facilmente na internet para download.
Criando o menu em HTML para criarmos o menu primeiro vamos criar uma lista não ordenada (tag UL), com 5 itens contendo um link cada um. Isto deve ser feito diretamente na página HTML, com o seguinte código.
<ul> <li><a href="#">link 1</a></li> <li><a href="#">link 2</a></li> <li><a href="#">link 3</a></li> <li><a href="#">link 4</a></li> <li><a href="#">link 5</a></li> </ul>
Lembrando que este código deve estar entre as tags <body></body> de sua página.
Cada item LI será um botão do nosso menu, e cada um deles terá seu respectivo link.
Até aqui temos a lista dos links para as páginas que você deseja. Porém como o CSS ira funcionar? Nós colocamos o seguinte comando no topo de nossa página para chamar a folha de estilos:
<link href="css.css" rel="stylesheet" type="text/css" />
Então até agora nossa página se encontra assim.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Exemplo de Menu em HTML com CSS - YESbr Agência Web</title> <link href="css.css" rel="stylesheet" type="text/css" /> </head> <body> <ul> <li><a href="#">link 1</a></li> <li><a href="#">link 2</a></li> <li><a href="#">link 3</a></li> <li><a href="#">link 4</a></li> <li><a href="#">link 5</a></li> </ul> </body> </html>
Agora iremos criar o arquivo chamado css.css na mesma página que nosso página html, podemos criar em outro lugar porem teremos que alterar o destino no começo de nossa página html.
Criando uma página CSS
Para criação de nossa página de CSS nós temos algumas características que mudam e que podem fazer uma grande diferença futuramente nós podemos comentar algumas linhas, linhas comentadas estão entre as tags /* e */ ou seja tudo que estiver dentro destra linha não será lida pelo sistema portanto podemos comentar o que cada parte do código ira fazer, este tipo de coisa que parece pouco importante pode fazer realente uma grande diferença.
A estrutura de uma página css também é diferente de uma html, pois ela não começa com nenhuma tag html.
Dentro da página CSS, nós iremos colocar o estilo para cada elemento de nosso menu.
Primeiramente iremos atribuir características de fontes para toda a página, apenas para uma melhor exibição:
* {
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
}
Os próximos códigos vamos usar para poder retirar a marcação dos itens da lista, bem como colocá-los sempre na mesma linha, uma vez que, por padrão, eles vem um embaixo do outro. Vamos também redefinir as margins internas e externas.
ul {
margin: 0;
padding:0;
}
li {
list-style: none;
margin: 10px;
display: inline;
}
Agora vamos definir o estilo dos links, para que a visualização dos mesmos fique mais agradável.
li a {
padding: 5px 10px;
margin:0;
border: 0px solid #f00;
background: #903;
text-decoration: none;
color:#FFF;
/* cantos arredondados */
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
li a:hover {
background: #CCC;
color: #000;
border-color: #000;
}
O código completo de nossa página CSS fica assim:
* {
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
}
ul {
margin: 0;
padding:0;
}
li {
list-style: none;
margin: 10px;
display: inline;
}
li a {
padding: 5px 10px;
margin:0;
border: 0px solid #f00;
background: #903;
text-decoration: none;
color:#FFF;
/* cantos arredondados */
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
li a:hover {
background: #CCC;
color: #000;
border-color: #000;
}
Não se esqueça, quando copiar o código ou digitar comente o código ( usando o /*comentário*/ ) pois assim fica mais fácil de interpretar o código depois, e mais fácil de não se perder no meio da sua própria programação. Depois de criada a página você pode brincar a vontade com ela alterando as cores e fazendo varias combinações diferentes até achar uma que lhe agrade.
No comment yet, add your voice below!