Olá Pessoal, vamos dar seqüência na série de dicas sobre como aplicar CSS no Delphi for PHP. Abra o projeto que estamos tocando desde as ultimas Quick Tips e execute o que se segue abaixo.
Para que nosso label possa efetivamente se tornar um menu vamos aplicar uma regra para ao links da nosso lista. Acrescente a regra abaixo para nossos links:
#menu ul li a{
background: #007CC2;
color: #FFF;
margin: 2px;
text-decoration: none;
}
A regra acima adiciona um fundo preto para os links com fonte na cor branca. Em seguida adicionamos 2px para as margens, como isto cada link ficará com um espaço de 4px entre eles. Por último retiramos o sublinhado dos links com a propriedade text-decorarion. Observe o resultado:
Vamos adiconar alguns efeitos especiais e este menu para que possa ficar mais interessante. Acrescente à regra #menu ul li a os seguinte comandos:
border: 5px #004080 groove;
padding: 5px 7px;
float: left;
Adicionamos uma borda aos links de 5px com cor #939393 e com estilo groove que deixa a borda com efeito de moldura com chanfrado em baixo relevo. Em seguida adicionamos um espaçamento interno, ou preenchimento como alguns costumam chamar, de 5px verticalmente e 7px horizontalmente e por final com a propriedade float fazemos nossos link “flutuarem a esquerda”. Este comando e muito utilizados em imagens. Observe o resultado:
Agora sim nosso label pode ser utilizado como menu. Para finalizar vamos adicionar uma regra para quando o mouse passar por cima de um dos link, o famoso a:hover. Para isso adicione a regra abaixo ao nosso CSS.
#menu ul li a:hover{
background: #FFF;
color: #007CC2;
}
Aqui simplesmente invertemos as cores de fonte e fundo quando o mouse passar pelo link. É uma coisa relativamente simples, mas que da um efeito legal ao nosso menu.
Agora sim, temos um menu em nossa pagina, claro um menu simples mas com certeza já deu uma idéia do poder que o CSS exerce em um projeto Web. Compare abaixo a mesma pagina sem e com os efeitos do CSS:
Pessoal por hoje é só. Na próxima tip vermos como mapear as class e ID do CSS para dentro do Delphi for PHP. Abraços e até mais
